/*
 * The checkout page (/register — resources/views/checkout/page.blade.php, CR req_dj6sf4MOjVtA).
 * Ported from the operator-approved mockup (ship/dtc-signup-mockup/APPROVED-checkout.html): a
 * deliberate red/yellow ad-style exception to the brand palette, approved by the operator. The
 * pay button colour comes from config checkout.page.cta_color (body[data-cta]). No build step —
 * bump config/app.php asset_version when this changes.
 */
:root { --ink:#0b0b0f; --paper:#fffdf5; --yellow:#ffd400; --yellow-deep:#c9a300; --red:#e11d2a; --red2:#a10f19; --blue-deep:#0066cc; --muted:#5b6170; }
[hidden] { display:none !important; }
/* a pick that makes the page scroll must not narrow it: reserve the scrollbar's room */
html { scrollbar-gutter:stable; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Archivo',system-ui,sans-serif; color:var(--ink); line-height:1.35; min-height:100vh; min-height:100svh;
  background:radial-gradient(120% 90% at 50% 0%, #ff5a4f 0%, var(--red) 42%, var(--red2) 100%) fixed; }
a { color:var(--blue-deep); }

.bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg .rays { position:absolute; inset:-60%; background:repeating-conic-gradient(from 0deg at 50% 30%, rgba(255,255,255,.07) 0deg 6deg, transparent 6deg 12deg); }
.bg .art { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.bg .art.on { opacity:1; }
.bg .art svg { width:100%; height:100%; }
.bg .art.pro svg { opacity:.9; }
/* Fit-to-screen: on desktop the whole composition (header + card) is scaled to the window
   (zoom set by the fit script below); phones keep the normal stacked, scrolling layout. */
.stage { position:relative; z-index:1; }

/* ===== HERO: the TV-ad band ===== */
.hero { position:relative; color:#fff; text-align:center; padding:clamp(14px,2.4vw,22px) 16px clamp(22px,3vw,30px); }
.hero > * { position:relative; }
.kick { display:inline-block; background:var(--yellow); color:var(--ink); font-weight:900; text-transform:uppercase; letter-spacing:2px; font-size:.78rem; padding:6px 16px; transform:rotate(-2deg); box-shadow:0 4px 0 rgba(0,0,0,.3); }
.hero h1 { font-family:'Anton'; font-weight:400; text-transform:uppercase; line-height:.86; margin-top:0;
  font-size:clamp(2.6rem,6.4vw,4.6rem); letter-spacing:1px; color:var(--yellow);
  text-shadow:0 0 0 #000, 4px 4px 0 var(--ink), 8px 8px 0 rgba(0,0,0,.25); }
.hero h1 small { display:block; color:#fff; font-size:.42em; letter-spacing:3px; text-shadow:3px 3px 0 var(--ink); margin-bottom:.12em; line-height:1; }
.checks { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:16px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:clamp(.8rem,1.8vw,.98rem); }
.checks li::before { content:"✔"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--yellow); color:var(--ink); font-size:.75rem; margin-right:7px; vertical-align:1px; }

.burst { position:absolute; width:clamp(120px,14.5vw,164px); aspect-ratio:1; background:var(--yellow); color:var(--ink); display:flex; align-items:center; justify-content:center; text-align:center;
  clip-path:polygon(50% 0%,59% 16%,75% 6%,74% 24%,93% 21%,84% 38%,100% 50%,84% 62%,93% 79%,74% 76%,75% 94%,59% 84%,50% 100%,41% 84%,25% 94%,26% 76%,7% 79%,16% 62%,0% 50%,16% 38%,7% 21%,26% 24%,25% 6%,41% 16%);
  filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35)); }
.headline { position:relative; display:flex; align-items:center; justify-content:center; width:fit-content; max-width:100%; margin:10px auto 0; min-height:clamp(120px,14.5vw,164px); padding:0 clamp(138px,16.5vw,188px); }
.burst.l { left:0; top:50%; margin-top:calc(-1 * clamp(60px,7.25vw,82px)); transform:rotate(-12deg); }
.kick { position:relative; z-index:1; }
.burst.r { right:0; top:50%; margin-top:calc(-1 * clamp(60px,7.25vw,82px)); transform:rotate(12deg); background:#fff; }
.burst .s { font-weight:900; text-transform:uppercase; font-size:clamp(.54rem,.95vw,.68rem); letter-spacing:.4px; line-height:1.1; }
.burst .b { font-family:'Anton'; font-size:clamp(1.35rem,2.5vw,1.9rem); line-height:1; margin:2px 0; }
.burst > div { max-width:62%; text-align:center; }
@media (max-width:860px) { .burst { display:none; } .headline { padding:0; } }
@media (prefers-reduced-motion:no-preference) { .burst.l { animation:wob 2.4s ease-in-out infinite; } }
@keyframes wob { 0%,100% { transform:rotate(-12deg); } 50% { transform:rotate(-6deg) scale(1.06); } }

.offerbar { background:var(--ink); color:var(--yellow); text-align:center; font-weight:900; text-transform:uppercase; letter-spacing:.8px; padding:9px 12px; font-size:.86rem; }
.offerbar b { font-family:'Anton'; font-weight:400; background:var(--yellow); color:var(--ink); padding:1px 9px; border-radius:6px; margin-left:6px; font-variant-numeric:tabular-nums; }

/* ===== THE ORDER CARD: overlaps the hero, two equal halves ===== */
.page { width:100%; max-width:960px; margin:0 auto; padding:0 16px clamp(20px,3vw,32px); }
.card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:#fff; border:4px solid var(--ink); border-radius:24px; box-shadow:12px 12px 0 var(--ink); overflow:hidden; }
@media (max-width:760px) { .card { grid-template-columns:minmax(0,1fr); box-shadow:7px 7px 0 var(--ink); } }
.side { padding:clamp(16px,2.6vw,24px); display:flex; flex-direction:column; }
.plans-side { background:var(--yellow); border-right:4px solid var(--ink); }
@media (max-width:760px) { .plans-side { border-right:0; border-bottom:4px solid var(--ink); } }
.step-h { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.num { width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-family:'Anton'; font-size:1.4rem; border:3px solid var(--ink); flex:0 0 auto; }
.step-h h2 { font-family:'Anton'; font-weight:400; text-transform:uppercase; font-size:clamp(1.5rem,3vw,1.9rem); line-height:1; flex:1; }
.change { font:inherit; font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:.78rem; background:var(--ink); color:var(--yellow); border:0; border-radius:999px; padding:6px 12px; cursor:pointer; }

.plans { display:flex; flex-direction:column; gap:9px; flex:0 0 auto; }
.group { font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:1.6px; margin:4px 2px -2px; }
.plan { width:100%; font:inherit; color:inherit; cursor:pointer; text-align:left; display:flex; align-items:center; gap:12px; background:#fff; border:3px solid var(--ink); border-radius:14px; padding:11px 14px; box-shadow:4px 4px 0 var(--ink); transition:transform .08s, box-shadow .08s; }
.plan:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.plan .dot { width:22px; height:22px; border-radius:50%; border:3px solid var(--ink); flex:0 0 auto; display:grid; place-items:center; background:#fff; }
.plan[aria-checked="true"] { background:var(--ink); color:#fff; }
.plan[aria-checked="true"] .dot { border-color:var(--yellow); background:var(--ink); }
.plan[aria-checked="true"] .dot::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--yellow); }
.plan .nm { flex:1; font-weight:900; font-size:1.08rem; text-transform:uppercase; letter-spacing:.4px; }
.plan { position:relative; }
.plan .flag { position:absolute; top:-11px; left:56px; background:var(--red); color:#fff; font-weight:900; font-size:.66rem; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:4px; transform:rotate(3deg); border:2px solid var(--ink); white-space:nowrap; }
.plan .pr { font-family:'Anton'; font-size:1.55rem; white-space:nowrap; }
.plan .pr s { font-family:'Archivo'; font-size:.8rem; font-weight:800; opacity:.65; margin-right:6px; }
/* the Season Pass ticket: notched sides + a torn-off price stub */
.plan.ticket { border-radius:10px; padding-left:22px; padding-right:0; overflow:visible; }
.plan.ticket::before, .plan.ticket::after { content:""; position:absolute; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink); }
.plan.ticket::before { left:-13px; clip-path:inset(0 0 0 50%); }
.plan.ticket::after { right:-13px; clip-path:inset(0 50% 0 0); }
.plan.ticket .nm small { display:block; font-size:.62rem; letter-spacing:1.2px; opacity:.7; margin-top:2px; white-space:nowrap; }
.plan.ticket .stub { align-self:stretch; display:flex; align-items:center; border-left:3px dashed currentColor; padding:0 22px 0 16px; margin-left:4px; }
.sport-picked { display:flex; align-items:center; gap:10px; background:#fff; border:3px solid var(--ink); border-radius:12px; padding:8px 12px; box-shadow:3px 3px 0 var(--ink); }
.sport-picked .sp-ic { width:34px; height:34px; font-size:1.15rem; }
.sp-picked-nm { flex:1; font-weight:900; text-transform:uppercase; letter-spacing:.5px; font-size:1rem; }
.sp-change { font:inherit; font-weight:900; font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; background:none; border:0; color:var(--blue-deep); cursor:pointer; }
/* add-on upsell: a toggle switch under the Soccer / Hockey pass */
.addon { display:flex; align-items:center; gap:12px; background:#fff; border:3px dashed var(--ink); border-radius:12px; padding:10px 12px; cursor:pointer; position:relative; }
.addon-txt { flex:1; }
.addon-txt b { display:block; font-weight:900; font-size:.92rem; }
.addon-txt span { display:block; font-weight:600; font-size:.76rem; color:var(--muted); margin-top:2px; }
.addon-pr { font-family:'Anton'; font-size:1.2rem; }
.addon-input { position:absolute; opacity:0; pointer-events:none; }
.switch { width:50px; height:28px; border-radius:999px; background:#cbd5e1; border:3px solid var(--ink); position:relative; flex:0 0 auto; transition:background .15s; }
.switch i { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--ink); transition:left .15s; }
.addon.on { border-style:solid; background:#fffbe0; box-shadow:3px 3px 0 var(--ink); }
.addon.on .switch { background:#16a34a; }
.addon.on .switch i { left:24px; }
.youget li.bonus b::before { content:"★ BONUS · "; color:var(--red); }
.sp-h { font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:1.6px; margin:2px 2px 8px; }
.sp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sp { position:relative; font:inherit; color:inherit; cursor:pointer; background:#fff; border:3px solid var(--ink); border-radius:12px; padding:6px 8px; display:flex; flex-direction:row; align-items:center; gap:8px;
      box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s, background .12s; }
.sp:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.sp-ic { width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); display:grid; place-items:center; font-size:1rem; line-height:1; }
.sp-nm { font-weight:900; text-transform:uppercase; letter-spacing:.4px; font-size:.82rem; }
.sp-ok { display:none; position:absolute; top:-9px; right:-7px; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; border:2px solid var(--ink); font-size:.75rem; place-items:center; }
.sp[aria-checked="true"] { background:var(--ink); color:#fff; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--red2); }
.sp[aria-checked="true"] .sp-ic { box-shadow:0 0 0 3px var(--yellow); }
.sp[aria-checked="true"] .sp-ok { display:grid; }
.timer { font-weight:900; font-size:.9rem; color:var(--red2); text-transform:uppercase; letter-spacing:.5px; }
.timer b { font-family:'Anton'; font-weight:400; font-size:1.15rem; background:var(--ink); color:var(--yellow); padding:1px 8px; border-radius:6px; font-variant-numeric:tabular-nums; }
.youget { margin-top:4px; background:#fff; border:3px solid var(--ink); border-radius:14px; padding:12px 16px 14px; box-shadow:4px 4px 0 var(--ink); }
.yg-h { font-family:'Anton'; text-transform:uppercase; font-size:1.2rem; margin-bottom:10px; }
.youget ul { list-style:none; display:grid; gap:9px; }
.youget li { display:flex; gap:10px; align-items:flex-start; line-height:1.2; }
.youget li b { display:block; font-weight:900; font-size:.95rem; }
.youget li span { display:block; font-weight:600; font-size:.8rem; color:var(--muted); margin-top:1px; }
.youget li::before { content:"✔"; display:inline-grid; place-items:center; margin-top:1px; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; font-size:.75rem; flex:0 0 auto; }

.pay-side { background:var(--paper); padding:clamp(14px,2.4vw,20px); }
.coupon { position:relative; flex:1; display:flex; flex-direction:column; background:#fff; border:3px dashed var(--ink); border-radius:16px; padding:clamp(16px,2.4vw,22px) clamp(14px,2.4vw,20px) clamp(12px,2vw,16px); }
.coupon .scissors { position:absolute; top:-17px; left:22px; background:var(--paper); border-radius:4px; padding:0 6px; font-size:1.35rem; line-height:1; transform:rotate(-8deg); }
.coupon-tag { position:absolute; top:-13px; right:20px; background:var(--red); color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:1.4px; font-size:.68rem; padding:4px 10px; border-radius:4px; transform:rotate(2deg); }
.field { margin-bottom:10px; }
.field label { display:block; font-weight:900; font-size:.74rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.input { width:100%; border:3px solid var(--ink); border-radius:12px; padding:10px 12px; font:inherit; font-size:16px; background:#fff; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
.tab { border:3px solid var(--ink); border-radius:12px; padding:7px 4px; font-weight:900; font-size:.84rem; text-align:center; }
.tab[aria-selected="true"] { background:var(--ink); color:#fff; }
.check { display:flex; gap:9px; align-items:flex-start; font-size:.86rem; font-weight:700; margin:8px 0; }
.check input { margin-top:2px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--red); }
.total { margin-top:auto; display:flex; justify-content:space-between; align-items:center; border-top:3px dashed var(--ink); padding-top:14px; }
.total .lab { font-family:'Anton'; text-transform:uppercase; font-size:1.3rem; }
.total small { display:block; font-family:'Archivo'; font-weight:700; color:var(--muted); font-size:.8rem; text-transform:none; }
.total .amt { font-family:'Anton'; font-size:2.4rem; line-height:1; color:var(--red); }
/* pay-button colour test: the button should be the one colour nothing else on the page uses */
body[data-cta="green"] .cta { background:#16a34a; }
/* plans side: a stamp that answers the worry for THIS plan */
.plan-stamp { margin:auto 0; display:flex; align-items:center; gap:12px; background:#fff; border:3px solid var(--ink); border-radius:14px; padding:10px 14px; box-shadow:4px 4px 0 var(--ink); }
.ps-ic { width:44px; height:44px; flex:0 0 auto; border-radius:50%; background:var(--red); color:#fff; border:3px solid var(--ink); display:grid; place-items:center; font-family:'Anton'; font-size:1.5rem; transform:rotate(-8deg); box-shadow:3px 3px 0 var(--ink); }
.ps-txt b { display:block; font-family:'Anton'; font-weight:400; text-transform:uppercase; font-size:1.25rem; line-height:1.05; }
.ps-txt span { display:block; font-weight:700; font-size:.84rem; margin-top:2px; }
/* order form: blue = trust (the pay button stays the one contrasting colour) */
.pay-side .num { background:#1d6fe0; }
.pay-side .check input { accent-color:#1d6fe0; }
.pay-side .input:focus { outline:none; border-color:#1d6fe0; box-shadow:0 0 0 3px rgba(29,111,224,.25); }
.pay-side a { color:#0b5bd3; }
.pay-badge { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; background:#eaf3ff; border:2px solid #1d6fe0; border-radius:12px; padding:6px 10px; }
.pb-shield { width:20px; height:23px; flex:0 0 auto; }
.pay-badge p { font-weight:800; font-size:.78rem; color:#0b3d91; line-height:1.25; text-align:center; }
body[data-cta="blue"] .cta { background:#0b5bd3; }
/* the secure payment zone: shading + border around the card details (perceived security) */
.secure-zone { background:#eaf3ff; border:3px solid #1d6fe0; border-radius:14px; padding:10px 12px 12px; margin-bottom:10px; box-shadow:3px 3px 0 #0b3d91; }
.secure-zone .sz-h { display:flex; align-items:center; gap:7px; font-weight:900; font-size:.74rem; text-transform:uppercase; letter-spacing:1px; color:#0b3d91; margin-bottom:8px; }
.secure-zone .tab[aria-selected="true"] { background:#0b3d91; border-color:#0b3d91; }
.secure-zone .input:focus { outline:none; border-color:#1d6fe0; box-shadow:0 0 0 3px rgba(29,111,224,.25); }
.secure-zone .sz-h svg { width:16px; height:18px; flex:0 0 auto; }
.secure-zone .field { margin-bottom:0; }
.cta { width:100%; margin-top:10px; background:var(--red); color:#fff; border:4px solid var(--ink); border-radius:16px; padding:12px; cursor:pointer; font-family:'Anton'; font-size:clamp(1.35rem,3vw,1.7rem); text-transform:uppercase; letter-spacing:.5px; box-shadow:0 6px 0 var(--ink); text-shadow:2px 2px 0 rgba(0,0,0,.25); }
.cta:active { transform:translateY(4px); box-shadow:0 2px 0 var(--ink); }

.below { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(26px,3.5vw,36px); }
.below .pill { background:var(--ink); color:#fff; font-weight:800; font-size:1rem; padding:10px 18px; border-radius:999px; border:3px solid var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.35); }
.below .pill a { color:var(--yellow); font-weight:900; text-decoration:none; margin-left:4px; }
.below .pill a:hover { text-decoration:underline; }

/* ===== Real-app additions (not in the static mockup) ===== */
.cta { display:block; text-align:center; text-decoration:none; }
.cta:disabled { opacity:.6; cursor:not-allowed; }
.cta--link { color:#fff !important; }
.signed-in { font-weight:700; font-size:.9rem; margin-bottom:10px; overflow-wrap:anywhere; }
.field-err { color:#b91c1c; font-weight:800; font-size:.8rem; margin-top:6px; }
.consent.is-invalid { outline:3px solid #b91c1c; outline-offset:4px; border-radius:10px; }
.check--quiet { font-weight:600; font-size:.8rem; color:var(--muted); }
.tab { display:flex; align-items:center; justify-content:center; gap:6px; background:#fff; color:var(--ink); font:inherit; font-weight:900; font-size:.84rem; cursor:pointer; min-width:0; }
.tab { min-height:44px; white-space:nowrap; position:relative; }
.tab img { height:24px; width:auto; max-width:100%; flex:0 0 auto; }
.tab .tab-name { min-width:0; }
/* Apple Pay / Google Pay show their official acceptance mark (it already reads "Pay"), so the
   name is for screen readers only; the marks are never recoloured */
.tab .tab-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tab[data-tab="card"] img { height:18px; }
.tab[data-tab="card"][aria-selected="true"] img { filter:brightness(0) invert(1); }
.tabs.is-loading { opacity:.85; }
/* only the tabs that show split the row: Card alone fills it */
.tabs { grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
.wallet-note { font-weight:800; font-size:.86rem; color:#0b3d91; padding:6px 2px; }
.card-slot { min-height:46px; display:flex; align-items:center; }
.card-slot > div { width:100%; }
.card-loading { color:var(--muted); font-weight:700; font-size:.85rem; }
.pay-action #ckp-express { margin-top:10px; }
.pay-msg { margin-top:10px; background:#fff1f2; border:2px solid #b91c1c; border-radius:10px; padding:8px 10px; font-weight:800; font-size:.84rem; color:#7f1d1d; }
.plan .nm { min-width:0; }
/* the sport name inside a "What you get" line stays inline */
.youget li b [data-sport-name] { display:inline; font:inherit; color:inherit; margin:0; }
/* narrow phones: the ticket's fine print wraps instead of running under the price stub */
@media (max-width:420px) { .plan.ticket .nm small { white-space:normal; } }
/* while a payment is in progress the pick is locked (checkout-page.js lock()) */
.plans-side.is-locked .plans { opacity:.75; }
.plans-side.is-locked button:disabled, .addon.is-locked { cursor:not-allowed; }
.plans-side.is-locked .plan:hover, .plans-side.is-locked .sp:hover { transform:none; }