/* ==========================================================================
   Public menu — design system and layout
   Mobile first. RTL is the native direction; logical properties throughout.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #fbf7f2;
  --surface: #ffffff;
  --ink: #1a1512;
  --ink-soft: #6b5a4e;
  --line: #ebe0d4;
  --line-strong: #dccdbd;

  --brand: #c2410c;
  --brand-dark: #93330b;
  --brand-tint: #fcefe7;
  --brand-line: #f2d5c4;

  --green: #15703a;
  --green-tint: #e8f4ec;
  --amber: #96530a;
  --amber-tint: #fdf1e0;
  --amber-line: #efd9b8;
  --amber-ink: #6b3b06;
  --red: #b3261e;
  --red-tint: #fbeae8;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 1px 2px rgba(26, 21, 18, 0.04), 0 6px 18px -12px rgba(26, 21, 18, 0.28);
  --shadow-bar: 0 10px 30px -12px rgba(147, 51, 11, 0.55);

  --font-ui: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Rubik', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --shell: 620px;
  --tap: 48px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

/* Several rules below set `display`, which would beat the browser's own
   `[hidden] { display: none }`. The cart's "حذف الكل" button relies on this. */
[hidden] { display: none !important; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 99;
}

.skip-link:focus {
  inset-inline-start: 12px;
  top: 12px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  padding-block: 20px 14px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-bar);
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text {
  min-width: 0;
}

.restaurant-name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tagline {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ── Status chip ────────────────────────────────────────────────────────── */

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}

.status-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status-chip[data-tone='open'] {
  background: var(--green-tint);
  color: var(--green);
  border-color: #c9e3d3;
}

.status-chip[data-tone='closed'] {
  background: var(--red-tint);
  color: var(--red);
  border-color: #f2cfcb;
}

.status-chip[data-tone='paused'] {
  background: var(--amber-tint);
  color: var(--amber);
  border-color: #efd6b4;
}

@media (prefers-reduced-motion: no-preference) {
  .status-chip[data-tone='open']::before {
    animation: pulse 2.4s ease-in-out infinite;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* ── Banner ─────────────────────────────────────────────────────────────── */

/* A banner is a hero when it has an image and a compact strip when it does
   not — one component, two looks, decided by the `data-has-image` flag. */

.banner {
  position: relative;
  display: grid;
  align-content: end;
  isolation: isolate;
  min-height: 176px;
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-tint);
  border: 1px solid #f3ddcd;
}

.banner-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: keeps white text readable over any photo the owner uploads. */
.banner[data-has-image='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(24, 14, 7, 0.82),
    rgba(24, 14, 7, 0.34) 58%,
    rgba(24, 14, 7, 0.06)
  );
}

.banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.banner[data-has-image='true'] .banner-content {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
}

.banner-label {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-dark);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
}

.banner-text {
  font-size: 15px;
  color: #7a3410;
}

/* Image banners: white copy, larger headline, sits on the scrim. */
.banner[data-has-image='true'] .banner-label {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-dark);
}

.banner[data-has-image='true'] .banner-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Text-only variants keep their own palette. */
.banner[data-has-image='false'] {
  min-height: 0;
  align-content: center;
  padding: 12px 14px;
}

.banner[data-has-image='false'] .banner-content {
  padding: 0;
}

.banner[data-has-image='false'][data-style='notice'] {
  background: #eef2f7;
  border-color: #d8e0ea;
}

.banner[data-has-image='false'][data-style='notice'] .banner-label { color: #274258; }
.banner[data-has-image='false'][data-style='notice'] .banner-text { color: #274258; }

.banner[data-has-image='false'][data-style='holiday'] {
  background: var(--amber-tint);
  border-color: #efd6b4;
}

.banner[data-has-image='false'][data-style='holiday'] .banner-label { color: var(--amber); }
.banner[data-has-image='false'][data-style='holiday'] .banner-text { color: var(--amber); }

/* ── Category bar ───────────────────────────────────────────────────────── */

.category-bar-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  margin-top: 18px;
}

.category-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 11px;
  scroll-padding-inline: 16px;
}

.category-bar::-webkit-scrollbar {
  display: none;
}

.category-chip {
  flex: none;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.category-chip[aria-current='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.menu-section {
  padding-top: 26px;
  scroll-margin-top: 64px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-count {
  font-size: 14px;
  color: var(--ink-soft);
}

.item-list {
  display: grid;
  gap: 10px;
}

/* ── Offers ─────────────────────────────────────────────────────────────── */

/* The strip above the menu. An offer nobody notices is an offer nobody uses, so
   every running one is announced in plain words before the first card. */
.offers-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 4px 10px;
}

.offer-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--amber-line);
  background: var(--amber-tint);
  color: var(--amber-ink);
}

.offer-chip-mark {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.offer-chip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13.5px;
  line-height: 1.35;
}

