/* Widget design system: the default theme (FQ-64).

   A static base layer, linked from WidgetLayout, so it loads on every guest-facing widget page
   (and on the server pages that fall back to that layout: Error, 404). The location's Widget CSS
   field (FQ-39) is the override layer on top: it renders later in the page, and CustomMarkupType
   37's default stays NULL. The Custom Markup settings page also links this sheet so its default
   previews are styled; the page-level rules need .fq-widget, which that page never carries.

   PRIORITY: lowest in the stack, by design. Every selector carries only the specificity of the
   platform rule it replaces (Bootstrap, app.css, a component's scoped style) and nothing more:
     tokens                 :where(:root)                          0,0,0
     shipped default markup :where(.fq-card) h2                    0,0,1
     platform components    :where(.fq-widget) .btn-primary        0,1,0  (same as Bootstrap)
   The location's Widget CSS loads after this sheet, so any of its rules at the same or higher
   specificity wins - no !important needed. Keep it that way: no !important, no ID specificity
   (IDs only ever inside :where()).
   One exception: the EnRoute slider's unscoped <style> block renders after this sheet, so its
   rules here carry one extra class (.fq-widget .slider-text, 0,2,0). A location overriding them
   writes the same selector or heavier; a plain .slider-text already lost to that block before.

   RE-SKIN: set brand tokens in a :root { } block in the location's Widget CSS. Status colours are
   deliberately not tokens - a guest reads queue state the same way everywhere.

   SWAP THEME: put ONE line at the very top of the location's Widget CSS (the browser ignores an
   @import that follows any other rule), then any brand overrides below it:
       @import url("/css/widget-themes/evening.css");
       @import url("/css/widget-themes/market.css");

   CLASSES used by the shipped default markup:
     fq-masthead                                   venue name and address (kiosk and TV: name only)
     fq-intro  fq-intro--live  fq-eyebrow          section introduction, small label above a title
     fq-card  fq-card__head  fq-card__icon  fq-card__actions    call-to-action card
     fq-callout  fq-callout--warn                  note with an icon (lead time, check-in rule)
     fq-button                                     call-to-action link
     fq-status  fq-status--open|closed|warn  fq-status__icon  fq-status__title   queue state
     fq-confirm  fq-confirm--ok|pending|info  fq-confirm__mark  fq-confirm__calendar  fq-ticket
     fq-keep                                       never break inside ("7:00 AM", "2 to 8")

   FIELD IDS: each default wraps its content in one element whose id is "fq-" plus the field name
   in kebab case, so a location can restyle one field and leave the rest alone:
     #fq-widget-top-header  #fq-widget-location-top-header  #fq-book-top-header
     #fq-group-request-top-header  #fq-widget-kiosk-top-header  #fq-widget-tv-top-header
     #fq-widget-booking-header  #fq-widget-group-header  #fq-widget-arrival-list-header
     #fq-book-instructions  #fq-group-request-instructions
     #fq-book-done-approved  #fq-book-done-approval-needed  #fq-book-done-call-ahead
     #fq-group-book-done-approved  #fq-group-book-done-approval-needed
     #fq-enroute-instructions  #fq-enroute-group-request-instructions
     #fq-enroute-reservation-instructions  #fq-arrival-list-enforced-instructions
     #fq-arrival-list-queue-closed  #fq-arrival-list-queue-empty  #fq-business-is-closed */

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:where(:root) {
    /* Brand - the documented values a location changes. The default is the EnRoute logo blue,
       deepened from #0082ca so white button text and blue links on white clear WCAG AA with room
       to spare (5.6:1). */
    --fq-accent: #006cad;
    --fq-accent-ink: #fff;
    --fq-header: #0b2239;
    --fq-surface: #fff;
    --fq-border: #dce5ee;
    --fq-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fq-font-heading: var(--fq-font);

    /* Derived - rarely changed */
    --fq-page: #fff;
    --fq-ink: #26323f;
    --fq-ink-muted: #5d6b7b;
    /* The accent as text and icon colour; a theme whose accent is too light to read on its
       surface (Market's sunflower) points this at the ink instead. */
    --fq-accent-text: var(--fq-accent);
    --fq-tint: color-mix(in srgb, var(--fq-accent) 8%, var(--fq-surface));
    --fq-accent-hover: color-mix(in oklab, var(--fq-accent) 84%, #000);
    --fq-radius: 16px;
    --fq-radius-sm: 10px;
    --fq-radius-button: 12px;
    --fq-shadow: 0 1px 2px rgb(11 34 57 / .05), 0 8px 24px -10px rgb(11 34 57 / .16);
    --fq-measure: 36rem;
}

@supports not (color: color-mix(in srgb, red, red)) {
    :where(:root) {
        --fq-tint: #eef3f8;
        --fq-accent-hover: var(--fq-accent);
    }
}

/* ---------- Page ---------- */

/* One element, the same as app.css's html, body rule: wins over it on order. */
html:where(:has(.fq-widget)),
body:where(:has(.fq-widget)) {
    background-color: var(--fq-page);
}

body:where(:has(.fq-widget)) {
    font-family: var(--fq-font);
    color: var(--fq-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(.fq-widget) hr {
    border-top-color: var(--fq-border);
    opacity: 1;
}

:where(.fq-widget) footer {
    padding-block: .5rem 1.5rem;
    opacity: .75;
}

:where(.fq-keep) {
    white-space: nowrap;
}

/* Above a guest form, the blocks line up with the form's own width (DetailsForm, 480px). */
:where(.fq-widget .container:has(> form)) {
    --fq-measure: 30rem;
}

/* ---------- Masthead: venue name and address ---------- */

:where(.fq-masthead) {
    text-align: center;
    padding: clamp(1.5rem, 5vw, 2.75rem) 0 clamp(.5rem, 2vw, 1rem);
}

:where(.fq-masthead) h1 {
    font-family: var(--fq-font-heading);
    font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--fq-header);
    margin: 0;
    text-wrap: balance;
}

:where(.fq-masthead) p {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    margin: .75rem 0 0;
    font-size: .9375rem;
    color: var(--fq-ink-muted);
    text-wrap: balance;
}

/* The pin, drawn here so an empty address leaves nothing behind. */
:where(.fq-masthead) p::before {
    content: "\f3c5";
    font: var(--fa-font-solid);
    font-size: .875em;
    color: var(--fq-accent-text);
}

:where(.fq-masthead) p:where(:empty) {
    display: none;
}

/* ---------- Section introduction ---------- */

:where(.fq-intro) {
    text-align: center;
    max-width: var(--fq-measure);
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 1.25rem;
}

:where(.fq-intro) h2 {
    font-family: var(--fq-font-heading);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fq-header);
    margin: 0 0 .5rem;
    text-wrap: balance;
}

:where(.fq-intro) > p {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--fq-ink-muted);
    margin: 0;
    text-wrap: balance;
}

