/* FWC checkout form (lander only): the same SquadUp fields on fewer rows.
   Loaded after fwc-flow-offers.css. Layout only. The only fields hidden
   are the one-option delivery dropdown and the optional password (below,
   each with its reason); the card ZIP stays on screen, pre-filled by
   js/fwc-checkout-form.js from the mailing ZIP.

   Selectors verified against the live checkout view (main-v2, 2026-09-22):
   .squadup-tickets-table > div > h3.squadup-questions-title + .form-group*,
   label[for="question-134085-none-{questionId}-none-none-null-none"],
   .squadup-checkout-attendee-info form > fieldset > .form-group,
   .squadup-payment-information #card-wrapper, #card-zip.
   Every pairing keys off a question id via :has(). A selector that
   misses leaves that row full width; a browser without :has() gets the
   stock stacked form. */

/* ── Question block: flex-wrap so chosen rows share a line ─────────── */
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table > div:has(> .squadup-questions-title){display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:16px}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table > div:has(> .squadup-questions-title) > *{flex:0 0 100%;min-width:0}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table > div:has(> .squadup-questions-title) > br{display:none}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table > div:has(> .squadup-questions-title) > .form-group{margin-bottom:14px}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table > div:has(> .squadup-questions-title) > .squadup-questions-title{margin-bottom:6px}

/* Survey pair: attended (191834) + heard (191839) */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191834-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191839-"]){flex-basis:calc(50% - 8px)}
/* Street (194915) + apt (194916) */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194915-"]){flex-basis:calc(60% - 8px)}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194916-"]){flex-basis:calc(40% - 8px)}
/* City (194917) / State (191833) / ZIP (191831) */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194917-"]){flex-basis:calc(44% - 10.67px)}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191833-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191831-"]){flex-basis:calc(28% - 10.67px)}

/* Per-ticket guest questions (tagged by label in js/fwc-checkout-form.js):
   first + last on one row, email + phone on the next. */
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="first"],
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="last"],
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="email"],
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="phone"]{flex-basis:calc(50% - 8px)}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="first"]{margin-top:30px;position:relative}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="last"]{margin-top:30px}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="first"]::before{content:"Your guests";position:absolute;left:0;top:-24px;font-family:'Gotham',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#404742;opacity:.75;white-space:nowrap}
/* Only the first guest block gets the eyebrow; later ones just space. */
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="phone"] ~ .form-group[data-fwc-pair="first"]::before{content:none}
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="phone"] ~ .form-group[data-fwc-pair="first"],
#squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="phone"] ~ .form-group[data-fwc-pair="last"]{margin-top:10px}

/* Long labels wrap; keep the control on its own line under them and let
   the dropdown fill its cell. */
#squadup-checkout.fwc-su-checkout-mode .form-group > label{display:block;margin-bottom:6px}
#squadup-checkout.fwc-su-checkout-mode .form-group .Dropdown-root,
#squadup-checkout.fwc-su-checkout-mode .form-group .Dropdown-control{width:100%;max-width:100%}

/* ── Dropdowns (react-dropdown) drawn like the text inputs ─────────── */
#squadup-checkout.fwc-su-checkout-mode .Dropdown-control{min-height:48px;padding:12px 44px 12px 12px;border:1px solid #BEC5A6 !important;border-radius:0 !important;background-color:#F7F8F4 !important;box-shadow:none !important;font-size:15px;line-height:22px;color:#333333;cursor:pointer;transition:none}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-control:hover{box-shadow:none !important}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-root.is-open .Dropdown-control{border-color:#404742 !important;box-shadow:inset 0 0 0 1px #404742 !important}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-placeholder{font-size:15px;line-height:22px;color:#333333;opacity:.6}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-placeholder.is-selected{opacity:1}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-arrow{top:50%;right:16px;margin-top:-3px;border-width:6px 5px 0;border-color:#404742 transparent transparent}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-root.is-open .Dropdown-arrow{border-width:0 5px 6px;border-color:transparent transparent #404742}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-menu{border:1px solid #BEC5A6;border-top:0;border-radius:0;box-shadow:0 6px 16px rgba(51,51,51,.12);background:#ffffff;max-height:260px}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-option{padding:11px 12px;font-size:15px;line-height:22px;color:#333333}
#squadup-checkout.fwc-su-checkout-mode .Dropdown-option:hover,
#squadup-checkout.fwc-su-checkout-mode .Dropdown-option.is-selected{background:#F7F8F4;color:#333333}

