/*
 * ============================================================================
 * goeat design tokens — THE single source of truth for the whole platform.
 * Palette & feel modelled on Lieferando (warm cream + orange, friendly, rounded).
 * RULE: colors, spacing, radius, shadow and type live ONLY here. Never hardcode
 * a hex or a px spacing value in a component/template — reach for a token or a
 * utility class (.mt-4, .p-3, …). Enforced by bin/check-styles. See CLAUDE.md.
 * ============================================================================
 */
:root {
    /* Brand — goeat red on the warm Lieferando-style cream/ink neutrals */
    --brand: #e23744;
    --brand-dark: #c01f2c;
    --brand-tint: #fdecef;
    --brand-bright: #f5455a;
    --brand-contrast: #ffffff;

    /* Ink & neutrals — warm greys on a cream page */
    --ink: #2b2a28;
    --ink-soft: #4a4642;
    --muted: #6f6a63;
    --line: #ece7df;
    --line-strong: #ddd5c9;
    --bg: #f6f3ef;
    --card: #ffffff;

    /* Semantic states, each with a soft tint for backgrounds */
    --ok: #2b7836;
    --ok-tint: #e6f1e8;
    --warn: #b07d0a;
    --warn-tint: #fbf3df;
    --info: #2563c9;
    --info-tint: #e7eefb;
    --danger: #cc0300;
    --danger-tint: var(--danger-tint);

    /* Corner radius scale */
    --r-lg: 18px;
    --r: 12px;
    --r-sm: 8px;
    --pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(43, 42, 40, .06);
    --shadow: 0 2px 6px rgba(43, 42, 40, .06), 0 10px 24px rgba(43, 42, 40, .05);
    --shadow-lg: 0 12px 28px rgba(43, 42, 40, .12), 0 2px 8px rgba(43, 42, 40, .08);

    /* Spacing scale (4px base) — use via --space-* or the .mt-/.mb-/.p-/.gap- utilities */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Type scale */
    --text-xs: .75rem;
    --text-sm: .85rem;
    --text-base: 1rem;
    --text-lg: 1.075rem;
    --text-xl: 1.3rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Motion, layout, type family */
    --t: .18s cubic-bezier(.4, 0, .2, 1);
    --maxw: 1140px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
    --gradient-brand: linear-gradient(135deg, #f5455a, #e23744);

    /* Third-party brand colours (PayPal must look like PayPal) + decorative cover */
    --paypal: var(--paypal);
    --paypal-dark: var(--paypal-dark);
    --paypal-navy: var(--paypal-navy);
    --cover-start: #ffe0e2;
    --gradient-cover: linear-gradient(135deg, var(--cover-start), var(--brand-tint));

    /* Back-compat aliases — resolve older var(--primary)/var(--border) uses to the
       real tokens. Do NOT add new usages; use --brand / --line directly. */
    --primary: var(--brand);
    --border: var(--line);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; font-weight: 700; }
h1 { font-size: 1.75rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .small { font-size: .85rem; }
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 700; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.page { padding: 24px 0 80px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.tight { gap: 6px; }
.spacer { flex: 1; }

/* ---------- top bar ---------- */
.topbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .inner {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 62px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}
.brand {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--brand);
    letter-spacing: -.03em;
}
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--ink-soft); padding: 8px 12px; border-radius: var(--r-sm); font-weight: 500; transition: background var(--t), color var(--t); }
.nav a:hover { background: var(--bg); text-decoration: none; }
.nav a.active { background: var(--brand-tint); color: var(--brand-dark); }

/* inline SVG icons — baseline-align inside text, inherit color from parent */
.ico { flex: 0 0 auto; vertical-align: -3px; }

/* cart icon button with count bubble */
.cart-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    height: 42px; width: 42px; border-radius: 50%; color: var(--ink);
    transition: background var(--t);
}
.cart-btn:hover { background: var(--bg); text-decoration: none; }
.cart-bubble {
    position: absolute; top: -1px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--pill); background: var(--brand); color: var(--brand-contrast);
    font-size: var(--text-xs); font-weight: var(--fw-bold); line-height: 19px; text-align: center;
    box-shadow: 0 0 0 2px var(--card);
}
.cart-bubble:empty { display: none; }

/* compact language dropdown (native details/summary — no JS) */
.lang-dd { position: relative; }
.lang-dd summary {
    list-style: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 8px 10px; border-radius: var(--pill); font-size: var(--text-sm); font-weight: var(--fw-semibold);
    color: var(--ink-soft); transition: background var(--t);
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover { background: var(--bg); }
.lang-dd[open] summary { background: var(--bg); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 160px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.lang-menu a { padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink); font-weight: var(--fw-medium); font-size: var(--text-sm); }
.lang-menu a:hover { background: var(--bg); text-decoration: none; }
.lang-menu a.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: var(--fw-bold); }