/* After the paragraph rules: same specificity, so order decides. */
p:where(.fq-eyebrow) {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fq-accent-text);
    margin: 0 0 .625rem;
}

:where(.fq-intro--live) p:where(.fq-eyebrow)::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgb(22 163 74 / .45);
}

@media (prefers-reduced-motion: no-preference) {
    :where(.fq-intro--live) p:where(.fq-eyebrow)::before {
        animation: fq-live 2s ease-out infinite;
    }
}

@keyframes fq-live {
    0% { box-shadow: 0 0 0 0 rgb(22 163 74 / .45); }
    70%, 100% { box-shadow: 0 0 0 .5rem rgb(22 163 74 / 0); }
}

/* Followed by a closed status, the list is not live: a still, grey dot. */
:where(.fq-intro--live:has(~ .fq-status--closed, ~ .fq-status--warn)) p:where(.fq-eyebrow)::before {
    background: #9aa1ab;
    box-shadow: none;
    animation: none;
}

/* ---------- Callouts: a note with an icon ---------- */

:where(.fq-callout) {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: var(--fq-measure);
    margin: 1rem auto;
    padding: .875rem 1.125rem;
    border-radius: var(--fq-radius-sm);
    background: var(--fq-tint);
    text-align: left;
    font-size: .9375rem;
    line-height: 1.55;
}