/* ── State: a real <select> laid over SquadUp's dropdown ───────────
   js/fwc-checkout-form.js appends select[data-fwc="state"] beside the
   .Dropdown-root. It is invisible; the guest sees SquadUp's control,
   taps ours (native picker, type-ahead, autofill), and SquadUp's control
   is what repaints once the choice has been driven into it. */
#squadup-checkout.fwc-su-checkout-mode .form-group > div:has(> select[data-fwc="state"]){position:relative}
#squadup-checkout.fwc-su-checkout-mode select[data-fwc="state"]{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;background:transparent;color:transparent;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none;z-index:2}
#squadup-checkout.fwc-su-checkout-mode .form-group > div:has(> select[data-fwc="state"]:focus-visible) .Dropdown-control{border-color:#404742 !important;box-shadow:inset 0 0 0 1px #404742 !important}
/* While the driver reads a dropdown's options, its menu must not flash. */
#squadup-checkout.fwc-su-dropdown-quiet .Dropdown-menu{visibility:hidden}

/* ── Age: year typed, 21+ box answered from it ─────────────────────
   SquadUp draws the 21+ box (191835) before the "Birthday (Year)"
   dropdown (201411). Year first: the box and everything after it move
   behind it in flex order (DOM untouched). js/fwc-checkout-form.js puts
   input[data-fwc="year"] beside the dropdown; while it is there the
   dropdown is off screen but still the answer of record. The box shows
   only while the year leaves the age in doubt (data-fwc-age="ask"). */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191835-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191835-"]) ~ *{order:1}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-201411-"]){order:0;flex-basis:100%}
#squadup-checkout.fwc-su-checkout-mode .form-group > div:has(> input[data-fwc="year"]) > .Dropdown-root{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
#squadup-checkout.fwc-su-checkout-mode .form-group > div:has(> input[data-fwc="year"]){position:relative}
#squadup-checkout.fwc-su-checkout-mode input[data-fwc="year"]{max-width:180px;letter-spacing:.08em}
#squadup-checkout.fwc-su-checkout-mode input[data-fwc="year"][aria-invalid="true"]{border-color:#D37872 !important;box-shadow:inset 0 0 0 1px #D37872 !important}
#squadup-checkout.fwc-su-checkout-mode .fwc-form-year-msg{margin:6px 0 0;font-family:'Gotham',sans-serif;font-size:12px;line-height:1.5;color:#D37872}
#squadup-checkout.fwc-su-checkout-mode .fwc-form-year-msg[hidden]{display:none}
#squadup-checkout.fwc-su-checkout-mode .form-group[data-fwc-age="auto"],
#squadup-checkout.fwc-su-checkout-mode .form-group[data-fwc-age="pending"],
#squadup-checkout.fwc-su-checkout-mode .form-group[data-fwc-age="under"]{display:none !important}

/* ── SquadUp's toast (react-s-alert), on brand ─────────────────────
   Stock: full-width #E74C3C bar glued to the bottom edge, under our
   sticky strip. Now a card in the brand dark, coral rule for errors,
   sage for success, sitting just above the strip. The bundle sets
   bottom:0 inline, hence the !important. */
#squadup-checkout .s-alert-box{position:fixed;left:50% !important;right:auto !important;bottom:76px !important;top:auto !important;width:calc(100% - 32px);max-width:560px;transform:translateX(-50%);padding:16px 48px 16px 20px;border-left:4px solid #E68D8A;border-radius:0;background:#404742;color:#ffffff;box-shadow:0 10px 30px rgba(51,51,51,.28);font-family:'Gotham',sans-serif;font-size:14px;line-height:1.5;z-index:1000}
#squadup-checkout .s-alert-box.s-alert-error{background:#404742;color:#ffffff;border-left-color:#E68D8A}
#squadup-checkout .s-alert-box.s-alert-success{background:#404742;color:#ffffff;border-left-color:#BEC5A6}
#squadup-checkout .s-alert-box.s-alert-warning,
#squadup-checkout .s-alert-box.s-alert-info{background:#404742;color:#ffffff;border-left-color:#F7F8F4}
#squadup-checkout .s-alert-box-inner{font-size:14px;line-height:1.5}
#squadup-checkout .s-alert-close{right:12px;top:50%;width:24px;height:24px;margin-top:-12px}
#squadup-checkout .s-alert-close::before,
#squadup-checkout .s-alert-close::after{width:2px;height:55%;background:#F7F8F4}
#squadup-checkout .s-alert-close:hover::before,
#squadup-checkout .s-alert-close:hover::after{background:#E68D8A}
@media (max-width:640px){
  #squadup-checkout .s-alert-box{bottom:84px !important;padding:14px 44px 14px 16px;font-size:13px}
}

