/* indexv.css — shared styles for the Registration Variants pages
   (indexv1a sheet checkout, indexv1b one page, indexv1c stepper).
   Visual language ported from the design doc "Registration Variants.dc.html":
   cream canvas, Archivo + IBM Plex Mono, red #CE2B3C / ink #14181F / navy #1B3A6B. */

:root {
  --vbv-red: #CE2B3C;
  --vbv-red-dark: #B01F31;
  --vbv-ink: #14181F;
  --vbv-navy: #1B3A6B;
  --vbv-cream: #FBFAF7;
  --vbv-line: #E4DFD7;
  --vbv-line-soft: #E7E3DC;
  --vbv-muted: #5A6270;
  --vbv-faint: #8A8F99;
  --vbv-green: #0E5C3A;
  --vbv-ring: 0 0 0 4px rgba(206, 43, 60, .14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.vbv {
  margin: 0;
  background: #EDE9E2;
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--vbv-ink);
  -webkit-font-smoothing: antialiased;
}
.vbv a { color: var(--vbv-red); text-decoration: none; }
.vbv input, .vbv select, .vbv button, .vbv textarea { font-family: 'Archivo', system-ui, sans-serif; }
.vbv input:focus, .vbv select:focus { outline: 2px solid var(--vbv-navy); outline-offset: -1px; }
.vbv ::placeholder { color: #9AA1AC; }
.vbv [hidden] { display: none !important; }
.vbv-mono { font-family: 'IBM Plex Mono', monospace; }

/* Page column: full-bleed on mobile, centered card on desktop. */
.vbv-page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--vbv-cream);
  min-height: 100vh;
  position: relative;
}
@media (min-width: 520px) {
  .vbv-page {
    margin: 28px auto 48px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 70px -24px rgba(20, 24, 31, .35), 0 0 0 1px rgba(20, 24, 31, .08);
    min-height: 0;
  }
}

/* ---- top bar ---- */
.vbv-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; height: 58px;
  background: rgba(251, 250, 247, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vbv-line-soft);
}
.vbv-topbar-brand { display: flex; align-items: center; gap: 9px; }
.vbv-logo {
  width: 26px; height: 26px; border-radius: 7px; background: var(--vbv-red);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.04em;
}
.vbv-logo-navy { background: var(--vbv-navy); }
.vbv-topbar-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--vbv-ink); }
.vbv-topbar-phone { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--vbv-muted); }
.vbv-topbar-login { font-size: 12px; font-weight: 600; color: var(--vbv-navy); }

/* ---- hero (1a photo hero / 1c photo hero) ---- */
.vbv-hero { position: relative; background-size: cover; }
.vbv-hero-1a { height: 430px; }
.vbv-hero-media { position: absolute; inset: 0; background-size: cover; }
.vbv-hero-shade { position: absolute; inset: 0; }
.vbv-hero-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 22px; }
.vbv-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; margin-bottom: 10px;
}
.vbv-hero h1 { margin: 0 0 10px; font-size: 42px; line-height: .95; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.vbv-hero p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.vbv-hero-cta {
  display: block; text-align: center; background: var(--vbv-red); color: #fff !important;
  font-size: 16px; font-weight: 700; padding: 16px; border-radius: 14px;
  box-shadow: 0 10px 24px -8px rgba(206, 43, 60, .7); border: 0; width: 100%; cursor: pointer;
}
.vbv-hero-cta:active { background: var(--vbv-red-dark); }

/* ---- stats strip (1a) ---- */
.vbv-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--vbv-ink); color: #fff; }
.vbv-stat { padding: 14px 10px; text-align: center; }
.vbv-stat + .vbv-stat { border-left: 1px solid rgba(255, 255, 255, .12); }
.vbv-stat-num { font-size: 16px; font-weight: 800; }
.vbv-stat-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .6); margin-top: 3px;
}

/* ---- shared type ---- */
.vbv-h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.vbv-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--vbv-faint); margin-bottom: 10px;
}
.vbv-eyebrow-red { color: var(--vbv-red); }