:where(.fq-callout) > i {
    flex: none;
    width: 1.25rem;
    margin-top: .2rem;
    text-align: center;
    color: var(--fq-accent-text);
}

:where(.fq-callout) p {
    margin: 0;
    text-wrap: pretty;
}

:where(.fq-callout--warn) {
    color: #6b4300;
    background: #fff5e1;
    box-shadow: inset 3px 0 0 #e8a020;
}

:where(.fq-callout--warn) > i {
    color: #b9760a;
}

/* ---------- Cards: booking and group calls to action ---------- */

:where(.fq-card) {
    display: flex;
    flex-direction: column;
    max-width: var(--fq-measure);
    margin: 1.5rem auto;
    padding: clamp(1.25rem, 3.5vw, 1.75rem);
    text-align: left;
    background: var(--fq-surface);
    border: 1px solid var(--fq-border);
    border-radius: var(--fq-radius);
    box-shadow: var(--fq-shadow);
}

:where(.fq-card__head) {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1rem;
}

:where(.fq-card__icon) {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--fq-tint);
    color: var(--fq-accent);
    font-size: 1.125rem;
}

:where(.fq-card) h2 {
    font-family: var(--fq-font-heading);
    font-size: 1.3125rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--fq-header);
    margin: 0;
    text-wrap: balance;
}

:where(.fq-card) > p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    text-wrap: pretty;
}

:where(.fq-card__head) p:where(.fq-eyebrow) {
    margin: 0 0 .2rem;
}

:where(.fq-card) :where(.fq-callout) {
    margin: 0;
}

:where(.fq-card__actions) {
    margin-top: auto;
    padding-top: 1.25rem;
}

/* ---------- The call-to-action link ---------- */

/* app.css paints every link #006bb7. Only links inside fq-* blocks follow the brand; a
   location's own markup keeps what it has today. */
:where(.fq-masthead, .fq-intro, .fq-card, .fq-callout, .fq-confirm, .fq-status) a {
    color: var(--fq-accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* [RevealLocationPhone] renders "Click to Call" as a span, not a link. In a location's own markup
   it takes app.css's link colour, like the Tap to Call link phones show in its place; inside
   fq-* blocks the next rule gives it the brand colour. */
:where(.fq-widget) :where(.ERClickRevealTel) {
    color: #006bb7;
}

:where(.fq-masthead, .fq-intro, .fq-card, .fq-callout, .fq-confirm, .fq-status) :where(.ERClickRevealTel) {
    color: var(--fq-accent-text);
    text-underline-offset: 3px;
}

/* After the link rule: same specificity, so order decides. */
a:where(.fq-button) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .75rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    color: var(--fq-accent-ink);
    background-color: var(--fq-accent);
    border: 1px solid var(--fq-accent);
    border-radius: var(--fq-radius-button);
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

a:where(.fq-button)::after {
    content: "\f061";
    font: var(--fa-font-solid);
    font-size: .875em;
    transition: transform .15s ease;
}

a:where(.fq-button):where(:hover, :focus-visible) {
    color: var(--fq-accent-ink);
    background-color: var(--fq-accent-hover);
    border-color: var(--fq-accent-hover);
}

a:where(.fq-button):where(:hover)::after {
    transform: translateX(3px);
}

a:where(.fq-button):where(:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--fq-accent) 30%, transparent);
    outline-offset: 2px;
}

/* ---------- Status: queue open / closed / business closed ---------- */

:where(.fq-status) {
    max-width: var(--fq-measure);
    margin: 1.5rem auto;
    padding: clamp(1.5rem, 4vw, 2rem) 1.5rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--fq-radius);
}

:where(.fq-status__icon) {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto .875rem;
    border-radius: 50%;
    font-size: 1.375rem;
    background: rgb(255 255 255 / .75);
}

:where(.fq-status) p {
    font-size: .9375rem;
    line-height: 1.5;
    margin: .375rem 0 0;
    text-wrap: balance;
}

