/* =========================================================================
   AURORA — Premium digital dining template
   Design system + components. Mobile-first, fully responsive, RTL-aware.
   Accent is driven by the restaurant brand color (--theme-color-1 from layout)
   with a refined gold fallback so it adapts per restaurant.
   ========================================================================= */

/* --------------------------------------------------------- accent guard
   The shared layout builds --theme-color-* with sscanf($c,"#%02x%02x%02x"),
   which cannot read a 3-digit hex: a store whose brand colour is "#111"
   yields "rgba(17,1,,1)". That is not a MISSING value, it is an INVALID one,
   so the var() fallbacks below never fire and every rule that consumes the
   accent is dropped at computed-value time -- 52 rules here, including the
   gradient-clipped hero H1, which then renders as transparent text (i.e. the
   restaurant name simply disappears).

   Registering the four accent tokens as <color> makes an invalid substitution
   fall back to initial-value instead of poisoning the declaration, so a broken
   brand colour degrades to aurora's gold and a valid one (#c2410c) still
   drives the whole theme. The shared parser itself is out of scope (B10). */
@property --au-accent    { syntax: "<color>"; inherits: true; initial-value: #f5b54a; }
@property --au-accent-12 { syntax: "<color>"; inherits: true; initial-value: rgba(245, 181, 74, .12); }
@property --au-accent-20 { syntax: "<color>"; inherits: true; initial-value: rgba(245, 181, 74, .2); }
@property --au-accent-40 { syntax: "<color>"; inherits: true; initial-value: rgba(245, 181, 74, .4); }
/* Accent used as INK (text/icons on a surface). On the dark face that is the
   accent itself; the light face overrides it to a darkened tone so gold text
   on white does not sit at ~1.9:1. */
@property --au-accent-ink { syntax: "<color>"; inherits: true; initial-value: #f5b54a; }

:root {
    /* Brand accent — aurora's single design accent is the customizer PRIMARY
       role. Chain: customizer primary override wins; else the store's legacy
       brand colour (--theme-color-1); else aurora's gold. Keeping --theme-color-1
       in the chain preserves per-store colour with no override (rule 4). The
       @property guard above still validates the resolved value as <color>. */
    --au-accent: var(--tc-primary, var(--theme-color-1, #f5b54a));
    /* Accent alpha tints stay on the legacy --theme-color-0_* chain: --tc-primary-rgb
       is a raw "r,g,b" triplet and cannot be slotted into this colour fallback
       chain without dropping a legacy store's brand tint, so a primary override
       recolours the solid accent while these glow tints hold their fallback
       (mirrors crave keeping its derived shades off the token). */
    --au-accent-12: var(--theme-color-0_12, rgba(245, 181, 74, .12));
    --au-accent-20: var(--theme-color-0_2, rgba(245, 181, 74, .2));
    --au-accent-40: var(--theme-color-0_4, rgba(245, 181, 74, .4));
    --au-accent-ink: var(--au-accent);

    /* Surfaces — page background + solid surface follow the customizer roles,
       aurora's literals as fallback (byte-identical with no override). The
       light-face flips below stay literal (curated AA-tuned palette). */
    --au-bg: var(--tc-background, #07070b);
    --au-bg-2: var(--tc-surface, #0d0d15);
    --au-glass: rgba(255, 255, 255, .045);
    --au-glass-2: rgba(255, 255, 255, .07);
    --au-glass-hi: rgba(255, 255, 255, .1);
    --au-border: rgba(255, 255, 255, .09);
    --au-border-hi: rgba(255, 255, 255, .16);

    /* Semantic surfaces that must flip between light/dark (overridden below) */
    --au-bar-bg: rgba(7, 7, 11, .75);        /* sticky topbar / category bar */
    --au-surface: rgba(13, 13, 21, .96);     /* solid popovers, sheets, panels */
    --au-sheet-foot-bg: rgba(7, 7, 11, .6);  /* sheet footer */
    --au-scrim: rgba(4, 4, 8, .6);           /* dimmer behind slide-over sheets */
    --au-input-bg: rgba(255, 255, 255, .06); /* text inputs */
    --au-input-bg-focus: rgba(255, 255, 255, .09);
    --au-select-bg: #0d0d15;                 /* native <option> background */
    --au-card: rgba(255, 255, 255, .06);     /* JS-injected input/textarea fields */
    --au-hero-scrim-1: rgba(7, 7, 11, .82);  /* hero cover overlay (legibility) */
    --au-hero-scrim-2: rgba(7, 7, 11, .35);
    --au-on-image: #f5f5fa;                  /* text sitting on photo overlays (always light) */

    /* Type */
    --au-text: var(--tc-text, #f5f5fa);
    --au-muted: #9a9aae;
    --au-faint: #6b6b80;

    /* Feedback */
    --au-veg: #4ade80;
    --au-nonveg: #fb7185;
    --au-star: #fbbf24;

    /* Shape & motion */
    --au-r-sm: 12px;                 /* controls/inputs/options — kept literal */
    --au-r-md: var(--tr-card, 18px); /* .au-card radius; 18px == the "round" scale step (layout.radius default), so it maps to --tr-card */
    --au-r-lg: 26px;                 /* hero/large panels — kept literal */
    --au-r-pill: var(--tr-pill, 999px);
    --au-shadow: 0 18px 50px -18px rgba(0, 0, 0, .75);
    --au-shadow-accent: 0 12px 36px -12px var(--au-accent-40);
    --au-ease: cubic-bezier(.22, 1, .36, 1);

    /* Fonts — customizer body/heading roles win; else the store's legacy
       --menu-font; else aurora's own stacks (keeps legacy per rule 4). */
    --au-font: var(--tf-body, 'Saudi Riyal', var(--menu-font, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
    --au-display: 'Saudi Riyal', var(--tf-heading, var(--menu-font, 'Sora', var(--au-font)));
}

/* ----------------------------------------------------------------- reset */
.aurora *, .aurora *::before, .aurora *::after { box-sizing: border-box; }

.aurora {
    position: relative;
    min-height: 100vh;
    margin: 0;
    font-family: var(--au-font);
    color: var(--au-text);
    background: var(--au-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* clip (not hidden) so it doesn't break position:sticky on the topbar/catbar */
}
body { background: var(--au-bg); margin: 0; }

.aurora h1, .aurora h2, .aurora h3, .aurora h4 {
    font-family: var(--au-display);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.12;
}
.aurora a { color: inherit; text-decoration: none; }
.aurora img { max-width: 100%; display: block; }
/* WAVE4-V1: `.aurora button` is (0,1,1) and beat every single-class component rule
   below — `.au-cta`, `.au-add`, `.au-chip`, `.au-fav`, `.au-filter-chip`,
   `.au-tip-btn`, `.au-icon-btn`, `.au-fab` are all (0,1,0) — so 124 of the theme's
   143 buttons rendered with `background: none` and `color: inherit`, including
   "Place order". `:where()` zeroes the reset's specificity so it still strips the
   UA chrome from an unclassed <button> while every `.au-*` rule declared after it
   wins on order. Identical to the fix vivid shipped as VIVID-F1. */
.aurora :where(button) { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.aurora ul { margin: 0; padding: 0; list-style: none; }
.aurora ::selection { background: var(--au-accent-40); }

.au-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* ----------------------------------------------------- ambient backdrop */
.au-ambient {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(60% 50% at 80% -5%, var(--au-accent-12), transparent 60%),
        radial-gradient(50% 40% at 0% 5%, rgba(99, 102, 241, .14), transparent 60%),
        radial-gradient(60% 50% at 50% 110%, rgba(56, 189, 248, .1), transparent 60%),
        linear-gradient(180deg, var(--au-bg) 0%, var(--au-bg-2) 100%);
}
.au-ambient::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 26px 26px; opacity: .5;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
}
/* glass utility */
.au-glass {
    background: var(--au-glass);
    border: 1px solid var(--au-border);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

/* ============================================================ TOP BAR */
.au-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    transition: background .3s var(--au-ease), border-color .3s var(--au-ease);
    border-bottom: 1px solid transparent;
}
.au-topbar.is-stuck {
    background: var(--au-bar-bg);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--au-border);
}
.au-topbar .au-wrap { display: flex; align-items: center; gap: 12px; width: 100%; }
.au-brand-mini { display: flex; align-items: center; gap: 10px; min-width: 0; }
.au-brand-mini img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; border: 1px solid var(--au-border-hi); }
.au-brand-mini b { font-family: var(--au-display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.au-icon-btn {
    position: relative;
    width: 42px; height: 42px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--au-glass); border: 1px solid var(--au-border);
    color: var(--au-text); font-size: 17px;
    transition: transform .25s var(--au-ease), background .25s, border-color .25s;
}
.au-icon-btn:hover { transform: translateY(-2px); background: var(--au-glass-2); border-color: var(--au-border-hi); }
.au-icon-btn:active { transform: scale(.94); }
.au-badge-count {
    position: absolute; top: -6px; inset-inline-end: -6px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--au-accent); color: #0a0a0a; font-size: 11px; font-weight: 800;
    display: none; align-items: center; justify-content: center; line-height: 1;
    box-shadow: 0 4px 12px var(--au-accent-40);
}
.au-badge-count.show { display: inline-flex; animation: au-pop .35s var(--au-ease); }
@keyframes au-pop { 0% { transform: scale(.2); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* language switcher */
.au-lang { position: relative; }
.au-lang-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
    min-width: 150px; max-height: 280px; overflow: auto;
    border-radius: var(--au-r-md); padding: 6px;
    background: var(--au-surface); border: 1px solid var(--au-border);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: var(--au-shadow);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .22s var(--au-ease);
}
.au-lang.open .au-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.au-lang-menu button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 9px 11px; border-radius: 10px; font-size: 14px; color: var(--au-muted); }
.au-lang-menu button:hover { background: var(--au-glass-2); color: var(--au-text); }

/* ================================================================= HERO */
.au-hero { padding: 26px 0 6px; }
.au-hero-card {
    position: relative; overflow: hidden;
    border-radius: var(--au-r-lg);
    padding: 30px;
    background: var(--au-glass);
    border: 1px solid var(--au-border);
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
    box-shadow: var(--au-shadow);
}
.au-hero-cover { position: absolute; inset: 0; z-index: 0; opacity: .28; }
.au-hero-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
.au-hero-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(115deg, var(--au-hero-scrim-1) 30%, var(--au-hero-scrim-2) 100%);
}
.au-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr .9fr; gap: 28px; align-items: center; }
.au-hero-logo { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; border: 1px solid var(--au-border-hi); box-shadow: var(--au-shadow); margin-bottom: 16px; }
.au-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: var(--au-r-pill); margin-bottom: 14px;
    background: var(--au-accent-12); border: 1px solid var(--au-accent-20);
    color: var(--au-accent-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.au-eyebrow .au-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--au-accent); box-shadow: 0 0 0 4px var(--au-accent-20); animation: au-pulse 2.4s infinite; }
@keyframes au-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.au-hero h1 { font-size: clamp(30px, 6vw, 52px); margin-bottom: 12px; }
.au-hero h1 .au-grad {
    /* ink, not raw accent: on the light face a gold tail on white is ~1.9:1 and
       the restaurant's own name is the last thing that should be hard to read. */
    background: linear-gradient(100deg, var(--au-text) 10%, var(--au-accent-ink) 90%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.au-hero-tag { color: var(--au-muted); font-size: clamp(14px, 2.4vw, 17px); max-width: 46ch; margin-bottom: 22px; }
.au-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.au-chip-meta { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--au-r-pill); background: var(--au-glass-2); border: 1px solid var(--au-border); font-size: 13px; color: var(--au-muted); }
.au-chip-meta i { color: var(--au-accent-ink); }
/* R4 · open-now / closed status chip. The <i> is a status dot, not an icon-font glyph. */
.au-open-chip { color: var(--au-veg); border-color: rgba(74, 222, 128, .35); }
.au-open-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--au-veg); display: inline-block; }
.au-open-chip.closed { color: #ff6b6b; border-color: rgba(255, 107, 107, .35); }
.au-open-chip.closed i { background: #ff6b6b; }

/* search */
.au-search { position: relative; max-width: 520px; }
.au-search i { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--au-faint); font-size: 16px; pointer-events: none; }
.au-search input {
    width: 100%; height: 54px; padding: 0 52px; border-radius: var(--au-r-pill);
    background: var(--au-input-bg); border: 1px solid var(--au-border-hi);
    color: var(--au-text); font-size: 15px; outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.au-search input::placeholder { color: var(--au-faint); }
.au-search input:focus { border-color: var(--au-accent-40); box-shadow: 0 0 0 4px var(--au-accent-12); background: var(--au-input-bg-focus); }
.au-search-clear { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--au-glass-2); color: var(--au-muted); display: none; align-items: center; justify-content: center; }
.au-search-clear.show { display: inline-flex; }

/* featured dish */
.au-featured {
    position: relative; border-radius: var(--au-r-md); overflow: hidden;
    aspect-ratio: 4 / 5; background: var(--au-glass-2); border: 1px solid var(--au-border);
    box-shadow: var(--au-shadow);
}
.au-featured img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--au-ease); }
.au-featured:hover img { transform: scale(1.06); }
.au-featured-tag { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 6px 12px; border-radius: var(--au-r-pill); background: var(--au-accent); color: #0a0a0a; font-size: 12px; font-weight: 800; box-shadow: 0 6px 18px var(--au-accent-40); }
.au-featured-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 18px; background: linear-gradient(0deg, rgba(7, 7, 11, .92), transparent); }
.au-featured-body h3 { font-size: 19px; margin-bottom: 4px; color: var(--au-on-image); }
.au-featured-body .au-price { color: var(--au-accent-ink); font-weight: 700; font-family: var(--au-display); }

/* ====================================================== CATEGORY CHIPS */
.au-catbar { position: sticky; top: 64px; z-index: 30; padding: 12px 0; margin: 18px 0 8px; }
.au-catbar.is-stuck { background: var(--au-bar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-block: 1px solid var(--au-border); }
.au-chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.au-chips::-webkit-scrollbar { display: none; }
.au-chip {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: var(--au-r-pill);
    background: var(--au-glass); border: 1px solid var(--au-border);
    color: var(--au-muted); font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: all .25s var(--au-ease);
}
.au-chip:hover { color: var(--au-text); border-color: var(--au-border-hi); transform: translateY(-2px); }
.au-chip.active { background: var(--au-accent); border-color: var(--au-accent); color: #0a0a0a; box-shadow: var(--au-shadow-accent); }
.au-chip .au-chip-ico { font-size: 15px; }

/* ============================================================ SECTIONS */
.au-section { padding: 26px 0; scroll-margin-top: 130px; }
.au-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.au-section-head h2 { font-size: clamp(20px, 4vw, 28px); }
.au-section-head .au-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--au-accent-ink); margin-bottom: 6px; }
.au-section-head p { color: var(--au-muted); font-size: 14px; margin: 4px 0 0; }

/* horizontal rail (chef's specials / popular) */
.au-rail { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
.au-rail::-webkit-scrollbar { display: none; }
.au-rail .au-spotlight { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; }

.au-spotlight {
    position: relative; border-radius: var(--au-r-md); overflow: hidden;
    aspect-ratio: 1 / 1.1; border: 1px solid var(--au-border); box-shadow: var(--au-shadow);
    cursor: pointer;
}
.au-spotlight img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--au-ease); }
.au-spotlight:hover img { transform: scale(1.07); }
.au-spotlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 7, 11, .94) 5%, transparent 60%); }
.au-spotlight-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 16px; }
.au-spotlight-body .au-rank { display: inline-block; font-size: 11px; font-weight: 700; color: var(--au-accent-ink); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.au-spotlight-body h4 { font-size: 17px; margin-bottom: 6px; color: var(--au-on-image); }
.au-spotlight-foot { display: flex; align-items: center; justify-content: space-between; }
.au-spotlight-foot .au-price { color: var(--au-on-image); font-weight: 700; font-family: var(--au-display); }

/* =============================================================== CARDS */
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.au-card {
    position: relative; display: flex; flex-direction: column;
    border-radius: var(--au-r-md); overflow: hidden;
    background: var(--au-glass); border: 1px solid var(--au-border);
    transition: transform .35s var(--au-ease), border-color .35s, box-shadow .35s;
    opacity: 0; transform: translateY(14px); animation: au-rise .5s var(--au-ease) forwards;
}
@keyframes au-rise { to { opacity: 1; transform: translateY(0); } }
.au-card:hover { transform: translateY(-5px); border-color: var(--au-border-hi); box-shadow: var(--au-shadow); }
.au-card-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--au-glass-2); }
.au-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--au-ease); }
.au-card:hover .au-card-media img { transform: scale(1.08); }
.au-card-badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.au-fav {
    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    background: rgba(7, 7, 11, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--au-border-hi); color: #fff;
    transition: transform .25s var(--au-ease), color .25s, background .25s;
}
.au-fav:hover { transform: scale(1.1); }
.au-fav.is-fav { color: var(--au-nonveg); background: rgba(251, 113, 133, .16); border-color: rgba(251, 113, 133, .4); }
.au-fav.is-fav i { animation: au-pop .4s var(--au-ease); }