/* ---------- cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.card-head h2, .card-head h3 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; transition: transform var(--t), box-shadow var(--t); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.stat .n { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.stat .n.hot { color: var(--brand); } /* single attention-grabbing KPI (e.g. new orders) */
.stat .l { color: var(--muted); font-size: .9rem; }
/* non-clickable KPI tiles: no hover lift (they aren't links) */
.stat.static { cursor: default; }
.stat.static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* restaurant dashboard */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-head h1 { margin: 0 0 2px; }
.dash-activate { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-activate .da-main h2 { margin: 0 0 4px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.ck-mark { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; flex: none; }
.checklist li.ok .ck-mark { background: var(--ok-tint); color: var(--ok); }
.checklist li.todo .ck-mark { background: var(--warn-tint); color: var(--warn); }
.ck-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ck-body .chip { margin-left: 4px; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--pill);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    font-weight: 650;
    font-size: .95rem;
    cursor: pointer;
    transition: transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
    text-decoration: none;
    line-height: 1.2;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 6px 16px rgba(226, 55, 68, .32); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg); box-shadow: none; }
.btn-outline { background: var(--card); }
.btn-danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-paypal { background: var(--paypal); border-color: var(--paypal); color: #fff; }
.btn-paypal:hover { background: var(--paypal-dark); border-color: var(--paypal-dark); color: #fff; box-shadow: 0 6px 16px rgba(0, 112, 186, .35); }
.btn-paypal .pp-logo { color: #fff; }
.pp-logo { font-weight: 800; font-style: italic; letter-spacing: -.3px; color: var(--paypal-navy); }
.pp-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pp-steps li { position: relative; padding: 0 0 18px 42px; counter-increment: step; line-height: 1.5; }
.pp-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; height: 28px; width: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.pp-steps li:last-child { padding-bottom: 0; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-lg { padding: 15px 24px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- forms ---------- */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
textarea { min-height: 90px; resize: vertical; }
.help { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox input { width: auto; }
.field-error { color: var(--danger); font-size: .85rem; margin-top: 4px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; margin: 0 0 16px; }
legend { font-weight: 700; padding: 0 8px; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* ---------- badges / chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--pill); font-size: .76rem; font-weight: 700; }
.badge-new { background: var(--brand-tint); color: var(--brand-dark); }
.badge-received { background: var(--info-tint); color: var(--info); }
.badge-in_progress { background: var(--warn-tint); color: var(--warn); }
.badge-done { background: var(--ok-tint); color: var(--ok); }
.badge-delivered { background: var(--ok-tint); color: var(--ok); }
.badge-cancelled { background: var(--line); color: var(--muted); }
.badge-paid { background: var(--ok-tint); color: var(--ok); }
.badge-pending { background: var(--warn-tint); color: var(--warn); }
.badge-failed { background: var(--danger-tint); color: var(--danger); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); background: var(--bg); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.chip-ok { background: var(--ok-tint); color: var(--ok); border-color: transparent; }

/* ---------- flash / alerts ---------- */
.alert { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 16px; border: 1px solid transparent; font-size: .92rem; }
.alert-success { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-tint); }
.alert-error { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-tint); }
.alert-info { background: var(--info-tint); color: var(--info); border-color: var(--info-tint); }
.alert-warning { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-tint); }
.flash-stack { position: fixed; top: 74px; right: 16px; z-index: 80; max-width: 360px; }
.flash-stack .alert { box-shadow: var(--shadow-lg); animation: slideIn .25s ease; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 420px; margin: 56px auto; }
.auth-wrap .brand { display: block; text-align: center; font-size: 2.2rem; margin-bottom: 10px; }

/* ---------- restaurant listing (home) ---------- */
.hero-banner {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    border-radius: var(--r-lg);
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
}
.hero-banner h1 { color: #fff; font-size: 2.2rem; margin-bottom: 6px; }
.hero-banner p { opacity: .95; margin: 0; font-size: 1.05rem; }
.resto-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.resto-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); display: block; }
.resto-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.resto-cover { height: 150px; background: var(--gradient-cover); background-size: cover; background-position: center; position: relative; }
.resto-body { padding: 16px; }
.resto-body h3 { margin: 0 0 4px; }
.resto-logo { position: absolute; left: 14px; bottom: -22px; height: 56px; width: 56px; border-radius: 14px; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow); background: #fff; }
.resto-cover:has(.resto-logo) + .resto-body { padding-top: 30px; }
.locbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- home address-search hero ---------- */
.home-hero {
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(255,255,255,.18), transparent),
        linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    border-radius: var(--r-lg);
    padding: 64px 32px;
    text-align: center;
    box-shadow: var(--shadow);
}
.home-hero.compact { padding: 36px 32px; }
.home-hero-inner { max-width: 680px; margin: 0 auto; }
.home-hero h1 { color: #fff; font-size: 2.6rem; margin: 0 0 8px; letter-spacing: -.03em; }
.home-hero.compact h1 { font-size: 1.9rem; }
.home-hero p { opacity: .96; margin: 0 0 24px; font-size: 1.12rem; }
.home-hero.compact p { margin-bottom: 16px; font-size: 1rem; }

.addr-search { display: flex; gap: 10px; align-items: stretch; max-width: 620px; margin: 0 auto; }
.addr-field {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: var(--pill); padding: 4px 6px 4px 16px;
    box-shadow: var(--shadow-lg);
}
.addr-icon { font-size: 1.1rem; flex: 0 0 auto; }
.addr-field input {
    flex: 1; border: none; outline: none; background: transparent; box-shadow: none;
    font-size: 1.02rem; padding: 12px 4px; color: var(--ink);
}
.addr-field input:focus { box-shadow: none; }
.addr-gps {
    flex: 0 0 auto; height: 42px; width: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--bg); color: var(--brand); font-size: 1.25rem; line-height: 1;
    transition: background var(--t);
}
.addr-gps:hover { background: var(--brand-tint); }
.addr-search .btn-lg { border-radius: var(--pill); padding-left: 28px; padding-right: 28px; }
.addr-status { margin-top: 12px; font-size: .9rem; opacity: .95; min-height: 1.2em; }

