/* ------------------------------------------------------------------
   checkout.css
   Every rule the ticket picker needs, in one place. index.html and
   tickets.html both load this plus checkout.js, so the two pages can
   never drift apart again.
   Load AFTER style.css and BEFORE mobile.css.
   ------------------------------------------------------------------ */

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-scrim{position:absolute;inset:0;background:rgba(6,9,32,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .4s var(--ease)}
.modal.open .modal-scrim{opacity:1}

.sheet{position:relative;z-index:1;width:100%;max-width:640px;max-height:94vh;overflow:auto;
  background:linear-gradient(180deg,#0d1240,#090c2c);border-radius:26px;
  padding:44px 46px 40px;transform:translateY(24px) scale(.97);opacity:0;
  transition:transform .5s var(--ease),opacity .4s;box-shadow:0 40px 120px -30px rgba(0,0,0,.7),0 0 0 1px var(--hair)}
.modal.open .sheet{transform:none;opacity:1}
.sheet::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--blue-2),transparent 35%,transparent 65%,var(--crimson-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.sheet::after{content:"";position:absolute;top:-1px;left:36px;right:36px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,240,255,.35),transparent);pointer-events:none}

.sheet-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);
  background:rgba(234,240,255,.03);color:var(--silver-70);font-size:19px;cursor:pointer;transition:.25s;display:grid;place-items:center;line-height:1;z-index:3}
.sheet-close:hover{color:var(--silver);border-color:var(--silver-45);background:rgba(234,240,255,.07);transform:rotate(90deg)}

.sheet .kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sheet .kick::before{content:"";width:20px;height:1px;background:linear-gradient(90deg,var(--blue-2),var(--crimson-2))}
.sheet h3{font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:-.02em;margin-bottom:6px}
.sheet h3 em{font-style:italic}
.sheet .lead{color:var(--silver-70);font-size:14.5px;margin-bottom:26px;line-height:1.5}

/* top bar: back control on the left, step progress filling the rest, and
   the close button sitting absolutely in the corner above it */
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-right:46px}
.steps{display:flex;gap:6px;flex:1;min-width:0}
.sheet-back{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px 6px 9px;
  border:1px solid var(--hair);border-radius:100px;background:rgba(234,240,255,.03);
  color:var(--silver-45);font-family:var(--sans);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:.22s var(--ease)}
.sheet-back:hover{color:var(--silver);border-color:var(--silver-45);background:rgba(234,240,255,.07)}
.sheet-back[hidden]{display:none}
.stepdot{flex:1;height:3px;border-radius:3px;background:var(--hair);overflow:hidden;position:relative}
.stepdot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--blue-2),var(--crimson-2));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.stepdot.on::after{transform:scaleX(1)}

/* ---------- pass options ---------- */
.opt{position:relative;display:flex;gap:14px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:rgba(234,240,255,.03);border:1px solid var(--hair);border-radius:16px;padding:24px 26px;margin-bottom:14px;transition:.3s var(--ease);color:var(--silver);overflow:hidden}
.opt::after{content:"";position:absolute;right:22px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--silver-18);transition:.3s;flex:none}
.opt:hover{border-color:var(--blue-2);transform:translateY(-2px)}
.opt.sel{border-color:transparent;background:linear-gradient(100deg,rgba(46,75,224,.24),rgba(225,29,72,.18))}
.opt.sel::after{border-width:0;background:var(--silver);content:"\2713";color:#0a0e33;font-size:12px;font-weight:800;display:grid;place-items:center;line-height:20px}
.opt .t{font-family:var(--serif);font-size:20px;font-weight:500}
.opt .d{font-size:13px;color:var(--silver-45);margin-top:2px}
.opt .p{margin-left:auto;margin-right:32px;font-family:var(--serif);font-size:24px;font-weight:500}

/* Partner Up gets the crimson end of the brand gradient so the two passes
   read as different products at a glance */
.opt[data-pass="couple"]{border-color:rgba(225,29,72,.28)}
.opt[data-pass="couple"]:hover{border-color:var(--crimson-2)}
.opt[data-pass="couple"] .t::after{content:"2 dancers";margin-left:10px;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson-2);vertical-align:middle}

