/* Customer pages (menu, ordering, tracking). Every colour, font and radius comes from the
   café's theme variables (apps/menus/theme.py) — no hard-coded brand values here. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:calc(16px * var(--font-scale,1))}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:96px}
img{max-width:100%;display:block}
a{color:var(--primary-text)}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-heading);line-height:1.3;margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.t-bg-paper{background-image:radial-gradient(color-mix(in srgb,var(--text) 4%,transparent) 1px,transparent 1px);background-size:4px 4px}
.t-bg-dots{background-image:radial-gradient(color-mix(in srgb,var(--text) 7%,transparent) 1.5px,transparent 1.5px);background-size:22px 22px}

/* ---------- hero */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:12px 16px 22px;background:var(--primary-soft);background-image:radial-gradient(color-mix(in srgb,var(--primary) 16%,transparent) 1.4px,transparent 1.6px);background-size:18px 18px;border-radius:0 0 calc(var(--radius-lg) + 8px) calc(var(--radius-lg) + 8px)}
.hero>*:not(.hero__deco){position:relative;z-index:1}
.hero__deco{position:absolute;z-index:0;pointer-events:none}
.hero__deco--1{width:150px;height:150px;inset-inline-end:-46px;bottom:-62px;border-radius:38px;background:var(--accent);opacity:.9;transform:rotate(-14deg)}
.hero__deco--2{width:58px;height:58px;inset-inline-end:92px;bottom:-26px;border-radius:50%;background:var(--highlight);opacity:.95}
.hero--cover .hero__deco{display:none}
.hero--cover{padding-top:0;background:transparent;border-radius:0;overflow:visible}
.hero__cover{width:100%;height:clamp(150px,42vw,260px);object-fit:cover;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.hero--cover .hero__bar{position:absolute;inset:12px 16px auto 16px}
.hero__bar{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px}
.hero__brand{display:flex;align-items:center;gap:14px;margin-top:10px}
.hero--cover .hero__brand{margin-top:-36px;padding:0 4px}
.t-header-centered .hero__brand{flex-direction:column;text-align:center}
.t-header-compact .hero__brand{margin-top:4px}
.hero__logo{width:72px;height:72px;border-radius:var(--radius-lg);object-fit:cover;background:var(--surface);border:3px solid var(--surface);box-shadow:var(--shadow);flex:none}
.hero__mono{display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-family:var(--font-heading);font-size:2rem;font-weight:900;line-height:1}
.t-header-compact .hero__mono{font-size:1.4rem}
.t-header-compact .hero__logo{width:48px;height:48px}
.hero__name{font-size:1.6rem;font-weight:900}
.hero--cover .hero__name{margin-top:30px}
.hero__status{margin:0;font-size:.85rem;color:var(--muted)}
.hero__status.is-open::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-inline-end:6px}
.lang{display:flex;gap:4px;background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:999px;padding:3px;backdrop-filter:blur(6px)}
.lang a{padding:2px 10px;border-radius:999px;text-decoration:none;color:var(--text);font-size:.8rem}
.lang a[aria-current]{background:var(--primary);color:var(--on-primary)}
.table-badge{margin-inline-start:auto;background:var(--surface);color:var(--primary-text);font-weight:900;padding:5px 16px;border-radius:999px;font-size:.95rem;border:2px solid var(--primary);box-shadow:0 3px 0 var(--primary);transform:rotate(-2deg)}
.welcome{margin:16px 16px 0;padding:12px 16px;background:var(--highlight);color:var(--on-highlight);border-radius:var(--radius-lg);font-size:.95rem;font-weight:600;display:flex;gap:10px;align-items:center}
.welcome::before{content:'';flex:none;width:10px;height:10px;border-radius:3px;background:currentColor;opacity:.55;transform:rotate(45deg)}

