/* ==================================================
   VALBOOSTING · CHECKOUT ACCOUNT-HANDOFF (F3)
   Post-payment step: customer shares their Riot login.
   Inherits base/chrome/tokens/.btn/.panel/.rv (Rose Gold / Rajdhani).
   Ported from the EBL Stepper Wizard (rebrand: rose gold + rajdhani).
   ================================================== */
/* Brand display font (Rajdhani, inherited via tokens) */
:root { }

/* ============ V4 · STEPPER WIZARD ============ */
body { background: var(--bg-soft); }

.co-head { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: blur(15.84px); -webkit-backdrop-filter: blur(15.84px); border-bottom: 1.2px solid var(--line); }
.co-head-inner { max-width: 1452px; margin: 0 auto; padding: 15.84px 31.68px; display: flex; align-items: center; justify-content: space-between; gap: 21.12px; }
.co-secure { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 10.56px; }
.co-secure svg { width: 17.16px; height: 17.16px; }

/* navy stepper band */
.wiz-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1056px 475.2px at 80% -50%, rgba(255,70,85,0.14), transparent 60%),
    linear-gradient(120deg, var(--navy-deep) 0%, var(--royal-deep) 70%, var(--royal) 130%);
  color: #fff; border-bottom: 2.4px solid var(--gold);
}
.wiz-band::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1.32px, transparent 1.32px); background-size: 31.68px 31.68px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 85%); }
.wiz-band-inner { position: relative; z-index: 1; max-width: 1452px; margin: 0 auto; padding: 39.6px 31.68px 44.88px; }
.wiz-band-cap { font-family: var(--font-ui); font-size: 14.52px; font-weight: 700; letter-spacing: calc(0.2em * var(--tracking)); text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 15.84px; margin-bottom: 21.12px; }
.wiz-band-cap::after { content: ''; width: 44.88px; height: 2.64px; background: var(--gold); opacity: 0.7; }
.wiz-band-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 34.32px; flex-wrap: wrap; }
.wiz-band-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34.32px, 3.6vw, 52.8px); letter-spacing: -0.025em; line-height: 1.05; }
.wiz-band-title em { font-style: normal; color: var(--gold); }
.wiz-band-sub { margin-top: 13.2px; font-size: 18.48px; line-height: 1.5; color: rgba(255,255,255,0.72); max-width: 580.8px; }
.wiz-band-total { display: flex; flex-direction: column; gap: 5.28px; background: rgba(255,255,255,0.08); border: 1.2px solid rgba(255,255,255,0.16); border-radius: var(--r); padding: 15.84px 23.76px; }
.wiz-band-total .wt-l { font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.18em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.5); }
.wiz-band-total .wt-v { font-family: var(--font-display); font-weight: 800; font-size: 36.96px; letter-spacing: -0.02em; color: var(--gold); line-height: 1; }
.wiz-band-total .wt-id { font-family: var(--font-ui); font-size: 13.2px; color: rgba(255,255,255,0.55); }
.wiz-steps { margin-top: 34.32px; padding-top: 31.68px; border-top: 1.2px solid rgba(255,255,255,0.12); }
.wiz-steps-cap { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.18em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 21.12px; }