/* ── Hold warning card (js/fwc-checkout-form.js, checkout only) ─────
   Same card as the toast above, cream rule: information, not an error. */
.fwc-form-hold{position:fixed;left:50%;bottom:76px;width:calc(100% - 32px);max-width:560px;transform:translateX(-50%);padding:16px 48px 16px 20px;border-left:4px solid #F7F8F4;background:#404742;color:#ffffff;box-shadow:0 10px 30px rgba(51,51,51,.28);font-family:'Gotham',sans-serif;font-size:14px;line-height:1.5;z-index:1000;animation:fwc-form-hold-in .25s ease}
.fwc-form-hold-text{margin:0;font-size:14px;line-height:1.5;color:#ffffff}
.fwc-form-hold-close{position:absolute;right:12px;top:50%;width:24px;height:24px;margin-top:-12px;padding:0;border:0;background:none;cursor:pointer}
.fwc-form-hold-close::before,
.fwc-form-hold-close::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:55%;margin:-27.5% 0 0 -1px;background:#F7F8F4;transform:rotate(45deg)}
.fwc-form-hold-close::after{transform:rotate(-45deg)}
.fwc-form-hold-close:hover::before,
.fwc-form-hold-close:hover::after{background:#E68D8A}
@keyframes fwc-form-hold-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:640px){
  .fwc-form-hold{bottom:84px;padding:14px 44px 14px 16px;font-size:13px}
}

/* ── Error routing: the field SquadUp's toast is about ─────────────── */
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention > label,
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention > label.control-label{color:#D37872}
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention .form-control,
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention input[type="text"],
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention input[type="email"],
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention input[type="tel"],
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention input[type="number"],
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention textarea,
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention .Dropdown-control{border-color:#D37872 !important;box-shadow:inset 0 0 0 1px #D37872 !important}
#squadup-checkout.fwc-su-checkout-mode .fwc-form-attention .checkbox input[type="checkbox"]{outline:2px solid #D37872;outline-offset:2px}
#squadup-checkout.fwc-su-checkout-mode .squadup-payment-information.fwc-form-attention{box-shadow:inset 3px 0 0 #D37872;padding-left:14px}

/* ── Eyebrows: one per group, on that group's first row ────────────── */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191834-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191839-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194915-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194916-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191838-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191840-"]){position:relative;margin-top:30px}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191834-"]),
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191839-"]){margin-top:8px}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191834-"])::before,
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194915-"])::before,
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191838-"])::before,
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191840-"])::before{position:absolute;left:0;top:-24px;font-family:'Gotham',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#404742;opacity:.75;white-space:nowrap}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191834-"])::before{content:"About you"}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194915-"])::before{content:"Your address"}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191838-"])::before{content:"Contact"}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191840-"])::before{content:"Agreements"}
/* The first eyebrow sits right under SquadUp's "Checkout questions" title. */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191834-"])::before{position:static;display:block;margin:0 0 10px}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191839-"]){padding-top:24px}