p:where(.fq-status__title) {
    font-family: var(--fq-font-heading);
    font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
}

:where(.fq-status--open) {
    color: #0b5e43;
    background: #e8f6ef;
    border-color: #c5e8d6;
}

:where(.fq-status--closed) {
    color: #3f4650;
    background: #f2f4f7;
    border-color: #e1e5ea;
}

:where(.fq-status--warn) {
    color: #6b4300;
    background: #fff5e1;
    border-color: #f5dfb0;
}

/* ---------- Confirmation: booking and group done pages, EnRoute ---------- */

:where(.fq-confirm) {
    max-width: var(--fq-measure);
    margin: clamp(.5rem, 2vw, 1.5rem) auto 1.5rem;
    text-align: center;
}

:where(.fq-confirm__mark) {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--fq-accent-text);
    background: var(--fq-tint);
}

:where(.fq-confirm--ok .fq-confirm__mark) {
    color: #12805c;
    background: #e3f5ec;
}

:where(.fq-confirm--pending .fq-confirm__mark) {
    color: #a35f00;
    background: #fff1d6;
}

:where(.fq-confirm) h2 {
    font-family: var(--fq-font-heading);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fq-header);
    margin: 0 0 .5rem;
    text-wrap: balance;
}

:where(.fq-confirm) > p {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--fq-ink-muted);
    margin: 0 0 1rem;
    text-wrap: balance;
}

/* No fq-* block sets overflow: hidden, so the Add to Calendar dropdown is never clipped (FQ-8).
   One element, to tie Bootstrap's ul padding and margin reset and win on order. */
ul:where(.fq-ticket) {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    text-align: left;
    background: var(--fq-surface);
    border: 1px solid var(--fq-border);
    border-radius: var(--fq-radius);
    box-shadow: var(--fq-shadow);
}

:where(.fq-ticket) li {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.25rem;
    font-weight: 650;
    color: var(--fq-header);
}

:where(.fq-ticket) li + li {
    border-top: 1px dashed var(--fq-border);
}

:where(.fq-ticket) i {
    flex: none;
    width: 1.25rem;
    text-align: center;
    color: var(--fq-accent-text);
}

:where(.fq-confirm__calendar) {
    margin-top: 1rem;
}

/* ---------- Platform: buttons ---------- */

:where(.fq-widget) .btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-weight: 650;
    --bs-btn-border-radius: var(--fq-radius-button);
    --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--fq-accent) 28%, transparent);
}

:where(.fq-widget) .btn-lg {
    --bs-btn-padding-y: .875rem;
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-border-radius: var(--fq-radius-button);
}

/* app.css draws a blue ring on every focused button, mouse clicks included; keep a ring for
   keyboard focus only, in the brand colour. */
:where(.fq-widget) .btn:focus {
    box-shadow: none;
}

:where(.fq-widget) .btn:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* app.css paints .btn-primary with literal colours, so restate Bootstrap's own var() declarations
   as well as setting the variables. */
:where(.fq-widget) .btn-primary {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    --bs-btn-color: var(--fq-accent-ink);
    --bs-btn-bg: var(--fq-accent);
    --bs-btn-border-color: var(--fq-accent);
    --bs-btn-hover-color: var(--fq-accent-ink);
    --bs-btn-hover-bg: var(--fq-accent-hover);
    --bs-btn-hover-border-color: var(--fq-accent-hover);
    --bs-btn-active-color: var(--fq-accent-ink);
    --bs-btn-active-bg: var(--fq-accent-hover);
    --bs-btn-active-border-color: var(--fq-accent-hover);
    --bs-btn-disabled-color: var(--fq-accent-ink);
    --bs-btn-disabled-bg: var(--fq-accent);
    --bs-btn-disabled-border-color: var(--fq-accent);
}

