/* ============================================================
   Variant OV2 — Figma "V02 - Approved Test" (intro + form steps)
   Source: figma.com/design/HsUjOISBKfPo4pNu8awGws
     Intro:        node 990:3482 (V2)
     Loan amount:  node 990:3525 (V2 - PAGE 2)
     Loan purpose: node 990:3570 (V2 - PAGE 3)
     Slider:       nodes 990:3552–990:3554 (track / fill / handle)
   Renders through the G shell (RENDER_KEY alias in index.html)
   plus the .variant-shell-ov2 modifier class.
   PALETTE: matches the Figma exactly (Justin, 2026-10-03) —
   #005D52 CTAs/selected pill, rgba(0,93,82,0.7) slider fill,
   #92B9B5 active progress dot.
   Loaded AFTER variant-g.css / variant-loan.css so equal-specificity
   overrides win.
   ============================================================ */

/* ── Intro headline block — all breakpoints ─────────────────
   Figma: eyebrow + headline read as ONE bold uppercase block
   ("GET YOUR / PERSONAL LOAN / IN MINUTES"). The \n inside
   intro.headline is honored via white-space: pre-line. */
.variant-shell-ov2 .variant-g-eyebrow {
  font-weight: 700;
  color: #1c1c1e;
  text-transform: uppercase;
}
.variant-shell-ov2 .variant-g-headline {
  font-weight: 700;
  text-transform: uppercase;
  white-space: pre-line;
}

/* ── Benefit rows — V2: radius 8px, 16px padding, 14px label,
   8px row gap (Figma 990:3505–990:3520) ──────────────────── */
.variant-shell-ov2 .variant-perks-rows-g {
  gap: 8px;
}
.variant-shell-ov2 .variant-perk-row-g {
  border-radius: 8px;
  padding: 16px;
}
.variant-shell-ov2 .variant-perk-row-label-g {
  font-size: 14px;
  letter-spacing: -0.28px;
}

/* ── Progress dots — V2: uniform 8px dots, inactive WHITE,
   active #92B9B5 (Figma) ─────────────────────────────────── */
.variant-shell-ov2 .variant-dash {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: #ffffff;
}
.variant-shell-ov2 .variant-dash.active {
  flex: 0 0 8px;
  width: 8px;
  background: #92b9b5;
}

/* ── Step headings — V2: Medium 500, #1C1C1E, -2px ───────── */
.variant-shell-ov2 .form-h2 {
  color: #1c1c1e;
  font-weight: 500;
  letter-spacing: -2px;
}

/* ── Option pills — V2 PAGE 3: white pills, radius 20px,
   18px Medium; selected = #005D52 pill + white text.
   Desktop keeps the shell's light #e3e8e8 border so the pills
   stay visible on the white card; mobile drops it (V2's white
   pills sit on the #F5F5F5 canvas). ──────────────────────── */
.variant-shell-ov2 .choice-card {
  margin-bottom: 12px; /* Figma option gap */
}
.variant-shell-ov2 .choice-box {
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: none;
}
.variant-shell-ov2 .choice-box .title {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.5px;
  color: #1c1c1e;
}
/* Hover/focus = the same filled #005D52 pill + white text as selected
   (V2 PAGE 3 mockup, Justin 2026-10-05). The checked rule below has
   higher specificity, so a selected pill keeps its style under hover. */
.variant-shell-ov2 .choice-card:hover .choice-box,
.variant-shell-ov2 .choice-card:focus-within .choice-box {
  border-color: transparent;
  background: #005d52;
  box-shadow: none;
}
.variant-shell-ov2 .choice-card:hover .choice-box .title,
.variant-shell-ov2 .choice-card:focus-within .choice-box .title {
  color: #ffffff;
}
.variant-shell-ov2 .choice-card input[type="radio"]:checked + .choice-box {
  border-color: transparent;
  background: #005d52;
  box-shadow: none;
}
.variant-shell-ov2
  .choice-card
  input[type="radio"]:checked
  + .choice-box
  .title {
  color: #ffffff;
}
/* V2 selection is the filled pill — no ✓ prefix */
.variant-shell-ov2 .choice-card input[type="radio"]:checked + .choice-box::before {
  content: none;
}

/* ── Continue buttons — V2: radius 20px, 20px Semibold, #005D52
   (the !important beats variant-g.css's #17b465 !important) ── */
.variant-shell-ov2 .primary-btn.glow-btn {
  background: #005d52 !important;
  border-radius: 20px;
  font-weight: 600;
  box-shadow: none;
}

/* ── Amount steps (loanAmount + annualIncome) — V2 PAGE 2:
   white card (radius 12px) wraps the ± row and the slider ── */
.variant-shell-ov2 .step-amount .slider-controls {
  background: #ffffff;
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
  padding: 20px 16px 0;
}
.variant-shell-ov2 .ov2-range-card {
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  padding: 32px 16px 20px; /* Figma card gap: 32px between ± row and slider */
  margin-bottom: 24px;
}
.variant-shell-ov2 .ov2-range-card .zen-range {
  margin-bottom: 0;
}
.variant-shell-ov2 .step-amount .adjust-btn {
  background-color: #f6f6f6;
}
/* V2 ± icons — Figma 990:3545/990:3551: #1C1C1E strokes (the shared
   variant-f icons are #6E6E73 gray). First button = decrease (minus
   glyph), last = increase (plus glyph) — same wiring as the G shell. */