/* address autocomplete dropdown */
.addr-field-wrap { flex: 1; position: relative; display: flex; }
.addr-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg);
    overflow: hidden; text-align: left; padding: 6px;
}
.addr-suggest-item {
    display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent;
    padding: 12px; border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--ink); text-align: left;
    transition: background var(--t);
}
.addr-suggest-item:hover, .addr-suggest-item.active { background: var(--brand-tint); }
.addr-suggest-item .as-pin { flex: 0 0 auto; opacity: .75; }
.addr-suggest-item .as-label { flex: 1; font-size: .95rem; line-height: 1.3; color: var(--ink); }

/* ---------- restaurant hero ---------- */
.r-hero { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: var(--card); }
.r-hero .cover { height: 220px; background: var(--gradient-cover); background-size: cover; background-position: center; }
.r-hero .hbody { padding: 20px 24px; display: flex; gap: 18px; align-items: flex-end; margin-top: -52px; position: relative; }
.r-hero .hmain { flex: 1; min-width: 0; }
.r-hero h1 { margin-bottom: 2px; font-size: var(--text-2xl); }
.r-desc { margin: 0 0 2px; font-size: var(--text-sm); }
/* no cover photo → skip the tall empty band, keep a slim brand accent */
.r-hero.no-cover .cover { height: 10px; background: var(--gradient-brand); }
.r-hero.no-cover .hbody { margin-top: 0; align-items: center; }
.r-hero.no-cover .r-logo { height: 68px; width: 68px; }
.r-logo { height: 84px; width: 84px; border-radius: 18px; background: var(--card); border: 3px solid var(--card); box-shadow: var(--shadow); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.r-logo img { height: 100%; width: 100%; object-fit: cover; }

/* meta row: status pill + icon facts */
.r-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--ink-soft); }
.meta-item .ico { color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--pill); font-size: var(--text-sm); font-weight: var(--fw-bold); }
.status-pill .dot { height: 8px; width: 8px; border-radius: 50%; background: currentColor; }
.status-pill.is-open { background: var(--ok-tint); color: var(--ok); }
.status-pill.is-closed { background: var(--danger-tint); color: var(--danger); }

.info-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.info-pills .chip { background: var(--card); }

/* closed / paused notice */
.closed-bar {
    display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4);
    background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-tint);
    border-radius: var(--r); padding: 13px 16px; font-size: var(--text-sm);
}
.closed-bar .ico { flex: 0 0 auto; }
.closed-bar .cb-next { display: block; font-weight: var(--fw-semibold); }

/* ---------- sticky category nav ---------- */
.catnav { position: sticky; top: 62px; z-index: 30; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); margin: 16px 0 0; }
.catnav .inner {
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; scrollbar-width: none;
    /* fade the clipped edges so overflow reads as scrollable */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.catnav .inner::-webkit-scrollbar { display: none; }
.catnav a { white-space: nowrap; padding: 8px 16px; border-radius: var(--pill); font-weight: 650; color: var(--ink-soft); font-size: .92rem; transition: background var(--t), color var(--t); }
.catnav a:hover { background: var(--bg); text-decoration: none; }
.catnav a.active { background: var(--ink); color: #fff; }

/* ---------- in-menu search ---------- */
.menu-search { margin-top: var(--space-4); }
.ms-field {
    display: flex; align-items: center; gap: 10px; background: var(--card);
    border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 4px 8px 4px 16px;
    max-width: 420px; color: var(--muted); transition: border-color var(--t), box-shadow var(--t);
}
.ms-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ms-field input { border: none; background: transparent; box-shadow: none; padding: 9px 0; font-size: var(--text-sm); }
.ms-field input:focus { box-shadow: none; border: none; }
.menu-noresults { text-align: center; color: var(--muted); padding: var(--space-8) 0; }
.menu-noresults p { margin: var(--space-2) 0 0; font-weight: var(--fw-semibold); }

/* ---------- menu / dishes ---------- */
.menu-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; margin-top: 20px; }
.menu-section { scroll-margin-top: 130px; margin-bottom: 28px; }
.menu-section h2 { margin-bottom: 12px; }
.dishes { display: grid; gap: 12px; }
@media (min-width: 1000px) {
    .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dish {
    display: flex; gap: 16px; padding: 16px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.dish:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-1px); }
.dish .d-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dish .d-name { font-weight: 700; margin-bottom: 3px; }
.dish .d-desc { color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish .d-price { font-weight: 700; margin-top: auto; padding-top: 8px; }
.dish .d-from { font-weight: var(--fw-medium); color: var(--muted); font-size: var(--text-sm); }
.dish .d-thumb { width: 104px; height: 104px; border-radius: var(--r-sm); background: var(--bg); flex: 0 0 auto; position: relative; }
.dish .d-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.dish .d-add {
    position: absolute; right: -8px; bottom: -8px; height: 34px; width: 34px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center; color: var(--brand);
    transition: background var(--t), color var(--t), transform var(--t);
}
.dish:hover .d-add { background: var(--brand); color: var(--brand-contrast); transform: scale(1.08); }
/* photo-less dishes: no empty placeholder box — compact text row with the + at the right */
.dish.no-photo { align-items: center; }
.dish.no-photo .d-add { position: static; flex: 0 0 auto; }
.dish.is-unavailable { opacity: .5; pointer-events: none; }
.dish-thumb-fallback { display: flex; align-items: center; justify-content: center; font-size: 2rem; }

/* menu-import review: item photo preview (hotlinked; removed on load error) */
.ri-thumb-cell { width: 68px; padding-right: 0 !important; }
.ri-thumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; display: block; background: var(--bg); }

/* legacy menu-item (admin/manage) */
.menu-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: none; }
.menu-item .thumb { width: 84px; height: 84px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg); flex: 0 0 auto; }
.menu-item .info { flex: 1; }
.menu-item .price { font-weight: 700; white-space: nowrap; }