/* ---- 1a league cards ---- */
.vbv-cards { display: flex; flex-direction: column; gap: 14px; }
.vbv-card {
  border: 1px solid var(--vbv-line); border-radius: 20px; background: #fff;
  padding: 16px; box-shadow: 0 2px 10px -4px rgba(20, 24, 31, .1);
}
.vbv-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vbv-day-pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  background: #F1EEE8; color: var(--vbv-ink); padding: 5px 9px; border-radius: 999px;
}
/* 1a: the day of week IS the card headline. */
.vbv-card-day { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--vbv-ink); line-height: 1; }
.vbv-card-day::after { content: ''; display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--vbv-red); margin-top: 7px; }
.vbv-card-top { align-items: flex-start; }
.vbv-card-season { font-size: 12px; font-weight: 600; color: var(--vbv-faint); }
.vbv-card-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; color: #3A414D; }
.vbv-card-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--vbv-muted); line-height: 1.4; margin-bottom: 12px; }
.vbv-card-meta .vbv-dim { color: var(--vbv-faint); }
.vbv-females-chip {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; background: #FDEDEF; color: #A3162A; padding: 6px 9px; border-radius: 8px; margin-bottom: 14px;
}
.vbv-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vbv-card-btns.vbv-single { grid-template-columns: 1fr; }
.vbv-btn-team {
  border: 0; cursor: pointer; background: var(--vbv-red); color: #fff;
  border-radius: 13px; padding: 11px 6px; text-align: center;
}
.vbv-btn-team:hover { background: var(--vbv-red-dark); }
.vbv-btn-solo {
  border: 1px solid var(--vbv-ink); cursor: pointer; background: #fff; color: var(--vbv-ink);
  border-radius: 13px; padding: 11px 6px; text-align: center;
}
.vbv-btn-solo:hover { background: var(--vbv-ink); color: #fff; }
.vbv-btn-title { font-size: 14px; font-weight: 700; }
.vbv-btn-price { font-size: 11px; opacity: .75; margin-top: 2px; }
.vbv-btn-solo .vbv-btn-price { color: var(--vbv-muted); opacity: 1; }
.vbv-btn-soldout { opacity: .45; cursor: not-allowed !important; }
.vbv-btn-soldout:hover { background: inherit; color: inherit; }
.vbv-btn-team.vbv-btn-soldout:hover { background: var(--vbv-red); }
.vbv-btn-solo.vbv-btn-soldout:hover { background: #fff; color: var(--vbv-ink); }

/* ---- photo blocks ---- */
.vbv-photo { position: relative; border-radius: 20px; overflow: hidden; background-size: cover; }
.vbv-photo-shade { position: absolute; inset: 0; }
.vbv-photo-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; }
.vbv-stars { color: #FFC94D; font-size: 13px; letter-spacing: .1em; margin-bottom: 8px; }
.vbv-quote { margin: 0 0 8px; font-size: 16px; line-height: 1.4; font-weight: 600; color: #fff; }
.vbv-attrib { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, .65); }

/* ---- guarantee / FAQ (1a) ---- */
.vbv-guarantee { border: 1px solid var(--vbv-line); border-radius: 18px; background: #fff; padding: 16px; }
.vbv-guarantee-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.vbv-guarantee p, .vbv-faq p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-faq-item { border-bottom: 1px solid var(--vbv-line-soft); padding-bottom: 12px; }
.vbv-faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.vbv-faq-q { font-size: 14px; font-weight: 700; margin-bottom: 4px; }

/* ---- footer ---- */
.vbv-footer { background: var(--vbv-ink); color: rgba(255, 255, 255, .6); padding: 24px 20px 30px; font-size: 12px; line-height: 1.7; }
.vbv-footer-name { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.vbv-footer-fine { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .35); }

/* ---- form fields ---- */
.vbv-fields { display: flex; flex-direction: column; gap: 12px; }
.vbv-field label { display: block; font-size: 12px; font-weight: 600; color: var(--vbv-muted); margin-bottom: 5px; }
.vbv-label-note { font-weight: 400; color: var(--vbv-faint); }
.vbv-field input, .vbv-field select {
  width: 100%; height: 52px; border: 1px solid #DED9D1; border-radius: 12px;
  padding: 0 14px; font-size: 16px; font-weight: 500; background: #fff; color: var(--vbv-ink);
}
.vbv-field select { padding: 0 12px; }
.vbv-field.vbv-invalid input, .vbv-field.vbv-invalid select { border: 2px solid #c00; box-shadow: 0 0 0 3px rgba(204, 0, 0, .12); }
.vbv-err { color: #c00; font-size: 12px; margin-top: 4px; }
.vbv-err-block { color: #c00; font-size: 13px; margin: 10px 0; }
.vbv-err-block:empty { display: none; }
.vbv-mens-note { font-size: 12px; color: var(--vbv-faint); line-height: 1.45; }
.vbv-lead-note { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--vbv-muted); }
.vbv-lead-note.vbv-lead-ok { color: var(--vbv-green); }
.vbv-lead-icon { font-weight: 700; }

/* ---- one-box checkout (1b) ----------------------------------------------
   The shared format hoopstars/sportstars/AGS/msl run: the whole checkout in a
   single container, headed by a title and the Stripe badge, opening with a
   summary of what is being bought, and with the picker sitting against the pay
   button. Rendered here in the variants' own language — cream inset, Archivo,
   IBM Plex Mono for the small caps, navy rule. */
.vbv-co-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--vbv-line-soft); margin-bottom: 18px;
}
.vbv-co-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }

/* Quiet inset, not a card: it is a receipt line, so it never competes with the
   league cards it is summarising. */
.vbv-co-summary {
  background: #F4F1EB; border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.vbv-co-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.vbv-co-summary .vbv-flags { margin: 0; }
.vbv-co-lines { display: flex; flex-direction: column; gap: 3px; }
.vbv-co-line { font-size: 13px; line-height: 1.4; color: var(--vbv-ink); }
.vbv-co-line:empty { display: none; }
.vbv-co-dim { color: var(--vbv-muted); font-size: 12px; }
/* One hairline, so the number being charged doesn't read as another spec line
   in the list above it. */
.vbv-co-rule { height: 1px; background: #DFD9CF; }
.vbv-co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.vbv-co-amt { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vbv-co-balance { font-size: 12px; color: var(--vbv-muted); margin-top: -4px; }

/* Picker + pay button read as one control: what you are buying, then the
   button that buys it. */
.vbv-cta-group { display: flex; flex-direction: column; gap: 12px; }
.vbv-picker-field label { margin-bottom: 5px; }

/* ---- fee options ---- */
.vbv-fees { display: flex; flex-direction: column; gap: 10px; }
.vbv-fee {
  text-align: left; cursor: pointer; background: #fff; border-radius: 14px; padding: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 2px solid var(--vbv-line); box-shadow: none; width: 100%;
}
.vbv-fee.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-fee-title { font-size: 14px; font-weight: 700; }
.vbv-fee-titlerow { display: flex; align-items: center; gap: 7px; }
.vbv-fee-note { display: block; font-size: 12px; color: var(--vbv-muted); margin-top: 3px; }
.vbv-fee-amt { font-size: 15px; font-weight: 800; white-space: nowrap; }
.vbv-save-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .08em;
  background: var(--vbv-green); color: #fff; padding: 3px 6px; border-radius: 5px;
}

/* ---- payment block ---- */
.vbv-payment-hint { font-size: 13px; color: var(--vbv-faint); margin: 0 0 10px; }
/* Payment heading + Stripe badge, the shared checkout format's header row. */
.vbv-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.vbv-pay-head h2 {
  margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vbv-ink);
}
/* Stripe's official blurple asset — used as issued, never recoloured. */
.vbv-stripe-badge { height: 24px; width: auto; flex: 0 0 auto; }
/* Reserves the button height while the wallet resolves. Starts hidden, is
   unhidden just before the element mounts, and collapses again if Stripe
   reports no usable wallet (indexv-shared.js mountExpress / setWalletReady). */
.vbv-express-wrap { min-height: 48px; margin: 0 0 4px; }
.vbv-or-row {
  display: flex; align-items: center; gap: 12px; margin: 12px 0;
  font-size: 12px; color: var(--vbv-faint);
}
.vbv-or-row::before, .vbv-or-row::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--vbv-line);
}
.vbv-or-row[hidden], .vbv-express-wrap[hidden], .vbv-pay-head[hidden] { display: none; }
#vbv-payment-element { margin: 4px 0 12px; min-height: 0; }
.vbv-paybtn {
  width: 100%; cursor: pointer; border: 0; background: #B9B3A9; color: #fff;
  padding: 18px; border-radius: 15px; font-size: 16px; font-weight: 700;
}
.vbv-paybtn.vbv-ready { background: var(--vbv-red); box-shadow: 0 12px 26px -10px rgba(206, 43, 60, .65); }
.vbv-paybtn:disabled { cursor: default; }
.vbv-paybtn.vbv-ready:disabled { opacity: .7; }
.vbv-post-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-secure { margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .06em; color: #9AA1AC; }
.vbv-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  vertical-align: -2px; animation: vbv-spin .7s linear infinite;
}
@keyframes vbv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vbv-spinner { animation: none; } }