/* Option chips (custom-field answers): neutral until chosen, then the brand colour. */
:where(.fq-widget) .btn-outline-primary {
    --bs-btn-color: var(--fq-ink);
    --bs-btn-bg: var(--fq-surface);
    --bs-btn-border-color: var(--fq-border);
    --bs-btn-hover-color: var(--fq-header);
    --bs-btn-hover-bg: var(--fq-tint);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fq-accent) 35%, var(--fq-border));
    --bs-btn-active-color: var(--fq-accent-ink);
    --bs-btn-active-bg: var(--fq-accent);
    --bs-btn-active-border-color: var(--fq-accent);
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 600;
}

/* Cancel on the confirmation pages: available, not shouting. */
:where(.fq-widget) .btn-danger {
    --bs-btn-color: #b42318;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #efb4ad;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b42318;
    --bs-btn-hover-border-color: #b42318;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #912018;
    --bs-btn-active-border-color: #912018;
    --bs-btn-disabled-color: #b42318;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #efb4ad;
}

/* ---------- Platform: the join / refresh pair ---------- */

:where(.fq-widget) .btn-group {
    display: flex;
    width: 100%;
}

/* Bootstrap squares the join button's right corners because the refresh button sits in a sibling
   div; this is Bootstrap's own selector, so it ties and wins on order. */
:where(.fq-widget) .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: var(--bs-btn-border-radius);
}

:where(.fq-widget .btn-group) > .btn {
    flex: 1 1 auto;
    gap: .5rem;
    --bs-btn-padding-y: .875rem;
    --bs-btn-font-size: 1.0625rem;
}

:where(.fq-widget .btn-group) > .btn-primary::after {
    content: "\f061";
    font: var(--fa-font-solid);
    font-size: .875em;
    margin-left: .5rem;
}

/* The refresh button: a quiet square beside the main action. After .btn-primary, same weight. */
:where(.fq-widget .btn-group > div) > .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 3.375rem;
    --bs-btn-padding-x: 0;
    --bs-btn-color: var(--fq-ink);
    --bs-btn-bg: var(--fq-surface);
    --bs-btn-border-color: var(--fq-border);
    --bs-btn-hover-color: var(--fq-header);
    --bs-btn-hover-bg: var(--fq-tint);
    --bs-btn-hover-border-color: var(--fq-border);
    --bs-btn-active-color: var(--fq-header);
    --bs-btn-active-bg: var(--fq-tint);
    --bs-btn-active-border-color: var(--fq-border);
    --bs-btn-disabled-color: var(--fq-ink);
    --bs-btn-disabled-bg: var(--fq-surface);
    --bs-btn-disabled-border-color: var(--fq-border);
}

/* The live queue count, under the waitlist introduction. Only the properties the component's
   scoped rule (.queueInfoText[b-...]) sets are raised to tie it; the rest stay at 0,1,0 so a
   location's own .queueInfoText still wins. */
:where(.fq-widget) .queueInfoText[class] {
    display: inline-flex;
    margin: .25rem auto 1.25rem;
    font-size: .9375rem;
    font-weight: 700;
}

:where(.fq-widget) .queueInfoText {
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    color: #0b5e43;
    background: #e8f6ef;
    border-radius: 999px;
}

:where(.fq-widget) .queueInfoText::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #16a34a;
}

/* ---------- Platform: guest forms ---------- */

:where(.fq-widget form) h4,
:where(.fq-widget form) h5 {
    font-family: var(--fq-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fq-header);
    margin: 1.5rem 0 .75rem;
}

:where(.fq-widget) .form-control,
:where(.fq-widget) .form-select {
    border-color: var(--fq-border);
    border-radius: var(--fq-radius-sm);
}

:where(.fq-widget) .form-control:focus,
:where(.fq-widget) .form-select:focus {
    border-color: color-mix(in srgb, var(--fq-accent) 60%, var(--fq-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fq-accent) 15%, transparent);
}

:where(.fq-widget) .form-check-input:checked {
    background-color: var(--fq-accent);
    border-color: var(--fq-accent);
}

/* The party-size number box; its component fixes the height and border colour itself. */
:where(.fq-widget) input.e-style {
    border-style: solid;
    border-radius: var(--fq-radius-sm);
    font-weight: 700;
}