/* ---------- cart rail + drawer ---------- */
.cart-rail { position: sticky; top: 86px; }
.cart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.cart-card .ch { padding: 18px 20px; border-bottom: 1px solid var(--line); font-weight: 700; }
.cart-card .cb { padding: 8px 20px; max-height: 50vh; overflow-y: auto; }
.cart-card .cf { padding: 18px 20px; border-top: 1px solid var(--line); }
.cart-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.cart-empty .ce-title { font-weight: var(--fw-semibold); color: var(--ink-soft); margin-top: var(--space-3); }
.cart-empty .ce-sub { font-size: var(--text-sm); margin-top: 2px; }
/* progress toward the minimum order value */
.min-progress { margin-top: var(--space-3); }
.min-progress .mp-bar { height: 6px; border-radius: var(--pill); background: var(--line); overflow: hidden; }
.min-progress .mp-fill { height: 100%; border-radius: var(--pill); background: var(--brand); transition: width var(--t); }
.min-progress .mp-label { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; }
.cart-line { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: none; }
.cart-line .cl-name { font-weight: 650; }
.cart-line .cl-ex { color: var(--muted); font-size: .82rem; }
.totals { margin-top: 12px; }
.totals .row { justify-content: space-between; padding: 5px 0; }
.totals .grand { font-weight: 800; font-size: 1.2rem; border-top: 2px solid var(--line); padding-top: 12px; margin-top: 8px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--pill); overflow: hidden; }
.qty button { width: 34px; height: 34px; border: none; background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--brand); transition: background var(--t); display: grid; place-items: center; }
.qty button:hover { background: var(--brand-tint); }
.qty .qn { min-width: 30px; text-align: center; font-weight: 700; }

.mobile-cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,24,29,.08); display: none; }
.mcb-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
    padding: 0 6px; border-radius: var(--pill); background: rgba(255, 255, 255, .25);
    font-size: var(--text-sm); font-weight: var(--fw-bold);
}

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 29, .5); z-index: 90; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity var(--t); }
.modal-backdrop.open { opacity: 1; }
.modal { background: var(--card); border-radius: var(--r-lg) var(--r-lg) 0 0; width: 100%; max-width: 520px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px); transition: transform var(--t); }
.modal-backdrop.open .modal { transform: translateY(0); }
/* Item dialog layout: one scroll column on mobile; on desktop a two-pane split
   (item info left, options right, both scrolling independently) so a 50-topping
   pizza is a compact panel instead of an endless list. */
.modal .m-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.modal .m-cover { height: 190px; background: var(--gradient-cover); background-size: cover; background-position: center; }
.modal .m-title { padding: 20px 24px 0; }
.modal .m-title h2 { font-size: var(--text-xl); margin-bottom: 4px; padding-right: 40px; }
.modal .m-title p.muted { font-size: var(--text-sm); margin-bottom: 6px; }
.modal .m-baseprice { font-weight: var(--fw-bold); }
.modal .m-opts { padding: 0 24px 14px; }
.modal .m-foot { padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; box-shadow: 0 -6px 16px rgba(43, 42, 40, .05); position: relative; }