.au-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.au-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.au-card-title { font-size: 16.5px; font-weight: 700; font-family: var(--au-display); }
.au-card-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--au-muted); margin-top: 6px; }
.au-card-rating i { color: var(--au-star); font-size: 12px; }
.au-card-desc { color: var(--au-muted); font-size: 13.5px; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-card-allergies { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.au-card-allergies img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.au-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.au-card-price { font-family: var(--au-display); font-weight: 700; font-size: 18px; color: var(--au-text); }
.au-card-price small { display: block; font-size: 11px; color: var(--au-faint); font-weight: 500; }

/* badges */
.au-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--au-r-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.au-badge.diet-veg { background: rgba(74, 222, 128, .16); color: var(--au-veg); border: 1px solid rgba(74, 222, 128, .3); }
.au-badge.diet-nonveg { background: rgba(251, 113, 133, .16); color: var(--au-nonveg); border: 1px solid rgba(251, 113, 133, .3); }
.au-badge.diet-spicy { background: rgba(249, 115, 22, .16); color: #fb923c; border: 1px solid rgba(249, 115, 22, .3); }
.au-badge.diet-custom { background: var(--au-accent-12); color: var(--au-accent-ink); border: 1px solid var(--au-accent-20); }

/* add button */
.au-add {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: var(--au-r-pill);
    background: var(--au-accent); color: #0a0a0a; font-weight: 700; font-size: 13.5px;
    transition: transform .22s var(--au-ease), box-shadow .22s, filter .22s;
}
.au-add:hover { transform: translateY(-2px); box-shadow: var(--au-shadow-accent); filter: brightness(1.05); }
.au-add:active { transform: scale(.95); }
.au-add.is-ghost { background: var(--au-glass-2); color: var(--au-text); border: 1px solid var(--au-border-hi); }

/* empty / no results */
.au-empty { text-align: center; padding: 70px 20px; color: var(--au-muted); display: none; }
.au-empty.show { display: block; animation: au-rise .4s var(--au-ease); }
.au-empty .au-empty-ico { font-size: 42px; color: var(--au-faint); margin-bottom: 14px; }
.au-empty h3 { color: var(--au-text); margin-bottom: 6px; }

/* skeleton loading */
.au-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.au-skel { border-radius: var(--au-r-md); overflow: hidden; border: 1px solid var(--au-border); background: var(--au-glass); }
.au-skel-media { aspect-ratio: 16 / 11; }
.au-skel-line { height: 14px; border-radius: 6px; margin: 14px 16px 0; }
.au-skel-line.sm { width: 50%; }
.au-shimmer { position: relative; overflow: hidden; background: var(--au-glass-2); }
.au-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); animation: au-shimmer 1.4s infinite; }
@keyframes au-shimmer { 100% { transform: translateX(100%); } }

/* =============================================== SLIDE PANELS (modal/cart) */
.au-scrim { position: fixed; inset: 0; z-index: 60; background: var(--au-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s var(--au-ease), visibility .3s; }
.au-scrim.open { opacity: 1; visibility: visible; }

.au-sheet {
    position: fixed; z-index: 70; top: 0; inset-inline-end: 0; height: 100%;
    width: min(440px, 100%); display: flex; flex-direction: column;
    background: var(--au-surface); color: var(--au-text); border-inline-start: 1px solid var(--au-border);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: var(--au-shadow);
    transform: translateX(100%); transition: transform .42s var(--au-ease);
}
[dir="rtl"] .au-sheet { transform: translateX(-100%); }
.au-sheet.open { transform: translateX(0); }
.au-sheet-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--au-border); }
.au-sheet-head h3 { font-size: 18px; flex: 1; }
.au-sheet-body { flex: 1; overflow-y: auto; padding: 20px; }
.au-sheet-foot { padding: 18px 20px; border-top: 1px solid var(--au-border); background: var(--au-sheet-foot-bg); }
.au-close { width: 38px; height: 38px; border-radius: 12px; background: var(--au-glass-2); border: 1px solid var(--au-border); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: background .2s; }
.au-close:hover { background: var(--au-glass-hi); }

/* dish detail */
.au-detail-media { position: relative; border-radius: var(--au-r-md); overflow: hidden; aspect-ratio: 16 / 11; margin-bottom: 18px; border: 1px solid var(--au-border); }
.au-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.au-detail-title { font-size: 23px; margin-bottom: 6px; }
.au-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.au-detail-desc { color: var(--au-muted); font-size: 14.5px; line-height: 1.6; }
.au-detail-section { margin-top: 22px; }
.au-detail-section h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--au-faint); margin-bottom: 12px; }

.au-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: var(--au-r-sm); border: 1px solid var(--au-border); margin-bottom: 9px; cursor: pointer; transition: border-color .2s, background .2s; }
.au-opt:hover { border-color: var(--au-border-hi); }
.au-opt.selected { border-color: var(--au-accent-40); background: var(--au-accent-12); }
.au-opt-label { display: flex; align-items: center; gap: 11px; font-size: 14.5px; }
.au-opt-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--au-faint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: border-color .2s; }
.au-opt.selected .au-opt-mark { border-color: var(--au-accent); }
.au-opt.selected .au-opt-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--au-accent); }
.au-opt-mark.check { border-radius: 6px; }
.au-opt.selected .au-opt-mark.check::after { border-radius: 2px; }
.au-opt-price { font-size: 13.5px; color: var(--au-muted); font-weight: 600; }
.au-opt-thumb { width: 36px; height: 36px; border-radius: var(--au-r-sm); object-fit: cover; flex: none; background: var(--au-faint); margin-inline-start: auto; }