.offer-chip-text strong { font-weight: 600; }
.offer-chip-note { font-size: 12px; opacity: 0.8; }

/* The tag on a card that a running offer covers. Sits over the picture's corner
   so it never competes with the name for room. */
.offer-flag {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  pointer-events: none;
}

.offer-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-card { position: relative; }

/* ── Combo card ─────────────────────────────────────────────────────────── */

.combo-wrap { margin-block: 6px 14px; }

.combo-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 74%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}

.combo-list::-webkit-scrollbar { display: none; }

.combo-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.combo-card[data-sold-out='true'] { cursor: default; opacity: 0.62; }

.combo-media {
  position: relative;
  height: 116px;
  background: var(--brand-tint);
  overflow: hidden;
}

.combo-media img { width: 100%; height: 100%; object-fit: cover; }

/* Says "this is a bundle, not a dish" before anything else is read. */
.combo-flag {
  position: absolute;
  inset-inline-start: 10px;
  top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.combo-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px 13px;
}

.combo-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}

.combo-saving {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
}

.combo-saving-note {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}

/* The small "كومبو" mark on a basket row, so a bundle is recognisable at a
   glance next to plain items. */
.combo-tag {
  margin-inline-start: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
}

/* ── Combo choices, and the options nested inside them ──────────────────── */

.combo-section + .combo-section { margin-top: 20px; }

.combo-choice { display: flex; flex-direction: column; }

.choice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.choice-row[aria-pressed='true'] {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* The nesting. A chosen item's own options are drawn inside its row, inset from
   the inline-start edge and headed with the item's name, so "options of the
   thing you picked" never reads as "options of the combo". */
.combo-options {
  margin: -4px 0 12px;
  padding: 10px 12px 12px;
  margin-inline-start: 14px;
  border: 1px solid var(--brand-line);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--brand-tint);
}

.combo-options-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
}

.combo-options-mark { font-size: 15px; line-height: 1; }

/* One level deeper, so a nested group does not read as a sibling of the combo's
   own sections. */
.combo-options .option-group { margin-top: 10px; }
.combo-options .option-row { background: var(--surface); }
.combo-options .option-price { font-size: 12.5px; }

/* ── Item card ──────────────────────────────────────────────────────────── */

/* The card is the unit. Its outline is what tells the reader where one dish
   stops and the next begins, so it is drawn with the stronger line colour —
   `--line` alone is faint enough to vanish on a phone in daylight. */
.item-card {
  display: flex;
  align-items: stretch;
  gap: 13px;
  width: 100%;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}

/* The card is pressable, so it has to answer when it is pressed. */
.item-card:hover,
.item-card:focus-visible {
  border-color: var(--brand-line);
}

.item-card:active {
  transform: scale(0.995);
  border-color: var(--brand);
}

.item-card[data-sold-out='true'] {
  cursor: default;
  opacity: 0.62;
}

.item-media {
  position: relative;
  flex: none;
  width: 86px;
  height: 86px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--brand-tint);
}

.item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-monogram {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: hsl(var(--h, 22) 55% 34%);
  background: linear-gradient(160deg, hsl(var(--h, 22) 62% 96%), hsl(var(--h, 22) 52% 89%));
}

