/* Batata & Ketchup menu. Colours come from the BK logo: the red swoosh (#B60B2F) and the brown
   brush lettering (#271914), on a warm paper cream like the printed menu. Type, spacing and
   motion follow AM Studio's UI-KIT.md. */
:root {
  --red: #b60b2f;
  --red-deep: #8c0824;
  --red-ink: #b60b2f;
  --red-soft: #fbe8eb;
  --brown: #271914;
  --bg: #faf5ee;
  --bg-2: #f3ebe1;
  --surface: #ffffff;
  --line: #ecdfd3;
  --ink: #271914;
  --ink-2: #4f3f39;
  --muted: #6e5e57;
  --ok: #16a34a;
  --error: #dc2626;
  --cartbar-bg: #271914;
  --cartbar-count: #b60b2f;
  --closedbar-bg: #271914;
  --shadow: 0 1px 2px rgba(39, 25, 20, 0.05), 0 8px 24px rgba(39, 25, 20, 0.08);

  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --catbar-h: 60px;
  color-scheme: light;
}

/* Dark colours follow the phone, unless someone chose with the button (theme.js sets data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --red-ink: #ff6f88;
    --red-soft: rgba(182, 11, 47, 0.2);
    --bg: #130c0a;
    --bg-2: #1a110f;
    --surface: #201613;
    --line: #35261f;
    --ink: #f6eee7;
    --ink-2: #dacbc2;
    --muted: #ab9b93;
    --ok: #4ade80;
    --error: #f87171;
    --cartbar-bg: #b60b2f;
    --cartbar-count: rgba(0, 0, 0, 0.25);
    --closedbar-bg: #2d1f1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --red-ink: #ff6f88;
  --red-soft: rgba(182, 11, 47, 0.2);
  --bg: #130c0a;
  --bg-2: #1a110f;
  --surface: #201613;
  --line: #35261f;
  --ink: #f6eee7;
  --ink-2: #dacbc2;
  --muted: #ab9b93;
  --ok: #4ade80;
  --error: #f87171;
  --cartbar-bg: #b60b2f;
  --cartbar-count: rgba(0, 0, 0, 0.25);
  --closedbar-bg: #2d1f1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--catbar-h) + 8px); }
html.locked { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
[dir='rtl'] { font-size: 106%; }
[dir='rtl'] body { font-family: var(--font-arabic); line-height: 1.7; }
[dir='rtl'] .item-name, [dir='rtl'] .line-name, [dir='rtl'] .offer-title { line-height: 1.5; }
[dir='rtl'] * { letter-spacing: 0 !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
svg { display: block; flex: none; }
:focus-visible { outline: 2.5px solid var(--red-ink); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-4) var(--space-4);
  text-align: center;
  color: #fff;
}
/* Their own food, dimmed so the logo and the buttons stand out. It fades out to nothing rather than to the
   page colour, so it melts into light and dark alike and no line of photo shows at its bottom edge. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 14, 11, 0.55) 0%, rgba(23, 14, 11, 0.8) 62%),
    url('/img/bands/hero.jpg') center 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.hero > * { z-index: 1; }
.hero > :not(.hero-btn) { position: relative; }
.hero-btn {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 200ms;
}
.hero-btn:hover { background: rgba(0, 0, 0, 0.58); }
.lang-btn { inset-inline-end: var(--space-4); font-family: var(--font-arabic); }
html[lang='ar'] .lang-btn { font-family: var(--font-sans); }
.theme-btn { inset-inline-start: var(--space-4); width: 44px; padding: 0; display: grid; place-items: center; }
.hero-logo {
  width: 148px;
  height: 148px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--red), 0 18px 40px rgba(0, 0, 0, 0.5);
}
/* The logo already says the name, so these two are only for search engines and screen readers */
.hero > .hero-name, .hero > .hero-tagline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.875rem;
  font-weight: 600;
}
.status:empty { display: none; }
.promo { display: block; width: fit-content; margin: var(--space-2) auto 0; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--red); font-size: 0.85rem; font-weight: 800; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25); }
.status.closed .status-dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25); }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 150ms var(--ease-out), background 200ms;
}
.action:hover { transform: translateY(-1px); background: var(--red-deep); }
.action:active { transform: translateY(0); }