/* quantity stepper */
.au-qty { display: inline-flex; align-items: center; gap: 2px; border-radius: var(--au-r-pill); border: 1px solid var(--au-border-hi); background: var(--au-glass); padding: 4px; }
.au-qty button { width: 34px; height: 34px; border-radius: 50%; font-size: 18px; color: var(--au-text); display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.au-qty button:hover { background: var(--au-glass-hi); }
.au-qty span { min-width: 32px; text-align: center; font-weight: 700; font-family: var(--au-display); }

/* primary CTA */
.au-cta {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 56px; border-radius: var(--au-r-pill);
    background: var(--au-accent); color: #0a0a0a; font-weight: 800; font-size: 15.5px;
    transition: transform .22s var(--au-ease), box-shadow .22s, filter .22s;
}
.au-cta:hover { transform: translateY(-2px); box-shadow: var(--au-shadow-accent); filter: brightness(1.05); }
.au-cta:active { transform: scale(.98); }
.au-cta[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.au-cta .au-cta-price { margin-inline-start: auto; }
.au-cta.is-ghost { background: var(--au-glass-2); color: var(--au-text); border: 1px solid var(--au-border-hi); }
.au-cta-row { display: flex; gap: 10px; }

/* dish-sheet footer: direct jump to the cart, shown once it has items
   (matches the .au-cta 56px height it sits next to) */
.au-cart-jump { flex: none; width: 56px; height: 56px; border-radius: var(--au-r-pill); font-size: 19px; }
.au-cart-jump[hidden] { display: none; }

/* cart */
.au-cart-empty { text-align: center; padding: 50px 10px; color: var(--au-muted); }
.au-cart-empty .au-empty-ico { font-size: 44px; color: var(--au-faint); margin-bottom: 14px; }
.au-cart-item { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--au-border); }
.au-cart-item img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--au-border); }
.au-cart-item .ci-main { flex: 1; min-width: 0; }
.au-cart-item .ci-name { font-weight: 700; font-size: 14.5px; font-family: var(--au-display); }
/* cart line reopen affordances: the image + name are buttons that reopen the item sheet */
.au-cart-item .ci-im, .au-cart-item button.ci-name { background: none; border: 0; padding: 0; cursor: pointer; color: var(--au-text); text-align: start; font: inherit; }
.au-cart-item button.ci-name { font-weight: 700; font-size: 14.5px; font-family: var(--au-display); display: block; }
.au-cart-item .ci-im { flex: 0 0 auto; }
.au-cart-item .ci-im img { display: block; }
.au-cart-item .ci-priceline { display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.au-cart-item .ci-was { color: var(--au-faint); font-size: 12.5px; text-decoration: line-through; }
.au-cart-item .ci-unit { color: var(--au-faint); font-size: 11.5px; }
.au-cart-item .ci-meta { color: var(--au-faint); font-size: 12.5px; margin-top: 3px; }
/* qty left, price pushed right, trash tucked at the end — one footer row
   instead of footer + a full-width Remove text row below it */
.au-cart-item .ci-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.au-cart-item .ci-priceline { margin-inline-start: auto; }
.au-cart-item .au-remove { width: 32px; height: 32px; justify-content: center; border-radius: 50%; flex: 0 0 auto; }
.au-cart-item .ci-price { color: var(--au-accent-ink); font-weight: 700; font-family: var(--au-display); }
/* Combo / "Meal deals" cart lines (.au-combo-group) carry NO thumbnail, so they
   drop the 64px leading image slot the normal row starts with — the same
   treatment every other theme applies via .ck-row--combo. The name (.ci-main)
   keeps the flexible track and the direct-child ×qty + price stay pinned to the
   trailing edge. Scoped .au-cart-item.au-cart-item--combo (0,2,0 > base 0,1,0)
   and placed after the base block so it wins on the shared declarations. */
.au-cart-item.au-cart-item--combo { align-items: flex-start; border-bottom: 0; padding: 8px 0; }
.au-cart-item.au-cart-item--combo > .ci-meta { margin-top: 0; white-space: nowrap; }
.au-cart-item.au-cart-item--combo > .ci-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-qty.sm button { width: 32px; height: 32px; font-size: 15px; }
.au-qty.sm span { min-width: 24px; }
.au-remove { display: inline-flex; align-items: center; min-height: 32px; color: var(--au-faint); font-size: 13px; transition: color .2s; }
.au-remove:hover { color: var(--au-nonveg); }

.au-totals { margin: 4px 0 16px; }
.au-totals .tr { display: flex; justify-content: space-between; font-size: 14px; color: var(--au-muted); padding: 5px 0; }
.au-totals .tr.grand { color: var(--au-text); font-size: 18px; font-weight: 800; font-family: var(--au-display); border-top: 1px solid var(--au-border); margin-top: 6px; padding-top: 12px; }

/* checkout form fields */
.au-field { margin-bottom: 14px; }
.au-field label { display: block; font-size: 12px; color: var(--au-faint); margin-bottom: 7px; letter-spacing: .04em; text-transform: uppercase; }
.au-field input, .au-field select, .au-field textarea {
    width: 100%; min-height: 50px; padding: 13px 15px; border-radius: var(--au-r-sm);
    background: var(--au-glass); border: 1px solid var(--au-border-hi); color: var(--au-text);
    font-family: inherit; font-size: 14.5px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.au-field textarea { min-height: 84px; resize: vertical; }
.au-field input:focus, .au-field select:focus, .au-field textarea:focus { border-color: var(--au-accent-40); box-shadow: 0 0 0 4px var(--au-accent-12); }
.au-field select option { background: var(--au-select-bg); color: var(--au-text); }
.au-seg { display: flex; gap: 8px; background: var(--au-glass); border: 1px solid var(--au-border); border-radius: var(--au-r-pill); padding: 5px; }
.au-seg button { flex: 1; padding: 10px; border-radius: var(--au-r-pill); font-size: 13.5px; font-weight: 600; color: var(--au-muted); transition: all .25s var(--au-ease); }
.au-seg button.active { background: var(--au-accent); color: #0a0a0a; box-shadow: var(--au-shadow-accent); }
.au-form-error { display: none; background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .3); color: #fda4af; padding: 12px 14px; border-radius: var(--au-r-sm); font-size: 13.5px; margin-bottom: 14px; }
.au-success { text-align: center; padding: 30px 10px; display: none; }
.au-success.show { display: block; animation: au-rise .4s var(--au-ease); }
.au-success .au-ok { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .35); display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--au-veg); }

/* footer */
.au-foot { padding: 40px 0 120px; text-align: center; color: var(--au-faint); font-size: 13px; }
.au-foot .au-socials { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.au-foot .au-socials a { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--au-glass); border: 1px solid var(--au-border); font-size: 16px; transition: all .25s var(--au-ease); }
.au-foot .au-socials a:hover { color: var(--au-accent-ink); border-color: var(--au-accent-20); transform: translateY(-3px); }

/* sticky mobile cart bar */
.au-cartbar {
    position: fixed; inset-inline: 14px; bottom: 16px; z-index: 50;
    display: none; align-items: center; gap: 12px; padding: 12px 14px 12px 16px;
    border-radius: var(--au-r-pill); background: var(--au-accent); color: #0a0a0a;
    box-shadow: 0 16px 40px -10px var(--au-accent-40); cursor: pointer;
    transform: translateY(140%); transition: transform .4s var(--au-ease);
    max-width: 520px; margin: 0 auto;
}
.au-cartbar.show { transform: translateY(0); }
/* keep the cartbar slid out while the resume prompt occupies the same slot */
.aurora.au-resume-open .au-cartbar { transform: translateY(140%); }
.au-cartbar .cb-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .14); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.au-cartbar .cb-text { flex: 1; font-weight: 700; font-size: 14px; }
.au-cartbar .cb-text small { display: block; font-weight: 600; opacity: .7; font-size: 12px; }
.au-cartbar .cb-total { font-weight: 800; font-family: var(--au-display); font-size: 16px; }

/* ====================================================== RESPONSIVE */
@media (max-width: 860px) {
    .au-hero-inner { grid-template-columns: 1fr; gap: 22px; }
    .au-featured { max-width: 280px; aspect-ratio: 16 / 11; }
    .au-catbar { top: 60px; }
}
@media (max-width: 600px) {
    .au-wrap { padding: 0 14px; }
    .au-hero-card { padding: 22px 18px; }
    .au-grid { grid-template-columns: 1fr; gap: 14px; }
    .au-skel-grid { grid-template-columns: 1fr; }
    .au-card { flex-direction: row; }
    .au-card-media { width: 132px; flex: 0 0 132px; aspect-ratio: auto; }
    .au-card-body { padding: 13px; }
    .au-card-desc { -webkit-line-clamp: 2; }
    .au-fav { width: 32px; height: 32px; font-size: 14px; }
    .au-cartbar { display: flex; }
    .au-rail .au-spotlight { flex-basis: 70%; }
    .au-featured { max-width: 100%; }
}
@media (min-width: 1024px) {
    .au-rail .au-spotlight { flex-basis: 260px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .aurora * { animation: none !important; transition: none !important; }
    /* au-rise is the ONLY thing that reveals these (their base state is
       opacity: 0), so killing the animation above would leave them invisible.
       Restore the animation's end state instead. */
    .au-card { opacity: 1; transform: none; }
}

/* coupon/promo code elements */
.au-coupon-row {
    display: flex;
    gap: 8px;
}
.au-coupon-btn {
    background: var(--au-accent);
    color: #0a0a0a;
    font-weight: 700;
    border: none;
    border-radius: var(--au-r-sm);
    padding: 0 18px;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s, opacity 0.2s;
}
.au-coupon-btn:hover {
    filter: brightness(1.05);
}
.au-coupon-btn:active {
    transform: scale(0.97);
}
.au-coupon-msg {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
}
.au-coupon-msg.success {
    color: var(--au-veg);
}
.au-coupon-msg.error {
    color: #fca5a5;
}

/* ======================================================== FILTERS PANEL */
.au-filters-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--au-r-pill);
    background: var(--au-glass); border: 1px solid var(--au-border);
    color: var(--au-muted); font-size: 16px; cursor: pointer;
    transition: all .22s var(--au-ease); flex-shrink: 0;
}
.au-filters-toggle:hover, .au-filters-toggle.active {
    color: var(--au-text); border-color: var(--au-border-hi);
}
.au-filters-toggle.active {
    background: var(--au-accent-12); color: var(--au-accent-ink); border-color: var(--au-accent-40);
}

.au-filters-panel {
    display: none; margin-top: 14px; padding: 18px;
    border-radius: var(--au-r-md); background: var(--au-surface);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--au-border);
}
.au-filters-panel.show {
    display: block; animation: au-rise .35s var(--au-ease);
}

.au-filters-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.au-filters-grid h4 {
    font-size: 12px; font-weight: 700; color: var(--au-text);
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85;
}
.au-filters-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}

.au-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--au-r-pill);
    background: var(--au-glass); border: 1px solid var(--au-border);
    color: var(--au-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: all .2s var(--au-ease);
}
.au-filter-chip:hover {
    color: var(--au-text); border-color: var(--au-border-hi);
}
.au-filter-chip.active {
    background: var(--au-accent); border-color: var(--au-accent); color: #0a0a0a;
}
.au-filter-chip.allergen-exclude-chip.active {
    background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #f87171;
}

.au-filters-foot {
    display: flex; justify-content: flex-end; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--au-border);
}
.au-filter-clear-btn {
    background: transparent; border: none; color: var(--au-accent-ink);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: opacity 0.2s;
}
.au-filter-clear-btn:hover {
    opacity: 0.85;
}