/* ---------- roles and fields ---------- */
.rolelabel{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-45);margin:20px 0 10px}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{border:1px solid var(--hair);background:rgba(234,240,255,.03);color:var(--silver-70);border-radius:100px;padding:10px 18px;font-size:14px;cursor:pointer;transition:.22s var(--ease)}
.chip:hover{border-color:var(--blue-2);color:var(--silver);transform:translateY(-1px)}
.chip.sel{border-color:transparent;background:linear-gradient(100deg,var(--blue),var(--crimson));color:#fff;box-shadow:0 6px 20px -8px rgba(46,75,224,.7)}
.chip.disabled{opacity:.28;cursor:not-allowed;pointer-events:none}

.fields{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Grid tracks refuse to shrink below the intrinsic width of their content,
   and an input's default size is about 20 characters. Without these the row
   pushes the whole panel wider than the phone screen and the second field
   is cut off at the edge. */
.fields label{display:grid;gap:7px;min-width:0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-45)}
.fields input{width:100%;min-width:0;box-sizing:border-box;background:rgba(234,240,255,.04);border:1px solid var(--hair);border-radius:13px;padding:16px;color:var(--silver);font-family:var(--sans);font-size:16px;transition:.25s}
.fields input::placeholder{color:var(--silver-45)}
.fields input:focus{outline:none;border-color:var(--blue-2);background:rgba(46,75,224,.08);box-shadow:0 0 0 3px rgba(46,75,224,.12)}

/* ---------- Partner One / Partner Two ----------
   Two dancers on one order used to be an unlabelled pair of identical
   field groups. Each now gets a titled, tinted card: partner one blue,
   partner two crimson, matching the brand gradient ends. */
.dblock{margin-bottom:6px}
.dblock .rolelabel:first-child{margin-top:0}
.pblock{border:1px solid var(--hair);border-radius:18px;padding:20px 20px 18px;margin-bottom:16px;position:relative;overflow:hidden}
.pblock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.pblock.p1{background:linear-gradient(180deg,rgba(46,75,224,.10),transparent 60%);border-color:rgba(76,107,255,.34)}
.pblock.p1::before{background:linear-gradient(180deg,var(--blue-2),transparent)}
.pblock.p2{background:linear-gradient(180deg,rgba(225,29,72,.10),transparent 60%);border-color:rgba(244,63,107,.34)}
.pblock.p2::before{background:linear-gradient(180deg,var(--crimson-2),transparent)}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:-.01em}
.pnum{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-size:12px;font-weight:700;color:#fff;flex:none}
.pblock.p1 .pnum{background:var(--blue-2)}
.pblock.p2 .pnum{background:var(--crimson-2)}
.pblock .rolelabel:first-of-type{margin-top:16px}

/* ---------- summary, actions ---------- */
.warn{color:var(--crimson-2);font-size:13px;margin-top:12px;min-height:16px;transition:.2s}
.summary{background:rgba(234,240,255,.04);border:1px solid var(--hair);border-radius:14px;padding:15px 18px;margin:20px 0 22px;font-size:14px;color:var(--silver-70);display:flex;align-items:center;gap:10px}
.summary::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--crimson-2);flex:none}
.summary b{color:var(--silver);font-family:var(--serif);font-weight:500;font-size:15px}
.sheet-actions{display:flex;gap:12px;margin-top:6px}
/* The site's .cta carries a hard outline that reads as a stray ring on a
   dark panel. Inside the sheet it gets a lit top edge and a coloured glow
   instead, so the button looks raised rather than outlined. */