/* ---- honeypot ---- */
.vbv-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ---- 1a bottom sheet ---- */
.vbv-sheet-veil {
  position: fixed; inset: 0; z-index: 60; background: rgba(20, 24, 31, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.vbv-sheet {
  width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--vbv-cream); border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 50px -10px rgba(20, 24, 31, .5);
  -webkit-overflow-scrolling: touch;
}
.vbv-sheet-head {
  position: sticky; top: 0; z-index: 2; background: var(--vbv-cream);
  padding: 12px 18px 10px; border-bottom: 1px solid var(--vbv-line-soft);
}
.vbv-sheet-head-row { display: flex; align-items: center; justify-content: space-between; }
.vbv-sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.vbv-sheet-sub { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-sheet-close {
  border: 1px solid #DED9D1; background: #fff; cursor: pointer; width: 32px; height: 32px;
  border-radius: 50%; font-size: 16px; color: var(--vbv-muted); line-height: 1; flex: none;
}
.vbv-sheet-body { padding: 18px 18px 26px; }
.vbv-mode-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: #F1EEE8; border-radius: 14px; padding: 12px 14px; margin-bottom: 20px;
}
.vbv-mode-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.vbv-mode-due { font-size: 14px; font-weight: 700; }

/* ---- 1b: toggles, night strip, rows, sticky bar ---- */
.vbv-toggle2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vbv-toggle {
  cursor: pointer; border-radius: 14px; padding: 15px 12px; text-align: left;
  border: 2px solid #DED9D1; background: #fff; color: var(--vbv-ink);
}
.vbv-toggle.vbv-selected { border-color: var(--vbv-ink); background: var(--vbv-ink); color: #fff; }
.vbv-toggle-title { font-size: 15px; font-weight: 700; }
.vbv-toggle-sub { font-size: 12px; opacity: .7; margin-top: 3px; }
.vbv-nights { display: flex; gap: 7px; margin-bottom: 14px; }
.vbv-night {
  flex: 1; cursor: pointer; border-radius: 11px; padding: 11px 0; font-size: 13px; font-weight: 700;
  border: 1px solid #DED9D1; background: #fff; color: var(--vbv-muted);
}
.vbv-night.vbv-selected { border-color: var(--vbv-ink); background: var(--vbv-ink); color: #fff; }
.vbv-rows { display: flex; flex-direction: column; gap: 10px; }
.vbv-row {
  display: block; width: 100%; text-align: left; cursor: pointer; border-radius: 16px;
  padding: 14px; background: #fff; border: 2px solid var(--vbv-line); box-shadow: none;
}
.vbv-row.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-row-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vbv-row-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.vbv-row-meta { font-size: 13px; color: var(--vbv-muted); margin-top: 4px; line-height: 1.4; }
.vbv-row-fine { font-size: 12px; color: var(--vbv-faint); margin-top: 3px; }
.vbv-row-price { font-size: 17px; font-weight: 800; white-space: nowrap; }
.vbv-row-tax { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .06em; color: var(--vbv-faint); margin-top: 3px; text-align: right; }
.vbv-row-soldout { opacity: .5; cursor: not-allowed; }
.vbv-empty {
  border: 1px dashed #DED9D1; border-radius: 14px; padding: 20px; text-align: center;
  font-size: 13px; color: var(--vbv-faint);
}
.vbv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vbv-chip { font-size: 12px; font-weight: 600; background: #F1EEE8; padding: 7px 11px; border-radius: 999px; }
.vbv-guarantee-inline { margin: 16px 0 0; border-left: 3px solid var(--vbv-navy); padding: 2px 0 2px 12px; }
.vbv-guarantee-inline .vbv-faq-q { margin-bottom: 4px; }
.vbv-guarantee-inline p { margin: 0; font-size: 13px; line-height: 1.5; color: #4A515D; }
.vbv-review { border-bottom: 1px solid var(--vbv-line-soft); padding-bottom: 14px; margin-bottom: 14px; }
.vbv-review:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.vbv-review .vbv-stars { color: #FFB300; font-size: 12px; margin-bottom: 6px; }
.vbv-review p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--vbv-ink); }
.vbv-review .vbv-attrib { color: var(--vbv-faint); }

.vbv-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
}
.vbv-bar-inner {
  pointer-events: auto; width: 100%; max-width: 480px;
  background: rgba(251, 250, 247, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #E0DBD2; padding: 12px 16px 16px;
  display: flex; align-items: center; gap: 12px;
}
.vbv-bar-text { flex: 1; min-width: 0; }
.vbv-bar-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbv-bar-note { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-bar-cta {
  cursor: pointer; border: 0; background: var(--vbv-ink); color: #fff;
  padding: 14px 18px; border-radius: 13px; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.vbv-bar-cta.vbv-ready { background: var(--vbv-red); }

/* ---- 1c: express card, steps, list rows ---- */
.vbv-express {
  margin: -18px 16px 0; position: relative; z-index: 2; background: #fff;
  border-radius: 20px; padding: 16px;
  box-shadow: 0 14px 34px -14px rgba(20, 24, 31, .35), 0 0 0 1px rgba(20, 24, 31, .06);
}
.vbv-express-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vbv-express-title { font-size: 15px; font-weight: 700; }
.vbv-express-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .1em;
  background: #F1EEE8; color: var(--vbv-muted); padding: 4px 7px; border-radius: 5px;
}
.vbv-express p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--vbv-muted); }
/* 1h (browse → stepper) top blocks — mobile gutters; widened on desktop below. */
.vbv-1h-head { padding: 30px 20px 20px; }
.vbv-1h-reviews { padding: 0 20px 8px; display: grid; gap: 14px; }
.vbv-1h-stepper { padding: 14px 20px 0; }
.vbv-wallet2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vbv-wallet-dark { cursor: pointer; border: 0; background: var(--vbv-ink); color: #fff; height: 48px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.vbv-wallet-light { cursor: pointer; border: 1px solid #DED9D1; background: #fff; color: var(--vbv-ink); height: 48px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.vbv-trustline {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .1em; color: var(--vbv-faint);
}
.vbv-trustline .vbv-dot { color: #D6D0C6; }
.vbv-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.vbv-step { flex: 1; }
.vbv-step-bar { height: 3px; border-radius: 2px; background: #E0DBD2; margin-bottom: 7px; }
.vbv-step.vbv-done .vbv-step-bar { background: var(--vbv-red); }
.vbv-step-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #9AA1AC; }
.vbv-step.vbv-done .vbv-step-label { color: var(--vbv-ink); }
.vbv-month {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .16em;
  color: #9AA1AC; padding: 10px 0 6px;
}
.vbv-pick {
  display: block; width: 100%; text-align: left; cursor: pointer; background: #fff;
  border-radius: 14px; padding: 13px 14px; border: 1px solid var(--vbv-line); box-shadow: none;
}
.vbv-pick.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-pick-flex { display: flex; align-items: center; gap: 12px; }
.vbv-pick-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid #D6D0C6; background: #fff; }
.vbv-pick.vbv-selected .vbv-pick-dot { border-color: var(--vbv-red); background: var(--vbv-red); }
.vbv-pick-main { flex: 1; min-width: 0; }
.vbv-pick-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.vbv-pick-meta { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-pick-fine { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .06em; color: #A3162A; margin-top: 4px; }
.vbv-pick-prices { text-align: right; flex: none; }
.vbv-pick-team { font-size: 14px; font-weight: 800; }
.vbv-pick-solo { font-size: 11px; color: var(--vbv-faint); margin-top: 2px; }
.vbv-cta {
  width: 100%; cursor: pointer; border: 0; background: var(--vbv-red); color: #fff;
  padding: 17px; border-radius: 14px; font-size: 16px; font-weight: 700;
}
.vbv-cta:disabled, .vbv-cta.vbv-idle { background: #B9B3A9; }
.vbv-backbtn {
  width: 100%; margin-top: 10px; cursor: pointer; border: 0; background: transparent;
  color: var(--vbv-muted); padding: 8px; font-size: 13px; font-weight: 600;
}
.vbv-summary-card { background: #fff; border: 1px solid var(--vbv-line); border-radius: 16px; padding: 15px; margin-bottom: 16px; }
.vbv-summary-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vbv-summary-title { font-size: 15px; font-weight: 700; }
.vbv-summary-sub { font-size: 12px; color: var(--vbv-muted); margin-top: 2px; }
.vbv-change { cursor: pointer; border: 0; background: transparent; color: var(--vbv-navy); font-size: 12px; font-weight: 700; flex: none; }
.vbv-lines { border-top: 1px solid #EDE9E2; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.vbv-line-row { display: flex; justify-content: space-between; }
.vbv-line-row .vbv-dim { color: var(--vbv-muted); }
.vbv-line-row.vbv-green { color: var(--vbv-green); }
.vbv-line-total { border-top: 1px solid #EDE9E2; padding-top: 8px; margin-top: 2px; font-size: 15px; }
.vbv-line-total .vbv-total-label { font-weight: 700; }
.vbv-line-total .vbv-total-amt { font-weight: 800; }
.vbv-quotebox { margin: 28px 20px 0; padding: 16px; background: #F1EEE8; border-radius: 16px; }
.vbv-quotebox p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--vbv-ink); }

/* ---- Stripe Link Authentication email mount ---- */
#vbv-email-mount { display: block; }

/* ---- 1a proof block (photo + guarantee + FAQ) — mobile spacing ---- */
.vbv-proof-photo { margin: 26px 18px 0; }
.vbv-proof-guarantee { margin: 14px 18px 0; }
.vbv-proof-faq { padding: 26px 18px 34px; }

/* ---- 1b layout columns: plain stacking on mobile ---- */
.vbv-cols { display: block; }

/* The box is the whole point of the format, so 1b keeps it on mobile too —
   where it matters most, since the league cards scroll away above it and the
   summary inside is then the only thing saying what is being bought. Desktop
   overrides this with the sticky rail treatment further down. */
body[data-variant="1b"] .vbv-rail-inner {
  margin: 22px 16px 0;
  background: #fff;
  border: 1px solid var(--vbv-line);
  border-radius: 20px;
  padding-bottom: 22px;
  box-shadow: 0 10px 30px -20px rgba(20, 24, 31, .35);
}

/* =========================================================================
   Variant 1d — split-screen checkout (desktop-first).
   ========================================================================= */
.vbv-split { min-height: 100vh; }
.vbv-split-left { position: relative; min-height: 300px; background: var(--vbv-ink); overflow: hidden; }
.vbv-split-media { position: absolute; inset: 0; background-size: cover; background-position: 50% 40%; opacity: .55; }
.vbv-split-shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(20,24,31,.25) 0%, rgba(20,24,31,.85) 80%); }
.vbv-split-left-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 22px 24px 26px; min-height: 300px; box-sizing: border-box; }
.vbv-split-left-main h1 { margin: 0 0 10px; font-size: 34px; line-height: .98; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.vbv-split-left-main p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 44ch; }
.vbv-split-quote p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; font-weight: 600; color: #fff; }
.vbv-split-left-foot { display: none; }
.vbv-split-right { background: var(--vbv-cream); }
.vbv-split-flow { max-width: 560px; margin: 0 auto; padding: 30px 20px 40px; }
.vbv-split-foot { font-size: 12px; color: var(--vbv-faint); border-top: 1px solid var(--vbv-line-soft); padding-top: 18px; }
.vbv-dayrow-day { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.vbv-row.vbv-selected .vbv-dayrow-day { color: var(--vbv-red); }

@media (min-width: 1024px) {
  .vbv-split { display: grid; grid-template-columns: 44% 56%; }
  .vbv-split-left { position: sticky; top: 0; height: 100vh; }
  .vbv-split-left-inner { height: 100vh; padding: 36px 44px 40px; }
  .vbv-split-left-main h1 { font-size: 52px; }
  .vbv-split-left-main p { font-size: 16px; }
  .vbv-split-left-foot { display: block; }
  .vbv-split-flow { padding: 56px 48px 56px; }
}

/* =========================================================================
   Variant 1e — week grid (desktop-first). Drawer checkout on desktop.
   ========================================================================= */
.vbv-week { max-width: 1160px; margin: 0 auto; background: var(--vbv-cream); min-height: 100vh; }
.vbv-week-hero { text-align: center; padding: 40px 20px 26px; }
.vbv-week-hero h1 { margin: 0 0 12px; font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.vbv-week-hero p { margin: 0 auto; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-daygrid { display: flex; gap: 10px; padding: 12px 20px 8px; overflow-x: auto; }
.vbv-daytile {
  flex: 1 0 128px; cursor: pointer; text-align: left; background: #fff;
  border: 2px solid var(--vbv-line); border-radius: 18px; padding: 18px 16px;
}
.vbv-daytile.vbv-selected { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-daytile-day { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.vbv-daytile.vbv-selected .vbv-daytile-day { color: var(--vbv-red); }
.vbv-daytile-meta { font-size: 12px; color: var(--vbv-muted); margin-top: 6px; }
.vbv-week-cards { padding: 18px 20px 8px; }
.vbv-week-trust { padding: 26px 20px 34px; }
@media (min-width: 900px) {
  .vbv-week { border-radius: 0; }
  .vbv-week-hero { padding: 64px 20px 30px; }
  .vbv-week-hero h1 { font-size: 56px; }
  .vbv-daygrid { padding: 16px 40px 8px; overflow-x: visible; }
  .vbv-daytile { padding: 22px 20px; }
  .vbv-daytile-day { font-size: 24px; }
  .vbv-week-cards { padding: 22px 40px 8px; }
  .vbv-week-cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .vbv-week-trust { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding: 34px 40px 44px; }
  .vbv-week-trust .vbv-review { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  /* drawer: checkout slides in from the right */
  .vbv-veil-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
  .vbv-veil-drawer .vbv-sheet { max-width: 470px; max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* =========================================================================
   Variant 1f — comparison columns (desktop-first). Modal checkout.
   ========================================================================= */
.vbv-compare { max-width: 1240px; margin: 0 auto; background: var(--vbv-cream); min-height: 100vh; }
.vbv-compare-hero { text-align: center; padding: 40px 20px 24px; }
.vbv-compare-hero h1 { margin: 0 0 12px; font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.vbv-compare-hero p { margin: 0 auto 16px; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--vbv-muted); }
.vbv-compare-scroll { padding: 10px 20px 8px; }
.vbv-compare-grid { display: flex; flex-direction: column; gap: 16px; }
.vbv-col { background: #fff; border: 1px solid var(--vbv-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.vbv-col-day { padding: 18px 18px 14px; border-bottom: 1px solid var(--vbv-line-soft); }
.vbv-col-row { padding: 10px 18px; border-bottom: 1px solid #F1EEE8; }
.vbv-col-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .14em; color: var(--vbv-faint); margin-bottom: 3px; }
.vbv-col-val { font-size: 13px; font-weight: 600; line-height: 1.4; }
.vbv-col-cta { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.vbv-compare-foot { padding: 30px 20px 40px; }
@media (min-width: 900px) {
  .vbv-compare-hero { padding: 64px 20px 30px; }
  .vbv-compare-hero h1 { font-size: 56px; }
  .vbv-compare-scroll { overflow-x: auto; padding: 10px 32px 20px; }
  .vbv-compare-grid { flex-direction: row; align-items: stretch; }
  .vbv-col { flex: 1 0 236px; max-width: 320px; }
}

/* =========================================================================
   Variant 1g — full-screen wizard (desktop-first).
   ========================================================================= */
.vbv-wiz { min-height: 100vh; background: var(--vbv-cream); display: flex; flex-direction: column; }
.vbv-wiz-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.vbv-wiz-count { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--vbv-faint); }
.vbv-wiz-progress { height: 3px; background: #E0DBD2; }
.vbv-wiz-progress-fill { height: 3px; width: 25%; background: var(--vbv-red); transition: width .35s ease; }
.vbv-wiz-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 22px 60px; box-sizing: border-box; }
.vbv-wiz-q { margin: 0 0 26px; font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.vbv-wiz-days { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
.vbv-wiz-day {
  cursor: pointer; text-align: left; background: #fff; border: 2px solid var(--vbv-line);
  border-radius: 18px; padding: 20px 22px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.vbv-wiz-day:hover { border-color: var(--vbv-red); box-shadow: var(--vbv-ring); }
.vbv-wiz-day-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.vbv-wiz-day-meta { font-size: 13px; color: var(--vbv-muted); }
.vbv-wiz-leagues { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }
.vbv-wiz-league { background: #fff; border: 1px solid var(--vbv-line); border-radius: 20px; padding: 20px; }
.vbv-wiz-league-name { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.vbv-wiz-league-meta { font-size: 13px; color: var(--vbv-muted); margin-top: 5px; line-height: 1.45; }
.vbv-wiz-league-btns { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.vbv-wiz-choice {
  cursor: pointer; border: 2px solid var(--vbv-ink); background: #fff; color: var(--vbv-ink);
  border-radius: 14px; padding: 15px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-size: 15px;
}
.vbv-wiz-choice:hover:not(:disabled) { background: var(--vbv-ink); color: #fff; }
.vbv-wiz-choice:disabled { opacity: .45; cursor: not-allowed; border-color: var(--vbv-line); }
.vbv-wiz-choice-title { font-weight: 700; }
.vbv-wiz-choice-price { font-weight: 800; white-space: nowrap; }
.vbv-wiz-form { max-width: 520px; }
@media (min-width: 900px) {
  .vbv-wiz-main { padding: 72px 22px 80px; }
  .vbv-wiz-q { font-size: 52px; margin-bottom: 34px; }
  .vbv-wiz-days { grid-template-columns: 1fr 1fr; }
  .vbv-wiz-day-name { font-size: 28px; }
  .vbv-wiz-league-btns { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Desktop compositions (the mobile design is the source of truth below
   1024px; these recompose the same sections into full desktop layouts).
   ========================================================================= */

/* Sheet becomes a centered modal once there's room. */
@media (min-width: 640px) {
  .vbv-sheet-veil { align-items: center; padding: 32px; }
  .vbv-sheet { border-radius: 26px; max-height: 88vh; }
}

@media (min-width: 1024px) {
  body[data-variant="1a"], body[data-variant="1b"], body[data-variant="1c"], body[data-variant="1h"], body[data-variant="1i"] { padding: 0 32px; }
  body[data-variant="1a"] .vbv-page,
  body[data-variant="1b"] .vbv-page,
  body[data-variant="1i"] .vbv-page { max-width: 1140px; border-radius: 28px; }
  body[data-variant="1c"] .vbv-page,
  body[data-variant="1h"] .vbv-page { max-width: 780px; }
  .vbv-topbar { padding: 0 40px; height: 68px; }
  .vbv-topbar-name { font-size: 15px; }

  /* ---- 1a: ink hero band, copy left / photo right ---- */
  .vbv-hero-1a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--vbv-ink); padding: 56px 48px; height: auto; }
  .vbv-hero-1a .vbv-hero-media { position: static; order: 2; border-radius: 22px; min-height: 440px; background-size: cover; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
  .vbv-hero-1a .vbv-hero-shade { display: none; }
  .vbv-hero-1a .vbv-hero-body { position: static; order: 1; padding: 0; }
  .vbv-hero-1a h1 { font-size: 58px; letter-spacing: -.04em; line-height: .95; }
  .vbv-hero-1a p { font-size: 17px; max-width: 46ch; }
  .vbv-hero-1a .vbv-hero-cta { display: inline-block; width: auto; padding: 16px 36px; }
  body[data-variant="1a"] .vbv-choose { padding: 48px 48px 8px !important; }
  body[data-variant="1a"] .vbv-choose .vbv-h2 { font-size: 34px; }
  body[data-variant="1a"] .vbv-choose .vbv-sub { font-size: 15px; margin-bottom: 24px; }
  body[data-variant="1a"] .vbv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  body[data-variant="1a"] .vbv-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; padding: 40px 48px 56px; }
  .vbv-proof-photo { grid-row: 1 / span 2; margin: 0; }
  .vbv-proof-photo .vbv-photo { height: 100% !important; min-height: 420px; }
  .vbv-proof-guarantee { margin: 0; }
  .vbv-proof-faq { padding: 0; }

  /* On mobile the hero is a photo with an overlay (media absolute). */

  /* ---- 1b (and 1i, its Apple Pay twin): main content left, sticky rail right ---- */
  body[data-variant="1b"] .vbv-page,
  body[data-variant="1i"] .vbv-page { padding-bottom: 40px !important; }
  body[data-variant="1b"] .vbv-bar,
  body[data-variant="1i"] .vbv-bar { display: none; }
  body[data-variant="1b"] .vbv-cols,
  body[data-variant="1i"] .vbv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 8px 36px; padding: 0 40px 24px; align-items: start; }
  .vbv-colmain-1 { grid-column: 1; grid-row: 1; }
  .vbv-colmain-2 { grid-column: 1; grid-row: 2; }
  .vbv-rail { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  /* Same specificity as the mobile 1b box above, so the desktop margin and
     shadow actually win over it. */
  .vbv-rail-inner,
  body[data-variant="1b"] .vbv-rail-inner {
    position: sticky; top: 88px; margin: 0;
    background: #fff; border: 1px solid var(--vbv-line); border-radius: 20px;
    padding: 4px 0 24px; box-shadow: 0 18px 44px -24px rgba(20, 24, 31, .25);
  }
  .vbv-rail-inner .vbv-field input, .vbv-rail-inner .vbv-field select { background: var(--vbv-cream); }
  .vbv-rail-inner .vbv-fee { background: var(--vbv-cream); }
  body[data-variant="1b"] .vbv-page > div:nth-of-type(2) h1,
  body[data-variant="1i"] .vbv-page > div:nth-of-type(2) h1 { font-size: 44px; max-width: 22ch; }
  body[data-variant="1b"] .vbv-page > div:nth-of-type(2),
  body[data-variant="1i"] .vbv-page > div:nth-of-type(2) { padding: 40px 40px 26px; }

  /* ---- 1c: taller hero, roomier centered column ---- */
  body[data-variant="1c"] .vbv-hero { height: 400px !important; }
  body[data-variant="1c"] .vbv-hero h1 { font-size: 52px; }
  body[data-variant="1c"] .vbv-express { margin: -26px 48px 0; }
  body[data-variant="1c"] #vbv-stepper { padding: 20px 56px 0; }
  body[data-variant="1c"] .vbv-quotebox { margin: 32px 56px 0; }

  /* ---- 1h: 1b browse inside a 1c stepper — roomier centered column ---- */
  body[data-variant="1h"] .vbv-1h-head { padding: 40px 56px 24px; }
  body[data-variant="1h"] .vbv-1h-head h1 { font-size: 44px; max-width: 22ch; }
  body[data-variant="1h"] .vbv-1h-reviews { padding: 0 56px 8px; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  body[data-variant="1h"] .vbv-express { margin: 8px 56px 0; }
  body[data-variant="1h"] #vbv-stepper { padding: 20px 56px 0; }
}

/* Google reviews attribution (real reviews via cron-google-reviews.php) */
.vbv-gattr, .vbv-attrib-link { color: #6b7280; font-size: 12px; font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; }
.vbv-gattr:hover, .vbv-attrib-link:hover { color: #2563eb; }
.vbv-attrib-link { color: inherit; opacity: .85; }

/* ---- Conversion flags, per-player framing, deposit note, gallery ----
   (league-flags.php / indexv-shared.php helpers, 2026-07-29) */
.vbv-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.vbv-flag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 5px 8px; border-radius: 6px; line-height: 1; }
.vbv-flag-urgent { background: #CE2B3C; color: #fff; }
.vbv-flag-badge { background: #FFF1F2; color: #CE2B3C; border: 1px solid #FECDD3; }
.vbv-flag-count { background: #14181F; color: #fff; }
.vbv-perplayer { font-size: 11px; color: #6b7280; margin-top: 4px; }
.vbv-dep-note { font-size: 12px; color: #4A515D; background: #F4F6F9; border: 1px solid #E4E8EF; border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; line-height: 1.45; }
.vbv-qa-block { padding: 22px 20px; }
.vbv-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 20px 8px; }
.vbv-gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 640px) {
  .vbv-gallery { grid-template-columns: 1fr 1fr; padding: 14px 16px 4px; }
  .vbv-gallery img { height: 96px; }
}
.vbv-topbar-links { display: flex; align-items: center; gap: 14px; }


/* ---------- Checkout copy reduction (parity with the taiam arm) ----------
   Hidden, never removed: indexv1b.js resolves all 44 #vbv-* ids with
   getElementById and dereferences them unguarded, so deleting an element throws
   on first render and the pay button never arms.

   ⚠ This is a DELIBERATE DIVERGENCE from the live capture. Everything hidden
   here is still in volleyballmississauga.com's own checkout verbatim, so the
   arm is no longer a byte-faithful replica of it and a pixel diff against the
   live page will now show these three gaps as intended, not as regressions.

   What stays visible is anything material to what is being charged: both fee
   amounts, the SAVE badge and the deposit's balance-due line. */

/* "Your email first. We save it so you never lose your place in the flow." */
.vbv-lead-note { display: none; }

/* "The secure payment form appears here once your contact details are in." —
   the form appearing says it better than the sentence does. */
.vbv-payment-hint { display: none; }

/* "SECURE STRIPE CHECKOUT · 256-BIT ENCRYPTED" — the Stripe badge above the
   panel already carries this, and twice reads as reassurance-seeking. */
.vbv-secure { display: none; }

/* the legal line replacing the long post-payment paragraph */
.vbv-post-note { text-align: center; }
.vbv-post-note a { text-decoration: underline; }

/* ============================================================================
   MSL CHECKOUT PARITY
   ----------------------------------------------------------------------------
   The checkout controls copied from the MSL Astro checkout
   (recrivals/msl/src/{components/CheckoutIsland.tsx,styles/global.css}), which
   is the reference both arms are being matched to. Values are MSL's, not
   approximations of the screenshot: the grid, the 48px rows, the hand-drawn
   radio and the 52px primary button are lifted from that stylesheet.

   Appended last on purpose — these override the .vbv-fee / .vbv-paybtn rules
   above at equal specificity, so the original block stays readable as the
   pre-MSL design rather than being cut out of the middle of the file.
   ========================================================================== */

.vbv-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* MSL's .field-label */
.vbv-field .vbv-field-label,
.vbv-field-label,
.vbv-picker-field label {
  display: block; margin: 24px 0 8px;
  color: #000; font-size: 14px; font-weight: 500;
}

/* MSL's text fields (.checkout-input) and its selects are NOT the same box:
   52px vs 48px, 16px vs 14px, and only the select carries the arrow. Merging
   them is what put a dropdown chevron on the email input. */
.vbv-rail-inner .vbv-field input,
.vbv-field input {
  width: 100%; min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #ccc; border-radius: 10px;
  background: #fff; color: #000;
  font-family: inherit; font-size: 16px;
  transition: border-color 150ms ease;
}
.vbv-rail-inner .vbv-field input:focus,
.vbv-field input:focus { border-color: #000; outline: none; }
.vbv-rail-inner .vbv-field input::placeholder { color: #707070; }

/* MSL kills the native arrow with appearance:none, which on WebKit leaves the
   box with no arrow at all — so it draws its own. Inline SVG: no request, and
   it cannot 404 and leave a bare box. */
.vbv-rail-inner .vbv-field select,
.vbv-rail-inner .vbv-picker-field select,
.vbv-field select,
.vbv-picker-field select,
#arm-reg-option {
  /* height:auto or the 52px above wins and the select is 4px taller than MSL's. */
  width: 100%; height: auto; min-height: 48px;
  padding: 12px 44px 12px 16px;
  border: 1px solid #ccc; border-radius: 10px;
  background-color: #fff; color: #000; font-size: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* ---- payment option: MSL radio rows ---- */
.vbv-fees.payment-options { display: block; margin: 24px 0 0; padding: 0; border: 0; }
.vbv-fees.payment-options .vbv-fee {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 8px 12px; align-items: center;
  min-height: 48px; padding: 12px 4px;
  width: auto; font-size: 14px; text-align: left; cursor: pointer;
  /* MSL's rows are not cards: no border, no ring, no fill. The dot is the
     entire selected affordance — which is why the row markup could drop the
     button element without losing anything. */
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.vbv-fees.payment-options .vbv-fee.vbv-selected { border: 0; box-shadow: none; }
.vbv-fees.payment-options input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0;
  border: 1px solid #000; border-radius: 50%; background: #fff;
}
.vbv-fees.payment-options input[type="radio"]:checked {
  background: radial-gradient(circle, #fff 0 3.5px, #000 3.5px 100%);
}
.vbv-fees.payment-options .vbv-fee-title { font-size: 14px; font-weight: 700; }
/* MSL sets no weight on the amount — the row is 14px and the <strong> title
   is the only bold thing in it. Copied as-is rather than kept bold. */
.vbv-fees.payment-options .vbv-fee-amt { font-size: 14px; font-weight: 400; white-space: nowrap; }
.vbv-fees.payment-options .vbv-fee-note {
  grid-column: 2 / -1; display: block; margin: 0;
  font-size: 12px; color: var(--vbv-muted);
}

/* ---- primary: MSL's .checkout-primary geometry, this arm's accent ---- */
.vbv-paybtn {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid #dedede; border-radius: 10px;
  background: #dedede; color: #707070;
  font-size: 16px; font-weight: 700; cursor: not-allowed;
}
.vbv-paybtn.vbv-ready {
  border-color: var(--vbv-red); background: var(--vbv-red); color: #fff;
  cursor: pointer; box-shadow: none;
}
.vbv-post-note { margin: 16px 0 0; padding-top: 16px; font-size: 12px; line-height: 1.4; color: #707070; text-align: center; }

/* ⚠ PHANTOM GAPS. .vbv-payment is a flex column with a gap, and two of its
   children — the Payment Element mount and the error block — are empty divs
   until Stripe mounts or something goes wrong. A zero-height flex item still
   earns its gap, so those two were adding 24px of dead air above the pay
   button on a page where nothing had gone wrong yet. :empty stops matching the
   moment Stripe puts an iframe in, so the spacing comes back with the form. */
.vbv-payment > :empty { display: none; }

/* the contact fields are on the same 24px as everything else — the tighter
   sub-group gap only ever showed when phone/gender appeared. */
.vbv-rail-inner .vbv-fields { gap: 24px; }

/* ⚠ THE 24px ABOVE THE EMAIL FIELD LIVES IN TWO PLACES, because the field has
   two forms. With Stripe reachable, indexv-shared.js mounts the Link
   Authentication Element into #vbv-email-mount and hides OUR label — "the
   element renders its own Email label — drop ours" — and the label's 24px
   margin-top went with it, so the email row sat ~8px under the league dropdown
   while every other field sat 24px apart. It only reproduces where checkout is
   enabled, which is why it looks right locally and wrong on the deployed site.

   The mount is [hidden] until Link actually mounts, and margins do not apply to
   display:none, so exactly one of the two is ever in effect. */
#vbv-email-mount { margin-top: 24px; }

/* ---- one option is not a choice ----------------------------------------
   Individual registration has a single fee (the deposit is a team thing), so
   the radio would be a dot you cannot un-pick. indexv1b.js sets this class
   whenever the second row is hidden; the input stays in the DOM and stays
   checked, and the row reclaims the 20px the dot was using. */
.vbv-fees.payment-options.vbv-fees--single .vbv-fee {
  grid-template-columns: 1fr auto;
  cursor: default;
}
.vbv-fees.payment-options.vbv-fees--single input[type="radio"] { display: none; }
/* the note spans 2/-1 in the two-column layout — with the dot gone that would
   park it under the price. */
.vbv-fees.payment-options.vbv-fees--single .vbv-fee-note { grid-column: 1 / -1; }