/* Dietary Badge specific styles */
.au-badge.diet-vegan { background: rgba(34, 197, 94, .16); color: #4ade80; border: 1px solid rgba(34, 197, 94, .3); }
.au-badge.diet-halal { background: rgba(59, 130, 246, .16); color: #60a5fa; border: 1px solid rgba(59, 130, 246, .3); }
.au-badge.diet-gf { background: rgba(234, 179, 8, .16); color: #facc15; border: 1px solid rgba(234, 179, 8, .3); }
.au-badge.diet-popular { background: rgba(168, 85, 247, .16); color: #c084fc; border: 1px solid rgba(168, 85, 247, .3); }

/* =================================================== RESUME ORDER BANNER */
.au-resume-banner {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    /* 50 = same layer as .au-cartbar: sits above page content but below the
       scrim (60) and sheets (70), so it can't cover an open sheet's CTA. */
    z-index: 50; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; width: calc(100% - 32px); max-width: 520px; padding: 14px 20px;
    border-radius: var(--au-r-md); background: var(--au-surface);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--au-border); box-shadow: var(--au-shadow);
    animation: au-rise .4s var(--au-ease);
}
.au-resume-content {
    display: flex; align-items: center; gap: 10px; color: var(--au-text);
    font-size: 13.5px; font-weight: 500;
}
.au-resume-content i {
    color: var(--au-accent-ink); font-size: 16px;
}
.au-resume-actions {
    display: flex; align-items: center; gap: 12px;
}
.au-resume-btn {
    background: var(--au-accent); color: #0a0a0a; border: none;
    padding: 8px 16px; border-radius: var(--au-r-pill); font-weight: 700;
    font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.au-resume-btn:hover {
    filter: brightness(1.05); transform: translateY(-1px);
}
.au-resume-clear-btn {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px;
    background: transparent; border: none; color: var(--au-muted);
    font-weight: 600; font-size: 13px; cursor: pointer; transition: color 0.2s;
}
.au-resume-clear-btn:hover {
    color: var(--au-text);
}
@media (max-width: 480px) {
    .au-resume-banner {
        flex-direction: column; align-items: stretch; gap: 12px;
        padding: 14px; bottom: 16px;
    }
    .au-resume-actions {
        justify-content: flex-end;
    }
}

/* #28 · sort toolbar — inline padding alone leaves a 27px-tall control,
   so enforce the 32px minimum tap target here. */
.au-sort-btn { display: inline-flex; align-items: center; min-height: 32px; }

/* ======================================================== TIPPING */
.au-tip-btn {
    flex: 1; padding: 10px 0; border-radius: var(--au-r-sm);
    background: var(--au-glass); border: 1px solid var(--au-border);
    color: var(--au-text); font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all .2s var(--au-ease);
}
.au-tip-btn:hover {
    background: var(--au-glass-hi); border-color: var(--au-border-hi);
}
.au-tip-btn.active {
    background: var(--au-accent); border-color: var(--au-accent); color: #0a0a0a;
}

/* ========================================================= #40: LIGHT MODE */
/* Applied when the restaurant owner enables light mode via post_options or
   when the user's device prefers light and no explicit override is set.    */

/* ── variable overrides ─────────────────────────────────────────────────
   The full light palette is defined once and applied to BOTH the explicit
   toggle (data-theme="light") and the auto path (device prefers light, no
   explicit override). Keep the two blocks in sync.                         */
.aurora[data-theme="light"],
:root[data-theme="light"],
:root[data-mb-theme="light"] {
    --au-bg: #f4f5f9;
    --au-bg-2: #ffffff;
    --au-glass: rgba(18, 20, 38, .035);
    --au-glass-2: rgba(18, 20, 38, .06);
    --au-glass-hi: rgba(18, 20, 38, .1);
    --au-border: rgba(18, 20, 38, .1);
    --au-border-hi: rgba(18, 20, 38, .18);
    --au-text: #14152a;
    --au-muted: #565676;
    --au-faint: #8a8aa2;
    --au-shadow: 0 18px 50px -18px rgba(18, 20, 38, .22);

    /* feedback colours darkened for AA on light surfaces (dark values are ~1.8:1 here) */
    --au-veg: #15803d;
    --au-nonveg: #be123c;

    /* semantic surfaces flipped for light */
    --au-bar-bg: rgba(255, 255, 255, .82);
    --au-surface: rgba(255, 255, 255, .98);
    --au-sheet-foot-bg: rgba(244, 245, 249, .92);
    --au-scrim: rgba(20, 21, 42, .38);
    --au-input-bg: rgba(18, 20, 38, .04);
    --au-input-bg-focus: rgba(18, 20, 38, .07);
    --au-select-bg: #ffffff;
    --au-card: rgba(18, 20, 38, .04);
    --au-hero-scrim-1: rgba(255, 255, 255, .88);
    --au-hero-scrim-2: rgba(255, 255, 255, .42);

    /* accent as INK on a light surface: the raw gold is ~1.9:1 on #f4f5f9,
       so darken the brand tone rather than dropping the brand. */
    --au-accent-ink: color-mix(in oklab, var(--au-accent) 58%, #14152a);
}

/* Explicit dark choice (mbTheme toggle sets data-theme="dark" on the theme root;
   the html[data-mb-theme] selector covers the pre-init first paint). The :root
   surface chain runs through the customizer --tc-* roles, so a store with a light
   brand background would otherwise read light even in "dark" — re-assert aurora's
   dark surfaces as LITERALS here (accent + fonts still follow the brand). Mirror of
   the light block above; keep the two in sync. */
.aurora[data-theme="dark"],
:root[data-theme="dark"],
html[data-mb-theme="dark"] .aurora {
    --au-bg: #07070b;
    --au-bg-page: #07070b;
    --au-bg-2: #0d0d15;
    --au-glass: rgba(255, 255, 255, .045);
    --au-glass-2: rgba(255, 255, 255, .07);
    --au-glass-hi: rgba(255, 255, 255, .1);
    --au-border: rgba(255, 255, 255, .09);
    --au-border-hi: rgba(255, 255, 255, .16);
    --au-text: #f5f5fa;
    --au-muted: #9a9aae;
    --au-faint: #6b6b80;
    --au-shadow: 0 18px 50px -18px rgba(0, 0, 0, .75);
    --au-veg: #4ade80;
    --au-nonveg: #fb7185;
    --au-bar-bg: rgba(7, 7, 11, .75);
    --au-surface: rgba(13, 13, 21, .96);
    --au-sheet-foot-bg: rgba(7, 7, 11, .6);
    --au-scrim: rgba(4, 4, 8, .6);
    --au-input-bg: rgba(255, 255, 255, .06);
    --au-input-bg-focus: rgba(255, 255, 255, .09);
    --au-select-bg: #0d0d15;
    --au-card: rgba(255, 255, 255, .06);
    --au-hero-scrim-1: rgba(7, 7, 11, .82);
    --au-hero-scrim-2: rgba(7, 7, 11, .35);
    --au-accent-ink: var(--au-accent);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]),
    .aurora:not([data-theme="dark"]):not([data-theme="light"]) {
        --au-bg: #f4f5f9;
        --au-bg-2: #ffffff;
        --au-glass: rgba(18, 20, 38, .035);
        --au-glass-2: rgba(18, 20, 38, .06);
        --au-glass-hi: rgba(18, 20, 38, .1);
        --au-border: rgba(18, 20, 38, .1);
        --au-border-hi: rgba(18, 20, 38, .18);
        --au-text: #14152a;
        --au-muted: #565676;
        --au-faint: #8a8aa2;
        --au-shadow: 0 18px 50px -18px rgba(18, 20, 38, .22);

        /* feedback colours darkened for AA on light surfaces (dark values are ~1.8:1 here) */
        --au-veg: #15803d;
        --au-nonveg: #be123c;

        --au-bar-bg: rgba(255, 255, 255, .82);
        --au-surface: rgba(255, 255, 255, .98);
        --au-sheet-foot-bg: rgba(244, 245, 249, .92);
        --au-scrim: rgba(20, 21, 42, .38);
        --au-input-bg: rgba(18, 20, 38, .04);
        --au-input-bg-focus: rgba(18, 20, 38, .07);
        --au-select-bg: #ffffff;
        --au-card: rgba(18, 20, 38, .04);
        --au-hero-scrim-1: rgba(255, 255, 255, .88);
        --au-hero-scrim-2: rgba(255, 255, 255, .42);

        --au-accent-ink: color-mix(in oklab, var(--au-accent) 58%, #14152a);
    }
}

/* #42: Seasonal skin overrides — scoped so they can be stacked with light/dark */
.aurora[data-season="ramadan"] { --au-accent: #c0a060; --au-accent-12: rgba(192,160,96,.12); --au-accent-20: rgba(192,160,96,.2); --au-accent-40: rgba(192,160,96,.4); }
.aurora[data-season="christmas"] { --au-accent: #c0392b; --au-accent-12: rgba(192,57,43,.12); --au-accent-20: rgba(192,57,43,.2); --au-accent-40: rgba(192,57,43,.4); }
.aurora[data-season="eid"] { --au-accent: #27ae60; --au-accent-12: rgba(39,174,96,.12); --au-accent-20: rgba(39,174,96,.2); --au-accent-40: rgba(39,174,96,.4); }

/* ===================================================== #39: THEME SWITCHER */
.au-theme-toggle {
    background: var(--au-glass-2); border: 1px solid var(--au-border);
    border-radius: var(--au-r-pill); width: 36px; height: 36px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--au-text); font-size: 15px; transition: background .2s;
}
.au-theme-toggle:hover { background: var(--au-glass-hi); }


/* ═══════════════════════════════════════════════════════════
   theme-pack-blade features (F1–F7)  — aurora-flavoured
   ═══════════════════════════════════════════════════════════ */
:root { --au-fx: var(--au-brand, var(--au-accent)); }

.au-noscroll { overflow: hidden; }

/* shared helpers */
.au-sheet-sub { color: var(--au-muted); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.au-input {
    background: var(--au-input-bg); border: 1px solid var(--au-border);
    border-radius: var(--au-r-sm); padding: 11px 14px; color: var(--au-text);
    font-family: inherit; font-size: 14px;
}
.au-input:focus { outline: none; background: var(--au-input-bg-focus); border-color: var(--au-border-hi); }
.au-linkbtn { display: block; width: 100%; text-align: center; background: none; border: 0; color: var(--au-muted); font-size: 13px; font-weight: 600; padding: 12px 0 2px; cursor: pointer; }
.au-ghostbtn { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: var(--au-r-pill); border: 1px solid var(--au-border-hi); color: var(--au-text); text-decoration: none; font-size: 13px; font-weight: 600; }

/* toast */
.au-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
    background: var(--au-surface); color: var(--au-text); border: 1px solid var(--au-border-hi);
    padding: 11px 20px; border-radius: var(--au-r-pill); font-size: 13.5px; font-weight: 600;
    box-shadow: var(--au-shadow); z-index: 1000010; opacity: 0; pointer-events: none;
    transition: opacity .25s var(--au-ease), transform .25s var(--au-ease); max-width: 80vw; text-align: center;
}
.au-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* F2 · brand / follow row */
.au-brand-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; max-width: 520px; }
.au-brand-info { flex: 1; min-width: 0; }
.au-brand-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--au-text); }
.au-brand-followers { display: block; font-size: 12px; color: var(--au-muted); margin-top: 3px; }
/* verified = an actual seal medallion (filled brand seal + white check), inline
   after the store name (title/aria-label carry the accessible name). */
.au-verified-badge { display: inline-flex; align-items: center; vertical-align: middle; flex: none; line-height: 0; }
.au-verified-badge .vb-seal { width: 17px; height: 17px; display: block; }
.au-verified-badge .vb-seal-fill { fill: var(--au-accent); }
.au-verified-badge .vb-seal-check { fill: #fff; }
.au-follow-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 0; cursor: pointer;
    border-radius: var(--au-r-pill); background: var(--au-fx); color: #0b0b12; font-size: 13px; font-weight: 700; flex: none;
    transition: transform .12s var(--au-ease), background .15s;
}
.au-follow-btn:active { transform: scale(.94); }
.au-follow-btn .au-following-label { display: none; }
.au-follow-btn.is-on { background: var(--au-glass-2); color: var(--au-text); border: 1px solid var(--au-border-hi); }
.au-follow-btn.is-on .au-follow-label, .au-follow-btn.is-on .au-follow-ic { display: none; }
.au-follow-btn.is-on .au-following-label { display: inline; }

/* B1/B2 · shared follower-count partial classes (proof line under the name) */
.au-brand-row .brand-followers { display: block; font-size: 12px; color: var(--au-muted); margin-top: 3px; }
.au-brand-row .brand-followers--cta { color: var(--au-fx); font-weight: 600; }
.au-brand-row .brand-dot { color: var(--au-muted); }
.au-brand-row .brand-viewers b { color: var(--au-text); font-weight: 700; }


/* B5 · scale-pop beat on a successful follow */
@keyframes auFollowPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.au-follow-btn--pop { animation: auFollowPop .25s var(--au-ease); }
@media (prefers-reduced-motion: reduce) { .au-follow-btn--pop { animation: none; } }

/* B6 · Following sheet rows */
.au-follow-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--au-border); font-size: 15px; color: var(--au-text); }
.au-follow-sheet-row input[type="checkbox"] { width: 44px; height: 26px; appearance: none; -webkit-appearance: none; background: var(--au-glass-2); border: 1px solid var(--au-border-hi); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.au-follow-sheet-row input[type="checkbox"]::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
.au-follow-sheet-row input[type="checkbox"]:checked { background: var(--au-fx); }
.au-follow-sheet-row input[type="checkbox"]:checked::after { inset-inline-start: 20px; }
.au-follow-unfollow { width: 100%; background: color-mix(in srgb, #ef4444 16%, transparent); color: #ef4444; border: 0; padding: 12px; border-radius: var(--au-r-pill); font-weight: 700; font-size: 14px; cursor: pointer; }
.au-btn-ghost { background: none; border: 1px solid var(--au-border); color: var(--au-muted); padding: 12px; border-radius: var(--au-r-pill); font-weight: 600; font-size: 14px; cursor: pointer; }

/* B8 · About sheet */
.au-about-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--au-text); margin-bottom: 16px; }
.au-about-rating i { color: var(--au-fx); }
.au-about-rating small { color: var(--au-muted); font-weight: 500; }
.au-about-list { display: flex; flex-direction: column; }
.au-about-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--au-border); color: var(--au-text); font-size: 14px; text-decoration: none; }
.au-about-row i { width: 20px; text-align: center; color: var(--au-fx); flex: none; }
.au-about-row span { min-width: 0; word-break: break-word; }
.au-about-reviews { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.au-about-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.au-about-star { color: var(--au-fx); font-weight: 700; white-space: nowrap; }
.au-about-review p { color: var(--au-muted); font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* F3 · stories rail + viewer */
.au-stories-rail { display: flex; gap: 14px; overflow-x: auto; padding: 16px 2px 4px; scrollbar-width: none; max-width: 560px; }
.au-stories-rail::-webkit-scrollbar { display: none; }
/* An author display: value outranks the UA [hidden]{display:none} rule, so
   JS-toggled elements must opt back out explicitly or they keep their box. */
.au-stories-rail[hidden] { display: none; }
.au-story-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 66px; background: none; border: 0; cursor: pointer; }
.au-sb-ring { width: 60px; height: 60px; border-radius: 50%; padding: 2.5px; background: linear-gradient(135deg, var(--au-fx), var(--au-accent-40)); display: grid; place-items: center; }
.au-sb-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--au-bg); }
.au-story-bubble small { font-size: 11px; color: var(--au-muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-story-viewer { position: fixed; inset: 0; z-index: 1000020; background: #000; opacity: 0; transition: opacity .3s var(--au-ease); }
.au-story-viewer.is-open { opacity: 1; }
.au-sv-progress { position: absolute; top: calc(12px + env(safe-area-inset-top)); inset-inline: 12px; z-index: 3; display: flex; gap: 5px; }
.au-sv-seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.au-sv-seg i { display: block; height: 100%; width: 0; background: #fff; transition: width .05s linear; }
.au-sv-close { position: absolute; top: calc(26px + env(safe-area-inset-top)); inset-inline-end: 16px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 17px; }
/* 38px story-close → 44px tap floor. */
.au-sv-close::after { content: ""; position: absolute; inset: -3px; }
.au-sv-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.au-sv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-sv-nav { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; background: transparent; border: 0; cursor: pointer; }
.au-sv-nav.prev { inset-inline-start: 0; }
.au-sv-nav.next { inset-inline-end: 0; }
.au-sv-foot { position: relative; z-index: 3; width: 100%; padding: 24px 22px calc(30px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.72), transparent); }
.au-sv-caption { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.au-sv-cta { height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.au-sv-cta[hidden] { display: none; }

/* F1 · meal-plan CTA + sheet */
.au-mealplan-cta {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; cursor: pointer;
    background: var(--au-accent-12); border: 1px solid var(--au-accent-20); border-radius: var(--au-r-md);
    padding: 13px 15px; margin: 12px 0; transition: transform .12s var(--au-ease);
}
.au-mealplan-cta:active { transform: scale(.985); }
.au-mp-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--au-accent-20); display: grid; place-items: center; color: var(--au-fx); flex: none; }
.au-mp-copy { flex: 1; }
.au-mp-copy b { display: block; font-size: 14px; font-weight: 700; color: var(--au-text); }
.au-mp-copy small { display: block; font-size: 11.5px; color: var(--au-muted); margin-top: 2px; }
.au-mp-arr { color: var(--au-muted); }
.au-mp-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--au-muted); margin: 12px 0 6px; }
.au-seg-mini { display: flex; gap: 6px; flex-wrap: wrap; }
.au-seg-mini button, .au-chiprow button {
    padding: 8px 14px; border-radius: var(--au-r-pill); background: var(--au-glass-2); border: 1px solid var(--au-border);
    font-size: 12.5px; font-weight: 600; color: var(--au-text); cursor: pointer;
}
.au-seg-mini button.is-on, .au-chiprow button.is-on { border-color: var(--au-fx); color: var(--au-fx); background: var(--au-accent-12); }
.au-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.au-mp-done { text-align: center; padding: 12px 0; }
.au-mp-done b { display: block; font-size: 16px; margin: 8px 0 4px; }

/* F4 · branch map */
.au-branchmap { width: 100%; height: 240px; border-radius: var(--au-r-md); overflow: hidden; background: var(--au-glass-2); margin-bottom: 8px; }
.au-branchmap .leaflet-container { height: 100%; background: var(--au-glass-2); font: inherit; }
.au-branch-list { display: grid; gap: 8px; margin-top: 8px; }
.au-branch-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; cursor: pointer; padding: 11px 14px; border-radius: var(--au-r-sm); background: var(--au-glass-2); border: 1px solid var(--au-border); color: var(--au-text); }
.au-branch-row i { color: var(--au-fx); }
.au-branch-row b { flex: 1; font-size: 13.5px; font-weight: 600; }
.au-branch-row b small { display: block; font-weight: 400; color: var(--au-muted); font-size: 11.5px; margin-top: 2px; }
.au-branch-dist { font-size: 12px; font-weight: 700; color: var(--au-fx); flex: none; }
.au-nearest-branch-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 10px 15px; border-radius: var(--au-r-pill); background: var(--au-glass-2); border: 1px solid var(--au-border-hi); font-size: 13px; font-weight: 600; color: var(--au-text); cursor: pointer; }
.au-nearest-branch-btn i { color: var(--au-fx); }
.au-geo-attrib { font-size: 10.5px; color: var(--au-muted); margin: 6px 2px 0; }