@media (min-width: 920px) {
    /* widen only dialogs that actually have option groups */
    .modal:has(.opt-group) { max-width: 960px; }
    .modal:has(.opt-group) .m-scroll { display: grid; grid-template-columns: 2fr 3fr; overflow: hidden; }
    .modal:has(.opt-group) .m-head { overflow-y: auto; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
    /* no photo: centre the info block so the pane reads as intentional */
    .modal:has(.opt-group) .m-head:not(:has(.m-cover)) { display: flex; align-items: center; }
    .modal:has(.opt-group) .m-cover { height: 240px; }
    .modal:has(.opt-group) .m-title { padding: 24px 26px; }
    .modal:has(.opt-group) .m-title h2 { font-size: var(--text-2xl); padding-right: 0; }
    .modal:has(.opt-group) .m-baseprice { font-size: var(--text-lg); margin-top: var(--space-2); }
    .modal:has(.opt-group) .m-opts { overflow-y: auto; min-height: 0; padding: 20px 26px 16px; }
    /* keep the first group's header clear of the floating close button */
    .modal:has(.opt-group) .m-opts .opt-group:first-child { margin-top: 0; }
    .modal:has(.opt-group) .m-opts .opt-group:first-child .og-head { padding-right: 44px; }
    /* multi-select groups (toppings) flow in two columns — half the scroll */
    .og-list.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .og-list.cols .opt { border-top: 1px solid var(--line); }
    .og-list.cols .opt:nth-child(-n+2) { border-top: none; }
    .og-list.cols .opt:nth-child(odd) { border-right: 1px solid var(--line); }
}
.modal .m-close { position: absolute; top: 14px; right: 14px; height: 36px; width: 36px; border-radius: 50%; background: rgba(255,255,255,.95); border: none; cursor: pointer; box-shadow: var(--shadow); z-index: 2; display: grid; place-items: center; color: var(--ink); }
.modal .m-form { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.opt-group { margin: 22px 0; }
.opt-group:first-of-type { margin-top: 16px; }
.opt-group .og-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.opt-group .og-head strong { font-size: var(--text-lg); letter-spacing: -.01em; }
.opt-group .og-head .req { font-size: .75rem; color: var(--muted); background: var(--bg); padding: 3px 10px; border-radius: var(--pill); white-space: nowrap; font-weight: var(--fw-semibold); }
.opt-group .og-head .req.must { background: var(--brand-tint); color: var(--brand-dark); }
/* options live in ONE quiet card, separated by hairlines — half the visual bulk
   of stacked boxes and far easier to scan on long topping lists */
.og-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 15px; cursor: pointer; transition: background var(--t); }
.opt + .opt { border-top: 1px solid var(--line); }
.opt:hover { background: var(--bg); }
.opt:has(input:checked) { background: var(--brand-tint); }
.opt:has(input:checked) .o-name { font-weight: var(--fw-semibold); }
/* single-select choices read as radios, multi-select as rounded checks (behaviour handled in JS) */
.opt input {
    appearance: none; -webkit-appearance: none; height: 21px; width: 21px; margin: 0; flex: 0 0 auto;
    border: 2px solid var(--line-strong); border-radius: 6px; background: var(--card); cursor: pointer;
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.opt:hover input { border-color: var(--muted); }
.opt input[data-single="1"] { border-radius: 50%; }
.opt input:checked, .opt:hover input:checked { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3.5px var(--card); }
.opt .o-name { flex: 1; }
.opt .o-price { color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- checkout (Shopify-style) ---------- */
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
.summary { position: sticky; top: 86px; }
.radio-cards { display: grid; gap: 10px; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.radio-card:hover { border-color: var(--brand); }
.radio-card input { accent-color: var(--brand); }
.radio-card.sel, .radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand) inset; }
.radio-card .rc-title { font-weight: 650; }
.radio-card .rc-sub { color: var(--muted); font-size: .85rem; }
.step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step-h .n { height: 26px; width: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.step-h h3 { margin: 0; }

/* ---------- order tracking stepper ---------- */
.track-steps { display: flex; gap: 8px; margin-top: 18px; }
.track-steps .ts { flex: 1; text-align: center; min-width: 64px; }
.track-steps .ts .bar { height: 6px; border-radius: var(--pill); background: var(--line); transition: background var(--t); }
.track-steps .ts.done .bar { background: var(--brand); }
.track-steps .ts .lab { margin-top: 7px; font-size: .8rem; color: var(--muted); }
.track-steps .ts.done .lab { color: var(--ink); font-weight: 600; }

/* order ticket (restaurant board) */
.ticket { border-left: 4px solid var(--line); }
.ticket.is-new { border-left-color: var(--brand); }
.ticket.is-received { border-left-color: var(--info); }
.ticket.is-in_progress { border-left-color: var(--warn); }
.ticket.is-done { border-left-color: var(--ok); }
.logo-img { height: 40px; width: 40px; border-radius: 10px; object-fit: cover; }

@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .menu-layout { grid-template-columns: 1fr; }
    .menu-layout .cart-rail { display: none; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-layout .summary { position: static; order: -1; }
    .mobile-cart-bar.has-items { display: block; }
}
@media (max-width: 860px) {
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body { font-size: 15px; }
    .topbar .inner { height: 56px; gap: 8px; }
    .nav a { padding: 8px 9px; }
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
    .hide-mobile { display: none !important; }
    .card { padding: 18px; }
    h1 { font-size: 1.45rem; }
    .r-hero .cover { height: 150px; }
    .r-hero .hbody { padding: 16px; gap: 14px; }
    .r-hero h1 { font-size: var(--text-xl); }
    .r-logo, .r-hero.no-cover .r-logo { height: 56px; width: 56px; border-radius: 14px; }
    .dish { padding: 14px; gap: 12px; }
    .dish .d-thumb { width: 84px; height: 84px; }
    .ms-field { max-width: none; }
    .modal { max-width: 100%; }
    .hero-banner { padding: 28px 22px; }
    .hero-banner h1 { font-size: 1.7rem; }
    .home-hero { padding: 40px 20px; }
    .home-hero h1 { font-size: 2rem; }
    .addr-search { flex-direction: column; }
    .addr-search .btn-lg { width: 100%; }
}

@media (min-width: 601px) {
    .modal-backdrop { align-items: center; padding: 28px; }
    .modal { border-radius: var(--r-lg); }
}

/* ---- order audit ledger (timeline) ---- */
.ledger { list-style: none; margin: 0; padding: 0; position: relative; }
.ledger-row { position: relative; display: flex; gap: 14px; padding: 0 0 18px 4px; }
.ledger-row::before { content: ""; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 2px; background: var(--line-strong); }
.ledger-row:last-child { padding-bottom: 0; }
.ledger-row:last-child::before { display: none; }
.ledger-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: var(--pill); background: var(--muted); box-shadow: 0 0 0 4px var(--card); position: relative; z-index: 1; }
.ledger-placed .ledger-dot { background: var(--info); }
.ledger-payment_initiated .ledger-dot { background: var(--warn); }
.ledger-payment_confirmed .ledger-dot { background: var(--ok); }
.ledger-payment_failed .ledger-dot,
.ledger-payment_cancelled .ledger-dot { background: var(--danger); }
.ledger-status_changed .ledger-dot { background: var(--brand); }
.ledger-main { flex: 1; min-width: 0; }
.ledger-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; color: var(--ink); }
.ledger-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.ledger-ref { font-size: .78rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 7px; color: var(--ink-soft); word-break: break-all; }

/* ---- site footer ---- */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--card); }
.site-footer .container { padding-top: 28px; padding-bottom: 24px; }
.sf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.sf-links { display: flex; gap: 18px; flex-wrap: wrap; }
.sf-links a { color: var(--ink-soft); font-size: .9rem; font-weight: 500; text-decoration: none; }
.sf-links a:hover { color: var(--brand); }
.sf-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sf-bottom .nav a { font-size: .8rem; color: var(--muted); padding: 4px 7px; border-radius: var(--r-sm); text-decoration: none; }
.sf-bottom .nav a.active { background: var(--bg); color: var(--ink); font-weight: 600; }

