/* Debt recovery set piece: steps, a paper invoice and a comparison
   (see partials/features/debt-invoice.php). The default is the finished static
   layout with the invoice fully built. .is-pinned (added by the script on wide,
   tall screens with full motion) sets up the three-column pinned scene. */
.dbi { --u: 8.5px; overflow: clip; padding-block: clamp(3rem, min(7vw, 8vh), 6rem); }
.dbi-in { position: relative; z-index: 1; }
.dbi-head { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.dbi-head .h2 { color: #fff; }

.dbi-grid {
  display: grid; gap: clamp(2.2rem, 4vw, 3.5rem); align-items: center;
  grid-template-areas: "steps" "paper" "compare";
}
.dbi-steps-wrap { grid-area: steps; }
.dbi-stage { grid-area: paper; }
.dbi-compare { grid-area: compare; }
@media (min-width: 900px) {
  .dbi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "paper steps" "compare compare"; }
}
@media (min-width: 1200px) {
  .dbi { --u: clamp(6.5px, .85vh, 8.5px); }
  .dbi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, .88fr); grid-template-areas: "steps paper compare"; gap: clamp(2rem, 3.4vw, 3.4rem); }
}

/* ------------------------------------------------------------------ steps */
.dbi-steps-wrap { position: relative; --sp: clamp(.55rem, 1.4vh, .95rem); }
.dbi-prog {
  position: absolute; left: 21px; width: 2px; top: calc(var(--sp) + 22px); bottom: calc(var(--sp) + 22px);
  background: rgba(255,255,255,.14); border-radius: 2px;
}
.dbi-prog i { position: absolute; inset: 0; background: var(--mint-deep); transform-origin: 50% 0; border-radius: 2px; }
.dbi-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.dbi-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; padding: var(--sp) 0; }
.dbi-num {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tick); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; line-height: 1;
  box-shadow: 0 0 0 5px var(--pine);
  transition: background-color .35s, box-shadow .35s;
}
.dbi-step h3 { margin: .5rem 0 .2rem; font-size: clamp(1.15rem, 1.4vw, 1.35rem); color: #fff; }
.dbi-step p { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- invoice */
.dbi-stage { display: grid; justify-items: center; perspective: 1200px; }
.dbi-tilt { position: relative; width: min(100%, 470px); }
/* a second sheet and an offset outline behind the invoice */
.dbi-tilt::before, .dbi-tilt::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; }
.dbi-tilt::before { background: rgba(255,255,255,.09); transform: rotate(3deg) translate(16px, 12px); }
.dbi-tilt::after { border: 1px solid rgba(159,216,180,.4); transform: rotate(-4.5deg) translate(-14px, 16px); }

.dbi-paper {
  position: relative; z-index: 1; background: var(--paper); color: var(--ink);
  border-radius: 8px; border-top: 6px solid var(--tick);
  padding: calc(var(--u) * 3) calc(var(--u) * 3.2) calc(var(--u) * 3.2);
  transform: rotate(-1.4deg);
  box-shadow: 0 50px 80px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(12,59,39,.06);
  font-size: 1rem; line-height: 1.3;
}
.dbi-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: calc(var(--u) * 2); }
.dbi-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -.03em; line-height: 1; color: var(--pine); }
.dbi-logo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tick); color: #fff; }
.dbi-logo .tick { width: 22px; height: 22px; color: #fff; }

.dbi-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: calc(var(--u) * 2); }
.dbi-parties > div { display: grid; gap: .1rem; }
.dbi-k { font-size: .9375rem; color: rgba(14,21,18,.58); }
.dbi-v { font-weight: 700; }

.dbi-bar { display: block; height: 9px; border-radius: 9px; background: rgba(14,21,18,.12); }
.dbi-bar-long { width: 62%; }
.dbi-bar-mid { width: 44%; }
.dbi-amt { width: 20%; flex: none; }
.dbi-amt-s { width: 15%; }
.dbi-amt-ink { background: rgba(14,21,18,.55); }
.dbi-amt-fee { width: 13%; background: var(--honey); transform-origin: 100% 50%; }

.dbi-lines { margin-bottom: calc(var(--u) * 1.4); }
.dbi-th { display: flex; justify-content: space-between; padding-bottom: calc(var(--u) * .6); border-bottom: 1.5px solid rgba(14,21,18,.14); font-size: .9375rem; color: rgba(14,21,18,.58); }
.dbi-li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: calc(var(--u) * 3.6); border-bottom: 1px dashed rgba(14,21,18,.12); }
.dbi-sum { min-height: calc(var(--u) * 4.4); border-bottom: 0; border-top: 1.5px solid rgba(14,21,18,.5); margin-top: -1px; font-weight: 700; }