.item-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.item-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.item-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.price-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-now {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.price-now[data-discounted='true'] {
  color: var(--brand-dark);
}

.price-old {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: line-through;
}

.price-from {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Badge colours come from the owner's settings (inline style), so there are no
   per-badge rules here — only the built-in "out of stock" state. */
.badge {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
}

.item-badges,
.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.item-badges {
  justify-content: flex-end;
}

.detail-badges {
  justify-content: flex-start;
}

.badge[data-kind='soldout'] {
  background: #efe7de;
  color: var(--ink-soft);
}

/* "There is more inside" note, under an item that quick-adds but also has
   optional extras waiting in the detail card. */
.card-hint {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-dark);
  background: var(--brand-tint);
  border-radius: 6px;
  padding: 3px 8px;
}

.add-button {
  flex: none;
  min-width: var(--tap);
  min-height: var(--tap);
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 14px;
  transition: background-color 0.18s ease;
}

/* `:not(.card-stepper)` — the counter re-uses `.add-button` for its footprint
   but must keep its own dark background instead of turning brand-orange. */
.add-button:not(.card-stepper):hover {
  background: var(--brand-dark);
}

.add-button[disabled] {
  background: #efe7de;
  color: var(--ink-soft);
  cursor: not-allowed;
}

.add-button .plus {
  font-size: 21px;
  line-height: 1;
  margin-top: -2px;
}

/* "اختار": something must be chosen, so this tap opens the detail card. */
.choose-label {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* The customer already has some of this item. */
.add-button[data-in-cart='true']:not([disabled]) {
  background: var(--ink);
  min-width: 58px;
  padding-inline: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.add-button[data-in-cart='true']:not([disabled]):hover {
  background: #000;
}

/* In the basket: the button becomes a − n + counter, same footprint as before
   so the card layout never jumps. */
.card-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  min-width: 106px;
  background: var(--ink);
}

.stepper-button {
  width: 34px;
  min-height: var(--tap);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  border-radius: 14px;
}

.stepper-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.stepper-count {
  min-width: 26px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Item detail sheet ──────────────────────────────────────────────────── */

.detail-media {
  position: relative;
  margin: 8px 0 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--brand-tint);
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-media .item-monogram {
  font-size: 56px;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.detail-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* Quantity chooser shown in the sheet footer, above the total. */
.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 2px;
}

.qty-control button {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-dark);
  display: grid;
  place-items: center;
}

.qty-control button:hover:not([disabled]) {
  background: var(--brand-tint);
}

.qty-control button[disabled] {
  color: var(--line-strong);
  cursor: not-allowed;
}

.qty-control output {
  min-width: 34px;
  text-align: center;
  font-weight: 700;
  font-size: 17px;
}

/* ── Empty / error states ───────────────────────────────────────────────── */

.state-block {
  text-align: center;
  padding: 56px 24px;
  color: var(--ink-soft);
}

.state-block h2 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 6px;
}

.state-block p {
  font-size: 15px;
}

/* ── Cart bar ───────────────────────────────────────────────────────────── */

.cart-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.cart-bar[hidden] {
  display: none;
}

.cart-bar-inner {
  pointer-events: auto;
  width: 100%;
  max-width: calc(var(--shell) - 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 8px 8px 14px;
  border-radius: 18px;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-bar);
  animation: cart-in 0.22s ease-out;
}

@keyframes cart-in {
  from { transform: translateY(10px); opacity: 0.4; }
}

.cart-count {
  flex: none;
  min-width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
}

.cart-summary {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.cart-total {
  font-weight: 700;
  font-size: 17px;
}

.cart-hint {
  font-size: 13px;
  opacity: 0.85;
}

.cart-open {
  flex: none;
  min-height: var(--tap);
  padding-inline: 18px;
  border-radius: 13px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 16px;
}

/* ── Closed notice ──────────────────────────────────────────────────────── */

.closed-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--red-tint);
  border: 1px solid #f0cec9;
  color: #7d1a15;
  font-size: 15px;
}

/* ── Bottom sheet ───────────────────────────────────────────────────────── */

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--shell);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 -20px 60px -24px rgba(26, 21, 18, 0.45);
  overflow: hidden;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sheet-in {
  from { transform: translateY(24px); opacity: 0.5; }
}

.sheet::backdrop {
  background: rgba(26, 21, 18, 0.42);
}

.sheet-grabber {
  flex: none;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  margin: 10px auto 0;
}

.sheet-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 10px;
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.sheet-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.sheet-close {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 20px;
  display: grid;
  place-items: center;
}

.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px 20px;
}

.sheet-foot {
  flex: none;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ── Option groups ──────────────────────────────────────────────────────── */

.option-group {
  padding-block: 16px;
  border-top: 1px solid var(--line);
}

.option-group:first-child {
  border-top: 0;
}

.option-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.option-group-name {
  font-size: 16px;
  font-weight: 600;
}

.option-group-meta {
  font-size: 13px;
  color: var(--ink-soft);
}

.option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: start;
  margin-bottom: 8px;
}

.option-row[aria-pressed='true'] {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.option-row[data-sold-out='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.option-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: transparent;
}

.option-row[data-shape='square'] .option-mark {
  border-radius: 7px;
}

.option-row[aria-pressed='true'] .option-mark {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Name on top, optional description underneath; grows to fill the row so the
   price stays pinned to the far edge. */
.option-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: start;
}

.option-name {
  flex: none;
  font-size: 16px;
}

.option-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* The selected row keeps its light brand tint, so the description keeps using a
   dark ink — never white, that would vanish into the tint. */
.option-row[aria-pressed='true'] .option-desc {
  color: var(--ink);
  opacity: 0.72;
}

.option-price {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-dark);
}

.option-price[data-zero='true'] {
  color: var(--ink-soft);
  font-weight: 500;
}

/* ── Cart lines ─────────────────────────────────────────────────────────── */

.cart-line {
  display: flex;
  gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}

.cart-line:first-child {
  border-top: 0;
}

/* The item's picture leads its basket row: on a phone the photo is what the
   customer recognises, so it sits where the eye lands first. Fixed size, so a
   slow or missing image never makes the row jump. */
.cart-line-media {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--brand-tint);
}

.cart-line-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Items with no picture keep the same letter-and-colour mark the card shows. */
.cart-line-monogram {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: hsl(var(--h, 22) 55% 34%);
  background: linear-gradient(160deg, hsl(var(--h, 22) 62% 96%), hsl(var(--h, 22) 52% 89%));
}