.variant-shell-ov2 .step-amount .slider-controls .adjust-btn:first-child {
  background-image: url('/assets/variant-ov2/minus-01.svg');
}
.variant-shell-ov2 .step-amount .slider-controls .adjust-btn:last-child {
  background-image: url('/assets/variant-ov2/plus-01.svg');
}
.variant-shell-ov2 .step-amount .adjust-btn:hover,
.variant-shell-ov2 .step-amount .adjust-btn:focus-visible {
  background-color: #efefef;
}
.variant-shell-ov2 .step-amount .val-hero {
  color: #1c1c1e;
  font-weight: 600;
}

/* ── Slider — V2 PAGE 2 (Figma 990:3552–3554): gray #F6F6F6 track
   pill with inset shadow; green rgba(0,93,82,.7) fill pill ringed by
   a 6px white 40% stroke; 34px white handle EMBEDDED in the fill (the
   fill rides 23px past the value point = 17px handle radius + 6px
   padding). Track gradients can't paint the rounded fill cap + ring,
   so the visible fill is the .ov2-range-fill overlay and the native
   input sits on top with a transparent track (touch/keyboard/a11y
   unchanged). Rebuilt 2026-10-05. ───────────────────────────────── */
.variant-shell-ov2 .ov2-range-track {
  position: relative;
  height: 50px; /* Figma: 34px handle + 6px padding + stroke visual */
  border-radius: 80px;
  background: #f6f6f6;
  box-shadow: inset -1px 3px 4.9px rgba(0, 0, 0, 0.25);
}
.variant-shell-ov2 .ov2-range-fill {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  box-sizing: border-box;
  height: 46px; /* 34px handle + 6px padding top/bottom */
  /* Mirror the native thumb travel EXACTLY: every engine centers the
     34px thumb at 17px + (trackW − 34px) × p, so ending the fill 23px
     past that point (17px handle radius + 6px padding, per Figma) =
     40px + (100% − 34px) × --p. Writing it in the same coordinate
     system as the thumb (not W × p + const) keeps the handle embedded
     at every value in every engine — the old `progress + 23px`
     shortcut drifted off the thumb model and let the handle pop out
     of the fill's right end at high values (Justin, 2026-10-05).
     Clamp: 46px min = handle + 6px padding each side. */
  width: clamp(46px, calc(40px + (100% - 34px) * var(--p, 0)), 100%);
  background: rgba(0, 93, 82, 0.7);
  /* Figma frames always stroke INSIDE, so the 6px white-40% ring is painted
     OVER the green fill → soft sage halo. border-box clip puts the green
     under the semi-transparent border to reproduce that compositing; the old
     padding-box had the ring sit directly on the light-gray track, rendering
     as a near-solid white ring (Justin "border of this line" 2026-10-05). */
  background-clip: border-box;
  border: 6px solid rgba(255, 255, 255, 0.4);
  border-radius: 60px;
  pointer-events: none;
}
.variant-shell-ov2 .ov2-range-track .zen-range {
  position: relative;
  z-index: 1;
  height: 50px;
  margin-bottom: 0;
  background: transparent !important;
  box-shadow: none;
}
.variant-shell-ov2 .zen-range::-webkit-slider-runnable-track {
  height: 50px;
  border-radius: 80px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.variant-shell-ov2 .zen-range::-webkit-slider-thumb {
  background: #ffffff !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  box-shadow: 0px 5.375px 5.375px rgba(0, 0, 0, 0.25) !important;
  margin-top: 8px !important; /* (50px track - 34px thumb) / 2 */
}
.variant-shell-ov2 .zen-range::-moz-range-track {
  height: 50px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.variant-shell-ov2 .zen-range::-moz-range-progress {
  background: transparent;
}
.variant-shell-ov2 .zen-range::-moz-range-thumb {
  background: #ffffff !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  box-shadow: 0px 5.375px 5.375px rgba(0, 0, 0, 0.25) !important;
}

/* ── Desktop baseline — V2 typography adapted into the card ── */
.variant-shell-ov2 .variant-g-eyebrow {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -2px;
}
.variant-shell-ov2 .variant-g-headline {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -2px;
}
.variant-shell-ov2 .variant-subtitle {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #1c1c1e;
}
.variant-shell-ov2 .variant-cta-b {
  background: #005d52;
  padding: 22px 24px;
  font-size: 20px;
  letter-spacing: normal;
}

/* ── Desktop: white amount card sits on a white card-body, so it
   needs the light border to read as a card (mobile's #F5F5F5
   canvas provides the contrast instead) ───────────────────── */
@media (min-width: 769px) {
  .variant-shell-ov2 .step-amount .slider-controls {
    border: 2px solid #efefef;
    border-bottom: none;
  }
  .variant-shell-ov2 .ov2-range-card {
    border: 2px solid #efefef;
    border-top: none;
  }

  /* Stepper dots — V2's white dots are Figma-correct on mobile's gray
     canvas but vanish on the desktop white card (Justin, 2026-10-05);
     use the shell's light gray there. Active dot stays #92B9B5. */
  .variant-shell-ov2 .variant-dash {
    background: #efefef;
  }

  /* Tighten the stepper-row → heading gap on form steps (Justin) */
  .variant-shell-ov2.steps-active .variant-f-stepper-row {
    margin-bottom: 4px;
  }
  .variant-shell-ov2.steps-active .variant-card-body-c {
    padding-top: 8px;
  }
}

/* ── Mobile — Figma pixel targets ─────────────────────────── */
@media (max-width: 768px) {
  /* V2's white pills/cards sit directly on the gray canvas */
  .variant-shell-ov2 .choice-box,
  .variant-shell-ov2 .choice-card:hover .choice-box,
  .variant-shell-ov2 .choice-card:focus-within .choice-box {
    border-color: transparent;
  }

  /* Form steps: gray canvas, no card (V2 PAGE 2/3). The .steps-active
     modifier is bound on the shell while 0 < step <= totalSteps; the
     intro (step 0) stays white. The card BODY must also go transparent
     — variant-g.css forces it white !important, which would otherwise
     leave a white slab over the gray canvas and swallow the white
     pills/cards. */
  body:has(.variant-shell-ov2.steps-active) {
    background: #f5f5f5;
  }
  .variant-shell-ov2.steps-active .variant-card,
  .variant-shell-ov2.steps-active .variant-card-c {
    background: transparent !important;
  }
  .variant-shell-ov2.steps-active .variant-card-body-c {
    background: transparent !important;
    padding-top: 12px; /* tightened: stepper → heading gap (Justin) */
  }

  /* Logo strip — V2 had no logo on form steps, but Justin (2026-10-05)
     wants it on mobile: float it on the gray canvas, tightened padding */
  .variant-shell-ov2.steps-active .variant-card-strip-c {
    background: transparent !important;
    min-height: 0;
    padding: 12px 20px 4px;
  }

  /* Stepper row — 8px top under the logo strip, 32px back circle,
     8px dot gap */
  .variant-shell-ov2 .variant-f-stepper-row {
    padding: 8px 20px 0;
    margin-bottom: 0;
  }
  .variant-shell-ov2 .variant-f-stepper-row .variant-progress-dashes {
    gap: 8px;
  }
  .variant-shell-ov2 .variant-f-back-circle,
  .variant-shell-ov2 .variant-f-back-spacer {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .variant-shell-ov2 .variant-f-back-circle img {
    width: 19px;
    height: 19px;
  }

  /* Intro headline — Figma: 40px/48px Bold, -2px, uppercase */
  .variant-shell-ov2 .variant-g-heading-wrap {
    margin: 0 0 16px;
  }
  .variant-shell-ov2 .variant-g-eyebrow {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -2px;
  }
  .variant-shell-ov2 .variant-g-headline {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -2px;
  }

  /* Subtitle — Figma: 18px Medium, #1C1C1E, 264px measure */
  .variant-shell-ov2 .variant-subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.5px;
    color: #1c1c1e;
    max-width: 264px;
    margin: 0 auto 20px;
  }

  /* Benefit rows → CTA rhythm: 20px */
  .variant-shell-ov2 .variant-perks-rows-g {
    margin: 0 0 20px;
  }

  /* Intro CTA — Figma: padding 22px, 20px Semibold, #005D52 */
  .variant-shell-ov2 .variant-cta-b {
    background: #005d52;
    padding: 22px 24px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1;
  }

  /* Step headings — Figma: 34px/40px Medium; 26px below (20px
     above the amount card, per V2 PAGE 2) */
  .variant-shell-ov2 .form-h2 {
    font-size: 34px;
    line-height: 40px;
    font-weight: 500;
    letter-spacing: -2px;
    color: #1c1c1e;
    margin-bottom: 26px;
  }
  .variant-shell-ov2 .step-amount .form-h2 {
    margin-bottom: 20px;
  }

  /* Amount value — Figma: 34px/48px Semibold #1C1C1E */
  .variant-shell-ov2 .step-amount .val-hero {
    font-size: 34px;
    line-height: 48px;
    color: #1c1c1e;
  }

  /* ± pills — Figma: 54px #F6F6F6 circles, 29px icons */
  .variant-shell-ov2 .step-amount .adjust-btn {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    background-size: 29px 29px;
  }

  /* Continue — Figma: padding 22px, 20px Semibold, radius 20px */
  .variant-shell-ov2 .primary-btn.glow-btn {
    border-radius: 20px;
    padding: 22px 24px;
    font-size: 20px;
    font-weight: 600;
  }

  /* Compliance — Figma: 231px measure */
  .variant-shell-ov2 .variant-compliance {
    max-width: 232px;
  }
}