/* ---- partner hero & home redesign ---- */
.partner-hero { text-align: center; }
.hero-eyebrow { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 5px 14px; border-radius: var(--pill); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.hero-points { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; color: rgba(255,255,255,.92); font-size: .92rem; font-weight: 600; }
.addr-inline .addr-search { max-width: 640px; }
.city-group { margin-bottom: 22px; }
.city-head { margin: 0 0 10px; font-size: .95rem; color: var(--ink-soft); }
.resto-closed-tag { position: absolute; top: 10px; right: 10px; background: rgba(16,24,29,.78); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--pill); }
.resto-cover { position: relative; }
.partner-band { margin-top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; box-shadow: var(--shadow-sm); }

/* ---- onboarding checklist ---- */
.setup-wrap { max-width: 720px; margin: 0 auto; }
.setup-list { list-style: none; margin: 18px 0 0; padding: 0; }
.setup-step { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 10px; }
.setup-step .ss-mark { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.setup-step.done .ss-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-step .ss-main { flex: 1; min-width: 0; }
.setup-step .ss-main p { margin: 2px 0 0; }
.setup-step.done { border-color: var(--ok-tint); background: linear-gradient(0deg, var(--ok-tint) -160%, var(--card) 60%); }

/* ---- notice bars (draft / paused) ---- */
.notice-bar { text-align: center; padding: 9px 16px; font-size: .92rem; font-weight: 600; }
.notice-draft { background: var(--info-tint); color: var(--info); }
.notice-paused { background: var(--warn-tint); color: var(--warn); }
.notice-bar a { font-weight: 700; }
.notice-bar form { display: inline; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---- manage mobile tab bar ---- */
.mobile-tabbar { display: none; }
@media (max-width: 600px) {
    .mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; background: var(--card); border-top: 1px solid var(--line-strong); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(16,24,29,.07); }
    .mobile-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 0; border-radius: var(--r-sm); }
    .mobile-tabbar a span { font-size: 1.15rem; }
    .mobile-tabbar a.active { color: var(--brand); }
    body:has(.mobile-tabbar) .page { padding-bottom: 96px; }
}

/* ---- opening hours table ---- */
.hours-table td, .hours-table th { padding: 8px 10px; }
.hours-table input[type=time] { width: auto; padding: 7px 9px; }

/* ---- board ticket cancel button ---- */
.btn-cancel-sub { color: var(--danger); }
.btn-cancel-sub:hover { background: var(--brand-tint); }

