/*
 * One Prize — platform components layer.
 *
 * Loaded after one-prize.base.css (the FundViser V4 design system). Everything
 * here is a real feature of the live page that the design study does not cover:
 * winners, closed/sold-out notices, the sold-number board, billing address,
 * the combined card / charity-card field, Stripe's secure box, PayPal, email
 * verification, the fee choice, staff offline mode, the test-mode strip, the
 * site header, Turnstile and the thank-you page. Styling stays in the design's
 * token language (--accent, --paper, --ink, --line, --peach, --band …).
 */

:root {
  --on-ink:#fbf8f2; --ink-subtle:#d4c9d0; --error:#962e27;
  --digit-h:104px; --digit-w:80px; --digit-size:82px; --mobile-bar-h:0px;
}

/* ---------- Skip link, site header, test-mode strip ---------- */
.skip-link { position:absolute; left:16px; top:-60px; z-index:50; background:var(--ink); color:var(--on-ink); padding:10px 14px; border-radius:4px; font-size:14px; }
.skip-link:focus { top:12px; }

/* ---------- Header ---------- */
.site-header { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:6px; }
.brand { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700; line-height:1.15; letter-spacing:-.3px; min-width:0; }
.brand-logo { display:block; max-height:44px; max-width:220px; width:auto; height:auto; object-fit:contain; }
.brand-name { overflow-wrap:anywhere; }
.header-link { font-weight:700; font-size:14px; display:flex; gap:24px; align-items:center; padding:12px 0; white-space:nowrap; }
.header-link span { font-size:23px; }
.header-link.is-disabled { opacity:.6; }
.test-mode-banner { position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; padding:8px 16px; background:#ffd83d; color:#231b25; font-size:13px; line-height:1.4; text-align:center; }
.test-mode-banner strong { letter-spacing:.08em; }

/* ---------- Share ---------- */
.share { position:relative; display:flex; align-items:center; gap:10px; }
.share-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 16px; border:1px solid var(--line); border-radius:5px; background:var(--white); color:var(--ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:border-color .2s; }
.share-button:hover { border-color:var(--ink); }
.share-button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.share-status { font-size:13px; color:var(--muted); white-space:nowrap; }
.share-status:empty { display:none; }
.share-fallback { position:absolute; right:0; top:calc(100% + 8px); z-index:25; width:min(320px,calc(100vw - 40px)); background:var(--white); border:1px solid var(--line); border-radius:6px; padding:12px; box-shadow:0 8px 24px #0002; }
.share-fallback label { margin:0; font-size:13px; }
.share-fallback input:not([type=checkbox]):not([type=radio]) { height:44px; font-size:14px; }
.ty-actions .share { justify-content:center; }
.ty-actions .share-fallback { right:auto; left:50%; translate:-50% 0; }


/* ---------- Numbers already drawn ---------- */
.sold-board { margin-top:28px; max-width:370px; border-top:1px solid var(--line); padding-top:16px; }
.sold-board summary { cursor:pointer; font-size:14px; font-weight:700; display:flex; justify-content:space-between; gap:12px; }
.sold-board summary span { color:var(--muted); font-weight:400; }
.sold-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow:auto; }
.sold-list li { font-size:12px; font-variant-numeric:tabular-nums; padding:4px 8px; border-radius:3px; background:var(--peach); color:var(--ink); }
.sold-empty { font-size:13px; color:var(--muted); margin:12px 0 0; }

/* ---------- Winners ---------- */
.winners { margin-bottom:24px; background:var(--white); border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:0 0 6px 6px; padding:22px 28px 10px; }
.winners-heading { font-size:26px; letter-spacing:-.8px; margin:0 0 6px; }
.winner-card { display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
.winners-list>.winner-card:first-child { border-top:0; }
.winner-icon { flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--peach); color:var(--accent-text); display:flex; align-items:center; justify-content:center; }
.winner-icon svg { width:24px; height:24px; }
.winner-body { min-width:0; }
.winner-body>* { margin:0; }
.winner-prize { font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--accent-text); margin-bottom:2px!important; }
.winner-name { font-size:21px; font-weight:700; letter-spacing:-.4px; line-height:1.25; }
.winner-entry { font-size:15px; color:var(--ink); margin-top:2px!important; font-variant-numeric:tabular-nums; }
.winner-message { font-size:14px; line-height:1.55; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere; margin-top:6px!important; }
.winner-date { font-size:12px; color:var(--muted); margin-top:6px!important; }