/* F5 · address autocomplete */
.au-addr-field { position: relative; }
.au-addr-field textarea#au-cust-addr { padding-inline-end: 46px; width: 100%; }
.au-useloc-btn { position: absolute; top: 8px; inset-inline-end: 8px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--au-fx); background: none; border: 0; cursor: pointer; }
.au-useloc-btn.is-loading { opacity: .5; animation: au-spin 1s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-addr-suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 12; background: var(--au-surface); border: 1px solid var(--au-border-hi); border-radius: var(--au-r-sm); overflow: hidden; box-shadow: var(--au-shadow); max-height: 230px; overflow-y: auto; }
.au-addr-opt { display: block; width: 100%; text-align: start; padding: 11px 15px; font-size: 13px; color: var(--au-text); background: none; border: 0; border-bottom: 1px solid var(--au-border); cursor: pointer; }
.au-addr-opt:last-child { border-bottom: 0; }
.au-addr-opt:hover, .au-addr-opt:active { background: var(--au-glass-2); }

/* saved addresses (logged-in): tappable chips above the address input */
.au-saved-addrs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.au-saved-addr { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 13px; border-radius: var(--au-r-sm); background: var(--au-glass-2); border: 1px solid var(--au-border-hi); color: var(--au-text); cursor: pointer; text-align: start; }
.au-saved-addr i { color: var(--au-fx); flex-shrink: 0; }
.au-saved-addr .sa-text { display: flex; flex-direction: column; min-width: 0; }
.au-saved-addr .sa-text b { font-size: 12.5px; font-weight: 600; }
.au-saved-addr .sa-text small { font-size: 11px; color: var(--au-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-saved-addr.is-on { border-color: var(--au-fx); background: var(--au-glass); }

/* R5 · guest order history (localStorage) */
.au-recent-orders-head { font-size: 12px; font-weight: 600; color: var(--au-muted); margin-bottom: 8px; }
.au-recent-order { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 8px; background: var(--au-glass); border: 1px solid var(--au-border); border-radius: 10px; text-decoration: none; color: inherit; }
.au-recent-order:last-child { margin-bottom: 0; }
.au-recent-order .ro-id { font-size: 13px; font-weight: 600; }
.au-recent-order .ro-total { font-size: 13px; font-weight: 700; color: var(--au-fx); flex-shrink: 0; }

/* order number on the confirmed screen */
.au-order-no { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: var(--au-r-pill); border: 1px dashed var(--au-border-hi); font-size: 13px; font-weight: 700; color: var(--au-text); letter-spacing: .2px; }

/* inline quick-rate row */
.au-rate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.au-rate-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--au-faint); font-weight: 600; }
.au-rate-stars { display: inline-flex; gap: 4px; }
.au-rate-stars button { appearance: none; background: none; border: 0; padding: 2px; margin: -2px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--au-border-hi); transition: color .15s ease, transform .15s ease; }
.au-rate-stars button:hover, .au-rate-stars button.is-on { color: var(--au-star); }
.au-rate-stars button:hover { transform: scale(1.12); }
.au-rate-thanks { font-size: 13px; color: var(--au-muted); font-weight: 600; }