/* Language tabs (menu editor per-locale inputs) */
.locale-tabs { display: inline-flex; gap: 4px; }
.locale-tab { padding: 4px 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--pill); cursor: pointer; transition: color var(--t), background var(--t), border-color var(--t); }
.locale-tab:hover { color: var(--ink); }
.locale-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- split opening hours ---- */
.hours-range { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.hours-details { margin-top: 10px; font-size: .9rem; }
.hours-details summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.hours-details summary::-webkit-details-marker { display: none; }
.hours-details summary .ico { color: var(--muted); transition: transform var(--t); }
.hours-details[open] summary .ico:last-child { transform: rotate(180deg); }
.hours-display { border-collapse: collapse; margin-top: 8px; }
.hours-display th { text-align: left; padding: 2px 16px 2px 0; font-weight: 600; color: var(--ink-soft); }
.hours-display td { padding: 2px 0; }

/* The hidden attribute always wins, even on elements whose class sets display
   (e.g. .btn { display: inline-flex } used to override [hidden]). */
[hidden] { display: none !important; }

/* ---- Menu import: full-screen analyzing overlay ---- */
#analyzing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
}
.analyzing-box {
    max-width: 460px;
    text-align: center;
}
.analyzing-box h2 {
    margin: 0 0 10px;
}
.analyzing-emoji {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
    animation: analyzing-bounce 1.6s ease-in-out infinite;
}
@keyframes analyzing-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.analyzing-quip {
    min-height: 48px;
    color: var(--muted);
    font-size: 17px;
    transition: opacity 0.35s ease;
}
.analyzing-bar {
    height: 6px;
    margin: 18px auto 14px;
    max-width: 320px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    position: relative;
}
.analyzing-bar-fill {
    position: absolute;
    inset: 0;
    width: 35%;
    border-radius: 999px;
    background: var(--brand);
    animation: analyzing-slide 1.8s ease-in-out infinite;
}
@keyframes analyzing-slide {
    0% { left: -35%; }
    100% { left: 100%; }
}
.analyzing-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-bottom: 14px;
}
.analyzing-note {
    font-size: 14px;
    color: var(--muted);
    background: var(--warn-tint);
    border: 1px solid var(--warn-tint);
    border-radius: 10px;
    padding: 10px 14px;
}

/* ============ Onboarding wizard ============ */
.wiz-wrap { max-width: 660px; margin: 0 auto; padding: 8px 0 40px; }
.wiz-head { margin-bottom: 18px; }
.wiz-steps {
    list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 8px;
    counter-reset: none; overflow-x: auto;
}
.wiz-step { flex: 1 1 0; min-width: 0; text-align: center; }
.wiz-stepin {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none; color: var(--muted); padding-top: 6px;
    position: relative;
}
.wiz-step .wiz-dot {
    width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
    background: var(--line); color: var(--muted); font-weight: 700; font-size: 14px; flex: none;
    border: 2px solid var(--line); transition: all .15s;
}
.wiz-step.done .wiz-dot { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-tint); }
.wiz-step.current .wiz-dot { background: var(--brand); color: #fff; border-color: var(--brand); }
.wiz-label { font-size: 12px; line-height: 1.2; }
.wiz-step.current .wiz-label { color: var(--ink); font-weight: 600; }
.wiz-opt { display: block; font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: .03em; }
/* connector line between dots */
.wiz-step:not(:first-child) .wiz-stepin::before {
    content: ''; position: absolute; top: 21px; right: 50%; width: 100%; height: 2px;
    background: var(--line); z-index: 0;
}
.wiz-step.done .wiz-stepin::before { background: var(--ok-tint); }
.wiz-step .wiz-dot { position: relative; z-index: 1; }
.wiz-progress { text-align: center; margin: 0; }

.wiz-panel {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 26px 28px;
}
.wiz-panel h1 { margin: 0 0 6px; font-size: 1.5rem; }
.wiz-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 24px; justify-content: flex-end; }
.wiz-skip { margin-right: auto; } /* push skip to the left; primary stays on the right */
.wiz-exit { margin-top: 16px; }
.wiz-exit a { text-decoration: none; font-size: 14px; }
.wiz-exit a:hover { text-decoration: underline; }

.wiz-card {
    display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
    border: 1.5px solid var(--line); border-radius: 14px; padding: 20px;
    transition: border-color .15s, box-shadow .15s; background: #fff;
}
a.wiz-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.wiz-card.static { cursor: default; }
.wiz-card strong { font-size: 1.05rem; }
.wiz-card-emoji { font-size: 30px; line-height: 1; margin-bottom: 6px; }