/* ---------------------------------------------------------------- notice */
.notice {
  max-width: 720px;
  margin: var(--space-4) auto 0;
  margin-inline: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
  background: var(--red-soft);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
}
@media (min-width: 752px) { .notice { margin-inline: auto; } }

/* ---------------------------------------------------------------- section titles */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.section-title {
  position: relative;
  padding-bottom: 12px;
  color: var(--red-ink);
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
[dir='rtl'] .section-title { text-transform: none; font-weight: 800; font-size: 1.65rem; line-height: 1.4; }
/* Brush underline, the same swoosh as under "BK" in the logo */
.section-title::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 76px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 13C30 12 70 10 104 6c6-1 12-3 16-6-2 6-8 10-16 11C72 14 34 15 0 13Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 13C30 12 70 10 104 6c6-1 12-3 16-6-2 6-8 10-16 11C72 14 34 15 0 13Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
[dir='rtl'] .section-title::after { transform: scaleX(-1); }

/* ---------------------------------------------------------------- offers */
.offers { max-width: 1040px; margin: var(--space-8) auto 0; }
.offers .section-head { padding-inline: var(--space-4); }
.offer-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-2);
  scrollbar-width: none;
}
.offer-row::-webkit-scrollbar { display: none; }
.offer {
  position: relative;
  flex: 0 0 min(68%, 280px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.offer:only-child { flex-basis: min(80%, 320px); }
/* Shown whole, never cropped: the owner's offer posters have the price written on them */
.offer-media { flex: none; background: #fff; }
.offer-media img { width: 100%; height: auto; object-fit: contain; }
/* No photo: a red panel with the offer's name, like the printed menu's headers */
.offer-media.plain {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  aspect-ratio: auto;
  min-height: 132px;
  color: #fff;
  background: linear-gradient(160deg, #c3123a, var(--red-deep));
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}
[dir='rtl'] .offer-media.plain { text-transform: none; font-weight: 800; line-height: 1.5; }
.offer-tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.offer-tag.beside { position: static; align-self: flex-start; background: var(--red-soft); color: var(--red-ink); box-shadow: none; }
.offer-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); flex: 1; }
.offer-title { font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.offer-when { color: var(--red-ink); font-size: 0.85rem; font-weight: 700; }
.offer-desc { color: var(--muted); font-size: 0.9rem; white-space: pre-line; }
.offer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }
.offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; flex: 1; min-width: 0; }
.offer-price b { color: var(--red-ink); font-size: 1.15rem; font-weight: 800; }
.offer-price s { color: var(--muted); font-size: 0.9rem; }

/* ---------------------------------------------------------------- big photo cards */
.picks { max-width: 1040px; margin: var(--space-6) auto 0; }
.picks .section-head { padding-inline: var(--space-4); }
.pick-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-2);
  scrollbar-width: none;
}
.pick-row::-webkit-scrollbar { display: none; }
.pick {
  flex: 0 0 min(66%, 260px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pick-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-2); padding: 10px 10px 10px 14px; }
[dir='rtl'] .pick-body { padding: 10px 14px 10px 10px; }
.pick-name { font-weight: 800; line-height: 1.25; }
.pick-price { grid-column: 1; color: var(--red-ink); font-weight: 800; font-size: 0.95rem; }
.pick-body .ctl { grid-column: 2; grid-row: 1 / span 2; }

/* ---------------------------------------------------------------- category bar */
.catbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--catbar-h);
  margin-top: var(--space-6);
  padding-inline: var(--space-3);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.catbar.stuck { border-bottom-color: var(--line); }