.cart-line-body {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-line-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.cart-line-options {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 2px;
}

/* ── Basket totals ──────────────────────────────────────────────────────── */

.cart-totals {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}

.totals-value { font-variant-numeric: tabular-nums; }

/* Each offer gets its own row, so the customer can see why the number moved
   rather than being asked to trust it. */
.totals-row.is-offer { color: var(--green); font-weight: 600; }

.totals-row.is-total {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.cart-line-price {
  font-size: 15px;
  font-weight: 600;
  margin-top: 5px;
}

/* Header strip inside the cart sheet: label on one side, "حذف الكل" on the other. */
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cart-head-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}

.link-button {
  border: 0;
  background: none;
  padding: 8px 4px;
  min-height: 40px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.link-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Optional picture on a single option inside the detail card (e.g. each juice
   flavour). Items without one look exactly as before. */
.option-thumb {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--brand-tint);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 2px;
  height: fit-content;
  flex: none;
}

.stepper button {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-dark);
  display: grid;
  place-items: center;
}

.stepper button:hover {
  background: var(--brand-tint);
}

.stepper output {
  min-width: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field {
  margin-bottom: 14px;
}

.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 5px;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.6;
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 5px;
}

.segmented button {
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}

.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(26, 21, 18, 0.12);
}

/* ── The optional place row in the basket ───────────────────────────────── */

/* One quiet row, dashed because it is not required. It fills in as soon as the
   customer answers, so the closed row never hides an answer behind it. */
.loc-block {
  margin-top: 16px;
}

.loc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.loc-toggle[data-filled='true'] {
  border-style: solid;
  border-color: var(--brand-line);
  background: var(--brand-tint);
}

.loc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.loc-toggle[data-filled='true'] .loc-mark {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.loc-title {
  flex: 1 1 auto;
  font-weight: 600;
  line-height: 1.4;
}

.loc-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.loc-panel {
  padding: 12px 12px 14px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.loc-device {
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.loc-device.is-waiting {
  opacity: 0.65;
}

.loc-pin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--green-tint);
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
}

.loc-pin-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.loc-pin-coords {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  direction: ltr;
  unicode-bidi: isolate;
}

.loc-clear {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
}

.loc-denied {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-sm);
  color: var(--amber-ink);
  font-size: 13.5px;
  line-height: 1.6;
}

.loc-address-label {
  margin-top: 14px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.button {
  min-height: 52px;
  padding-inline: 22px;
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.button-primary {
  background: var(--brand);
  color: #fff;
  width: 100%;
}

.button-primary:hover {
  background: var(--brand-dark);
}

.button-primary[disabled] {
  background: #e3d7cb;
  color: #8a796c;
  cursor: not-allowed;
}

.button-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

/* ── Totals ─────────────────────────────────────────────────────────────── */

.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.total-label {
  font-size: 15px;
  color: var(--ink-soft);
}

.total-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.form-error {
  font-size: 14px;
  color: var(--red);
  margin-bottom: 10px;
}

.form-error:empty {
  display: none;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 36px;
  padding-block: 22px 30px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.footer-note {
  margin: 0;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

/* ── Map widget ─────────────────────────────────────────────────────────── */

.map-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--brand-tint);
  box-shadow: var(--shadow-card);
}

.map-card[data-mode='map'] {
  height: 168px;
}

/* Decorative: the overlay link owns the tap, so the frame never swallows it. */
.map-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: saturate(0.92);
}

.map-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(to top, rgb(255 255 255 / 0.97) 62%, rgb(255 255 255 / 0));
  color: var(--ink);
  text-decoration: none;
}

/* Without coordinates there is no frame, so the strip becomes the whole card. */
.map-card[data-mode='link'] .map-overlay {
  position: static;
  background: none;
  padding: 16px 14px;
}

.map-pin {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

.map-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.map-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.map-arrow {
  flex: none;
  color: var(--ink-soft);
}

/* ── Contact buttons ────────────────────────────────────────────────────── */

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Symbols only, as the owner asked — so each one keeps a tooltip and an
   accessible name, and every target is a comfortable 46px. */
.contact-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--brand-dark);
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.contact-button:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
}

.contact-button:active {
  transform: scale(0.94);
}

/* The two primary actions carry their own colour, so they are findable at a
   glance without reading anything. Both use a dark enough shade for white to
   stay legible. */
.contact-button[data-tone='whatsapp'] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.contact-button[data-tone='call'] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.toast-inner {
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-bar);
  animation: sheet-in 0.2s ease-out;
}

@media (min-width: 640px) {
  body {
    padding-bottom: 120px;
  }

  .item-media {
    width: 104px;
    height: 104px;
  }
}