.dbi-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  min-height: max(40px, calc(var(--u) * 4.8)); padding: .3rem calc(var(--u) * 1.3);
  margin-top: calc(var(--u) * 1); border-radius: 10px; background: var(--chalk);
}
.dbi-txt { font-weight: 600; }
.dbi-pill { padding: .25rem .6rem; border-radius: 999px; background: #FCEDEB; color: #A1231B; font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.dbi-ico { width: 24px; height: 24px; fill: none; stroke: var(--pine); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dbi-row-fee { background: #FFF5DD; }
.dbi-plus { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--honey); color: var(--ink); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.dbi-row-paid { background: var(--mint); }
.dbi-ico-in { stroke: var(--tick-dark); }
.dbi-ok { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tick); }
.dbi-ok .tick { width: 17px; height: 17px; color: #fff; }

.dbi-pay { margin-top: calc(var(--u) * 1.6); padding-top: calc(var(--u) * 1.3); border-top: 2px solid var(--ink); }
.dbi-pay-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: calc(var(--u) * .9); font-weight: 700; }
.dbi-pct { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2vw, 1.9rem); letter-spacing: -.03em; line-height: 1; color: var(--tick-dark); font-variant-numeric: tabular-nums; }
.dbi-track { height: 12px; border-radius: 12px; background: var(--mint); overflow: clip; }
.dbi-fill { display: block; height: 100%; border-radius: 12px; background: linear-gradient(90deg, var(--tick), #36B865); transform-origin: 0 50%; }

/* the stamp that lands last */
.dbi-stamp { position: absolute; z-index: 3; right: 6%; top: 36%; transform: rotate(-12deg); pointer-events: none; }
.dbi-stamp span {
  display: block; padding: .3em .7em .34em; border: 3px solid currentColor; border-radius: 10px;
  outline: 1.5px solid currentColor; outline-offset: 3px;
  background: rgba(255,255,255,.7); color: var(--tick-dark);
  font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}

/* ------------------------------------------------------------- comparison */
.dbi-compare {
  display: grid; gap: 1.2rem; padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.dbi-ch { margin: 0; font-size: clamp(1.3rem, 1.7vw, 1.6rem); color: #fff; }
.dbi-cmp { display: grid; gap: .55rem; }
.dbi-cl { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; font-weight: 600; color: #fff; }
.dbi-cl b { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 1.9vw, 1.8rem); letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.dbi-cmp-us .dbi-cl b { color: var(--mint-deep); }
.dbi-ctrack { position: relative; height: 16px; border-radius: 16px; background: rgba(255,255,255,.1); overflow: clip; }
.dbi-ctrack i { position: absolute; top: 0; bottom: 0; }
.dbi-c-fill { left: 0; width: 75%; background: rgba(159,216,180,.75); transform-origin: 0 50%; }
.dbi-cmp-us .dbi-c-fill { width: 100%; background: linear-gradient(90deg, var(--tick), var(--mint-deep)); }
.dbi-c-range { left: 75%; width: 10%; background: repeating-linear-gradient(135deg, rgba(159,216,180,.55) 0 4px, rgba(159,216,180,.18) 4px 8px); }
.dbi-c-keep { left: 85%; width: 15%; background: repeating-linear-gradient(135deg, rgba(244,185,66,.85) 0 4px, rgba(244,185,66,.35) 4px 8px); }
.dbi-cn { margin: 0; font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,.76); }
.dbi-chip { justify-self: start; max-width: 100%; margin-top: .2rem; line-height: 1.25; }
.dbi-cmp-us { transition: transform .4s; }
.dbi-compare.is-won .dbi-cmp-us .dbi-ctrack { box-shadow: 0 0 0 3px rgba(159,216,180,.35), 0 0 26px rgba(159,216,180,.45); }
@media (min-width: 900px) and (max-width: 1199px) {
  .dbi-compare { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
  .dbi-ch, .dbi-chip { grid-column: 1 / -1; }
}

/* ------------------------------------------------ pinned scene (desktop) */
@media (min-width: 1200px) {
  .dbi.is-pinned { min-height: 100vh; display: grid; align-items: center; padding-block: 92px 28px; }
  .dbi.is-pinned .dbi-num { background: var(--pine); box-shadow: 0 0 0 5px var(--pine), inset 0 0 0 1.5px rgba(255,255,255,.4); }
  .dbi.is-pinned .dbi-step.is-done .dbi-num,
  .dbi.is-pinned .dbi-step.is-on .dbi-num { background: var(--tick); box-shadow: 0 0 0 5px var(--pine); }
  /* dim the copy, not the li */
  .dbi.is-pinned .dbi-step > div { opacity: .45; transition: opacity .4s; }
  .dbi.is-pinned .dbi-step.is-on > div { opacity: 1; }
}

/* QA: the three columns line up at the top, so the invoice never leaves a gap beside the steps */
@media (min-width: 1200px) { .dbi-grid { align-items: start; } }