/* Global thin scrollbar (Firefox + Chromium 121+). Loaded by the menu/stores/auth
   layouts; site.css carries the same rule for the default _Layout. Component rules that
   set their own scrollbar-width (none/thin) keep winning via higher specificity. */
* {
    scrollbar-width: thin;
}

/* ---------- Floating action button ---------- */
.a11y-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 0;
    background: #1d4ed8;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 99998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.a11y-fab:hover { background: #1e40af; transform: scale(1.05); }
.a11y-fab:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.a11y-fab svg { width: 26px; height: 26px; }

/* ---------- Panel ---------- */
.a11y-panel {
    position: fixed;
    bottom: 88px;
    right: 22px;
    width: 280px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    z-index: 99999;
    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    animation: a11y-pop 0.18s ease-out;
}

@keyframes a11y-pop {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.a11y-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.a11y-panel-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.a11y-close {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    font-size: 20px;
    color: #6b6b6b;
    cursor: pointer;
    line-height: 1;
}

.a11y-close:hover { background: #f4f4f5; color: #1a1a1a; }

/* ---------- Text-size segmented control ---------- */
.a11y-section { margin-bottom: 12px; }

.a11y-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6b6b6b;
    margin-bottom: 6px;
}

.a11y-seg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    background: #f4f4f5;
    border-radius: 10px;
    padding: 4px;
}