/* big horizontal stepper */
.bigstep { display: flex; align-items: flex-start; max-width: 1082.4px; }
@media (max-width: 720px) { .bs { width: auto; flex: 1; } .bs-name { font-size: 17.16px; } }
.bs { display: flex; flex-direction: column; align-items: center; gap: 14.52px; flex-shrink: 0; width: 171.6px; }
.bs-dot { width: 60.72px; height: 60.72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2.4px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); flex-shrink: 0; }
.bs-dot svg { width: 26.4px; height: 26.4px; }
.bs.done .bs-dot { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 9.6px 26.4px -9.6px rgba(34,179,88,0.7); }
.bs.current .bs-dot { border-color: var(--gold); background: rgba(255,216,63,0.16); color: var(--gold); position: relative; }
.bs.current .bs-dot b { width: 18.48px; height: 18.48px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14.4px var(--gold); }
@media (prefers-reduced-motion: no-preference) { .bs.current .bs-dot::after { content: ''; position: absolute; inset: -7.92px; border-radius: 50%; border: 2.4px solid var(--gold); animation: bs-pulse 2s ease-out infinite; } }
@keyframes bs-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.35); opacity: 0; } }
.bs-text { text-align: center; }
.bs-name { display: block; font-family: var(--font-body); font-weight: 700; font-size: 19.8px; color: #fff; letter-spacing: -0.01em; }
.bs.upcoming .bs-name { color: rgba(255,255,255,0.55); }
.bs-sub { display: block; font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 3.96px; }
.bs.current .bs-sub { color: var(--gold); }
.bs-line { flex: 1; height: 3.96px; background: rgba(255,255,255,0.18); border-radius: 3.96px; margin-top: 29.04px; }
.bs-line.filled { background: var(--green); }

/* layout */
.wiz { max-width: 1452px; margin: 36.96px auto 84.48px; padding: 0 31.68px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 23.76px; align-items: start; }
.wiz > * { min-width: 0; } /* let the 1fr column shrink below the recap-rail min-content on mobile (grid blowout fix) */
@media (max-width: 1056px) { .wiz { grid-template-columns: 1fr; } }

.panel { background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 2.64px); box-shadow: var(--shadow-pop); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15.84px; padding: 23.76px 29.04px; border-bottom: 1.2px solid var(--line-soft); }
.panel-head .ph-l { display: flex; align-items: center; gap: 15.84px; }
.panel-head .ph-ico { width: 44.88px; height: 44.88px; border-radius: 10.56px; background: var(--royal-tint); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-head .ph-ico svg { width: 22.44px; height: 22.44px; }
.panel-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 26.4px; letter-spacing: -0.01em; color: var(--ink); }
.panel-head .ph-step { font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--royal); background: var(--royal-tint); border: 1.2px solid var(--royal-soft); border-radius: 3.96px; padding: 6.6px 13.2px; }
.panel-body { padding: 29.04px; }

