/* The guest's online ordering pages (/{slug}/pedir and its tracking page): their look, shared. Ink on warm paper by
   default, the venue's «Tema QR» preset when it chose one (the QR menu's palettes, QrOrder.razor.css), its own colour on
   the main buttons (inline --accent / --on-accent), each palette's dark version on a phone in dark mode. The palette,
   the page's box and resets on .online-order; each page's layout is in its own scoped CSS (OnlineOrder.razor.css,
   OnlineTracking.razor.css). Every class is "oo-": site.css styles generic names (.actions, .qty, .icon-btn, .total…)
   for the staff screens, and theme.js puts guest pages on its dark theme, so a generic name here would inherit them. */

.online-order {
    --accent: #1c1a17;
    --on-accent: #ffffff;
    /* The accent as TEXT (links, a group's rule, the logo's initial): the theme's or the owner's colour made dark enough
       to read at 4.5:1 on the page (cream's gold read at 2.24:1, the live tester, 2026-10-22); the dark mode lifts it
       instead. A browser without relative colours shows the text's own colour. */
    --accent-text: oklch(from var(--accent) min(l, 0.5) c h);
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --page-bg: #faf9f6;
    --page-solid: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f4f2ee;
    --surface-3: #ebe8e2;
    --text: #1c1a17;
    --text-muted: #6f6a62;
    --text-subtle: #9b958c;
    --border: #ebe7e0;
    --border-strong: #ddd8cf;
    --shadow: rgba(28, 26, 23, 0.06);
    --shadow-strong: rgba(28, 26, 23, 0.14);
    --input-bg: #f4f2ee;
    --chip-bg: #f4f2ee;
    --ok: #15803d;
    --ok-bg: rgba(21, 128, 61, 0.1);
    --bad: #b42318;
    --bad-bg: rgba(180, 35, 24, 0.08);
    --warn: #b45309;
    --radius: 16px;
    --raised: var(--surface);
    --dock-h: 0px;

    --dark-bg: #121110;
    --dark-surface: #1a1917;
    --dark-surface-2: #24221f;
    --dark-surface-3: #2e2b27;
    --dark-border: #2f2c28;
    --dark-border-strong: #3c3833;
    --dark-text: #f2efe9;
    --dark-text-muted: #b5aea3;
    --dark-text-subtle: #8c867c;

    /* A phone's column, centred on a wider screen with the page's own colour around it (the layout's shell is dark). */
    padding-inline: max(0px, calc((100% - 560px) / 2));
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.online-order.oo-theme-classic {
    --accent: #1c1a17;
    --page-bg: #faf9f6;
    --page-solid: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f4f2ee;
    --surface-3: #ebe8e2;
    --text: #1c1a17;
    --text-muted: #6f6a62;
    --text-subtle: #9b958c;
    --border: #ebe7e0;
    --border-strong: #ddd8cf;
    --shadow: rgba(28, 26, 23, 0.06);
    --shadow-strong: rgba(28, 26, 23, 0.14);
    --input-bg: #f4f2ee;
    --chip-bg: #f4f2ee;

    --dark-bg: #121110;
    --dark-surface: #1a1917;
    --dark-surface-2: #24221f;
    --dark-surface-3: #2e2b27;
    --dark-border: #2f2c28;
    --dark-border-strong: #3c3833;
    --dark-text: #f2efe9;
    --dark-text-muted: #b5aea3;
    --dark-text-subtle: #8c867c;
}

.online-order.oo-theme-sand {
    --accent: #b8860b;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f7f1e7 0%, #f3efe8 100%);
    --page-solid: #f7f1e7;
    --surface: #fff9f2;
    --surface-2: #f5eadd;
    --surface-3: #eee0d2;
    --text: #2b2118;
    --text-muted: #7c6653;
    --text-subtle: #9b8574;
    --border: #ead9c8;
    --border-strong: #ddc8b5;
    --shadow: rgba(56, 31, 12, 0.08);
    --shadow-strong: rgba(56, 31, 12, 0.18);
    --input-bg: #f7ecdf;
    --chip-bg: #f3e6d8;

    --dark-bg: #17120e;
    --dark-surface: #221a14;
    --dark-surface-2: #2d231b;
    --dark-surface-3: #3a2f24;
    --dark-border: #3a2f24;
    --dark-border-strong: #4a3a2c;
    --dark-text: #f5eee6;
    --dark-text-muted: #c5b4a3;
    --dark-text-subtle: #9f8d7c;
}

.online-order.oo-theme-coast {
    --accent: #26a69a;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #edf7f6 0%, #f5fbfa 100%);
    --page-solid: #edf7f6;
    --surface: #ffffff;
    --surface-2: #e8f3f2;
    --surface-3: #dae8e7;
    --text: #1c2a2a;
    --text-muted: #586d6d;
    --text-subtle: #7d9191;
    --border: #d4e4e4;
    --border-strong: #c0d6d6;
    --shadow: rgba(10, 30, 30, 0.08);
    --shadow-strong: rgba(10, 30, 30, 0.18);
    --input-bg: #eaf4f3;
    --chip-bg: #e5f0ef;

    --dark-bg: #0f1717;
    --dark-surface: #152120;
    --dark-surface-2: #1f2c2b;
    --dark-surface-3: #273635;
    --dark-border: #2b3a39;
    --dark-border-strong: #344746;
    --dark-text: #eef6f5;
    --dark-text-muted: #b6c7c5;
    --dark-text-subtle: #8ea09f;
}

.online-order.oo-theme-slate {
    --accent: #5c7a99;
    --page-bg: linear-gradient(180deg, #f0f3f8 0%, #edf1f6 100%);
    --page-solid: #f0f3f8;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --surface-3: #e1e7ef;
    --text: #1a2433;
    --text-muted: #5b6a7d;
    --text-subtle: #7b889b;
    --border: #d7dee7;
    --border-strong: #c8d1dc;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
    --input-bg: #eef2f6;
    --chip-bg: #e9eff5;

    --dark-bg: #10141c;
    --dark-surface: #171d27;
    --dark-surface-2: #202838;
    --dark-surface-3: #283244;
    --dark-border: #2c3648;
    --dark-border-strong: #354054;
    --dark-text: #f3f6fb;
    --dark-text-muted: #b7c1cf;
    --dark-text-subtle: #8c97a8;
}

.online-order.oo-theme-sage {
    --accent: #5c8c5c;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #eef6ef 0%, #f5faf6 100%);
    --page-solid: #eef6ef;
    --surface: #ffffff;
    --surface-2: #e8f1ea;
    --surface-3: #dbe6de;
    --text: #1f2b22;
    --text-muted: #5b6f61;
    --text-subtle: #7a8d80;
    --border: #d3e1d6;
    --border-strong: #c4d4c8;
    --shadow: rgba(19, 41, 26, 0.08);
    --shadow-strong: rgba(19, 41, 26, 0.18);
    --input-bg: #eef5ef;
    --chip-bg: #e6f0e8;

    --dark-bg: #121815;
    --dark-surface: #1a221d;
    --dark-surface-2: #232d26;
    --dark-surface-3: #2b372e;
    --dark-border: #2f3b31;
    --dark-border-strong: #3a483d;
    --dark-text: #eef5f0;
    --dark-text-muted: #b5c2ba;
    --dark-text-subtle: #8f9f94;
}

.online-order.oo-theme-ember {
    --accent: #d97706;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #ffe4d0 0%, #fff1e6 100%);
    --page-solid: #ffe4d0;
    --surface: #fffaf6;
    --surface-2: #ffe7d1;
    --surface-3: #ffd7bc;
    --text: #2d2017;
    --text-muted: #7b5a44;
    --text-subtle: #9a7761;
    --border: #ffd0b0;
    --border-strong: #f2bfa0;
    --shadow: rgba(84, 36, 12, 0.1);
    --shadow-strong: rgba(84, 36, 12, 0.2);
    --input-bg: #ffefe1;
    --chip-bg: #ffe4cf;

    --dark-bg: #1b120c;
    --dark-surface: #24160e;
    --dark-surface-2: #2f1d12;
    --dark-surface-3: #3a2416;
    --dark-border: #3a2416;
    --dark-border-strong: #4a2d1b;
    --dark-text: #fff4ea;
    --dark-text-muted: #d3b6a2;
    --dark-text-subtle: #b08b74;
}

.online-order.oo-theme-graphite {
    --accent: #6b7c8a;
    --page-bg: linear-gradient(180deg, #f1f3f6 0%, #eef1f4 100%);
    --page-solid: #f1f3f6;
    --surface: #ffffff;
    --surface-2: #edf0f4;
    --surface-3: #e0e5eb;
    --text: #1d2228;
    --text-muted: #5c6672;
    --text-subtle: #7d8792;
    --border: #d5dbe2;
    --border-strong: #c6ced7;
    --shadow: rgba(22, 28, 35, 0.08);
    --shadow-strong: rgba(22, 28, 35, 0.18);
    --input-bg: #eef1f4;
    --chip-bg: #e7ecf1;

    --dark-bg: #11151a;
    --dark-surface: #1a2027;
    --dark-surface-2: #232a33;
    --dark-surface-3: #2c3541;
    --dark-border: #2f3844;
    --dark-border-strong: #394554;
    --dark-text: #f3f6f9;
    --dark-text-muted: #b7c1cb;
    --dark-text-subtle: #8c97a5;
}

.online-order.oo-theme-lavender {
    --accent: #8b7dc8;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f5f3fa 0%, #f9f7fc 100%);
    --page-solid: #f5f3fa;
    --surface: #ffffff;
    --surface-2: #f0edf7;
    --surface-3: #e6e1f0;
    --text: #2a2635;
    --text-muted: #6b6480;
    --text-subtle: #8d86a0;
    --border: #ddd8eb;
    --border-strong: #cfc8e0;
    --shadow: rgba(59, 48, 84, 0.08);
    --shadow-strong: rgba(59, 48, 84, 0.16);
    --input-bg: #f3f0f9;
    --chip-bg: #eeebf5;

    --dark-bg: #14121a;
    --dark-surface: #1d1a25;
    --dark-surface-2: #262331;
    --dark-surface-3: #2f2b3d;
    --dark-border: #332f42;
    --dark-border-strong: #3e394f;
    --dark-text: #f5f3fa;
    --dark-text-muted: #c2bbd0;
    --dark-text-subtle: #9690a8;
}

.online-order.oo-theme-rose {
    --accent: #c77d8e;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #faf5f6 0%, #fcf8f9 100%);
    --page-solid: #faf5f6;
    --surface: #ffffff;
    --surface-2: #f7eff1;
    --surface-3: #f0e5e8;
    --text: #322629;
    --text-muted: #7d6369;
    --text-subtle: #9d8489;
    --border: #eddde0;
    --border-strong: #e3cfd4;
    --shadow: rgba(70, 40, 48, 0.08);
    --shadow-strong: rgba(70, 40, 48, 0.16);
    --input-bg: #f9f3f5;
    --chip-bg: #f4ecef;

    --dark-bg: #181416;
    --dark-surface: #221c1e;
    --dark-surface-2: #2c2528;
    --dark-surface-3: #362d31;
    --dark-border: #3a3034;
    --dark-border-strong: #463b40;
    --dark-text: #faf5f6;
    --dark-text-muted: #d0bfc3;
    --dark-text-subtle: #a8949a;
}

.online-order.oo-theme-mist {
    --accent: #7a9eb8;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #f4f7f9 0%, #f8fafb 100%);
    --page-solid: #f4f7f9;
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --surface-3: #e4ebef;
    --text: #232a30;
    --text-muted: #5e6d78;
    --text-subtle: #818f9a;
    --border: #dae3e9;
    --border-strong: #ccd8e0;
    --shadow: rgba(35, 50, 60, 0.08);
    --shadow-strong: rgba(35, 50, 60, 0.16);
    --input-bg: #f2f6f8;
    --chip-bg: #ecf2f5;

    --dark-bg: #12161a;
    --dark-surface: #1a2027;
    --dark-surface-2: #232b33;
    --dark-surface-3: #2b3540;
    --dark-border: #2f3a46;
    --dark-border-strong: #394654;
    --dark-text: #f4f7f9;
    --dark-text-muted: #b8c5cf;
    --dark-text-subtle: #8d9ca8;
}

.online-order.oo-theme-cream {
    --accent: #c9a86c;
    --on-accent: #1c1a17; /* white read at 2.3-3.9:1 on this accent; ink at 4.4-7.7:1 */
    --page-bg: linear-gradient(180deg, #faf8f4 0%, #fcfbf8 100%);
    --page-solid: #faf8f4;
    --surface: #fffefa;
    --surface-2: #f7f4ed;
    --surface-3: #f0ebe2;
    --text: #2e2b25;
    --text-muted: #6e6659;
    --text-subtle: #918779;
    --border: #e9e4da;
    --border-strong: #ddd6c9;
    --shadow: rgba(46, 43, 37, 0.08);
    --shadow-strong: rgba(46, 43, 37, 0.16);
    --input-bg: #f9f7f2;
    --chip-bg: #f4f1e9;

    --dark-bg: #161512;
    --dark-surface: #1f1d19;
    --dark-surface-2: #292621;
    --dark-surface-3: #33302a;
    --dark-border: #38352e;
    --dark-border-strong: #443f37;
    --dark-text: #faf8f4;
    --dark-text-muted: #cec6b8;
    --dark-text-subtle: #a69e8f;
}

/* The phone in dark mode: the theme's own dark palette (an owner's colour, inline, stays). */
@media (prefers-color-scheme: dark) {
    .online-order[class*="oo-theme-"] {
        --page-bg: var(--dark-bg);
        --page-solid: var(--dark-bg);
        --surface: var(--dark-surface);
        --surface-2: var(--dark-surface-2);
        --surface-3: var(--dark-surface-3);
        --border: var(--dark-border);
        --border-strong: var(--dark-border-strong);
        --text: var(--dark-text);
        --text-muted: var(--dark-text-muted);
        --text-subtle: var(--dark-text-subtle);
        --input-bg: var(--dark-surface-2);
        --chip-bg: var(--dark-surface-2);
        --raised: var(--dark-surface-3);
        --shadow: rgba(0, 0, 0, 0.3);
        --shadow-strong: rgba(0, 0, 0, 0.5);
        --ok: #4ade80;
        --ok-bg: rgba(74, 222, 128, 0.12);
        --bad: #f87171;
        --bad-bg: rgba(248, 113, 113, 0.12);
        --warn: #fbbf24;
        --accent-text: oklch(from var(--accent) max(l, 0.75) c h);
    }
    /* Ink buttons would vanish on the dark page: cream, with ink text (as the QR menu does). */
    .online-order.oo-theme-classic { --accent: #ede8df; --on-accent: #1c1a17; }
}

.online-order *, .online-order *::before, .online-order *::after { box-sizing: border-box; }
.online-order button { font: inherit; color: inherit; }
.online-order svg { display: inline-block; flex: none; }
.online-order h1, .online-order h2, .online-order h3, .online-order p { margin: 0; }