.sheet-actions .cta{flex:1;justify-content:center;padding:15px 20px;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 32px -14px rgba(46,75,224,.85);
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),filter .2s}
.sheet-actions .cta:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 38px -14px rgba(46,75,224,.95);filter:saturate(1.06)}
.sheet-actions .cta:active{transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px -12px rgba(46,75,224,.7)}
.sheet-actions .cta:focus-visible{outline:2px solid #8fa6ff;outline-offset:3px}
.sheet-actions .cta[disabled]{opacity:.35;pointer-events:none;filter:grayscale(.4);box-shadow:none}
.backbtn{border:1px solid var(--silver-18);background:transparent;color:var(--silver-70);border-radius:100px;padding:15px 22px;font-size:14.5px;cursor:pointer;transition:.25s}
.backbtn:hover{color:var(--silver);border-color:var(--silver-45)}

/* ---------- payment ----------
   Price, consent, wallets and card form are four separate things that
   used to sit as four unrelated slabs. The price row is now the header,
   and the wallets and card share one bordered box below the consent, so
   the screen reads as a single panel rather than a stack of widgets. */
/* One row instead of a heading: lock, label, and the certification that
   actually backs the claim. Replaces the old "Secure payment" title, so it
   adds trust without adding height. */
.payhead{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--silver-70)}
.payhead svg{flex:none;color:#18B76B}
.ph-t{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--silver);letter-spacing:-.01em}
.ph-b{margin-left:auto;flex:none;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#7BE3AE;background:rgba(24,183,107,.10);border:1px solid rgba(24,183,107,.28);
  border-radius:100px;padding:4px 9px;white-space:nowrap}

.pay-amount-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 18px;margin-bottom:12px;background:linear-gradient(100deg,rgba(46,75,224,.16),rgba(225,29,72,.12));border:1px solid var(--hair);border-radius:14px}
.pay-amount-row .lbl{font-size:13px;color:var(--silver-70);min-width:0}
.pay-amount-row .amt{font-family:var(--serif);font-size:28px;font-weight:500;white-space:nowrap}

/* Wallets get the full panel width so Stripe always has room to draw
   them; only the card form sits in its own box below the divider. */
.paybox{border:1px solid var(--hair);border-radius:16px;padding:16px;background:rgba(234,240,255,.02)}
#payment-element{background:transparent;border-radius:0;padding:0;margin:0}
#express-checkout{margin:0}
#express-checkout:empty{display:none}
.pay-divider{display:none;align-items:center;gap:10px;margin:14px 0 12px;color:var(--silver-45);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.pay-divider::before,.pay-divider::after{content:'';flex:1;height:1px;background:rgba(234,240,255,.12)}
.paymarks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:12px;font-size:11px;color:var(--silver-45);--panel-ink:#0d1240}
.paymarks svg{flex:none;opacity:.72}
.paymarks span:last-child{letter-spacing:.02em}
.paymarks-sep{width:1px;height:12px;background:rgba(234,240,255,.16);margin:0 2px}
.securenote{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:12px;color:var(--silver-45)}

/* ---------- consent ----------
   Small print with a real checkbox. Unticked is neutral, ticked turns
   green so the visitor can see at a glance that they are clear to pay,
   and a pay attempt with either box empty turns the pair red and pulses
   them once so nobody hunts for a disabled button. */
.consent{display:grid;gap:10px;margin:16px 0 18px;padding:14px 16px;border:1px solid var(--hair);border-radius:14px;background:rgba(234,240,255,.02);transition:border-color .25s,background .25s}
.ccheck{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--silver-45);cursor:pointer;transition:color .25s}
.ccheck a{color:var(--silver-70);text-decoration:underline;text-underline-offset:2px}
.ccheck a:hover{color:var(--blue-2)}

.ccheck input[type="checkbox"]{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:18px;height:18px;border-radius:5px;border:1.5px solid var(--silver-18);
  background:rgba(234,240,255,.04);cursor:pointer;position:relative;top:1px;transition:.2s var(--ease)}