/* F6 · rich reviews */
#au-rv-container { margin-top: 8px; }
.au-rv-writebtn { float: inline-end; display: inline-flex; align-items: center; min-height: 32px; background: var(--au-glass-2); border: 1px solid var(--au-border); color: var(--au-fx); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--au-r-pill); cursor: pointer; }
.au-rv-head { display: flex; gap: 18px; background: var(--au-glass-2); border: 1px solid var(--au-border); border-radius: var(--au-r-md); padding: 16px; margin-bottom: 12px; }
.au-rv-avg { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; min-width: 78px; }
.au-rv-avg b { font-size: 32px; font-weight: 800; line-height: 1; color: var(--au-text); }
.au-rv-avg small { font-size: 11px; color: var(--au-muted); margin-top: 4px; }
.au-stars-mini { color: var(--au-star); font-size: 13px; letter-spacing: 1px; }
.au-stars-mini .s-dim { color: var(--au-border-hi); }
.au-rv-dist { flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.au-rv-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--au-muted); }
.au-rv-bar em { font-style: normal; width: 10px; text-align: end; }
.au-rv-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--au-glass); overflow: hidden; }
.au-rv-bar i s { display: block; height: 100%; background: var(--au-star); border-radius: 3px; }
.au-rv-bar b { width: 20px; text-align: end; font-weight: 700; color: var(--au-text); }
.au-rv-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.au-rv-filters button { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 14px; border-radius: var(--au-r-pill); background: var(--au-glass-2); border: 1px solid var(--au-border); font-size: 12.5px; font-weight: 600; color: var(--au-text); cursor: pointer; }
.au-rv-filters button.is-on { border-color: var(--au-fx); color: var(--au-fx); background: var(--au-accent-12); }
.au-rv-list { display: grid; gap: 12px; }
.au-rv-item { background: var(--au-glass-2); border: 1px solid var(--au-border); border-radius: var(--au-r-sm); padding: 13px 15px; }
.au-rv-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.au-rv-item-top b { font-size: 13.5px; font-weight: 700; color: var(--au-text); }
.au-rv-verified { font-size: 10.5px; font-weight: 700; color: var(--au-fx); background: var(--au-accent-12); padding: 2px 8px; border-radius: var(--au-r-pill); }
.au-rv-item p { font-size: 13px; color: var(--au-muted); line-height: 1.5; margin-top: 6px; }
.au-rv-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.au-rv-photos img { width: 66px; height: 66px; border-radius: 11px; object-fit: cover; border: 1px solid var(--au-border); }
.au-rv-empty { font-size: 13px; color: var(--au-muted); text-align: center; padding: 22px 0; }
.au-rv-stars { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.au-rv-stars button { color: var(--au-border-hi); font-size: 30px; background: none; border: 0; cursor: pointer; transition: transform .12s var(--au-ease); line-height: 1; }
.au-rv-stars button:active { transform: scale(1.2); }
.au-rv-stars button.is-on { color: var(--au-star); }

/* F7 · OTP checkout gate */
.au-otp-boxes { display: flex; gap: 8px; justify-content: center; margin: 6px 0 14px; }
.au-otp-boxes input { width: 46px; height: 56px; text-align: center; font-size: 21px; font-weight: 700; border: 1px solid var(--au-border); border-radius: var(--au-r-sm); background: var(--au-input-bg); color: var(--au-text); }
.au-otp-boxes input:focus { outline: none; border-color: var(--au-fx); background: var(--au-input-bg-focus); }

/* RTL: leaflet + numeric bits already handled via dir="ltr"; pin distance LTR */
[dir="rtl"] .au-branch-dist, [dir="rtl"] .au-otp-boxes { direction: ltr; }

/* ── agent-chat FAB clearance (transient) ──────────────────────────────────
   .au-cartbar is fixed at the bottom but only slides in once the cart has
   something in it, so a static offset would leave a dead gap under the FAB for
   every empty-cart visitor. Drive it off the .show class this theme's own JS
   already toggles instead — no theme JS change, and it costs nothing when the
   cart is empty. Bar: bottom 16px + 62px tall (12px padding × 2 + 38px .cb-ico).

   The media query is load-bearing, not decoration: .au-cartbar only gets
   `display:flex` under (max-width:600px) — above that it is display:none. :has()
   matches on the class, not on whether the element renders, so an unscoped rule
   would lift the FAB on desktop to clear a bar that isn't there. */
@media (max-width: 600px) {
    :root:has(.au-cartbar.show) { --agent-fab-offset: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================ TWO-TIER SUB-CATEGORY CHIPS
   Secondary row that swaps in under the primary chip row for the active parent.
   Lighter/smaller than .au-chip so the hierarchy reads at a glance. */
.au-subchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px 2px; }
.au-subchips::-webkit-scrollbar { display: none; }
.au-subgroup { display: flex; gap: 8px; }
/* native [hidden] loses to the class display rules above — restore it so the
   sub-row and inactive parent groups actually collapse (PLAYBOOK [hidden] trap) */
.au-subchips[hidden], .au-subgroup[hidden] { display: none !important; }
.au-subchip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--au-r-pill);
    background: transparent; border: 1px solid var(--au-border);
    color: var(--au-muted); font-size: 13px; font-weight: 600; white-space: nowrap;
    cursor: pointer; transition: all .22s var(--au-ease);
}
.au-subchip:hover { color: var(--au-text); border-color: var(--au-border-hi); }
.au-subchip.active { background: var(--au-glass-hi); border-color: var(--au-accent); color: var(--au-text); }

/* ============================================================ SPLASH INTRO
   Bespoke aurora entrance overlay. Rendered only when the shared splash is OFF
   (see index.blade.php gate). Auto-fades via CSS so it needs no JS to disappear. */