/* ---------- Platform: custom-field questions (DetailsForm) ----------
   Each question is its own card; options with descriptions become rows that select on a click
   anywhere in the row. */

:where(.fq-widget) .custom-field {
    padding: 1rem 1.125rem 1.125rem;
    background: var(--fq-surface);
    border: 1px solid var(--fq-border);
    border-radius: var(--fq-radius-sm);
}

/* Bootstrap's mb-2 on each field is !important; a top margin collapses with it to a 12px gap. */
:where(.fq-widget) .custom-field + .custom-field {
    margin-top: .75rem;
}

:where(.fq-widget) .custom-field-label {
    font-weight: 650;
    color: var(--fq-header);
}

:where(.fq-widget) .custom-field-description {
    color: var(--fq-ink-muted);
}

:where(.fq-widget .custom-field-options-stacked) .form-check {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: .625rem .875rem .625rem 2.375rem;
    border: 1px solid var(--fq-border);
    border-radius: var(--fq-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

:where(.fq-widget .custom-field-options-stacked) .form-check:where(:hover) {
    border-color: color-mix(in srgb, var(--fq-accent) 40%, var(--fq-border));
}

:where(.fq-widget .custom-field-options-stacked) .form-check:where(:has(:checked)) {
    border-color: var(--fq-accent);
    background: var(--fq-tint);
}

:where(.fq-widget .custom-field-options-stacked .form-check) label {
    cursor: pointer;
}

/* The label's hit area is stretched over the row, so the whole row selects the option. */
:where(.fq-widget .custom-field-options-stacked .form-check) label::before {
    content: "";
    position: absolute;
    inset: 0;
}

/* ---------- Platform: the booking details step (WidgetBookDetails) ----------
   Its scoped stylesheet hard-codes light blues, so the summary card, the flexible-timing toggle
   and the time slider stayed light under every theme. Each rule below has the same weight as the
   scoped rule it recolours (.x[b-...] is one class plus one attribute; .fq-widget .x is two
   classes) and wins on order. Layout, sizes and the slider's !important handle are untouched. */

.fq-widget .booking-summary-card,
.fq-widget .booking-controls-card {
    border-color: var(--fq-border);
    box-shadow: var(--fq-shadow);
}

.fq-widget .booking-summary-card {
    color: var(--fq-header);
    background: var(--fq-tint);
}

.fq-widget .booking-controls-card {
    background: var(--fq-surface);
}

.fq-widget .booking-summary-details {
    color: var(--fq-ink);
}

.fq-widget .booking-summary-time,
.fq-widget .toggle-caption {
    color: var(--fq-ink-muted);
}

.fq-widget .booking-summary-time strong,
.fq-widget .preferred-time-badge .badge-time {
    color: var(--fq-header);
}

.fq-widget .summary-edit-button {
    color: var(--fq-accent-text);
    background: var(--fq-surface);
    border-color: color-mix(in srgb, var(--fq-accent-text) 35%, transparent);
}

.fq-widget .summary-edit-button:hover {
    color: var(--fq-accent-text);
    background: var(--fq-surface);
    border-color: var(--fq-accent-text);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--fq-accent) 25%, transparent);
}

.fq-widget .summary-edit-button:focus-visible {
    outline-color: var(--fq-accent-text);
}

.fq-widget .segment-control {
    background: var(--fq-tint);
}

.fq-widget .segment-control::before {
    background: var(--fq-surface);
    box-shadow: 0 2px 6px rgb(0 0 0 / .12);
}

.fq-widget .segment-control .segment {
    color: var(--fq-ink-muted);
}

.fq-widget .segment-control .segment:hover,
.fq-widget .segment-control input[type="radio"]:checked + .segment {
    color: var(--fq-header);
}

.fq-widget .segment-control input[type="radio"]:focus-visible + .segment {
    outline-color: var(--fq-accent-text);
}

.fq-widget .preferred-time-badge {
    background: var(--fq-tint);
}

.fq-widget .preferred-time-badge .badge-label,
.fq-widget .flexible-hint {
    color: var(--fq-accent-text);
}