.search-btn, .search-close, .icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  color: var(--ink-2);
  transition: background 200ms;
}
.search-btn { width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--line); }
.search-btn:hover, .search-close:hover, .icon-btn:hover { background: var(--bg-2); }
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 4px;
  flex: 1;
  min-width: 0;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.chip:hover { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.chip.active { background: var(--red); border-color: var(--red); color: #fff; }
.search { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.search[hidden] { display: none; }
.search input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 var(--space-4);
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  outline: none;
  font-size: 1rem;
  transition: border-color 200ms, box-shadow 200ms;
}
.search input:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.catbar.searching .search-btn, .catbar.searching .chips { display: none; }

/* ---------------------------------------------------------------- menu */
.menu { max-width: 720px; margin: 0 auto; padding: var(--space-2) var(--space-4) var(--space-8); }
.prices-note { color: var(--muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding-block: var(--space-2) 0; }
.cat { padding-top: var(--space-6); }
/* Each section opens with a red band, its photo fading in from the side, like their Instagram posters */
.cat .section-head {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: flex-start;
  min-height: 132px;
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border-radius: 18px;
  background: linear-gradient(120deg, #c3123a, var(--red-deep));
  box-shadow: var(--shadow);
}
.cat .section-head > div { position: relative; z-index: 1; max-width: 50%; }
.cat .section-title { color: #fff; font-size: 1.7rem; }
.cat-count { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.86); font-size: 0.85rem; font-weight: 500; }
.cat-banner {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 68%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%);
  mask-image: linear-gradient(to right, transparent 0, #000 42%);
}
[dir='rtl'] .cat-banner {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 42%);
  mask-image: linear-gradient(to left, transparent 0, #000 42%);
}
.items {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: 10px var(--space-3) 10px var(--space-4);
}
[dir='rtl'] .item { padding: 10px var(--space-4) 10px var(--space-3); }
.item + .item { border-top: 1px solid var(--line); }
.ordering-off .item { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4) !important; }
.item-name { font-weight: 700; line-height: 1.3; }
.item-desc { margin-top: 2px; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.item-price { font-weight: 800; color: var(--red-ink); }
.has-deal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.has-deal s { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.has-deal b { color: var(--red-ink); font-weight: 800; }
.item.out .item-name, .item.out .item-price { color: var(--muted); }
.item.out .item-price { text-decoration: line-through; }
.badge-out {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 2px;
}
mark { background: color-mix(in srgb, var(--red) 18%, transparent); color: inherit; border-radius: 3px; }
.no-results { padding: var(--space-12) 0; text-align: center; color: var(--muted); }

/* Add button, which becomes − 2 + once the item is in the order */
.add {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  background: var(--red);
  color: #fff;
  transition: background 200ms, transform 150ms var(--ease-out);
}
.add:hover { background: var(--red-deep); }
.add:active { transform: scale(0.92); }
.add.wide { width: auto; padding: 0 14px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; font-weight: 700; }
.stepper {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  animation: pop 260ms var(--ease-spring);
}
.stepper button { display: grid; place-items: center; width: 40px; height: 44px; color: #fff; border-radius: 999px; }
.stepper button:hover { background: rgba(255, 255, 255, 0.14); }
.stepper output { min-width: 18px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.disabled-add { width: 44px; }
@keyframes pop { from { transform: scale(0.85); } to { transform: scale(1); } }

/* ---------------------------------------------------------------- footer */
.foot {
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-4) calc(124px + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  text-align: center;
}
.foot-logo { width: 64px; height: 64px; margin: 0 auto var(--space-3); border-radius: 50%; box-shadow: var(--shadow); }
.foot-name { font-weight: 800; font-size: 1.1rem; }
.foot-line { margin-top: 4px; color: var(--ink-2); font-size: 0.92rem; }
.foot-day { display: block; }
.foot-line a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: var(--space-4);
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--red);
  color: var(--red-ink);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 200ms;
}
.foot-link:hover { background: var(--red-soft); }
.foot .credit { --color-text-muted: var(--muted); --color-text-primary: var(--ink); --color-border-subtle: var(--line); max-width: 560px; margin-inline: auto; }

/* AM Studio footer credit (UI-KIT.md §13): Designed & built by [AM] Studio · email */
.credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: var(--space-8, 32px); padding-top: var(--space-6, 24px); border-top: 1px solid var(--color-border-subtle, rgba(127, 127, 160, 0.18)); font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #75738f); }
.credit .credit-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-primary, inherit); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; transition: color 200ms; direction: ltr; }
.credit a.credit-brand:hover { color: #7f77dd; }
/* The AM mark on the logo's own cream background, like an app icon */
.credit .am-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(160deg, #fffaf3, #fdf1e3); box-shadow: 0 6px 16px rgba(10, 20, 48, 0.18), inset 0 0 0 1px rgba(10, 20, 48, 0.06); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.credit a.credit-brand:hover .am-icon { transform: rotate(-6deg) scale(1.06); }
.credit .am-icon img { display: block; width: 27px; height: auto; }
.credit-mail { color: var(--color-text-muted, #75738f); direction: ltr; unicode-bidi: isolate; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 200ms, text-decoration-color 200ms; }
.credit-mail::before { content: '·'; margin-inline-end: 10px; color: var(--color-text-muted, #75738f); display: inline-block; }
.credit-mail:hover { color: var(--color-text-primary, inherit); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .credit .am-icon { transition: none; } }

/* ---------------------------------------------------------------- order bar */
.cartbar {
  position: fixed;
  z-index: 30;
  inset-inline: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 60px;
  padding: 0 var(--space-4) 0 10px;
  border-radius: 18px;
  background: var(--cartbar-bg);
  color: #fff;
  box-shadow: 0 14px 34px rgba(39, 25, 20, 0.35);
  font-weight: 700;
  animation: rise 300ms var(--ease-out);
}
[dir='rtl'] .cartbar { padding: 0 10px 0 var(--space-4); }
.cartbar[hidden] { display: none; }
.cartbar-count {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--cartbar-count);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cartbar-label { flex: 1; text-align: start; }
.cartbar-total { font-variant-numeric: tabular-nums; }
.cartbar.bump { animation: bump 380ms var(--ease-spring); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Replaces the order bar while customers can't order */
.closedbar {
  position: fixed;
  z-index: 30;
  inset-inline: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 18px;
  background: var(--closedbar-bg);
  color: #fff;
  box-shadow: 0 14px 34px rgba(39, 25, 20, 0.35);
}
.closedbar svg { color: #fbbf24; }
.closedbar strong { display: block; font-weight: 800; line-height: 1.3; }
.closedbar span { display: block; font-size: 0.85rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.toast {
  position: fixed;
  z-index: 40;
  inset-inline: var(--space-4);
  top: calc(var(--space-3) + env(safe-area-inset-top));
  max-width: 520px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
  background: var(--brown);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------------- order sheet */
/* --sheet-max and --sheet-lift come from menu.js: the visible height above the phone keyboard,
   and how far to lift the sheet so it sits on top of the keyboard */
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: min(var(--sheet-max, 92dvh), 860px);
  margin: auto auto var(--sheet-lift, 0px);
  border: none;
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  color: var(--ink);
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}
.sheet[open] { display: flex; animation: sheet-up 280ms var(--ease-out); }
.sheet::backdrop { background: rgba(20, 10, 8, 0.55); }
@media (min-width: 640px) {
  .sheet { margin: auto; border-radius: 22px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
}
[dir='rtl'] .sheet-head { padding: var(--space-4) var(--space-5) var(--space-3) var(--space-3); }
.sheet-head h2 { font-size: 1.3rem; font-weight: 800; outline: none; }
/* Sized by its content (flex-basis auto) and allowed to shrink and scroll. With `flex: 1` (basis 0)
   Safari squeezed the order and the form to nothing, because the sheet has no fixed height. */
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); overscroll-behavior: contain; }
.sheet-foot { flex: none; padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.sheet-foot:empty { display: none; }
/* While the keyboard is up, the form gets the whole sheet; Total and Send come back when it closes */
.sheet.typing .sheet-foot { display: none; }

.lines { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); align-items: center; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
[dir='rtl'] .line { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); }
.line + .line { border-top: 1px solid var(--line); }
.line-name { font-weight: 600; line-height: 1.3; }
.line-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.line-sub { color: var(--muted); font-size: 0.85rem; }
[dir='rtl'] .line-sub { text-align: right; }
.line .stepper { grid-row: span 2; }
/* Extra sauce on a line of the order */
.extras { grid-column: 1 / -1; }
.extras-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 2px; color: var(--red-ink); font-size: 0.9rem; font-weight: 700; }
.extras-chosen { color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
.extras-list { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.extra { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 0.9rem; font-weight: 600; transition: background 200ms, color 200ms, border-color 200ms; }
.extra small { color: var(--muted); font-size: 0.78rem; }
.extra[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: #fff; }
.extra[aria-pressed='true'] small { color: rgba(255, 255, 255, 0.86); }
.clear-btn { margin-top: var(--space-2); padding: 6px 2px; color: var(--muted); font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.field { margin-top: var(--space-5); }
.field-label { display: block; margin-bottom: var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.field-label small { color: var(--muted); font-weight: 500; }
.input {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space-4);
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  outline: none;
  font-size: 1rem;
  transition: border-color 200ms, box-shadow 200ms;
}
textarea.input { resize: vertical; min-height: 76px; line-height: 1.45; }
.input:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.input.error { border-color: var(--error); }
.field-error { margin-top: 6px; color: var(--error); font-size: 0.85rem; font-weight: 600; }
.one-type { margin-top: var(--space-5); font-weight: 700; color: var(--red-ink); }

.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.segment button { min-height: 46px; padding: 3px 6px; border-radius: 10px; font-weight: 700; line-height: 1.2; color: var(--ink-2); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; transition: background 200ms, color 200ms; }
.segment button small { font-size: 0.74rem; font-weight: 600; opacity: 0.85; }
.segment button[aria-pressed='true'] { background: var(--surface); color: var(--red-ink); box-shadow: var(--shadow); }

.loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.9rem;
}
.loc-btn.done { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); color: var(--ok); }

.receipt { display: grid; gap: 3px; margin-bottom: var(--space-3); }
.receipt-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); color: var(--ink-2); font-size: 0.92rem; }
.receipt-row + .total-row { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.total-row > span { color: var(--ink-2); font-weight: 600; }
.total-row b { font-size: 1.25rem; font-weight: 800; }
.usd-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); color: var(--ink-2); font-size: 0.92rem; }
.usd-row small { color: var(--muted); font-size: 0.78rem; }
.usd-row b { color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  transition: background 200ms, transform 150ms var(--ease-out);
}
.send-btn:hover { background: var(--red-deep); }
.send-btn.off { background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); cursor: not-allowed; }
.send-btn:active { transform: scale(0.99); }
.send-hint { margin-top: var(--space-2); color: var(--muted); font-size: 0.8rem; text-align: center; }
.closed-note { margin-bottom: var(--space-3); padding: 10px 12px; border-radius: 12px; background: rgba(251, 191, 36, 0.14); color: var(--ink); font-size: 0.875rem; font-weight: 600; text-align: center; }
.empty { padding: var(--space-12) 0; text-align: center; color: var(--muted); }

@media (min-width: 768px) {
  .hero { padding-top: calc(var(--space-12) + env(safe-area-inset-top)); padding-bottom: var(--space-12); }
  .catbar { padding-inline: max(var(--space-4), calc((100% - 720px) / 2 + var(--space-4))); }
  .section-title { font-size: 1.875rem; }
}

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