/* ---------- Closed / sold-out notice ---------- */
.state-notice { background:var(--white); border:1px solid var(--line); border-top:4px solid var(--ink); border-radius:0 0 6px 6px; }
.state-notice { padding:40px 32px; }
.state-notice h3 { font-size:34px; letter-spacing:-1.2px; line-height:1.1; margin:0 0 12px; }
.state-notice p { font-size:15px; line-height:1.6; color:var(--muted); margin:0; }
.state-notice .state-donate { margin-top:22px; }

/* ---------- Field helpers, billing address ---------- */
.field-hint { font-size:12px; font-weight:400; color:var(--muted); margin:-8px 0 16px; line-height:1.5; }
.field-error { display:block; font-size:12px; font-weight:400; color:var(--error); line-height:1.5; margin-top:7px; }
.field-optional { font-weight:400; color:var(--muted); }
/* Billing address (pool setting): a group inside "Your details", ZIP included */
.entry-form .billing-address { margin:6px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.entry-form .billing-address>legend.sub-legend { float:left; width:100%; font-size:16px; letter-spacing:-.2px; margin-bottom:14px; }
.billing-address>legend+* { clear:both; }
.pac-container { z-index:1000; font-family:inherit; }
.dev-note { font-size:12px; line-height:1.5; font-weight:400; color:var(--muted); background:var(--peach); padding:10px 12px; border-radius:4px; margin:0 0 16px; }
/* Combined card field (ambulance pattern): brand icons, detected one highlighted */
.card-brand-icons { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 0 12px; }
.card-brand-icon { width:48px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; border-radius:4px; opacity:1; transition:opacity .25s ease,transform .25s ease,filter .25s ease; }
.card-brand-icon svg { width:100%; height:100%; display:block; }
.card-brand-icon img { width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }
.card-brand-icon b { font-size:9px; line-height:1.1; text-align:center; color:var(--ink); }
.card-brand-icon.active { opacity:1; transform:scale(1.12); }   /* full strength is the resting state; .dimmed pushes the rest back */
.card-brand-icon.dimmed { opacity:.25; filter:grayscale(100%); }
.card-number-input { letter-spacing:2px; font-variant-numeric:tabular-nums; }
.card-hint { margin:-8px 0 16px; }
.card-hint.is-warning { color:var(--error); }
.daf-selector { padding:2px 0 16px; }
.daf-selector-label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.daf-selector-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.daf-sel-btn { display:flex; align-items:center; gap:8px; padding:8px 16px; min-height:44px; border:2px solid var(--line); border-radius:6px; background:var(--white); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.daf-sel-btn:hover { border-color:var(--muted); }
.daf-sel-btn.active { border-color:var(--ink); background:var(--peach); }
.daf-sel-icon { width:32px; height:22px; object-fit:contain; border-radius:3px; }
.card-extra-row.single { grid-template-columns:1fr; }
.verify-email { margin-top:4px; }
.verify-email .field-hint { margin:0 0 10px; }
.verify-row { align-items:end; }
.verify-actions { margin-bottom:18px; }
.inline-link { border:0; background:none; padding:0; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.fee-choice { margin:0 0 14px; }

/* ---------- Terms + consent error ---------- */
.terms-text { font-size:13px; line-height:1.55; color:var(--muted); margin:12px 0 0 32px; white-space:pre-line; overflow-wrap:anywhere; }
.authorization .field-error { margin:8px 0 0 32px; }
.authorization:has(#opConsent[aria-invalid=true]) { box-shadow:inset 0 0 0 1px var(--error); }
.button-small { min-height:52px; padding:12px 18px; font-size:15px; width:100%; justify-content:center; }

/* ---------- Stripe secure card box, PayPal, Turnstile ---------- */
.stripe-field { display:block; margin-bottom:18px; }
.stripe-field .field-label { font-size:14px; font-weight:600; }
.stripe-input { height:52px; margin-top:9px; padding:0 14px; border:1px solid #cfc5bf; border-radius:4px; background:var(--white); display:flex; flex-direction:column; justify-content:center; transition:border-color .15s, box-shadow .15s; }
.stripe-input>* { width:100%; }
.stripe-input.is-focused { border-color:var(--ink); box-shadow:0 0 0 2px #38263812; }
.stripe-input.is-invalid { border-color:var(--error); }
.stripe-failed .stripe-input { background:#f6f3ef; }
.stripe-card .card-extra-row .stripe-field { margin-bottom:18px; }
.card-switch { margin:-6px 0 16px; font-size:14px; }
.card-switch .inline-link { font-weight:600; min-height:44px; }
.charity-card .card-switch { margin-top:0; }

/* ---------- PayPal ---------- */
.paypal-block { margin:2px 0 20px; }
.paypal-or { display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.paypal-or::before,.paypal-or::after { content:""; flex:1; height:1px; background:var(--line); }
.paypal-buttons { min-height:48px; }
.paypal-hint { margin:10px 0 0; }
.flow-paypal { max-width:360px; margin:22px auto 0; }

.op-turnstile { display:flex; justify-content:center; margin:0; min-height:0; }
.checkout-shell.is-final .op-turnstile { display:none; }

/* ---------- Status panel additions ---------- */
.flow-contact { font-size:14px; line-height:1.6; color:var(--muted); max-width:400px; margin:18px auto 0; overflow-wrap:anywhere; }
.flow-contact a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.flow-hold { font-size:14px; font-weight:700; margin:0 auto 6px; font-variant-numeric:tabular-nums; }
.number-display { display:flex; justify-content:center; gap:9px; margin:26px 0; }
.number-display[data-digits="4"] { --digit-w:66px; --digit-size:68px; --digit-h:92px; }
.number-display[data-digits="5"],.number-display[data-digits="6"],.number-display[data-digits="7"] { --digit-w:52px; --digit-size:54px; --digit-h:76px; gap:6px; }
.number-digit { height:var(--digit-h); width:var(--digit-w); border-radius:5px; background:var(--peach); overflow:hidden; color:var(--ink); font-size:var(--digit-size); font-weight:700; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.number-digit.lead-zero { opacity:.35; }
.digit-track { display:block; transform:translateY(0); }
.digit-track span { display:block; height:var(--digit-h); line-height:var(--digit-h); text-align:center; }
.number-display.settled .number-digit.lead-zero { opacity:.45; }
.flow-daf-pay { text-align:left; margin-top:24px; }

/* ---------- Thank-you page ---------- */
.thank-you { max-width:640px; padding-block:48px 80px; }
.ty-card { min-height:0; }
.ty-heading { font-size:38px; line-height:1.1; letter-spacing:-1.3px; margin:0 0 12px; }
.ty-text { font-size:15px; color:var(--muted); margin:0; }
.ty-receipt { margin-top:24px; background:var(--white); border:1px solid var(--line); border-radius:6px; padding:12px; overflow-x:auto; }
.ty-receipt img { height:auto; }
.ty-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:24px; }


/* ---------- Offline entry mode (staff only) ---------- */
.op-staff-bar { position:sticky; top:0; z-index:45; background:#1f3a5f; color:#fff; }
.op-staff-bar.is-ended { background:#7a2b24; }
.op-staff-bar-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding-block:10px; }
.op-staff-bar p { margin:0; font-size:14px; line-height:1.45; }
.op-staff-exit { min-height:44px; padding:8px 16px; border:1px solid #fff; border-radius:5px; background:transparent; color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.op-staff-exit:hover { background:#ffffff1f; }
.offline-note { margin:0 0 20px; padding:10px 12px; border-radius:4px; background:var(--peach); font-size:13px; line-height:1.5; }
.offline-address { margin:0 0 6px; }
.offline-address>summary { cursor:pointer; font-size:14px; font-weight:600; margin:0 0 16px; min-height:32px; }
.offline-types { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 18px; }
.offline-types>.field-label { width:100%; font-size:14px; font-weight:600; }
.offline-type { display:inline-flex; align-items:center; gap:8px; margin:0; padding:10px 16px; min-height:44px; border:1px solid var(--line); border-radius:5px; font-weight:600; cursor:pointer; }
.offline-type:has(input:checked) { border-color:var(--ink); background:var(--peach); }
.offline-type input { width:18px; height:18px; margin:0; accent-color:var(--ink); }
.offline-form textarea { display:block; width:100%; margin-top:9px; padding:10px 14px; border:1px solid #cfc5bf; border-radius:4px; background:var(--white); color:var(--ink); font:inherit; font-size:16px; font-weight:400; resize:vertical; }
.offline-check { margin:0 0 12px; }
.offline-result-body { padding:44px 28px 36px; text-align:center; }
.offline-result #opOffResultHeading { font-size:48px; letter-spacing:-1.8px; line-height:1.05; margin:6px 0 12px; outline:none; font-variant-numeric:tabular-nums; }
.offline-result.is-refusal #opOffResultHeading,.offline-result.is-ended #opOffResultHeading { font-size:30px; letter-spacing:-.8px; }
.offline-amount { font-size:26px; font-weight:700; color:var(--accent-text); margin:0 0 10px; }
.offline-result p { margin:0 0 10px; font-size:15px; line-height:1.55; color:var(--muted); }
.offline-receipt { font-weight:600; }
.offline-result-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:22px; }

@keyframes arrive { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes entry-cue { 0%,100% { box-shadow:0 0 0 0 transparent; } 40% { box-shadow:0 0 0 6px var(--peach); } }

/* ---------- Phone layout for the components above ---------- */
@media(max-width:650px) {
  :root { --digit-h:84px; --digit-w:62px; --digit-size:64px; }
  .site-header { min-height:50px; }
  .brand { font-size:13px; gap:8px; }
  .brand-logo { max-height:36px; max-width:160px; }
  .test-mode-banner { font-size:12px; padding:6px 12px; }
  .entry-action .share { order:-1; justify-content:center; }
  .entry-action .share-button { min-height:44px; padding:8px 14px; font-size:14px; border-color:transparent; background:transparent; text-decoration:underline; text-underline-offset:3px; }
  .share-fallback { left:50%; right:auto; translate:-50% 0; }
  .winners { padding:18px 18px 6px; }
  .winners-heading { font-size:22px; }
  .sold-board { max-width:none; }
  .state-notice { padding:28px 20px; }
  .state-notice h3 { font-size:28px; }
  .card-brand-icon { width:40px; height:27px; }
  .number-display[data-digits="4"] { --digit-w:54px; --digit-size:54px; --digit-h:74px; }
  .number-display[data-digits="5"],.number-display[data-digits="6"],.number-display[data-digits="7"] { --digit-w:42px; --digit-size:42px; --digit-h:60px; gap:4px; }
  .offline-result #opOffResultHeading { font-size:38px; }
  .thank-you { padding-block:28px 56px; }
  .ty-heading { font-size:30px; }
}
@media(max-width:400px) {
  .terms-text,.authorization .field-error { margin-left:0; }
  .card-brand-icon { width:36px; height:24px; }
  .number-display[data-digits="5"],.number-display[data-digits="6"],.number-display[data-digits="7"] { --digit-w:38px; --digit-size:38px; --digit-h:56px; gap:3px; }
}

/* ---------- Bridges between the design system and the live page ---------- */
/* Picture banner that failed to load: show its title as text instead of a gap. */
.banner-hero.banner-failed { min-height:0; padding:34px 0 0; }
.banner-hero.banner-failed h1.sr-only { position:static; width:auto; height:auto; clip-path:none; display:block; text-align:center; font-size:clamp(2rem,5vw,3.25rem); line-height:1.05; letter-spacing:-.04em; color:var(--accent-text); margin:0 auto; max-width:min(1280px,calc(100% - 96px)); }
/* Round label above the price on the band. */
.price-range>.round-label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-bottom:2px; }
/* "For <organization>" under the entry summary. */
.entry-summary-org { margin:14px 0 0; font-size:.875rem; }
/* Documents without appeal text beside them: the rail uses the full width. */
.letters-rail.is-solo { border:0; padding:0; }
.letters-rail.is-solo .letters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; }
/* Phone dock: the page script decides when it shows (.is-visible), not the viewport alone. */
@media(max-width:650px) {
  .mobile-entry-dock { display:none; }
  .mobile-entry-dock.is-visible { display:flex; }
  .mobile-entry-dock .mobile-bar-cta.is-disabled { opacity:.55; pointer-events:none; }
}
/* Share floats in the bottom-left corner — it takes no room in the layout. On phones it
   sits above the entry dock (the page script keeps --mobile-bar-h up to date). */
.share-float { position:fixed; left:20px; bottom:20px; z-index:30; }
.share-float .share-button { min-height:44px; padding:9px 14px; font-size:14px; background:var(--white); border:1px solid var(--line); color:var(--ink); border-radius:999px; box-shadow:0 6px 18px #0000001f; }
.share-float .share-button:hover { border-color:var(--ink); }
.share-float .share-status { background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
/* The copy-link box opens upwards, anchored to the left edge. */
.share-float .share-fallback { left:0; right:auto; top:auto; bottom:calc(100% + 8px); }
body.letter-open .share-float { display:none; }
@media(max-width:650px) {
  .share-float { left:14px; bottom:calc(var(--mobile-bar-h, 0px) + 14px); transition:bottom .2s ease; }
  .share-float .share-button { min-height:40px; padding:8px 12px; font-size:13px; }
}
/* Banner phone toggles (hide title / lead / cause / counter / button on phones). */
@media(max-width:650px) { .hide-mobile { display:none !important; } }
/* "Show ticket amount bar" off: the band keeps only the entry button. */
.ticket-offer.is-compact .offer-action { grid-template-columns:1fr; justify-items:center; }
/* Status panel: the heading is focused on every state change — no focus ring on it. */
#flow-heading:focus { outline:none; }
.flow-top-note { font-weight:400; color:var(--muted); text-align:right; }
/* A very pale campaign colour would vanish on the light surface: give the action a 1px edge
   in the readable accent (header.blade.php sets --accent-edge, transparent for every other colour). */
.entry-cta, .button, .authorize { box-shadow:inset 0 0 0 1px var(--accent-edge,transparent); }
/* Header: the design's brand strip on the band colour, with the campaign's own logo. */
.platform-strip.site-header { position:relative; gap:16px; justify-content:center; width:auto; margin:0; padding-inline:24px; }
.platform-strip .brand { display:inline-flex; align-items:center; }
.platform-strip .brand-logo { width:auto; max-width:190px; max-height:38px; filter:brightness(0) invert(1); }
.platform-strip .brand-name { color:#fff; font-size:1rem; font-weight:800; letter-spacing:-.01em; }
.platform-strip .header-link { position:absolute; right:24px; top:50%; translate:0 -50%; color:#fff; font-size:.875rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.platform-strip .header-link:hover { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:650px) {
  .platform-strip .brand-logo { max-width:150px; max-height:30px; }
  .platform-strip .header-link { right:16px; font-size:.8125rem; }
}

/* Organizations write their appeal with whatever heading levels their editor gives them:
   h4 reads like h3 here, and the design's rule above its own closing heading does not
   belong above an arbitrary one. */
.complete-appeal h4 { font-size:1.45rem; font-weight:800; line-height:1.25; letter-spacing:-.035em; margin:38px 0 16px; color:var(--ink); text-wrap:balance; }
.complete-appeal h4:first-child { margin-top:0; }
.complete-appeal h3:last-of-type { padding-top:0; border-top:0; }
@media(max-width:999px) { .complete-appeal h4 { font-size:1.35rem; line-height:1.3; margin-top:30px; } }
@media(max-width:650px) { .complete-appeal h4 { font-size:1.25rem; line-height:1.35; margin:28px 0 14px; } }
/* Platform mark in the header strip: always white on the band. */
.platform-strip .platform-logo { width:104px; max-width:104px; max-height:none; height:auto; filter:brightness(0) invert(1); }
@media(max-width:999px) { .platform-strip .platform-logo { width:92px; } }
@media(max-width:650px) { .platform-strip .platform-logo { width:82px; } }

/* Turnstile sits right under the form: tighten the gap above it, give it room below. */
.op-antibot { margin:0; padding-top:20px; }

/* The band CTA keeps the design's weight even though our label sits in a <strong>. */
.entry-cta strong { font-weight:inherit; }
/* The drawing date under the button reads like the design's <time>. */
.form-drawing-date time { font-weight:600; color:var(--ink); white-space:nowrap; }