/* success ribbon inside wizard */
.win-ribbon {
  display: flex; align-items: center; gap: 18.48px; margin-bottom: 26.4px;
  background: linear-gradient(120deg, #f3fbf6, #fff);
  border: 1.2px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-left: 4.8px solid var(--green); border-radius: var(--r); padding: 18.48px 21.12px;
}
.win-ribbon .wr-check { width: 50.16px; height: 50.16px; border-radius: 50%; background: linear-gradient(135deg, #2cc468, #168a44); box-shadow: 0 9.6px 21.6px -7.2px rgba(34,179,88,0.6); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.win-ribbon .wr-check svg { width: 25.08px; height: 25.08px; color: #fff; }
.win-ribbon .wr-t { font-family: var(--font-display); font-weight: 700; font-size: 19.8px; color: var(--ink); }
.win-ribbon .wr-s { font-size: 16.5px; color: var(--ink-soft); margin-top: 1.32px; }

.form-intro { font-size: 18.48px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 21.12px; }
.secure-note { display: flex; align-items: flex-start; gap: 14.52px; margin-bottom: 26.4px; background: color-mix(in srgb, var(--gold) 10%, #fff); border: 1.2px solid color-mix(in srgb, var(--gold) 45%, #fff); border-radius: var(--r); padding: 17.16px 19.8px; }
.secure-note svg { width: 21.12px; height: 21.12px; color: var(--gold-deep); flex-shrink: 0; margin-top: 1.32px; }
.secure-note p { font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.field { margin-bottom: 21.12px; }
.field-label { display: flex; align-items: center; gap: 9.24px; margin-bottom: 10.56px; font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--royal); }
.field-label svg { width: 15.84px; height: 15.84px; }
.field input { width: 100%; height: 66px; padding: 0 21.12px; border: 1.2px solid var(--line); border-radius: var(--r); background: var(--royal-tint); font-family: var(--font-ui); font-size: 19.8px; color: var(--ink); outline: none; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.field input:focus { border-color: var(--royal); background: #fff; box-shadow: 0 0 0 3.6px color-mix(in srgb, var(--royal) 14%, transparent); }
.wiz-actions { display: flex; gap: 15.84px; align-items: center; margin-top: 5.28px; }
.btn-back { background: #fff; color: var(--ink-soft); border: 1.2px solid var(--line); }
.btn-back:hover { border-color: var(--royal-soft); background: var(--royal-tint); color: var(--royal); }
.submit-btn { flex: 1; justify-content: center; padding: 21.12px; font-size: 17.16px; }
.alt-channels { margin-top: 23.76px; padding-top: 23.76px; border-top: 1.2px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10.56px; align-items: center; }
.alt-cap { width: 100%; font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2.64px; }
.alt-chip { font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; color: var(--ink-soft); border: 1.2px solid var(--line); border-radius: 1318.68px; padding: 9.24px 18.48px; background: #fff; display: inline-flex; align-items: center; gap: 9.24px; cursor: pointer; transition: all 160ms ease; }
.alt-chip svg { width: 17.16px; height: 17.16px; color: var(--royal); }
.alt-chip:hover { border-color: var(--royal-soft); background: var(--royal-tint); color: var(--royal); transform: translateY(-1.32px); }

/* side rail */
.rail { display: flex; flex-direction: column; gap: 23.76px; }
.recap-head { padding: 21.12px 26.4px; background: var(--bg-soft); border-bottom: 1.2px solid var(--line-soft); }
.recap-head .panel-title { font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 11.88px; }
.recap-head .panel-title svg { width: 18.48px; height: 18.48px; color: var(--accent); }
.recap-body { padding: 23.76px 26.4px 26.4px; }
.journey { display: flex; align-items: center; justify-content: center; gap: 21.12px; padding: 2.64px 0 21.12px; border-bottom: 1.2px dashed var(--line); margin-bottom: 15.84px; }
.jrank { display: flex; flex-direction: column; align-items: center; gap: 7.92px; text-align: center; }
.jrank img { width: 150.48px; height: 150.48px; object-fit: contain; filter: drop-shadow(0 7.92px 15.84px rgba(62,24,32,0.22)); }
.jrank.target img { filter: drop-shadow(0 10.56px 18.48px rgba(62,24,32,0.25)) drop-shadow(0 0 21.12px color-mix(in srgb, var(--gold) 50%, transparent)); }
.jrank .jt { font-family: var(--font-ui); font-size: 10.56px; font-weight: 600; letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.jrank.target .jt { color: var(--accent); }
.jrank .jn { font-family: var(--font-display); font-weight: 700; font-size: 18.48px; color: var(--ink); }
.jarrow { color: var(--accent); opacity: 0.5; }
.jarrow svg { width: 23.76px; height: 23.76px; }
.li-row { display: flex; align-items: center; justify-content: space-between; gap: 15.84px; padding: 11.88px 0; font-size: 17.16px; }
.li-row + .li-row { border-top: 1.2px solid var(--line-soft); }
.li-row .li-k { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.li-row .li-v { font-weight: 600; color: var(--ink); }
.li-row.total { border-top: 2.4px solid var(--line); margin-top: 5.28px; padding-top: 15.84px; }
.li-row.total .li-k { color: var(--ink); font-size: 13.86px; }
.li-row.total .li-v { font-family: var(--font-display); font-size: 26.4px; font-weight: 800; color: var(--green); }

.acct-chip { display: flex; align-items: center; gap: 14.52px; }
.acct-chip .ac-ico { width: 42.24px; height: 42.24px; border-radius: 10.56px; background: var(--royal-tint); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acct-chip .ac-ico svg { width: 21.12px; height: 21.12px; }
.acct-chip .ac-t { font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--royal); }
.acct-chip .ac-mail { font-family: var(--font-ui); font-size: 16.5px; color: var(--ink); margin-top: 2.64px; }
.acct-chip .ac-wb { color: var(--gold-deep); }
.copy-btn { margin-left: auto; flex-shrink: 0; cursor: pointer; border: 1.2px solid var(--line); background: #fff; border-radius: var(--r); padding: 10.56px 14.52px; font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7.92px; transition: all 160ms ease; }
.copy-btn svg { width: 15.84px; height: 15.84px; }
.copy-btn:hover { border-color: var(--royal-soft); color: var(--royal); background: var(--royal-tint); }
.copy-btn.copied { border-color: var(--green); color: var(--green); }
.help-card { background: linear-gradient(160deg, var(--royal) 0%, var(--royal-deep) 100%); color: #fff; border: none; padding: 23.76px 26.4px; }
.help-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 21.12px; margin-bottom: 5.28px; }
.help-card p { font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,0.8); margin-bottom: 15.84px; }
.help-card .btn { width: 100%; justify-content: center; background: rgba(255,255,255,0.12); border: 1.2px solid rgba(255,255,255,0.25); color: #fff; }
.help-card .btn:hover { background: rgba(255,255,255,0.2); }
/* password reveal toggle (added — the customer inserts their login here) */
.pass-wrap { position: relative; }
.pass-wrap input { width: 100%; padding-right: 55.44px; }
.pass-toggle { position: absolute; right: 10.56px; top: 50%; transform: translateY(-50%); width: 36.96px; height: 36.96px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink-muted); cursor: pointer; border-radius: 7.92px; }
.pass-toggle:hover { color: var(--royal); background: var(--royal-tint); }
.pass-toggle svg { width: 19.8px; height: 19.8px; }
.pass-toggle.on { color: var(--royal); }

/* post-submit confirmation (login-sent state) */
.handoff-done { text-align: center; padding: 26.4px 13.2px 13.2px; }
.handoff-done .hd-ico { width: 73.92px; height: 73.92px; border-radius: 50%; background: var(--royal-tint); color: var(--royal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18.48px; }
.handoff-done .hd-ico svg { width: 36.96px; height: 36.96px; }
.handoff-done h3 { font-family: var(--font-display); font-size: 29.04px; font-weight: 800; color: var(--ink); margin-bottom: 10.56px; }
.handoff-done p { color: var(--ink-soft); max-width: 422.4px; margin: 0 auto 23.76px; line-height: 1.6; }
.handoff-done .hd-actions { display: flex; gap: 13.2px; justify-content: center; flex-wrap: wrap; }

/* recap account-chip stack (label over email). Made explicit so the two spans
   always stack regardless of inline-flow width — matches the preview. */
.acct-chip .ac-t { display: block; }
.acct-chip .ac-mail { display: block; }

/* ==================================================
   LIVE INTEGRATION — valboosting payment-success page only.
   Everything here is gated under body.vb-result-page (added in functions.php
   when vb_is_payment_result_page() && vb_f3_result_enabled). The standalone
   preview (_vb-preview-wizard.html, no such body class) is unaffected by the
   body-scoped rules below; the small recap/credential/toast component rules are
   shared (the preview never renders them, so they are inert there).
   ================================================== */

/* Soft page backdrop + suppress the parent theme's dark page-title banner
   (.banner.banner__page + its scroll-arrow) so the rose wiz-band hero is the
   top of the page exactly like the preview. Mirrors the boost page. */
/* overflow-x clamp guards against the 100vw hero poking a scrollbar-gutter's
   width past the viewport edge (100vw counts the gutter, 50% does not) — the
   page always scrolls vertically, so without this it shows a horizontal
   scrollbar. Mirrors boost-page.css body.vb-boost-page{overflow-x:hidden}. */
body.vb-result-page { background: #f7f8fa; overflow-x: hidden; }
body.vb-result-page .banner.banner__page,
body.vb-result-page .banner__page,
body.vb-result-page .banner__page + .arrow-page-down,
body.vb-result-page .arrow-page-down { display: none !important; }

/* The [payment_complete] shortcode renders inside a `.payment-complete-container`
   (max-width:640px, display:flex, with an inline margin-top/min-height) that lives
   in the PAGE CONTENT + Customizer CSS (NOT in any theme file), itself nested in
   the parent theme's max-width:1275px centered `.container`. Left alone, the 640px
   wrapper traps the .wiz grid at 640px while only the hero full-bleeds past it.
   Fix: neutralise that inner wrapper, then full-bleed the WHOLE wizard wrapper out
   of the .container so the hero band AND the .wiz grid both span/center together
   (the grid keeps its own max-width:1320 + auto margins, so it aligns with the
   hero's centered inner). Mirrors the boost-page full-bleed; the body overflow-x
   clamp above guards the 100vw. */
body.vb-result-page .payment-complete-container {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
}
body.vb-result-page .vb-wiz-page {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* new-account credentials (the one-time login + generated password) shown in
   the recap rail — the preview only had the "welcome back" chip. */
.cred-rows { margin-top: 14.52px; display: flex; flex-direction: column; gap: 9.24px; }
.cred-row { display: flex; align-items: center; gap: 11.88px; background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: var(--r); padding: 10.56px 13.2px; }
.cred-row .cred-k { font-family: var(--font-ui); font-size: 11.22px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--royal); min-width: 71.28px; }
.cred-row .cred-v { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 15.84px; color: var(--ink); word-break: break-all; }
.cred-row .cred-v[hidden] { display: none; }
.cred-row .cred-mask { letter-spacing: 2.64px; }
.cred-row .pass-toggle { position: static; transform: none; flex-shrink: 0; }
.cred-row .copy-btn { margin-left: 0; padding: 7.92px 11.88px; }
.acct-note { margin-top: 13.2px; font-size: 14.52px; line-height: 1.5; color: var(--ink-muted); }
.acct-note a { color: var(--royal); font-weight: 600; text-decoration: none; }
.acct-note a:hover { text-decoration: underline; }

/* SUBMIT_EXTRA async-post feedback toast (the form posts without a reload) */
.vb-extra-toast { margin-top: 18.48px; padding: 13.2px 15.84px; border-radius: var(--r); font-size: 15.84px; line-height: 1.5; color: var(--ink-soft); border: 1.2px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-left: 4.8px solid var(--green); background: #f3fbf6; }
.vb-extra-toast.is-error { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); border-left-color: var(--red); background: #fdf3f2; }

/* f3-tokens.css ships `.vb-rd .panel` / `.vb-rd .panel-head` / `.vb-rd .btn`
   (specificity 0,2,0) on the LIVE page only; those beat the wizard's bare
   .panel/.panel-head/.help-card/.btn-back/.submit-btn (0,1,0), so live loses the
   help-card rose gradient, the .btn-back outline, and renders a grey account-head
   + smaller CTA. The standalone preview has no f3-tokens and is already correct,
   so re-assert the wizard look here at higher specificity, live-scoped. (Same
   class-collision pattern documented across the F3 integration.) */
body.vb-result-page .panel { box-shadow: var(--shadow-pop); }
body.vb-result-page .panel-head { background: #fff; padding: 23.76px 29.04px; }
body.vb-result-page .help-card { background: linear-gradient(160deg, var(--royal) 0%, var(--royal-deep) 100%); border: none; }
body.vb-result-page .btn-back { background: #fff; color: var(--ink-soft); border: 1.2px solid var(--line); }
body.vb-result-page .btn-back:hover { border-color: var(--royal-soft); background: var(--royal-tint); color: var(--royal); }
body.vb-result-page .submit-btn { padding: 21.12px; font-size: 17.16px; }

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on big headings + numeric stats; small titles, names, subtitles
   and reading text use Barlow. Appended last to override the per-element
   --font-display at equal specificity.
   ================================================== */
.panel-head h2,
.win-ribbon .wr-t,
.jrank .jn,
.help-card h4 { font-family: var(--font-body); }