.ccheck input[type="checkbox"]:hover{border-color:var(--silver-45)}
.ccheck input[type="checkbox"]:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.ccheck input[type="checkbox"]:checked{background:#18B76B;border-color:#18B76B}
.ccheck input[type="checkbox"]:checked::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;
  color:#06200f;font-size:12px;font-weight:800;line-height:1}
.ccheck:has(input:checked){color:#7BE3AE}
.ccheck:has(input:checked) a{color:#7BE3AE}

/* pay attempted with something unticked: border, text and the empty box
   all go red, and the panel pulses twice so it is impossible to miss */
.consent.invalid{border-color:var(--crimson-2);border-width:1.5px;background:rgba(225,29,72,.11);animation:consentPulse 1.1s var(--ease) 2}
.consent.invalid .ccheck{color:#FF8FA6;font-weight:500}
.consent.invalid .ccheck a{color:#FF8FA6}
.consent.invalid .ccheck:has(input:checked){color:#7BE3AE;font-weight:400}
.consent.invalid .ccheck:has(input:checked) a{color:#7BE3AE}
.consent.invalid .ccheck input[type="checkbox"]:not(:checked){border-color:var(--crimson-2);border-width:2px;background:rgba(225,29,72,.2)}
@keyframes consentPulse{
  0%{box-shadow:0 0 0 0 rgba(225,29,72,.55)}
  60%{box-shadow:0 0 0 12px rgba(225,29,72,0)}
  100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}
}
@media (prefers-reduced-motion:reduce){.consent.invalid{animation:none}}

/* ---------- success ---------- */
#paySuccess{padding:26px 20px;text-align:center}
#paySuccess .tick{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:linear-gradient(100deg,var(--blue),var(--crimson));font-size:26px;color:#fff;animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
#paySuccess .big{font-family:var(--serif);font-size:26px;margin-bottom:8px}
#paySuccess .sm{color:var(--silver-70);font-size:14.5px;line-height:1.5}
#paySuccess .tickets{margin:22px 0 4px;display:flex;flex-direction:column;gap:16px}
#paySuccess .tk{border-radius:16px;overflow:hidden;border:1px solid var(--silver-18);background:#0b1030;box-shadow:0 18px 50px -24px rgba(0,0,0,.9)}
#paySuccess .tk img{display:block;width:100%;height:auto}
#paySuccess .tk .row{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 16px;font-size:13px;color:var(--silver-70);text-align:left}
#paySuccess .tk .row b{color:var(--silver);letter-spacing:.08em}
#paySuccess .tk .row a{color:#8fa6ff;white-space:nowrap}
#paySuccess .ph{height:120px;display:grid;place-items:center;color:var(--silver-45);font-size:13.5px;letter-spacing:.04em}
#paySuccess .mailed{margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(76,107,255,.10);border:1px solid rgba(76,107,255,.35);font-size:14px;line-height:1.6;color:var(--silver-70)}
#paySuccess .mailed b{color:var(--silver)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(234,240,255,.25);border-top-color:#4C6BFF;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------
   phone
   The panel is centred rather than glued to the bottom, and every step
   is guaranteed to fit: the sheet is capped at the SMALL viewport
   height (svh, so the address bar appearing cannot change it) and the
   step body scrolls inside it while the buttons stay pinned at the
   bottom edge of the panel.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  .modal{align-items:center;padding:8px}
  .sheet{max-width:none;max-height:96svh;border-radius:20px;padding:14px 13px calc(12px + env(safe-area-inset-bottom));
    transform:translateY(20px) scale(.97);
    display:flex;flex-direction:column;overflow:hidden;-webkit-overflow-scrolling:touch}
  .sheet::before{border-radius:20px}
  .sheet::after{left:16px;right:16px}
  .sheet-close{top:8px;right:8px;width:32px;height:32px;font-size:16px}
  .topbar{margin-bottom:10px;padding-right:38px;gap:10px;flex:none}
  .sheet-back{padding:5px 10px 5px 7px;font-size:11px;gap:4px}
  .steps{flex:1}

  /* each step becomes the scrolling body of the panel */
  .sheet > div[id^="step"]{display:none;flex-direction:column;min-height:0;flex:1}
  .sheet > div[id^="step"].on{display:flex}
  .stepbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-right:2px;margin-right:-2px}

  /* actions never scroll away */
  .sheet-actions{flex:none;margin-top:10px;padding-top:10px;border-top:1px solid rgba(234,240,255,.10);gap:10px}
  .sheet-actions .cta{width:100%;justify-content:center;text-align:center;padding:13px 14px;font-size:14px;
    white-space:normal;line-height:1.25;letter-spacing:0}

  .sheet .kick{font-size:10px;margin-bottom:6px;letter-spacing:.16em}
  .sheet .kick::before{width:14px}
  .sheet h3{font-size:22px;padding-right:38px;margin-bottom:3px}
  .sheet .lead{font-size:12.5px;margin-bottom:12px;line-height:1.4}

  .opt{padding:13px 44px 13px 14px;gap:10px;margin-bottom:9px;border-radius:14px}
  .opt::after{right:13px;width:18px;height:18px}
  .opt.sel::after{line-height:18px}
  .opt .t{font-size:16px}
  .opt[data-pass="couple"] .t::after{display:block;margin-left:0;margin-top:1px;font-size:9.5px}
  .opt .d{font-size:11.5px;line-height:1.3;margin-top:1px}
  .opt .p{margin-right:0;font-size:17px;white-space:nowrap}

  /* one partner per screen, so the card can afford to be compact */
  .pblock{padding:12px 12px 11px;border-radius:14px;margin-bottom:8px}
  .phead{font-size:15px;margin-bottom:10px;gap:8px}
  .pnum{width:22px;height:22px;font-size:11px}
  .rolelabel{margin:11px 0 6px;font-size:10px;letter-spacing:.12em}
  .chips{gap:6px}
  .chip{padding:9px 12px;font-size:12.5px}

  .frow{grid-template-columns:1fr 1fr;gap:8px}
  .fields{gap:9px}
  .fields label{font-size:10px;gap:4px;letter-spacing:.08em}
  /* 16px keeps iOS from zooming the page when a field is focused */
  .fields input{padding:11px 11px;font-size:16px;border-radius:11px}

  .summary{padding:10px 12px;font-size:12px;margin:10px 0 2px;gap:8px}
  .summary b{font-size:13px}
  .pay-amount-row{padding:8px 11px;margin-bottom:7px;gap:10px;border-radius:12px}
  .pay-amount-row .lbl{font-size:10.5px;line-height:1.3}
  .pay-amount-row .amt{font-size:16px}
  .paybox{padding:8px;border-radius:12px}
  .pay-divider{margin:8px 0 6px;font-size:9.5px}

  /* consent: real small print, but still a comfortable tap target */
  .consent{padding:7px 9px;margin:0 0 8px;gap:5px;border-radius:12px}
  .ccheck{font-size:10px;line-height:1.3;gap:7px}
  .ccheck input[type="checkbox"]{width:15px;height:15px;border-radius:4px}
  .ccheck input[type="checkbox"]:checked::after{font-size:10px}

  /* The payment step is the only one that will not fit a phone screen. Its
     header is now a single row: lock, label, certification. The kick line
     goes, since the progress bar already says which step this is, and the
     caption under the Pay button goes too, since the icons alone say it. */
  #step4 .kick{display:none}
  #step4 h3{display:none}
  .payhead{margin-bottom:8px;gap:6px}
  .payhead svg{width:13px;height:13px}
  .ph-t{font-size:16px}
  .ph-b{font-size:8.5px;padding:3px 7px;letter-spacing:.06em}
  .paymarks span:last-child{display:none}

  /* narrower column keeps a stacked Link compact rather than a wide bar */
  #express-checkout{max-width:250px;margin:0 auto}
  .warn{font-size:12px;margin-top:8px}
  .paymarks{margin-top:7px;font-size:9.5px;gap:5px}
  .paymarks svg{width:12px;height:12px}
  .paymarks-sep{height:10px}

  #paySuccess{padding:18px 2px}
  #paySuccess .big{font-size:22px}
  #paySuccess .tk .row{flex-direction:column;align-items:flex-start;gap:6px}
}

@supports not (height:1svh){
  @media (max-width:640px){ .sheet{max-height:90vh} }
}

/* landscape phone: almost the whole short screen, or nothing fits */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .modal{padding:8px}
  .sheet{max-height:96svh;padding-top:16px;padding-bottom:16px}
  .sheet h3{font-size:21px}
  .sheet .lead{margin-bottom:12px}
}

@media (max-width:380px){
  .opt .p{font-size:18px}
  .sheet h3{font-size:24px}
  .chip{padding:10px 13px;font-size:13px}
}