/* ---------- notices */
.notice{margin:12px 16px 0;padding:12px 14px;border-radius:var(--radius);background:color-mix(in srgb,var(--warning) 14%,var(--surface));color:var(--text);border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);font-weight:600}
.your-orders{margin:12px 16px 0;display:flex;flex-direction:column;gap:6px}
.your-orders a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);text-decoration:none;color:var(--text)}
.your-orders a b{color:var(--primary-text)}
.your-orders a.your-orders__bill{font-weight:700;color:var(--primary-text);border-style:dashed}
.cart-bill-link{display:block;margin:0 16px 12px;text-align:center;color:var(--primary-text);font-weight:700}
.pill{font-size:.8rem;padding:2px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-text);font-weight:700;white-space:nowrap}
.pill--ready{background:color-mix(in srgb,var(--success) 18%,var(--surface));color:var(--success)}

/* ---------- menu switcher (café with more than one menu) */
.menu-switch{display:flex;gap:6px;margin:14px 16px 0;padding:5px;background:var(--surface-2);border-radius:calc(var(--btn-radius) + 5px);overflow-x:auto;scrollbar-width:none}
.menu-switch::-webkit-scrollbar{display:none}
.menu-switch a{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:44px;padding:6px 14px;border-radius:var(--btn-radius);text-decoration:none;color:var(--muted);font-weight:700;white-space:nowrap;text-align:center;line-height:1.35;transition:background .15s,color .15s}
.menu-switch a small{font-weight:500;font-size:.72rem;opacity:.85}
.menu-switch a[aria-current]{background:var(--surface);color:var(--text);box-shadow:var(--shadow),inset 0 -3px 0 var(--primary)}

/* ---------- search */
.search{position:relative;margin:14px 16px 0}
.search input{width:100%;padding:12px 44px;border-radius:var(--btn-radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.search__ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search__clear{all:unset;box-sizing:border-box;position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border-radius:999px;cursor:pointer;color:var(--muted);font-size:.9rem}
.search__clear:hover{background:var(--surface-2);color:var(--text)}

/* ---------- category bar: sticky, scrolls sideways, arrows + «all categories» when it doesn't fit */
.cats-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;padding:10px 16px;margin-top:6px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.cats-scroll{position:relative;flex:1;min-width:0}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth;padding-block:2px 4px}
.cats::-webkit-scrollbar{display:none}
.cats.is-dragging{scroll-behavior:auto;cursor:grabbing}
.cats.is-dragging a{pointer-events:none}
.cats a{flex:none;text-decoration:none;color:var(--text);padding:6px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.92rem;white-space:nowrap;transition:background .15s;-webkit-user-drag:none;user-select:none}
.cats a.is-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary);box-shadow:0 3px 0 color-mix(in srgb,var(--primary) 65%,#000)}
.cats-all{all:unset;box-sizing:border-box;flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.cats-all:focus-visible,.cats-arrow:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.cats-arrow{all:unset;box-sizing:border-box;position:absolute;top:0;bottom:0;z-index:1;width:48px;display:flex;align-items:center;cursor:pointer;color:var(--text)}
.cats-arrow svg{width:30px;height:30px;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.cats-arrow--start{inset-inline-start:0;justify-content:flex-start;background:linear-gradient(to var(--to-start),transparent,color-mix(in srgb,var(--bg) 96%,transparent) 55%)}
.cats-arrow--end{inset-inline-end:0;justify-content:flex-end;background:linear-gradient(to var(--to-end),transparent,color-mix(in srgb,var(--bg) 96%,transparent) 55%)}
:root{--to-start:left;--to-end:right}
[dir=rtl]{--to-start:right;--to-end:left}
[dir=rtl] .cats-arrow svg{transform:scaleX(-1)}
.t-nav-tabs .cats-bar{border-bottom:1px solid var(--border);padding-bottom:0}
.t-nav-tabs .cats{gap:0;padding-bottom:0}
.t-nav-tabs .cats a{border:0;border-radius:0;background:transparent;padding:10px 14px;border-bottom:3px solid transparent}
.t-nav-tabs .cats a.is-active{background:transparent;color:var(--primary-text);border-bottom-color:var(--primary);box-shadow:none}
.t-nav-tabs .cats-all{margin-bottom:6px}
.t-nav-grid .cats-bar{position:static;backdrop-filter:none;background:transparent}
.t-nav-grid .cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));overflow:visible}
.t-nav-grid .cats a{display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:var(--radius);padding:10px 6px;white-space:normal;text-align:center}
.t-nav-grid .cats img{width:56px;height:56px;border-radius:var(--img-radius);object-fit:cover}
.t-nav-grid .cats-arrow{display:none}
/* «all categories» sheet */
.cat-list{display:grid;gap:6px;margin-top:12px}
.cat-list button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);background:var(--surface-2);cursor:pointer;font-weight:700}
.cat-list button.is-active{background:var(--primary-soft);color:var(--primary-text)}
.cat-list img{width:40px;height:40px;border-radius:var(--img-radius);object-fit:cover;flex:none}
.cat-list span{flex:1}
.cat-list small{color:var(--muted);font-weight:500}