.au-splash {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center;
    background:
        radial-gradient(120% 90% at 50% 8%, var(--au-accent-20, rgba(245,181,74,.2)) 0%, transparent 55%),
        linear-gradient(180deg, var(--au-bg) 0%, var(--au-bg-2) 100%);
    animation: au-splash-out .6s var(--au-ease) 2s forwards;
}
.au-splash.is-gone { animation: au-splash-out .45s var(--au-ease) forwards; }
.au-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: au-splash-in .7s var(--au-ease) both; }
.au-splash-logo { width: 76px; height: 76px; border-radius: 22px; object-fit: cover; border: 1px solid var(--au-border-hi); box-shadow: var(--au-shadow); }
.au-splash-hero { position: relative; width: 190px; height: 130px; margin: 6px 0 2px; }
.au-splash-ring {
    position: absolute; inset: 50% auto auto 50%; width: 130px; height: 130px;
    transform: translate(-50%, -50%); border-radius: 50%;
    border: 1.5px dashed var(--au-border-hi); animation: au-splash-spin 9s linear infinite;
}
.au-splash-pop { position: absolute; border-radius: 18px; object-fit: cover; box-shadow: var(--au-shadow); border: 1px solid var(--au-border-hi); }
.au-splash-pop-0 { width: 92px; height: 92px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 3; }
.au-splash-pop-1 { width: 54px; height: 54px; top: -4px; inset-inline-end: 2px; z-index: 2; }
.au-splash-pop-2 { width: 48px; height: 48px; bottom: -2px; inset-inline-start: 4px; z-index: 2; }
.au-splash-title { font-family: var(--au-display); font-size: clamp(26px, 7vw, 40px); margin: 6px 0 0; }
.au-splash-tag { color: var(--au-muted); font-size: 14px; margin: 0; }
.au-splash-skip {
    position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px;
    padding: 8px 16px; border-radius: var(--au-r-pill);
    background: var(--au-glass-2); border: 1px solid var(--au-border);
    color: var(--au-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.au-splash-skip:hover { color: var(--au-text); border-color: var(--au-border-hi); }
@keyframes au-splash-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes au-splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes au-splash-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .au-splash-inner { animation: none; }
    .au-splash-ring { animation: none; }
}

/* ==================================== rescue pass (wave 4) — see findings/aurora.md */

/* Review widget outcome lines. Previously the widget was replaced with a
   "Thank you!" paragraph whatever the server answered; success and failure now
   read differently and failure leaves the form in place so the diner can retry. */
.au-review-done   { color: var(--au-accent-ink); padding: 8px 0; margin: 0; font-weight: 600; }
.au-review-failed { color: var(--au-nonveg); padding: 8px 0; margin: 6px 0 0; font-size: 13px; }

/* ---- touch targets (WCAG 2.5.8 / iOS HIG: 44px) --------------------------
   The heart, the share button, the add button, the sheet close buttons and the
   category/sort chips all rendered between 30 and 38px tall. On a phone held
   one-handed those are misses, and the heart sits ON the card image so a miss
   opens the item instead. Padding the hit area keeps the visual size. */
/* .au-fav is position:absolute (card overlay); excluded so this touch-target
   rule doesn't force it into flow and overlap the card text. Its ::after 44px
   hit box below still works over an absolute parent. */
.share-dish-btn, .au-close, .au-theme-toggle, .au-icon-btn,
.au-fav-toggle, .au-login-toggle, .au-cart-toggle { position: relative; }
.au-fav::after, .share-dish-btn::after, .au-close::after, .au-theme-toggle::after,
.au-icon-btn::after, .au-fav-toggle::after, .au-login-toggle::after,
.au-cart-toggle::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.au-add { min-height: 44px; }
.au-chip, .au-subchip, .au-sort-btn { min-height: 44px; }

/* ---- iOS zoom-on-focus ---------------------------------------------------
   Safari force-zooms any focused input whose font-size is below 16px and never
   zooms back out, which on a QR menu leaves the diner stranded mid-checkout.
   16px is the floor; the compact look is kept with padding, not type size. */
.aurora input, .aurora textarea, .aurora select,
.au-sheet input, .au-sheet textarea, .au-sheet select { font-size: 16px; }

/* ---- bottom-of-screen stack ---------------------------------------------
   The resume banner, the cart bar, the reserve FAB, the waitlist FAB, the toast
   and the shared WhatsApp bubble all anchored to the same ~80px band and drew
   on top of one another. Give the band a single scale, lift the FABs clear of
   the cart bar, and respect the iOS home indicator. */
:root { --au-fab-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
/* the cart bar and the resume prompt both occupy the bottom slot; lift the FABs
   over whichever one is currently up (they are mutually exclusive by design). */
body:has(#au-cartbar.show)      { --au-fab-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
body:has(.aurora.au-resume-open){ --au-fab-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

.au-fab {
    position: fixed; bottom: var(--au-fab-bottom);
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 11px 18px;
    border: 1px solid transparent; border-radius: var(--au-r-pill);
    font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45);
    transition: bottom .25s var(--au-ease), transform .15s var(--au-ease);
}
.au-fab:active { transform: scale(.96); }
/* One button language: the reserve FAB used to be a hardcoded indigo while the
   waitlist FAB took the brand accent — two competing primaries on one edge. */
.au-fab--primary { background: var(--au-accent); color: #0a0a0a; z-index: 45; }
.au-fab--ghost   { background: var(--au-surface); color: var(--au-text); border-color: var(--au-border-hi); z-index: 45; }
/* Logical insets so the pair MIRRORS in Arabic; both physical sides are pinned
   so neither button can stretch across the viewport when dir flips. The shared
   WhatsApp bubble is ~50px wide at the inline-start edge, so start past it. */
#au-waitlist-fab { inset-inline-start: 76px; inset-inline-end: auto; }
#au-res-fab      { inset-inline-end: 16px;  inset-inline-start: auto; }

.au-resume-banner { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.au-cartbar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Inline outcome lines for the waiter sheet and the NPS block (previously both
   claimed success from the click handler and had nowhere to report a failure). */
.au-waiter-error, .au-nps-error {
    display: block; margin: 10px 0 0; font-size: 13px; color: var(--au-nonveg);
}
.au-nps-done { text-align: center; color: var(--au-accent-ink); font-weight: 600; padding: 12px 0; margin: 0; }

/* Keyboard focus rings (a11y). The theme only styled input :focus — every
   button, link, icon button, menu card, category chip, carousel dot and story
   bubble was invisible to keyboard users (one rule even set outline:none). One
   accent-gold ring for all of them; the outline follows each element's own
   border-radius so round icon buttons ring as circles and cards as cards. */
.aurora a:focus-visible,
.aurora button:focus-visible,
.aurora [tabindex]:focus-visible,
.aurora .au-chip:focus-visible,
.aurora .au-icon-btn:focus-visible,
.aurora .au-story-bubble:focus-visible,
.aurora .au-spotlight:focus-visible,
.aurora .au-featured:focus-visible {
    outline: 2px solid var(--au-accent);
    outline-offset: 2px;
}
/* Inputs already ring via box-shadow above; keep their outline suppressed so
   they don't double-ring. */
.aurora .au-search input:focus-visible,
.aurora .au-field input:focus-visible,
.aurora .au-field select:focus-visible,
.aurora .au-field textarea:focus-visible,
.aurora .au-input:focus-visible { outline: none; }

/* ── cart tap targets (ported from soiree) ────────────────
   The stepper and the remove control drew at 32–34px, under the 44px floor.
   The pills sit 2px apart, so the hit area may only grow on the block axis —
   an inline expansion would make + and − overlap and mis-decrement the line. */
.au-qty button, .au-remove, .au-cart-item .au-remove { position: relative; }
.au-qty button::after { content: ""; position: absolute; inset: -6px -1px; }
.au-remove::after { content: ""; position: absolute; inset: -6px; }

/* ── tap floor (a11y, 44px) ───────────────────────────────
   Measured on the live home page: these controls drew 25–43px against the
   44px guideline. Text pills take a min-height (they already carry padding, so
   nothing reflows); icon buttons keep their drawn size and grow a transparent
   ::after instead, capped at half the neighbour gap so no two targets overlap. */
select{min-height:44px}
.au-follow-btn,.au-linkbtn{min-height:44px}

/* The theme's own order-type segments (delivery / pickup / dine-in) drew 33–41px
   tall — the tallest-traffic choice on the page, and the last group under the
   44px floor after the tap-floor pass. */
.au-seg button,.au-seg-mini button{min-block-size:44px}

/* Last group under the floor: rating stars, NPS 0–10, category/diet chips and
   language-menu rows. Rows of stars/NPS sit close together, so those grow only
   on the block axis; the rest are text rows that take a min-height. */
.au-lang-menu button{min-block-size:44px}
.au-rv-stars button{position:relative}
.au-rv-stars button::after{content:"";position:absolute;inset:-6px -1px}

/* ── MC-34 currency-estimate notice, aurora skin ─────────────────────────
   aurora ships its own disclaimer, inserted right after its topbar (inline
   styles removed from the JS). In-flow centered pill below the topbar —
   the layout the owner approved: never covers chrome, scrolls with the
   page. */
#au-currency-disclaimer{
  margin:10px auto 0;width:max-content;max-width:min(92vw,560px);
  border-radius:999px;padding:8px 16px;
  text-align:center;font-size:11.5px;letter-spacing:.01em;line-height:1.45;
  background:var(--au-glass-2);border:1px solid var(--au-border);color:var(--au-accent);font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

/* ── notification-center panel — aurora skin: recolor the shared structure in
   _partials/notif-bell (geometry + layout live in that partial's baseline).
   Every var() carries a literal default so it renders even when the panel
   sits outside this theme's token scope. */
.mb-nb-card{--nb-surface:var(--au-bg-2,#0d0d15);--nb-surface-2:var(--au-accent-12,rgba(245,181,74,.12));--nb-line:var(--au-border,rgba(255,255,255,.09));--nb-ink:var(--au-text,#f5f5fa);--nb-muted:var(--au-muted,#9a9aae);--nb-accent:var(--au-accent,#f5b54a)}

/* ═══════════════════════════════════════════════════════════════════════════
   AURORA 2.0 · redesign layer (2026-08)
   Bottom-of-set customer UI ratings. Audit: a theme named "aurora" with no
   aurora anywhere — a flat single-colour accent on grey glass; dish photos
   curtained by up to seven stacked badges; macro/allergen/share clutter on
   every card; store-name captions repeated under each story bubble. Same DOM,
   CSS only: the detail sheet keeps every fact. This layer gives both faces a
   northern-lights identity (teal → brand → violet) and app-density cards.
   Source order beats the base rules above by design.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* the aurora: brand colour suspended between teal and violet */
    --au-aurora: linear-gradient(115deg, #2fd4b2 0%, var(--au-accent) 48%, #8b5cf6 100%);
    --au-aurora-soft: linear-gradient(115deg, rgba(47,212,178,.16), var(--au-accent-12) 48%, rgba(139,92,246,.16));
}

/* sky wash behind the page — faint on light, luminous on dark */
.aurora {
    background-image:
        radial-gradient(900px 340px at 12% -80px, rgba(47,212,178,.10), transparent 70%),
        radial-gradient(900px 380px at 88% -60px, rgba(139,92,246,.10), transparent 70%);
    background-repeat: no-repeat;
}

/* ── Identity: gradient where the eye lands ───────────────────────────── */
.au-hero h1 .au-grad {
    background-image: var(--au-aurora);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.au-chip.active { background-image: var(--au-aurora); color: #fff; border-color: transparent; }
.au-add:not(.is-ghost) { background-image: var(--au-aurora); color: #fff; }
.au-cta:not(.is-ghost) { background-image: var(--au-aurora); color: #fff; }
.au-sb-ring { background: var(--au-aurora); }
.au-card:hover { box-shadow: 0 18px 50px -18px rgba(96,120,220,.35); }

/* ── Cards: photo-first, one diet dot ─────────────────────────────────── */
.au-card-badges .au-badge { display: none; }
.au-card-badges .au-badge.diet-veg,
.au-card-badges .au-badge.diet-nonveg,
.au-card-badges .au-badge.diet-popular,
.au-card-badges .au-badge[style*="ff4757"] { display: inline-flex; } /* sold-out keeps its inline red */
.au-card-badges .au-badge.diet-veg,
.au-card-badges .au-badge.diet-nonveg { font-size: 0; padding: 6px; gap: 0; }
.au-card-badges .au-badge.diet-veg i,
.au-card-badges .au-badge.diet-nonveg i { font-size: 8px !important; }

/* macro row → kcal only (row keeps its inline styles; spans carry none) */
.au-card-body > div[style*="font-size:11px"] span:not(:first-child) { display: none; }
.au-card-allergies img { width: 16px; height: 16px; opacity: .85; }
/* per-card share: real estate on phones; sharing lives in the detail sheet */
@media (max-width: 700px) { .au-card .share-dish-btn { display: none !important; } }

/* 2-up on phones (base auto-fill minmax(280px) forces one column) */
@media (max-width: 700px) {
    .au-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .au-card-media { aspect-ratio: 4/3; }
    .au-card-body { padding: 11px 12px 12px; }
    .au-card-title { font-size: 14.5px; }
    .au-card-desc { font-size: 12px; }
    .au-card-price { font-size: 15.5px; }
    .au-card-foot { flex-wrap: wrap; gap: 8px; }
}

/* ── Stories: the ring is the signal; drop the repeated store-name --------- */
.au-story-bubble small { display: none; }
.au-story-bubble { gap: 0; }
/* base ≤600px turned cards into media-left rows (132px thumb); with the 2-up
   grid that cramps titles to 3 wrapped lines. Photo-top column cards instead. */
@media (max-width: 700px) {
    .au-card { flex-direction: column; }
    .au-card-media { width: auto; flex: initial; aspect-ratio: 4/3; }
}
/* featured price sits on the photo's dark gradient in BOTH faces — on-image
   ink, not the accent (dark-blue-on-black on the dark face). */
.au-featured-body .au-price { color: var(--au-on-image); }
/* Chef's Pick tag joins the identity + readable ink on any accent */
.au-featured-tag { background-image: var(--au-aurora); color: #fff; }

/* ── AURORA 2.1 · round 2 — sheet polish (2026-08) ─────────────────────── */
/* selected option rows pick up the aurora tint */
.au-opt.selected { background: var(--au-aurora-soft); border-color: transparent; }
.au-opt.selected .au-opt-mark { border-color: var(--au-accent); }
/* qty stepper + close affordance a touch bolder in the sheet */
.au-sheet .au-qty { border-color: var(--au-border-hi); }
/* sheet section headers align with the identity */
.au-detail-section h4 { letter-spacing: .12em; }

/* ═══ AURORA 2.2 · home-page pass (2026-08) ─ one-screen hero card ═══ */
.mbs { margin-block-end: 10px; }
.mbs__img { aspect-ratio: 16 / 7; max-block-size: 220px; }
@media (max-width: 640px) { .mbs__img { aspect-ratio: 16 / 7; } }
.au-hero { padding-block: 10px 6px; }
.au-hero-cover { max-block-size: 150px; overflow: hidden; }
.au-hero-inner { padding: 16px 16px 14px; gap: 14px; }
.au-hero-logo { width: 56px; height: 56px; }
.au-hero h1 { font-size: clamp(26px, 6vw, 38px); margin-block: 4px 4px; }
.au-hero-tag { font-size: 13.5px; margin-block-end: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-hero-meta { gap: 6px; }
.au-chip-meta { padding: 5px 11px; font-size: 12px; }
.au-brand-row { margin-block-start: 10px; }
.au-stories-rail { padding-block: 10px 2px; }
/* featured "Chef's Pick" inside the hero: a card, not a second hero */
.au-featured { max-block-size: 300px; }
.au-featured img { max-block-size: 300px; }
/* injected offers/order-type/combo strips park at body level — same canvas as .au-wrap */
#mbOffersStrip, #mbOrderType, #mb-combo-rail {
    max-inline-size: 1180px; margin-inline: auto; padding-inline: 18px;
}
/* specials rails: promo cards, not heroes */
.au-rail .au-spotlight { flex-basis: 220px; max-width: 240px; }
.au-spotlight { aspect-ratio: 4/3; }
.au-spotlight-body h4 { font-size: 14.5px; margin-bottom: 3px; }
.au-rail { gap: 12px; padding-bottom: 10px; }
/* brand row: the fixed 520px track overflowed the hero card on narrow phones,
   clipping the Follow button off the card edge */
.au-brand-row { max-width: 100%; flex-wrap: wrap; row-gap: 8px; }

/* ═══ AURORA 3.0 · bottom dock (soiree-parity) ═══ */
:root { --au-dock-h: 62px; }
.au2-dock {
    position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
    z-index: 45; display: flex; gap: 2px;
    width: calc(100vw - 16px); max-width: 460px;
    padding: 6px; border-radius: 999px;
    background: var(--au-bar-bg);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    border: 1px solid var(--au-border);
    box-shadow: var(--au-shadow);
}
.au2-dock-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 0; flex: 1 1 0; padding: 7px 4px 6px; border: 0; border-radius: 999px;
    background: none; color: var(--au-muted); cursor: pointer;
    font-size: 10.5px; font-weight: 700;
}
.au2-dock-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au2-dock-btn svg { width: 20px; height: 20px; }
.au2-dock-btn.is-on { background-image: var(--au-aurora); color: #fff; }
.au2-dock-badge {
    position: absolute; top: 2px; inset-inline-end: 8px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: var(--au-accent); color: #fff; font-style: normal;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
    border: 2px solid var(--au-bg);
}
/* the slide-up cart bar + page tail clear the dock */
.au-cartbar { bottom: calc(var(--au-dock-h) + 20px); }
#au-menu-root { padding-bottom: calc(var(--au-dock-h) + 28px); }
:root { --agent-fab-offset: calc(var(--au-dock-h) + 20px + env(safe-area-inset-bottom, 0px)); }

/* ═══ AURORA 4.0 · design-review grind ═══ */
/* grid blowout: hero-inner grid items keep min-width:auto, so the brand row's
   content pushed the Follow button ~23px past the hero card's edge on phones */
.au-hero-inner > * { min-width: 0; }
.au-brand-row { max-width: 100%; }
/* resume banner: it stacked on the dock at bottom:20, and my first pass lifted
   it 96px clear — which parked a floating panel in the MIDDLE of the screen,
   over the menu. It belongs immediately above the dock, in the same slot the
   cartbar uses (the theme hides the cartbar while resume is open), so it reads
   as one bottom bar instead of a block covering content. */
.au-resume-banner { bottom: calc(var(--au-dock-h) + 20px); }
/* desktop slider: same fixed-height crop as the other two */
@media (min-width: 641px) {
    .mbs__img { width: 100%; height: 232px; aspect-ratio: auto; object-fit: cover; }
}

/* ═══ AURORA 4.1 · PAGE CANVAS ═══
   body was already painted; html was not, so the overscroll/rubber-band area
   past the end of the page still flashed white on the dark face. */
html { background: var(--au-bg); }
html, body { margin: 0; }

/* ═══ AURORA 4.2 · text contrast (WCAG pass, light + dark faces) ═══
   Four failures, all brand-accent text or white-on-accent below 4.5:1 on the
   light face, where the raw accent is much lighter than the ink. */
.au-follow-label, .au-follow-btn { color: #fff; }
.au-resume-btn { color: #fff; background: var(--au-accent-ink, var(--au-accent)); }
.au-badge-count { color: #fff; background: #c62828; }
.au-sort-btn.active { color: #fff; background: var(--au-accent-ink, var(--au-accent)); border-color: transparent; }
/* the active sort chip carries its colours as INLINE styles in the blade
   (dark ink on the raw brand accent = 2.92:1 on the light face), so the fix has
   to out-weigh them */
.au-sort-btn.active { background: var(--au-accent-ink, var(--au-accent)) !important; color: #fff !important; border-color: transparent !important; }

/* ═══ AURORA 4.3 · accent-as-ink on the DARK face ═══
   --au-accent-ink means "the brand colour used as text". The light face
   darkens it (a pale accent on white is unreadable) but the dark face left it
   RAW — so a store with a dark brand colour, like this demo's navy, painted
   navy text on a near-black ground: the "Digital Menu" eyebrow, the "Official
   store" badge, the follow hint and the spotlight rank all measured around
   0.35 relative luminance and were effectively invisible. Contrast-ratio
   scanning can't catch these because they sit on the cover photo and its
   scrim, not on a flat colour. Lighten the accent for the dark face, mirroring
   what the light face does in the other direction. */
@supports (color: color-mix(in oklab, red 50%, white)) {
    .aurora[data-theme="dark"],
    :root[data-theme="dark"],
    :root[data-mb-theme="dark"] {
        --au-accent-ink: color-mix(in oklab, var(--au-accent) 60%, #f5f5fa);
    }
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="dark"]):not([data-theme="light"]),
        .aurora:not([data-theme="dark"]):not([data-theme="light"]) {
            --au-accent-ink: color-mix(in oklab, var(--au-accent) 60%, #f5f5fa);
        }
    }
}
/* the follow hint and the verified-store badge paint the RAW brand token
   (--au-fx) as text; on the dark face that is the same unreadable navy the
   eyebrow had. Accent-as-ink is the right token for text. */
.au-brand-row .brand-followers--cta,
.au-brand-row .brand-followers,
.vb-badge .vb-text, .vb-text { color: var(--au-accent-ink) !important; }

/* ═══════════════════════════════════════════════════════════
   Hotel guest layer — aurora skin  (lane C · copy-adapt of the crave L0 reference)
   ───────────────────────────────────────────────────────────
   Aurora is a bespoke-sheet family: its native sheet is a right-edge slide-over
   (.au-sheet, translateX), NOT crave's bottom sheet — so the shared #mbHotelHub is
   re-shaped here into that same slide-over (surface --au-surface, blur, --au-scrim
   dimmer, side slide with the RTL sign flip aurora itself uses). Chip mounts natively
   in .au-brand-row (data-mb-hotel-chip-slot) beside the follow button. Scoped under
   .aurora so aurora's tokens resolve once the layer is relocated into the theme root;
   both schemes re-ink automatically because every --mbh-* maps onto an aurora token
   that flips with data-theme.
   ═══════════════════════════════════════════════════════════ */

/* Token contract → aurora's real tokens */
.aurora #mbHotelChip,
.aurora #mbHotelOrderCtrls,
.aurora #mbHotelBook,
.aurora #mbHotelHub{
  --mbh-surface:var(--au-surface);
  --mbh-ink:var(--au-text);
  --mbh-muted:var(--au-muted);
  --mbh-accent:var(--au-accent);
  --mbh-on-accent:#0a0a0a;
  --mbh-border:var(--au-border);
  --mbh-radius:var(--au-r-md);
  --mbh-font:var(--au-font);
}

/* ── Room chip: a glass meta-pill sitting with the follow button in .au-brand-row ── */
.aurora #mbHotelChip{
  margin:0;padding:8px 14px;gap:7px;flex:none;
  background:var(--au-glass-2);border:1px solid var(--au-border);color:var(--au-muted);
  border-radius:var(--au-r-pill);font-size:13px;font-weight:700;
  transition:transform .12s var(--au-ease),background .15s;
}
.aurora #mbHotelChip:hover{background:var(--au-glass-hi);border-color:var(--au-border-hi);}
.aurora #mbHotelChip:active{transform:scale(.94)}
.aurora #mbHotelChip .mb-hotel-roomchip__ic{color:var(--au-accent)}
.aurora #mbHotelChip .mb-hotel-roomchip__room{color:var(--au-text)}
.aurora #mbHotelChip .mb-hotel-roomchip__guest{color:var(--au-muted)}

/* ── Hub: re-shaped into aurora's right-edge slide-over (.au-sheet look) ── */
.aurora #mbHotelHubScrim{background:var(--au-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.aurora #mbHotelHub{
  inset-block:0;inset-inline-start:auto;inset-inline-end:0;
  margin:0;inline-size:min(440px,100%);max-inline-size:100%;max-block-size:100dvh;block-size:100%;
  background:var(--au-surface);color:var(--au-text);
  border:0;border-start-start-radius:0;border-start-end-radius:0;
  border-inline-start:1px solid var(--au-border);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:var(--au-shadow);
  transform:translateX(100%);
  transition:transform .42s var(--au-ease);
}
[dir="rtl"] .aurora #mbHotelHub{transform:translateX(-100%);}
.aurora #mbHotelHub.is-open{transform:none;}
.aurora #mbHotelHub .mb-hotel-hub__grab{display:none;}
.aurora #mbHotelHub .mb-hotel-hub__head{padding:18px 20px 12px;border-bottom:1px solid var(--au-border);}
.aurora #mbHotelHub .mb-hotel-hub__title{font-family:var(--au-display);font-size:18px;}
.aurora #mbHotelHub .mb-hotel-hub__x{
  background:var(--au-glass-2);border:1px solid var(--au-border);color:var(--au-text);
  inline-size:38px;block-size:38px;border-radius:12px;font-size:1.1rem;opacity:1;
}
.aurora #mbHotelHub .mb-hotel-hub__x:hover{background:var(--au-glass-hi);}
.aurora #mbHotelHub .mb-hotel-hub__body{padding-block-start:16px;}
.aurora #mbHotelHub .mb-hotel-hub__greet{color:var(--au-muted)}
.aurora #mbHotelHub .mb-hotel-card{border-color:var(--au-border)}
.aurora #mbHotelHub .mb-hotel-card summary,
.aurora #mbHotelHub .mb-hotel-card__t{color:var(--au-text)}
.aurora #mbHotelHub .mb-hotel-info-link{color:var(--au-accent-ink)}
/* service form controls → aurora inputs / accent CTA */
.aurora #mbHotelHub .mb-hotel-field{
  background:var(--au-card);border:1px solid var(--au-border);color:var(--au-text);border-radius:var(--au-r-sm);
}
.aurora #mbHotelHub .mb-hotel-btn{
  background:var(--au-accent);color:#0a0a0a;border-radius:var(--au-r-pill);font-weight:800;
}

/* ── Order-flow controls in the checkout → aurora control rows ── */
.aurora #mbHotelOrderCtrls{margin:0}
.aurora #mbHotelSched,
.aurora #mbHotelCharge{
  background:transparent;border:0;border-top:1px solid var(--au-border);
  border-radius:0;margin:0;padding:16px 2px 0;color:var(--au-text);
}
.aurora #mbHotelSched .mb-hotel-card__t{
  font-size:14.5px;font-weight:800;color:var(--au-text);margin-bottom:11px;
}
.aurora #mbHotelSched .mb-hotel-modes label{color:var(--au-muted);font-weight:600}
.aurora #mbHotelSched input[type="radio"]{accent-color:var(--au-accent)}
.aurora #mbHotelSched .mb-hotel-field{
  background:var(--au-card);border:1px solid var(--au-border);color:var(--au-text);border-radius:var(--au-r-sm);
}
.aurora #mbHotelSched .mb-hotel-note{color:var(--au-muted)}
.aurora #mbHotelCharge{display:flex;align-items:flex-start;gap:10px;font-size:12.5px}
.aurora #mbHotelCharge .mb-hotel-greet__ic{display:none}
.aurora #mbHotelCharge .mb-hotel-greet__room{color:var(--au-text);font-weight:700}
.aurora #mbHotelCharge .mb-hotel-greet__welcome{color:var(--au-muted)}
.aurora #mbHotelCharge input[type="checkbox"]{accent-color:var(--au-accent)}

/* -------------------------------------------------------------------
   Syria wallet_transfer - payment-pending banner (Lane C)
   Styles the shared post_templates/shared/payment-pending.blade.php
   contract (.mb-paypending[data-state]) natively for aurora. Surface,
   ink, border and radius come from aurora tokens so the banner re-inks
   on a light/dark scheme flip; the per-state accent is mixed into those
   tokens so it adapts too. Semantic status hues are fixed (amber = action
   needed, blue = in review, green = paid) so a store's brand colour never
   turns the "paid" banner non-green. RTL-safe (logical props only); fluid
   gutters via clamp() cover 850-1180px desktop and <=560px mobile.
   ------------------------------------------------------------------- */
.au-track-container .mb-paypending{
  --pp-surface:var(--au-surface,#0d0d15);
  --pp-ink:var(--au-text,#f5f5fa);
  --pp-muted:var(--au-muted,#9a9aae);
  --pp-border:var(--au-border,rgba(255,255,255,.09));
  --pp-accent:#f59e0b;
  box-sizing:border-box;
  margin-inline:0;
  margin-block:clamp(12px,2.6vw,16px);
  padding:clamp(12px,3.2vw,16px) clamp(14px,3.6vw,18px);
  border:1px solid color-mix(in srgb,var(--pp-accent) 48%,var(--pp-border));
  border-radius:var(--au-r-md,18px);
  background:color-mix(in srgb,var(--pp-accent) 10%,var(--pp-surface));
  color:var(--pp-ink);
  opacity:1;
  overflow-wrap:anywhere;
}
.au-track-container .mb-paypending-title{
  display:flex;
  align-items:center;
  gap:.55ch;
  margin-block-end:6px;
  font-weight:700;
  font-size:clamp(1rem,2.4vw,1.1rem);
  line-height:1.3;
  color:color-mix(in srgb,var(--pp-accent) 58%,var(--pp-ink));
}
.au-track-container .mb-paypending-title::before{
  content:"";
  inline-size:.62em;
  block-size:.62em;
  flex:none;
  border-radius:50%;
  background:var(--pp-accent);
  box-shadow:0 0 0 .18em color-mix(in srgb,var(--pp-accent) 26%,transparent);
}
.au-track-container .mb-paypending-txn{
  display:inline-block;
  max-width:100%;
  margin-block:2px 6px;
  padding:.3em .62em;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--pp-accent) 26%,var(--pp-border));
  background:color-mix(in srgb,var(--pp-accent) 12%,var(--pp-surface));
  color:var(--pp-ink);
  font-variant-numeric:tabular-nums;
  font-size:.92em;
  overflow-wrap:anywhere;
}
.au-track-container .mb-paypending-txn:empty{display:none}
.au-track-container .mb-paypending-txn bdi{font-weight:600;letter-spacing:.01em}
.au-track-container .mb-paypending-hint{
  margin:0;
  font-size:.9em;
  line-height:1.5;
  color:var(--pp-muted);
}
.au-track-container .mb-paypending[data-state="awaiting-claim"]{--pp-accent:#f59e0b}
.au-track-container .mb-paypending[data-state="claimed"]{--pp-accent:#3b82f6}
.au-track-container .mb-paypending[data-state="confirmed"]{--pp-accent:#1fae6b}

/* ═══════════════ PERF-LITE ▸ reversible ▸ added 2026-08-27 ═══════════════
   Idle GPU/CPU fix (same convention as ember/vivid). aurora paints many
   backdrop-filter glass panels; always-on decorative animations keep repainting
   pixels behind them, forcing each panel to re-blur every frame at idle. Pauses
   the eyebrow accent-dot pulse and the (often orphaned) skeleton shimmer so the
   blurred backdrops go static. Loading spinner (.au-useloc-btn.is-loading) and
   the splash ring (.au-splash-ring) are LEFT running (transient/meaningful).
   REVERT: set  data-mbfx="full"  on <html>, OR delete to the END marker. */
html:not([data-mbfx="full"]) .au-eyebrow .au-dot,
html:not([data-mbfx="full"]) .au-shimmer::after{
  animation: none !important;
}
/* ═══════════════ PERF-LITE END ═══════════════ */