/* ── Agreements: box on the left, terms beside it, one row each ───── */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[type="checkbox"][value="I Agree"]){display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:start;margin-bottom:12px}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191837-"]){margin-top:0}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[value="I Agree"]) > label{grid-column:2;grid-row:1;margin:0;font-weight:400 !important;font-size:13px !important;letter-spacing:0 !important;line-height:1.55}
/* SquadUp's own "This question is required." label (label.control-label,
   no for=) lands under the terms, not on top of them. */
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[value="I Agree"]) > label.control-label:not([for]){grid-row:2;margin-top:4px;font-size:12px !important;color:#D37872}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[value="I Agree"]) > div{grid-column:1;grid-row:1}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[value="I Agree"]) .checkbox{margin:0;min-height:0}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[value="I Agree"]) .checkbox label{display:block;padding:0;margin:0;font-size:0 !important;line-height:0}
#squadup-checkout.fwc-su-checkout-mode .form-group:has(> div > .checkbox > label > input[value="I Agree"]) .checkbox input[type="checkbox"]{position:static;display:block;width:20px !important;height:20px !important;min-height:0;margin:1px 0 0;accent-color:#404742;cursor:pointer}

/* ── Purchaser: first + last on one row, email on its own ──────────── */
#squadup-checkout.fwc-su-checkout-mode .squadup-checkout-attendee-info form > fieldset{display:flex;flex-wrap:wrap;column-gap:16px}
#squadup-checkout.fwc-su-checkout-mode .squadup-checkout-attendee-info form > fieldset > .form-group{flex:0 0 100%;min-width:0;margin-bottom:14px}
#squadup-checkout.fwc-su-checkout-mode .squadup-checkout-attendee-info form > fieldset > .form-group:has(> #user-first-name),
#squadup-checkout.fwc-su-checkout-mode .squadup-checkout-attendee-info form > fieldset > .form-group:has(> #user-last-name){flex-basis:calc(50% - 8px)}
/* "Password (Optional)": SquadUp account creation, not part of this flow.
   Optional on their side (orders complete with it empty), so hiding it is
   safe. Marty, 2026-09-22. */
#squadup-checkout.fwc-su-checkout-mode .squadup-checkout-attendee-info form > fieldset > .form-group:has(> #user-password){display:none !important}

/* ── Ticket row: hide the delivery-method dropdown ───────────────────
   The event offers one method ("Ticketless"), so the dropdown is a
   choice of one. Marty, 2026-09-22. Second .row in the ticket's
   right-hand column, the one holding a Dropdown-root. */
#squadup-checkout.fwc-su-checkout-mode .event-checkout-detail .row.tickets > .col-sm-8 > .row:has(> div > .Dropdown-root){display:none !important}

/* ── Payment: drop the animated card picture and its spacer breaks ─── */
#squadup-checkout.fwc-su-checkout-mode .squadup-payment-information #card-wrapper{display:none}
#squadup-checkout.fwc-su-checkout-mode .squadup-payment-information > div > .text-center br{display:none}
#squadup-checkout.fwc-su-checkout-mode .squadup-payment-information > div > .text-center:has(> a.small){margin-bottom:14px}
#squadup-checkout.fwc-su-checkout-mode .squadup-payment-information .form-group{margin-bottom:14px}

/* Section rules a touch tighter */
#squadup-checkout.fwc-su-checkout-mode .gray-hr{margin:18px 0}

/* ── Narrow: everything back to one column ─────────────────────────── */
@media (max-width:640px){
  #squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table > div:has(> .squadup-questions-title) > .form-group,
  #squadup-checkout.fwc-su-checkout-mode .squadup-checkout-attendee-info form > fieldset > .form-group,
  #squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair]{flex-basis:100% !important}
  #squadup-checkout.fwc-su-checkout-mode .squadup-tickets-table .form-group[data-fwc-pair="last"]{margin-top:0}
  #squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-191839-"]),
  #squadup-checkout.fwc-su-checkout-mode .form-group:has(> label[for*="-194916-"]){margin-top:0;padding-top:0}
  /* 16px stops iOS Safari zooming the page when a field takes focus.
     fwc-flow-v5.css sets 15px !important on these; out-specify it. */
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode .form-control,
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode input[type="text"],
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode input[type="email"],
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode input[type="tel"],
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode input[type="password"],
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode input[type="number"],
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode textarea,
  .fwc-flow-widget.is-revealed #squadup-checkout.fwc-su-checkout-mode select[data-fwc="state"]{font-size:16px !important}
  #squadup-checkout.fwc-su-checkout-mode .Dropdown-control,
  #squadup-checkout.fwc-su-checkout-mode .Dropdown-placeholder,
  #squadup-checkout.fwc-su-checkout-mode .Dropdown-option{font-size:16px}
}