/* ---------- search results */
.results__head{margin:18px 0 12px;color:var(--muted);font-size:.9rem;font-weight:600}
.results__head b{color:var(--text)}
.results__empty{text-align:center;padding:36px 8px}
.results__empty-title{margin:0;font-weight:800;font-size:1.05rem}
.results__empty-hint{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.item__where{font-size:.75rem;color:var(--muted);font-weight:600}
mark{background:color-mix(in srgb,var(--accent) 38%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.notice--inline{margin:16px 0 0}
.notice--staff{background:color-mix(in srgb,var(--primary) 12%,var(--surface));border-color:color-mix(in srgb,var(--primary) 40%,transparent)}

/* ---------- sections + items */
.menu{padding:4px 16px 16px;max-width:980px;margin:0 auto}
.cat{scroll-margin-top:64px;margin-top:22px}
.section-title{font-size:1.2rem;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.section-title::before{content:'';flex:none;width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.t-layout-classic .section-title{display:block}.t-layout-classic .section-title::before{display:none}
.cat__desc{margin:-4px 0 10px;color:var(--muted);font-size:.9rem}
.items{display:grid;gap:var(--gap)}
.item{all:unset;box-sizing:border-box;display:flex;gap:12px;cursor:pointer;background:var(--surface);border-radius:var(--radius-lg);padding:10px;position:relative;transition:transform .12s}
.item:active{transform:scale(.985)}
.item:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.t-card-border .item{border:1px solid var(--border)}
.t-card-shadow .item{box-shadow:var(--shadow)}
.t-card-flat .item{background:transparent;padding-inline:0;border-bottom:1px solid var(--border);border-radius:0}
.item__img{width:96px;height:96px;flex:none;object-fit:cover;border-radius:var(--img-radius);background:var(--surface-2)}
.item__ph{display:grid;place-items:center;background-color:var(--primary-soft);background-image:radial-gradient(color-mix(in srgb,var(--primary) 16%,transparent) 1.4px,transparent 1.6px);background-size:14px 14px;color:var(--primary-text);font-family:var(--font-heading);font-size:2rem;font-weight:900;line-height:1;user-select:none}
.item:nth-child(3n+2) .item__ph{background-color:var(--highlight);color:var(--on-highlight)}
.item:nth-child(3n) .item__ph{background-color:var(--surface-2);color:var(--text)}
.item__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.item__name{font-weight:700;font-size:1rem}
.item__desc{color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px}
.price{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.price s{color:var(--muted);font-weight:400;font-size:.85em;margin-inline-end:4px}
.price small{font-weight:400;color:var(--muted);font-size:.75em}
.add-btn{width:38px;height:38px;flex:none;border-radius:var(--btn-radius);display:grid;place-items:center;background:var(--primary);color:var(--on-primary);box-shadow:0 3px 0 color-mix(in srgb,var(--primary) 65%,#000)}
.t-btn-outline .add-btn{background:transparent;color:var(--primary-text);border:2px solid var(--primary);box-shadow:none}
.item.is-off{cursor:default;opacity:.55}
.item.is-off .item__img{filter:grayscale(1)}
.item.is-unorderable .add-btn{display:none}
.off-label{font-size:.82rem;font-weight:700;color:var(--danger)}
.badge{font-style:normal;font-size:.7rem;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-text);margin-inline-start:6px;vertical-align:middle}
.badge--new{background:var(--accent);color:var(--on-accent)}
.item__tags{display:flex;flex-wrap:wrap;gap:4px;margin-block:2px}
.tag{font-style:normal;font-size:.72rem;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-text);white-space:nowrap}
.tag--c{background:color-mix(in srgb,var(--tag) 14%,var(--surface));color:color-mix(in srgb,var(--tag) 78%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tag) 28%,transparent)}
.sheet__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sheet__tags .tag{font-size:.8rem;padding:3px 10px}
.specs{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem;padding:12px 14px;background:var(--surface-2);border-radius:var(--radius)}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-weight:600}
.allergens{margin-top:10px;font-size:.82rem;color:var(--muted)}
.allergens b{color:var(--text);font-weight:700}
/* grid & cards layouts */
.t-layout-grid .items{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.t-layout-grid .item,.t-layout-cards .item{flex-direction:column;padding:0;overflow:hidden}
.t-layout-grid .item__img{width:100%;height:auto;aspect-ratio:1;border-radius:0}
.t-layout-grid .item__ph,.t-layout-cards .item__ph{font-size:3rem}
.featured__row .item__ph{display:none}
.featured__row .item:not(:has(img.item__img)){flex:0 0 min(56vw,200px);border-top:4px solid var(--accent)}
.featured__row .item:not(:has(img.item__img)) .item__body{padding:12px 14px 14px}
.t-layout-cards .item__img{width:100%;height:auto;aspect-ratio:16/10;border-radius:0}
.t-layout-grid .item__body,.t-layout-cards .item__body{padding:8px 12px 12px}
.t-layout-cards .item__name{font-size:1.1rem}
.t-layout-grid .t-card-flat .item,.t-layout-grid.t-card-flat .item{padding:0}
/* classic: text-only like a printed menu */
.t-layout-classic .item{background:transparent;border:0;box-shadow:none;border-radius:0;padding:10px 0;border-bottom:1px dashed var(--border)}
.t-layout-classic .item__foot{margin-top:0}
.t-layout-classic .section-title{text-align:center;letter-spacing:.02em}
.t-layout-classic .section-title::after{content:"";display:block;width:48px;height:2px;background:var(--accent);margin:8px auto 0}
@media (min-width:700px){.t-layout-list .items{grid-template-columns:1fr 1fr}.t-layout-cards .items{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
.t-density-compact .item__img{width:76px;height:76px}
.featured{margin:18px -16px 0;padding:16px 16px 12px;background:color-mix(in srgb,var(--accent) 14%,var(--bg));border-radius:var(--radius-lg)}
@media (min-width:1012px){.featured{margin-inline:0}}
.featured__row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.featured__row .item{flex:0 0 min(70vw,260px);flex-direction:column;padding:0;overflow:hidden;scroll-snap-align:start}
.featured__row .item__img{width:100%;height:auto;aspect-ratio:16/10;border-radius:0}
.featured__row .item__body{padding:8px 12px 12px}
.empty{color:var(--muted);text-align:center;padding:32px 0}

/* wide screens: header, notices, search and category bar share the menu column */
@media (min-width:1012px){.hero__bar,.hero__brand{max-width:948px;margin-inline:auto}.welcome,.notice,.your-orders{max-width:948px;margin-inline:auto}.search,.menu-switch{max-width:948px;margin-inline:auto}.cats-bar{max-width:980px;margin-inline:auto}.hero__deco--1{inset-inline-end:calc(50% - 560px)}.hero__deco--2{inset-inline-end:calc(50% - 420px)}}

/* ---------- footer */
.foot{text-align:center;padding:24px 16px 8px;color:var(--muted);font-size:.9rem}
.foot__line,.foot__text,.foot__hint{margin:4px 0}
.foot__hint{font-weight:600;color:var(--text)}
.foot__brand{margin-top:16px;font-size:.78rem;color:var(--muted);text-align:center}
.foot__brand a{color:inherit}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:var(--btn-radius);border:0;cursor:pointer;font-weight:700;text-decoration:none;font-size:1rem;transition:filter .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:0 3px 0 color-mix(in srgb,var(--primary) 65%,#000)}
.btn--primary:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--primary) 65%,#000)}
.t-btn-outline .btn--primary{background:var(--surface);color:var(--primary-text);border:2px solid var(--primary);box-shadow:none}
.btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn--danger{background:transparent;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 50%,transparent)}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---------- cart bar */
.cartbar{position:fixed;inset:auto 0 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent);z-index:20}
.cartbar .btn{justify-content:space-between;max-width:640px;margin:0 auto;display:flex;box-shadow:0 4px 0 color-mix(in srgb,var(--primary) 65%,#000),var(--shadow);min-height:56px}
.cartbar #cart-count{background:var(--on-primary);color:var(--primary);border-radius:999px;min-width:28px;height:28px;display:grid;place-items:center;font-size:.9rem}

/* ---------- bottom sheet */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet__backdrop{position:absolute;inset:0;background:var(--overlay);animation:fade .18s ease}
.sheet__panel{position:relative;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:0 0 calc(16px + env(safe-area-inset-bottom));animation:up .22s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
@media (min-width:700px){.sheet{align-items:center}.sheet__panel{border-radius:var(--radius-lg);max-height:86vh}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes fade{from{opacity:0}}
.sheet__img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sheet__close{position:sticky;top:8px;float:inline-end;margin:8px;width:36px;height:36px;border-radius:50%;border:0;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:var(--shadow);cursor:pointer;font-size:1.2rem;z-index:2}
.sheet__body{padding:16px}
/* The floating ✕ sits beside the title only. Rows after the title must start below it, or flex rows
   (the first cart line, the review table badge) shrink sideways to make room for the button. */
.sheet__title~*{clear:both}
.sheet__title{font-size:1.3rem;font-weight:800}
.sheet__desc{color:var(--muted);margin:6px 0 0}
.sheet__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sheet__foot{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;padding:12px 16px;background:var(--surface);border-top:1px solid var(--border)}
.sheet__foot .btn{white-space:nowrap;padding-inline:16px;min-width:0}
.group{margin-top:18px}
.group__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.group__name{font-weight:800;font-size:1rem}
.group__rule{font-size:.78rem;color:var(--muted)}
.group__rule.is-required{color:var(--primary-text);font-weight:700}
.group.has-error .group__rule{color:var(--danger)}
.opt{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;min-height:48px}
.opt:last-child{border-bottom:0}
.opt input{width:22px;height:22px;accent-color:var(--primary);flex:none}
.opt__name{flex:1}
.opt__price{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums}
.opt.is-off{opacity:.5;cursor:not-allowed}
.field{width:100%;margin-top:16px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;resize:vertical;min-height:48px}
.qty{display:flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:var(--btn-radius);padding:3px}
.qty button{width:40px;height:40px;border:0;border-radius:var(--btn-radius);background:var(--surface-2);cursor:pointer;font-size:1.2rem;font-weight:700}
.qty output{min-width:28px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- cart & review */
.cart-line{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-line__main{flex:1;min-width:0}
.cart-line__name{font-weight:700}
.cart-line__mods,.cart-line__note{font-size:.85rem;color:var(--muted)}
.cart-line__actions{display:flex;gap:12px;margin-top:6px}
.cart-line__actions button{background:none;border:0;padding:0;color:var(--primary-text);cursor:pointer;font-size:.88rem;text-decoration:underline}
.cart-line__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-line.has-error{background:color-mix(in srgb,var(--danger) 8%,transparent);border-radius:var(--radius);padding-inline:8px}
.cart-line__error{color:var(--danger);font-size:.85rem;font-weight:600}
.sum{margin-top:14px}
.sum p{display:flex;justify-content:space-between;margin:4px 0}
.sum .sum__total{font-weight:800;font-size:1.15rem;border-top:1px solid var(--border);padding-top:8px;margin-top:8px}
.review-table{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:var(--radius);background:var(--primary-soft);color:var(--text);font-weight:700;margin-bottom:6px}

/* ---------- toast */
.toast{position:fixed;inset:auto 16px calc(90px + env(safe-area-inset-bottom)) 16px;margin:0 auto;max-width:480px;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:var(--radius);text-align:center;z-index:60;box-shadow:var(--shadow);animation:up .2s ease}
body.sheet-open .toast{inset:calc(16px + env(safe-area-inset-top)) 16px auto 16px}

/* ---------- tracking */
.track{max-width:560px;margin:0 auto;padding:20px 16px}
.track__head{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:12px}
.track__logo{width:44px;height:44px;border-radius:var(--radius);object-fit:cover}
.track__logo.hero__mono{font-size:1.3rem}
.track__biz{margin:0;font-weight:700}
.track__card{background:var(--surface);border-radius:calc(var(--radius-lg) + 4px);padding:22px 20px;margin-bottom:14px;box-shadow:var(--shadow);border:1px solid var(--border)}
.track__art{width:150px;height:118px;margin:-4px auto 10px;border-radius:calc(var(--radius-lg) + 10px);background-color:var(--primary-soft);background-image:radial-gradient(color-mix(in srgb,var(--primary) 16%,transparent) 1.4px,transparent 1.6px);background-size:14px 14px;display:grid;place-items:center}
.ta{display:none;width:120px;height:100px;overflow:visible}
.track[data-state=prep] .ta--prep,.track[data-state=ready] .ta--ready,.track[data-state=done] .ta--done,.track[data-state=cancelled] .ta--cancelled{display:block}
.track[data-state=ready] .track__art{background-color:color-mix(in srgb,var(--success) 16%,var(--surface))}
.track[data-state=cancelled] .track__art{background-color:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.ta-l{stroke:var(--text);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.ta-p{fill:var(--primary)}.ta-a{fill:var(--accent)}.ta-s{fill:var(--surface)}
.ta-m{stroke:var(--muted);stroke-width:3;stroke-linecap:round}.ta-ok{fill:var(--success)}.ta-no{fill:var(--danger)}
.ta--prep .ta-m{animation:steam 2.4s ease-in-out infinite}
@keyframes steam{50%{opacity:.35;transform:translateY(-3px)}}
.track[data-state=ready] .ta--ready{animation:ring 1.4s ease-in-out infinite;transform-origin:50% 80%}
@keyframes ring{10%,30%{transform:rotate(-6deg)}20%,40%{transform:rotate(6deg)}50%{transform:none}}
.track__title{text-align:center;font-size:1.3rem}
.track__meta{text-align:center;color:var(--muted);margin:6px 0 18px}
.track__meta b{color:var(--text);font-size:1.15rem}
.steps{list-style:none;padding:0;margin:0;display:flex;justify-content:space-between;position:relative}
.steps::before{content:"";position:absolute;top:13px;inset-inline:10%;height:3px;background:var(--border)}
.steps li{position:relative;flex:1;text-align:center;font-size:.75rem;color:var(--muted)}
.steps li::before{content:"";display:block;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:var(--surface);border:3px solid var(--border);position:relative}
.steps li.is-done{color:var(--text)}
.steps li.is-done::before{background:var(--primary);border-color:var(--primary)}
.steps li.is-current{color:var(--text);font-weight:800}
.steps li.is-current::before{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 5px var(--primary-soft);animation:pulse 1.6s ease infinite}
.steps li.is-ready::before{background:var(--success);border-color:var(--success)}
@keyframes pulse{50%{box-shadow:0 0 0 9px var(--primary-soft)}}
.track__status{text-align:center;font-weight:800;font-size:1.1rem;margin:18px 0 0}
.track__status.is-ready{color:var(--success)}
.track__status.is-cancelled{color:var(--danger)}
.track__thanks{text-align:center;color:var(--muted)}
.track__items{list-style:none;padding:0;margin:0}
.track__items li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.track__items small{display:block;color:var(--muted)}
.track__total{display:flex;justify-content:space-between;font-weight:800;margin:12px 0 0}
.track__pay{color:var(--muted);font-size:.9rem;margin:4px 0 0}
.track__actions{display:grid;gap:10px}
.track__live{text-align:center;color:var(--muted);font-size:.8rem;margin-top:16px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-inline-end:4px;vertical-align:middle}
.dot.is-on{background:var(--success)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- confirm sheet (tracking.js) — replaces the browser's confirm box */
.ask{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.ask{align-items:center}}
.ask__backdrop{position:absolute;inset:0;background:var(--overlay);animation:fade .18s ease}
.ask__panel{position:relative;width:100%;max-width:440px;background:var(--surface);color:var(--text);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));text-align:center;box-shadow:var(--shadow);animation:up .22s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.ask__panel{border-radius:var(--radius-lg)}}
.ask__title{margin:0;font-size:1.2rem;font-weight:800}
.ask__body{margin:6px 0 0;color:var(--muted)}
.ask__actions{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.btn--danger-solid{background:var(--danger);color:#fff}
/* custom radio / checkbox for modifier options (instead of the browser's) */
.opt input{appearance:none;-webkit-appearance:none;margin:0;width:22px;height:22px;flex:none;border:2px solid color-mix(in srgb,var(--text) 30%,transparent);background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.opt input[type=radio]{border-radius:50%}
.opt input[type=checkbox]{border-radius:7px}
.opt input:checked{background:var(--primary);border-color:var(--primary)}
.opt input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--surface)}
.opt input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid var(--on-primary);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.opt input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.opt input:disabled{opacity:.5;cursor:not-allowed}
/* ---------- "scan the table QR" sheet (menu.js openScanSheet) */
.scan{text-align:center;padding-top:28px}
.scan__ic{width:68px;height:68px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--primary);transform:rotate(-4deg)}
.scan .sheet__desc{max-width:340px;margin-inline:auto}
.scan--live{padding-top:16px}
.scanner{position:relative;width:min(100%,340px);aspect-ratio:1;margin:14px auto 0;border-radius:var(--radius-lg);overflow:hidden;background:#111;clear:both}
.scanner video{width:100%;height:100%;object-fit:cover;display:block}
.scanner__frame{position:absolute;inset:16%;border:3px solid rgba(255,255,255,.92);border-radius:22px;box-shadow:0 0 0 999px rgba(0,0,0,.38);transition:border-color .2s}
.scanner__frame::after{content:"";position:absolute;inset-inline:10%;top:50%;height:2px;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:scanline 1.8s ease-in-out infinite alternate}
.scanner.is-done .scanner__frame{border-color:var(--primary)}
.scanner.is-done .scanner__frame::after{display:none}
@keyframes scanline{from{transform:translateY(-55px)}to{transform:translateY(55px)}}
@media (prefers-reduced-motion:reduce){.scanner__frame::after{animation:none}}
.scanner__msg{margin:12px auto 0;max-width:340px;color:var(--muted);font-size:.92rem}
.scanner__msg.is-error{color:var(--text);font-weight:600}

/* guest feedback («نظر شما», static/public/feedback.js) — theme variables only */
.foot__fb{margin:0 auto 10px;display:inline-flex}
.fb{display:flex;flex-direction:column;gap:6px;text-align:center}
.fb__title{font-size:1.15rem;font-weight:800;margin:0}
.fb__sub{margin:0;color:var(--muted);font-size:.88rem}
.fb-faces{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0 4px}
.fb-faces__btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 8px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:.74rem;font-weight:700;color:var(--muted);transition:transform .12s,background .15s,border-color .15s}
.fb-faces__btn:active{transform:scale(.96)}
.fb-faces__btn.is-on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-text);box-shadow:0 3px 0 var(--primary);transform:translateY(-2px)}
.fb-face{display:block;color:var(--muted)}
.fb-face__bg{fill:color-mix(in srgb,var(--text) 6%,var(--surface));stroke:currentColor;stroke-width:1.6}
.fb-face__ink{fill:currentColor}
.fb-face__line{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fb-faces__btn.is-on .fb-face{color:var(--primary-text)}
.fb-faces__btn.is-on .fb-face__bg{fill:var(--surface)}
.fb-more{display:flex;flex-direction:column;text-align:start;animation:up .22s cubic-bezier(.2,.8,.2,1)}
.fb-more .field{margin-top:10px}
.fb-q{margin:12px 0 6px;font-weight:800}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px}
.fb-chip{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:.86rem;font-weight:700;min-height:40px;transition:background .15s,border-color .15s}
.fb-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.fb-chip[aria-pressed="true"]::before{content:"✓ "}
.fb-err{margin:6px 0 0;color:var(--danger,#b42318);font-weight:700;font-size:.88rem}
.fb .btn--block{margin-top:12px}
.fb--done{align-items:center;padding:4px 0}
.fb--done .fb-face{width:52px;height:52px;color:var(--primary-text)}
.fb--done .btn{margin-top:8px;min-height:40px}
.fb-sheet .sheet__body{padding:20px 16px 8px}