.wiz-advanced { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.wiz-advanced summary { cursor: pointer; color: var(--muted); font-size: 14px; }

/* hours quick editor */
.hours-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hours-row { display: grid; grid-template-columns: 90px 92px 1fr; align-items: center; gap: 10px; }
.hours-day { font-weight: 600; font-size: 14px; }
.hours-closed { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.hours-sep { margin: 0 4px; color: var(--muted); }

/* service-type pills */
.pill-toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
    border: 1.5px solid var(--line); cursor: pointer; user-select: none; font-size: 14px;
}
.pill:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.pill input { accent-color: var(--brand); }

/* delivery-area map step */
.wiz-wide { max-width: 820px; }
.area-radiusbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.area-radiusbar label { font-weight: 600; }
.area-radiusbar input[type=range] { flex: 1; min-width: 180px; accent-color: var(--brand); }
.area-radius-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.area-map {
    height: 58vh; min-height: 340px; width: 100%;
    border-radius: 14px; border: 1px solid var(--line); overflow: hidden; z-index: 0;
}
.area-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.area-tools .help { flex: 1; min-width: 160px; }
[data-area-wrap][hidden] { display: none; }
.leaflet-container { font: inherit; }

/* review list */
.review-list { list-style: none; padding: 0; margin: 10px 0 0; }
.review-list li {
    display: flex; align-items: center; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.rl-mark {
    width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
    font-weight: 700; font-size: 14px; flex: none;
}
.review-list li.ok .rl-mark { background: var(--ok-tint); color: var(--ok); }
.review-list li.todo .rl-mark { background: var(--danger-tint); color: var(--danger); }
.review-list li.opt .rl-mark { background: var(--bg); color: var(--muted); }
.rl-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wiz-golive { text-align: center; margin-top: 22px; }

/* onboarding thank-you (final hand-off screen) */
.thankyou { text-align: center; padding: 40px 24px; }
.thankyou-mark { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.thankyou h1 { margin: 0 0 6px; }

@media (max-width: 600px) {
    .wiz-panel { padding: 20px 16px; border-radius: 12px; }
    .wiz-label { font-size: 0; } /* dots only on mobile */
    .wiz-label .wiz-opt { display: none; }
    .hours-row { grid-template-columns: 72px 80px 1fr; gap: 6px; }
}

/* ---------- accessibility & motion best practices ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.btn:focus-visible, .dish:focus-visible, .cart-btn:focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ============ Utility classes — token-driven; prefer over inline styles ============ */
.flex-1{flex:1}
.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}
.mx-auto{margin-left:auto;margin-right:auto}
.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}
.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}
.text-muted{color:var(--muted)}.text-brand{color:var(--brand)}.text-center{text-align:center}
.fw-medium{font-weight:var(--fw-medium)}.fw-semibold{font-weight:var(--fw-semibold)}.fw-bold{font-weight:var(--fw-bold)}

/* ---- Impersonation banner (admin acting as a restaurant) ---- */
.impersonation-bar { background: var(--ink); color: #fff; text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.impersonation-bar a { color: #fff; text-decoration: underline; margin-left: var(--space-2); font-weight: var(--fw-bold); }

/* ---- Horizontal rule ---- */
.rule { margin: var(--space-5) 0; border: 0; border-top: 1px solid var(--line); }

/* ============ Style guide (internal reference page) ============ */
.sg-section { margin: 0 0 var(--space-8); }
.sg-section > h2 { border-bottom: 2px solid var(--line); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.sg-swatch .sw { height: 64px; }
.sg-swatch .meta { padding: var(--space-2) var(--space-3); }
.sg-swatch .meta b { display: block; font-size: var(--text-sm); }
.sg-swatch .meta code { font-size: var(--text-xs); color: var(--muted); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.sg-space-bar { background: var(--brand); height: 18px; border-radius: var(--r-sm); }
.sg-type-row { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); }
.sg-type-row code { color: var(--muted); font-size: var(--text-xs); min-width: 130px; }
.sg-card-demo { max-width: 320px; }

.input-color { width: 80px; height: 42px; padding: 4px; }

/* ============ Opening-hours editor (onboarding wizard) ============ */
.oh-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: var(--space-3); }
.oh-row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--card); transition: background var(--t); }
.oh-row + .oh-row { border-top: 1px solid var(--line); }
.oh-row:hover { background: var(--bg); }
.oh-day { font-weight: var(--fw-semibold); }
.oh-times { display: flex; align-items: center; gap: var(--space-2); transition: opacity var(--t); }
.oh-times input[type=time] { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--text-sm); background: var(--card); color: var(--ink); font-family: var(--font); }
.oh-times input[type=time]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.oh-dash { color: var(--muted); }
.oh-row.is-closed .oh-times { opacity: .35; }
.oh-row.is-closed .oh-day { color: var(--muted); }
/* Open/Closed switch — the checkbox means "closed": unchecked = open (red, thumb right), checked = closed (grey, thumb left). */
.oh-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; }
.oh-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oh-switch .track { width: 42px; height: 24px; border-radius: var(--pill); background: var(--brand); position: relative; transition: background var(--t); flex: none; }
.oh-switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--pill); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t); transform: translateX(18px); }
.oh-switch input:checked + .track { background: var(--line-strong); }
.oh-switch input:checked + .track::after { transform: translateX(0); }
.oh-switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--brand-tint); }
.oh-state { font-size: var(--text-sm); font-weight: var(--fw-medium); min-width: 52px; }
.oh-switch input:checked ~ .oh-state { color: var(--muted); }
.oh-switch input:checked ~ .oh-state .s-open { display: none; }
.oh-switch input:not(:checked) ~ .oh-state .s-closed { display: none; }
.oh-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
@media (max-width: 600px) {
    .oh-row { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
    .oh-times { grid-column: 1 / -1; }
}