.a11y-seg button {
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.a11y-seg button:hover { background: #ffffff; }
.a11y-seg button.is-active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* ---------- Options list ---------- */
.a11y-options {
    list-style: none;
    margin: 8px 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.a11y-opt {
    width: 100%;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.12s ease;
}

.a11y-opt:hover { background: #f4f4f5; }

.a11y-opt.is-on {
    background: #eef4ff;
    color: #1d4ed8;
    font-weight: 600;
}

.a11y-opt-ico {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #f4f4f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.a11y-opt.is-on .a11y-opt-ico { background: #dbeafe; color: #1d4ed8; }

.a11y-reset {
    width: 100%;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.a11y-reset:hover { background: #f4f4f5; }

/* ============== Applied accessibility modes ============== */

/* Rem anchor for the text-size feature. This lives here (not only in site.css) because the
   customer layouts that carry the accessibility widget — _MenuLayout, _StoresLayout,
   _AuthLayout — load a11y.css but NOT site.css. Every component now sizes text in rem, so
   this single root rule + the multiplier below rescale the whole page. Anchored at 16px so
   the default (scale 1) reproduces the original px rendering exactly. */
:root { --a11y-scale: 1; }
html { font-size: calc(16px * var(--a11y-scale)); }

/* Text-size levels (Small / Default / Large / Extra Large). These set ONLY the global
   --a11y-scale multiplier consumed by the html rule above. The old rules set an absolute
   html font-size (17/19/13px) which the px-based components ignored — that is why the
   feature saved the setting but had no visible effect. */
html.a11y-text-smaller  { --a11y-scale: 0.875; }  /* ~14px root */
html.a11y-text-larger   { --a11y-scale: 1.15; }   /* ~18.4px root */
html.a11y-text-larger-2 { --a11y-scale: 1.35; }   /* ~21.6px root */

html.a11y-contrast {
    filter: contrast(1.25) saturate(1.15);
}

html.a11y-contrast body,
html.a11y-contrast .auth-form,
html.a11y-contrast .loc-sidebar {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-contrast .field input,
html.a11y-contrast .select-wrap select,
html.a11y-contrast .otp-box,
html.a11y-contrast .loc-search input {
    background: #111 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* These sit directly on the black page / black .loc-sidebar, so they SHOULD be
   white. NOTE: .loc-store-name / .loc-store-addr were removed from this list —
   they live inside the WHITE .loc-store cards (not on the sidebar), already carry
   dark colours (var(--text)/var(--muted)), and this #fff override was hiding them
   white-on-white. They are handled by the .loc-store re-pin below instead. */
html.a11y-contrast .auth-title,
html.a11y-contrast .auth-subtitle,
html.a11y-contrast .loc-heading,
html.a11y-contrast .field label,
html.a11y-contrast .loc-label,
html.a11y-contrast .loc-hint,
html.a11y-contrast .loc-count { color: #fff !important; }

/* ---------- Customize / Add-to-Cart modal ----------
   The customize popup is a white floating card (.cust-card { background:#fff })
   that KEEPS its light surface in high contrast — only <body>, .auth-form and
   .loc-sidebar flip to black above. So any text node inside the card that never
   set its own colour inherits the global `body { color:#fff }` and renders
   white-on-white. That silently hid the modifier option names (.cust-option-name),
   the item title, the footer summary name and the quantity counter, while the
   nodes that DO carry a colour (red group headers, muted description / hints /
   prices) stayed visible. Re-pinning a black base colour on the card is the real
   fix: every un-coloured descendant then inherits readable text from the card
   instead of the black-page body. The follow-up rules lift the muted secondary
   tones and darken the brand-red accent for a stronger ratio. State colours
   (white-on-red size/spice chips, the red Add-to-Cart button) are deliberately
   NOT touched so they keep their own high contrast. All rules are scoped under
   html.a11y-contrast, so normal (non-contrast) rendering is unchanged. */
html.a11y-contrast .cust-card {
    background: #fff !important;
    color: #000 !important;
}

/* Text nodes that had NO explicit colour — force pure black (max contrast on white). */
html.a11y-contrast .cust-title,
html.a11y-contrast .cust-option-name,
html.a11y-contrast .cust-footer-name,
html.a11y-contrast .cust-qty span,
html.a11y-contrast .cust-subchip { color: #000 !important; }

/* Secondary / muted text — description, Required|Optional hints, prices and the
   "Added:" selected-item summary. Lift from the ~#6b6b6b grey to near-black so
   nothing reads faint in high-contrast mode. */
html.a11y-contrast .cust-desc,
html.a11y-contrast .cust-group p.cust-hint,
html.a11y-contrast .cust-option-price,
html.a11y-contrast .cust-footer-added,
html.a11y-contrast .cust-footer-added .cust-footer-label { color: #1a1a1a !important; }

/* Brand-red group titles + inline toggles ("Show more", per-segment toggles).
   Darken the red for a higher contrast ratio while keeping the accent identity. */
html.a11y-contrast .cust-group h4,
html.a11y-contrast .cust-desc-toggle,
html.a11y-contrast .cust-footer-seg-toggle,
html.a11y-contrast .cust-footer-summary-toggle { color: #b3141b !important; }

/* ---------- Other white-surfaced popovers, cards & sheets ----------
   Identical failure mode to the customize modal: every one of these renders on a
   verified white (#fff) card / sheet that keeps its light surface in high contrast,
   so any descendant that never set its own colour inherits the global body white
   and vanishes. Re-pinning a dark base colour on each CONTAINER makes un-coloured
   leaves inherit readable text; leaves that carry their own colour (brand buttons,
   muted hints, status colours) are untouched. Surfaces + what they were hiding:
     .cart-popup         header cart pop-over — store name, item/deal names, prices, total
     .menu-card          product cards (menu grid + store-home carousel) — item titles
     .offer-card         offers listing cards — offer title / fallback apply-message
     .offer-select-sheet item-selection sheet — titles + candidate names
     .offer-deal-sheet   deal builder sheet — title, empty-slot labels, footer name, qty
     .loc-store          store-locator list cards (white card inside the black sidebar)  */
html.a11y-contrast .cart-popup,
html.a11y-contrast .menu-card,
html.a11y-contrast .offer-card,
html.a11y-contrast .offer-select-sheet,
html.a11y-contrast .offer-deal-sheet,
html.a11y-contrast .loc-store { color: #1a1a1a !important; }

/* Bare form controls on light surfaces — <select>/<input> don't inherit an
   ancestor's colour reliably, so pin each one an explicit dark value on its light
   field: menu/offer size pickers, the pre-order Date/Time selects, the rewards
   picker, the edit-profile phone field, and the referral-code box. */
html.a11y-contrast .menu-card-size,
html.a11y-contrast .offer-cand-size,
html.a11y-contrast .chk-timing-picker select,
html.a11y-contrast .pt-rewards-card select,
html.a11y-contrast .profile-phone-input,
html.a11y-contrast #chkReferralCode { color: #1a1a1a !important; }
html.a11y-contrast #chkReferralCode::placeholder { color: #595959 !important; }

html.a11y-readable-font,
html.a11y-readable-font * {
    font-family: Verdana, Tahoma, Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

html.a11y-underline-links a { text-decoration: underline !important; }

html.a11y-pause-anim,
html.a11y-pause-anim *,
html.a11y-pause-anim *::before,
html.a11y-pause-anim *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

html.a11y-big-cursor,
html.a11y-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path d='M5 3l14 8-7 1-3 7-4-16z' fill='%23000' stroke='%23fff' stroke-width='1.5'/></svg>") 4 4, auto !important;
}

html.a11y-highlight-focus *:focus,
html.a11y-highlight-focus *:focus-visible {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.25) !important;
}

/* ---------- Small screens: tuck the FAB & panel into the corner ---------- */
@media (max-width: 560px) {
    .a11y-fab { width: 46px; height: 46px; bottom: 14px; right: 14px; }
    .a11y-fab svg { width: 22px; height: 22px; }
    .a11y-panel { bottom: 70px; right: 14px; width: calc(100vw - 28px); max-width: 320px; }
}