.fq-widget .flexible-slider .noUi-target {
    background: var(--fq-border);
}

.fq-widget .flexible-slider .noUi-connect {
    background: var(--fq-accent);
}

/* The handle's navy fill is !important in the component, so ring it in the theme colour
   instead; on a dark surface the bare navy would disappear. */
.fq-widget .flexible-slider .noUi-handle {
    outline: 2px solid var(--fq-accent);
    outline-offset: 1px;
}

.fq-widget .flexible-slider .noUi-tooltip {
    color: var(--fq-header);
    background: var(--fq-surface);
    border-color: var(--fq-border);
    box-shadow: var(--fq-shadow);
}

/* ---------- Platform: the EnRoute arrival-time slider (WidgetBookEnroute) ----------
   Its unscoped style block paints pure blue and renders after this sheet, so each rule carries one
   extra class to win - the least that beats it. */

.fq-widget .slider-text {
    color: var(--fq-accent-text);
}

.fq-widget input[type="range"]::-webkit-slider-runnable-track {
    background: var(--fq-border);
    border-radius: 999px;
}

.fq-widget input[type="range"]::-moz-range-track {
    background: var(--fq-border);
    border-radius: 999px;
}

.fq-widget input[type="range"]::-webkit-slider-thumb {
    background-color: var(--fq-accent);
}

.fq-widget input[type="range"]::-moz-range-thumb {
    background-color: var(--fq-accent);
    border: 0;
}

/* ---------- Desktop: booking and group cards side by side ---------- */

@media (min-width: 880px) {
    :where(.fq-widget .container:has(> #fq-widget-booking-header + #fq-widget-group-header)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
        align-items: stretch;
    }

    :where(.fq-widget .container:has(> #fq-widget-booking-header + #fq-widget-group-header)) > * {
        grid-column: 1 / -1;
    }

    :where(.fq-widget .container:has(> #fq-widget-booking-header + #fq-widget-group-header)) > :where(.fq-card) {
        grid-column: auto;
        max-width: none;
        width: 100%;
        margin: 1.5rem 0;
    }
}

/* ---------- Large format: kiosk and TV display ----------
   Read from across a room, not at arm's length. Keyed off the kiosk and TV top-header field ids,
   so no page code is involved; a location that replaces that header keeps today's sizing. Each
   rule follows the one it resizes at the same specificity, so order decides. */

:where(.fq-widget:has(#fq-widget-kiosk-top-header) .fq-masthead) h1 {
    font-size: clamp(2.5rem, 2rem + 3vw, 3.75rem);
}

:where(.fq-widget:has(#fq-widget-kiosk-top-header)) .form-control,
:where(.fq-widget:has(#fq-widget-kiosk-top-header)) .form-select {
    font-size: 1.25rem;
}

:where(.fq-widget:has(#fq-widget-kiosk-top-header)) .btn-lg {
    --bs-btn-padding-y: 1.125rem;
    --bs-btn-font-size: 1.375rem;
}

:where(.fq-widget:has(#fq-widget-kiosk-top-header)) .btn-outline-primary {
    --bs-btn-padding-y: .75rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1.125rem;
}

:where(.fq-widget:has(#fq-widget-tv-top-header) .fq-masthead) h1 {
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
}

:where(.fq-widget:has(#fq-widget-tv-top-header)) .viewQueueTable {
    font-size: clamp(1.25rem, .8rem + 1.2vw, 1.75rem);
    --bs-table-striped-bg: var(--fq-tint);
}

:where(.fq-widget:has(#fq-widget-tv-top-header)) .viewQueueTable > :not(caption) > * > * {
    padding: .75rem 1rem;
    border-bottom-color: var(--fq-border);
}

:where(.fq-widget:has(#fq-widget-tv-top-header)) .viewQueueTable thead th {
    font-size: .6em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fq-ink-muted);
}

:where(.fq-widget:has(#fq-widget-tv-top-header)) :where(.fq-status, .fq-intro) {
    max-width: none;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 480px) {
    :where(.fq-card__icon) {
        width: 2.5rem;
        height: 2.5rem;
    }
}