/* Dosa storefront. Mobile first; per-store --accent / --soft are set on <html>. */
:root {
  --bg: #F5F5F7;
  --card: #FFFFFF;
  --ink: #1D1D1F;
  --ink-2: #3A3A3C;
  --muted: #424245;
  --muted-2: #6E6E73;
  --line: rgba(0, 0, 0, 0.07);
  --line-2: #EDEDF0;
  --field: #D2D2D7;
  --ctl: #E8E8ED;
  --ring: #AEAEB2;
  --card-border: #EDEDF0;
  --chip: rgba(0, 0, 0, 0.05);
  --glass: rgba(245, 245, 247, 0.74);
  --danger: #B3261E;
  --amber: #E9A23B;
  --accent: #0E5A43;
  --soft: #E3EFE8;
  --on-accent: #FFFFFF;
  --font-head: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.05);
  --lh: 1.4;
  color-scheme: light;
}
/* Arabic pages: IBM Plex Sans Arabic for everything (bold for headings) and roomier lines. */
html[lang="ar"] {
  --font-head: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --lh: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A double tap never zooms (pinch still does). The map and the signature pad set their own touch-action. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.sheet-open { overflow: hidden; }
h1, h2, h3 { font-family: var(--font-head); }
p { margin: 0; }
a { color: var(--ink); }
a:hover { color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
/* Text boxes are 16px or more: iPhone zooms the page in when a smaller one gets focus. */
input, textarea, select { font-size: max(16px, 1em); }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg);
  padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--bg); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
/* Directional icons (back chevron, arrows) point the other way on right-to-left pages. */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
/* Numbers that must read left to right inside Arabic text (phone input etc.). */
.ltr-input { direction: ltr; text-align: start; }
[dir="rtl"] .ltr-input { text-align: right; }

/* Language toggle: "English" on Arabic pages, "العربية" on English pages. */
.lang-switch {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-1);
  font-family: 'IBM Plex Sans Arabic', 'Instrument Sans', system-ui, sans-serif;
}
.lang-switch:hover { color: var(--ink); }
.lang-switch[lang="en"] { font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.store-lang { align-self: flex-start; margin-inline-start: auto; }
.muted { color: var(--muted); }
.hint { font-size: 12px; color: var(--muted-2); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Store header ---------- */
/* The restaurant's band: its soft colour behind the name; below it the page is grey-white and its colour returns only
   on what the customer taps (the +, the chosen option, the order bar). Apple-like restraint (brand/90_SYNTHESIS.md §10). */
.store-header { background: var(--soft); }
.store-header-inner { padding-top: 18px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.store-id { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.store-id-text { min-width: 0; flex: 1; }
.logo-tile {
  width: 56px; height: 56px; flex: none; border-radius: 16px; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
}
.logo-tile.has-logo, .home-card-badge.has-logo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 19, 31, 0.08); }
.logo-tile.has-logo img, .home-card-badge.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Long names get smaller on narrow phones rather than breaking mid-word. */
.store-name { margin: 0; font-size: clamp(22px, 8vw, 28px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
/* Arabic letters must join: never letter-space Arabic text, and never cut an Arabic word in two. */
html[lang="ar"] .store-name, html[lang="ar"] .simple-title { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
html[lang="ar"] .store-name { overflow-wrap: normal; }
html[lang="ar"] .sheet-title, html[lang="ar"] .t-headline { line-height: 1.35; }
html[lang="ar"] .item-name { line-height: 1.45; }
html[lang="ar"] .step-label { line-height: 1.5; }
.store-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.store-open { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
/* "Rate us" on Google Maps: a quiet link under the hours, in the store's colour. */
.store-rate { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; min-height: 32px; }
.store-rate:hover { text-decoration: underline; }
.store-rate span { color: #E7A400; }
.store-lang { align-self: flex-start; margin-inline-start: auto; min-height: 32px; padding: 0 10px; font-size: 12.5px; font-weight: 500; box-shadow: none; background: rgba(0, 0, 0, 0.06); }

/* The order type: one compact control (names only), the chosen one as a white pill, one line of detail under it. */
.mode-switch {
  display: grid; gap: 2px; background: rgba(0, 0, 0, 0.06); padding: 3px; border-radius: 999px;
  width: 100%; max-width: 480px; box-shadow: none;
}
.mode {
  min-height: 36px; height: auto; min-width: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; padding: 4px 6px; font-size: 13px; font-weight: 500;
}
.mode[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
/* Names wrap to a second line on narrow phones rather than being cut; Arabic glyphs need the taller line. */
.mode-label { font-size: 13px; font-weight: inherit; line-height: 1.35; text-align: center; max-width: 100%; }
html[lang="ar"] .mode-label { line-height: 1.5; }
@media (max-width: 360px) { .mode-label { font-size: 12px; } .mode { padding: 4px 4px; } }
/* The time or fee lives in the detail line below, not in the buttons (kept in the markup for the page's scripts). */
.mode-sub { display: none; }
.mode-detail { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); min-height: 18px; }

.notice {
  background: #FFF4DF; color: #5C3F10; border-radius: 16px; padding: 14px 16px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
.notice-top { margin-top: 16px; }
/* Ordering off (busy, paused): the menu stays readable, nothing invites adding to an order. */
.ordering-off .plus { display: none; }

/* ---------- Category bar ---------- */
/* The one glass surface of the page: it floats over the menu as it scrolls. */
.cat-nav {
  position: sticky; top: 0; z-index: 5; background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.cat-bar {
  position: relative; padding-top: 8px; padding-bottom: 8px; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.cat-bar::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 36px; padding: 0 13px; border-radius: 999px; display: flex; align-items: center;
  text-decoration: none; font-size: 13px; font-weight: 500; background: var(--chip); color: var(--muted); white-space: nowrap;
}
.chip:hover { color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); font-weight: 600; }

/* ---------- Layout ---------- */
.layout { padding-top: 14px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.menu-col { flex: 999 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
body.has-cart-bar .layout { padding-bottom: 104px; }

.search-input {
  width: 100%; height: 40px; border: 0; border-radius: 999px; padding: 0 16px;
  font-size: 16px; background: var(--chip); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.sec-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
html[lang="ar"] .sec-title { letter-spacing: 0; }
.popular, .menu-section { display: flex; flex-direction: column; gap: 10px; }
.menu-section { scroll-margin-top: 66px; }
.empty-note { padding: 32px 0; text-align: center; color: var(--muted-2); font-size: 15px; }

/* Dishes with pictures: two photo cards per row (more on wide screens). */
.items-grid.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .items-grid.tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.item-card.tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-height: 0;
  border: 0; padding: 0; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-1); overflow: hidden;
  text-align: start; color: var(--ink);
}
.item-card.tile .item-pic { width: 100%; height: auto; aspect-ratio: 1; align-self: stretch; border-radius: 0; padding: 14%; }
.item-card.tile .item-text { padding: 10px 12px 12px; gap: 2px; }
.item-card.tile .item-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.item-card.tile .item-price { font-size: 13px; font-weight: 500; color: var(--muted); }
/* The count sits on the +; the badge still tells assistive tech. */
.item-card .badge { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.item-card.tile .plus { inset-inline-end: 8px; bottom: 8px; }

/* Dishes without pictures: one panel per category, a row per dish, hairlines between (never a pile of boxes). */
.items-grid.rows { display: block; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-2); overflow: hidden; }
.items-grid.rows .item-card { border-radius: 0; border: 0; background: transparent; min-height: 0; padding: 12px 14px 12px 16px; }
.items-grid.rows .item-card:not([hidden]) ~ .item-card:not([hidden]) { border-top: 1px solid var(--line); }
.items-grid.rows .item-card:hover { background: #FBFBFD; }
.items-grid.rows .item-pic { width: 72px; height: 72px; border-radius: 14px; }
.item-card {
  display: flex; gap: 12px; align-items: center; width: 100%; min-height: 96px;
  border: 0; background: var(--card); border-radius: 18px; padding: 12px;
  text-align: start; color: var(--ink);
}
.item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.item-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }
.item-foot { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.item-price { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.badge { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--soft); border-radius: 999px; padding: 2px 8px; }
.item-pic {
  position: relative; display: block; width: 72px; height: 72px; flex: none; align-self: center;
  border-radius: 14px; padding: 8px;
}
.item-pic .dish { width: 100%; height: 100%; display: block; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* The +: white on the picture; the store's colour with the count once the dish is in the order. */
.plus {
  position: absolute; inset-inline-end: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.10);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.plus.n { background: var(--accent); color: var(--on-accent); }

.store-foot {
  border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 12px;
  font-size: 13px; color: var(--muted-2);
}

/* ---------- Cart (aside on desktop, bar on phone) ---------- */
.cart-aside {
  display: none; flex: 1 1 320px; min-width: 0; position: sticky; top: 70px;
  max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--card); border-radius: 22px; padding: 20px; flex-direction: column; gap: 14px; box-shadow: var(--shadow-2);
}
.cart-aside h2:focus { outline: none; }
.cart-empty { padding: 24px 0; text-align: center; color: var(--muted-2); font-size: 14px; line-height: 1.5; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cart-line { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cart-line-text { flex: 1; min-width: 0; }
.cart-line-name { font-size: 14px; font-weight: 600; }
.cart-line-opts { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.cart-line-total { font-size: 13px; font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cart-fee { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted-2); }
.cart-fee bdi { text-align: end; }
.cart-fee-note { margin: -8px 0 0; font-size: 12px; color: var(--muted-2); }
.cart-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
#cart-aside-body { display: flex; flex-direction: column; gap: 14px; }

.stepper { display: flex; align-items: center; height: 44px; border: 0; background: var(--chip); border-radius: 999px; align-self: center; flex: none; padding: 0 2px; }
/* 44px targets: the only cart controls on a phone. */
.stepper button { width: 44px; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 18px; border-radius: 999px; }
.stepper .qty { min-width: 18px; text-align: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.stepper.lg { height: 50px; }
.stepper.lg button { font-size: 20px; width: 44px; }
.stepper.lg .qty { min-width: 20px; font-size: 16px; font-weight: 700; }

.btn-primary {
  height: 52px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 20px;
}
.btn-primary:hover { color: var(--on-accent); filter: brightness(1.08); }
.btn-outline {
  height: 50px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow-1);
  font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 20px;
}
.btn-secondary {
  height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 500; padding: 0 16px;
}
.btn-secondary:disabled { opacity: 0.6; }
.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 15px; text-decoration: none;
}
.btn-dark:hover { color: var(--bg); }

/* The order bar: one pill from the edge in the store's colour: count, "View order", total. */
.cart-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 6;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.cart-bar-btn {
  width: 100%; max-width: 640px; margin: 0 auto; height: 54px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 8px; font-size: 15px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); text-decoration: none; font-variant-numeric: tabular-nums;
}
[dir="rtl"] .cart-bar-btn { padding: 0 8px 0 18px; }
.cart-bar-btn:hover { color: var(--on-accent); }
.cart-bar-left { display: flex; align-items: center; gap: 10px; }
.cart-bar-right { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.cart-bar-note { font-size: 11px; font-weight: 500; opacity: 0.85; }
.cart-count {
  min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); background: color-mix(in srgb, currentColor 16%, transparent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ---------- Item sheet ---------- */
/* From the bottom edge, with a grab handle; the page's grey ground with white panels; a glass footer. */
.sheet-wrap, .findus-wrap {
  position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-end;
  background: rgba(0, 0, 0, 0.28); animation: fade 0.15s ease-out;
}
.sheet, .findus-sheet {
  width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); display: flex; flex-direction: column; border-radius: 28px 28px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 30px 80px rgba(0, 0, 0, 0.24);
  animation: rise 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet::before, .findus-sheet::before { content: ""; display: block; flex: none; width: 36px; height: 5px; border-radius: 999px; background: var(--ring); margin: 8px auto 0; }
.sheet:focus, .findus-sheet:focus { outline: none; }
.sheet-hero { position: relative; height: 200px; margin: 10px 14px 0; padding: 18px; flex: none; border-radius: 18px; overflow: hidden; }
.sheet-hero .dish { width: 100%; height: 100%; display: block; }
.sheet-hero .photo { border-radius: 0; object-fit: cover; }

.close-btn {
  position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, 0.78); color: var(--ink); display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.sheet-body, .findus-body { padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 14px; }
.sheet-title, .findus-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
html[lang="ar"] .sheet-title, html[lang="ar"] .findus-title { letter-spacing: 0; }
.sheet-desc { font-size: 13.5px; line-height: 1.5; color: var(--muted-2); margin-top: 6px; }
.sheet-price { font-size: 16px; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sheet-foot {
  position: sticky; bottom: 0; background: var(--glass); border-top: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center;
}
.add-btn {
  flex: 1; min-width: 0; height: 50px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 20px;
  font-variant-numeric: tabular-nums;
}
.add-btn:disabled { background: var(--ring); }
/* The price never splits from its currency onto two lines. */
#sheet-total { white-space: nowrap; flex: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .sheet-wrap, .sheet { animation: none; }
  .item-card { transition: none; }
}

/* A group of choices: one white panel, a hairline row per option. */
fieldset.group, fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.group { gap: 0; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-2); overflow: hidden; }
.group-title, .card-title { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }
/* A floated legend is laid out like any child (not over the fieldset's edge), so the title sits inside the panel. */
fieldset legend { float: left; width: 100%; }
.group-title { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 12px 16px 10px; margin: 0; letter-spacing: 0.01em; }
.req { font-size: 12px; font-weight: 500; color: var(--muted-2); }
.group .field-error { padding: 0 16px 12px; }

/* Option rows (radio = round mark, checkbox = square mark). The real input stays focusable. */
.opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px;
  padding: 0 16px; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; cursor: pointer;
}
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opt:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.opt.on { font-weight: 600; }
.opt-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.opt-mark { width: 20px; height: 20px; flex: none; border-radius: 999px; border: 2px solid var(--ring); background: var(--card); }
.opt.multi .opt-mark { border-radius: 6px; }
.opt.on .opt-mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--card); }
.opt.multi.on .opt-mark { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.opt-extra { color: var(--muted-2); flex: none; font-variant-numeric: tabular-nums; }

.field-label { font-size: 14px; font-weight: 600; }
.small-label { font-size: 13px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet-body > .stack { background: var(--card); border-radius: 22px; box-shadow: var(--shadow-2); padding: 12px 16px 14px; }
.input, .textarea {
  width: 100%; border: 1px solid var(--field); border-radius: 14px; padding: 0 14px; font-size: 16px;
  background: var(--card); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.input { height: 48px; }
.textarea { padding: 10px 12px; resize: vertical; min-height: 64px; line-height: 1.4; }
.sheet-body .textarea { border: 0; background: var(--chip); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 13px; font-weight: 600; line-height: 1.4; }

/* ---------- Checkout ---------- */
/* The order screen in the same language as the store page: white panels on the grey ground, hairline rows, the store's
   colour on the chosen option and the one button. The Saudi plate keeps its own drawing. */
.co-wrap { max-width: 640px; margin: 0 auto; padding: 10px 16px 32px; display: flex; flex-direction: column; gap: 12px; }
.co-head { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.co-head-text { flex: 1; min-width: 0; }
.track-top { display: flex; justify-content: flex-end; }
.back { width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--chip); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.co-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
html[lang="ar"] .co-title { letter-spacing: 0; }
.co-store { font-size: 12.5px; color: var(--muted-2); }
.co-form { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card); border-radius: 22px; box-shadow: var(--shadow-2); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.co-empty { align-items: stretch; text-align: center; }
.co-empty-text { font-size: 16px; font-weight: 600; padding: 12px 0 2px; }
/* The order type, as on the store page: names only, the chosen one as a white pill. */
.seg { display: grid; gap: 2px; background: var(--chip); padding: 3px; border-radius: 999px; }
.seg button { min-height: 36px; min-width: 0; border: 0; border-radius: 999px; font-size: 13px; font-weight: 500; background: transparent; color: var(--muted); line-height: 1.35; padding: 4px 6px; }
html[lang="ar"] .seg button { line-height: 1.5; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
@media (max-width: 360px) { .seg button { font-size: 12px; padding: 4px; } }
.single-mode { font-size: 15px; font-weight: 600; }
.panel { display: flex; flex-direction: column; gap: 10px; }
.car-panel { gap: 14px; }
.panel-text { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.car-panel .panel-text { font-size: 14px; color: var(--muted); }
.map-box {
  min-height: 120px; border-radius: 16px; background: var(--chip); padding: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; text-align: center;
}
.map-box.set { background: var(--soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent); }
.map-box.set.out { background: #FCEEEE; color: #8C1D18; box-shadow: inset 0 0 0 1.5px #B3261E; }
.zone-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.zone-alt .btn-secondary { flex: 1 1 auto; }
.dlv-note { margin: 0; font-size: 13px; line-height: 1.5; }
.info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; background: var(--bg); border-radius: 14px; padding: 12px 14px; }

/* Inputs sit in the same order as the plate (numbers left, letters right) in both languages. */
[dir="rtl"] .plate-inputs { direction: ltr; }
[dir="rtl"] .plate-inputs .stack { direction: rtl; }
.plate-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plate-input { font-size: 20px; font-weight: 700; letter-spacing: 3px; }
.upper { text-transform: uppercase; }
.plate {
  /* A real Saudi plate doesn't mirror: numbers left, letters right, whatever the page direction. */
  direction: ltr;
  align-self: center; display: flex; width: 252px; max-width: 100%; height: 96px; margin-top: 4px;
  border: 3px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; color: var(--ink);
}
.plate-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plate-cell { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; white-space: nowrap; }
.plate-cell.top { border-bottom: 2px solid var(--ink); }
.plate-num { letter-spacing: 2px; }
.plate-let { letter-spacing: 6px; }
/* Arabic-Indic digits are bidi "AN"; force them into the same left-to-right order as the Latin row. */
.plate-digits-ar { direction: ltr; unicode-bidi: bidi-override; }
.plate-let-ar { word-spacing: 4px; }
.plate.example .plate-cell { color: var(--ring); }
.plate-div { width: 2px; background: var(--ink); flex: none; }
.plate-ksa {
  width: 26px; flex: none; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; writing-mode: vertical-rl;
}
.color-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chip {
  height: 40px; padding-block: 0; padding-inline: 8px 12px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink);
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500;
}
.color-chip[aria-pressed="true"] { background: var(--card); box-shadow: 0 0 0 2px var(--accent); font-weight: 600; }
.swatch { width: 20px; height: 20px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); flex: none; }

.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 44px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }

/* Ways to pay: one list, a hairline row each; the chosen one by its mark, not a frame. */
.pay-list { display: flex; flex-direction: column; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pay-list .opt { border: 0; border-radius: 0; background: transparent; }
.pay-list .opt + .opt, .pay-list .cash-note + .opt { border-top: 1px solid var(--line); }
.pay-list .opt.on { box-shadow: none; }
.pay-opt { min-height: 56px; font-weight: 500; }
.pay-opt.on { font-weight: 600; }
.pay-opt .opt-extra { font-size: 12px; font-weight: 500; }
.pay-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.pay-sub { font-size: 12px; font-weight: 500; color: var(--muted-2); }
/* Cash above the store's limit: visible but not selectable, with the limit explained underneath. */
.pay-opt.disabled { opacity: .55; cursor: not-allowed; background: var(--card); }
.cash-note { margin: 0; padding: 0 16px 12px; font-size: 13px; font-weight: 500; color: var(--muted); }
#pay-none.cash-note { padding: 0; }

.summary { gap: 8px; font-size: 14px; }
.sum-lines { display: flex; flex-direction: column; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sum-row > span:last-child { flex: none; }
/* The delivery value can be a sentence ("After you set your location"): it wraps instead of pushing the page sideways. */
#fee-value { flex: 0 1 auto; min-width: 0; text-align: end; }
.sum-opts { color: var(--muted-2); }
/* Checkout lines: name and price, then − qty + and remove (44px targets: the only cart controls on a phone). */
.co-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.co-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.co-line:first-child { padding-top: 0; }
.co-line-text { flex: 1 1 140px; min-width: 0; }
.co-line-name { font-weight: 600; overflow-wrap: anywhere; }
.co-line-total { font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* The line the server refused (sold out). */
.co-line.bad { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 10px; }
.co-line.bad .co-line-name { color: var(--danger); }
.co-retry { margin-top: 10px; }
.pay-card { display: grid; gap: 10px; }
.pay-ask { margin: 0; }
.co-line-ctl { display: flex; align-items: center; gap: 6px; flex: none; margin-inline-start: auto; }
.co-line .stepper { height: 44px; }
.line-del { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--chip); color: var(--danger); }
.sum-total { font-size: 18px; font-weight: 700; }
.divider { height: 1px; background: var(--line); margin: 4px 0; }
.vat-note { font-size: 12px; color: var(--muted-2); }
.general-error { text-align: center; }
/* The one button: a pill in the store's colour that stays in reach while the form scrolls. */
.pay-btn {
  position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  height: 54px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; padding: 0 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); font-variant-numeric: tabular-nums;
}
.pay-btn.apple { background: #000; color: #fff; }
.pay-btn:disabled { opacity: 0.7; }

/* ---------- Tracking ---------- */
/* The order page: the store's colour as one block on top, then white panels; the car moment as the big button. */
.track-hero { background: var(--accent); color: var(--on-accent); border-radius: 26px; padding: 24px 20px; box-shadow: var(--shadow-2); }
.t-meta { font-size: 13px; font-weight: 500; opacity: 0.85; }
.t-headline { font-size: 30px; font-weight: 700; margin: 8px 0 0; line-height: 1.1; letter-spacing: -0.03em; }
html[lang="ar"] .t-headline { letter-spacing: 0; }
.t-eta { font-size: 15px; margin-top: 6px; opacity: 0.92; }
.bars { display: flex; gap: 6px; margin-top: 18px; }
.bars:empty { display: none; }
.bar { flex: 1; height: 5px; border-radius: 999px; background: currentColor; opacity: 0.3; }
.bar.on { opacity: 1; }
.conn-note { font-size: 13px; color: var(--muted-2); text-align: center; }
.muted-ink { font-size: 14px; color: var(--muted); }
.rate-card { text-align: center; }
.rate-card .rate-h { font-size: 18px; margin: 0 0 4px; font-weight: 700; letter-spacing: -0.01em; }
.rate-card .rate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 12px; background: var(--accent); color: var(--on-accent); }
.rate-card .rate-btn span { color: #FFD24A; }
/* "I'm outside": the one big tap of a car pickup, in the store's colour. */
.here-btn { height: 56px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 600; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); }
.here-btn:disabled { opacity: 0.7; }
.hold-card { display: grid; gap: 12px; }
.hold-timer { margin: 0; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hold-actions, .hold-confirm { display: grid; gap: 10px; }
.hold-q { margin: 0; font-weight: 600; line-height: 1.5; }
.hold-card button { width: 100%; cursor: pointer; font: inherit; font-weight: 600; }
.hold-card button:disabled { opacity: 0.6; cursor: progress; }
.btn-danger { height: 50px; border: 0; border-radius: 999px; background: var(--danger); color: #fff; font-size: 15px; }
.notice-warm { background: #FFF4DF; color: #5C3F10; border-radius: 22px; padding: 16px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.steps-card { padding: 18px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 14px; }
.step-rail { display: flex; flex-direction: column; align-items: center; width: 18px; flex: none; }
.step-dot { width: 16px; height: 16px; border-radius: 999px; background: var(--ctl); flex: none; }
.step.done .step-dot { background: var(--accent); }
.step.current .step-dot { background: var(--card); box-shadow: inset 0 0 0 3px var(--accent); }
.step.current.final .step-dot { background: var(--accent); box-shadow: none; }
.step-line { width: 2px; flex: 1; min-height: 26px; background: var(--ctl); }
.step.done .step-line { background: var(--accent); }
.step-text { padding-bottom: 14px; min-width: 0; }
.step:last-child .step-text { padding-bottom: 0; }
.step-label { font-size: 15px; font-weight: 500; color: var(--muted-2); line-height: 16px; }
.step.done .step-label { color: var(--ink); }
.step.current .step-label { color: var(--ink); font-weight: 600; }
.step-sub { font-size: 13px; color: var(--muted-2); margin-top: 4px; }
.receipt { gap: 8px; font-size: 14px; }
.receipt .sum-total { font-size: 15px; margin-top: 4px; }

/* ---------- Order-ready notifications: a Dosa feature, so Dosa's colours whatever the store's (BIRD keeps its own).
   The Home Screen steps (.notify-steps, HomeScreenSteps.kt) are also the home page's install sheet: same colours there. */
.notify-card { --do-blue: #2438D6; --do-blue-dark: #1A2BB0; --do-soft: #ECEEFC; }
.notify-card { gap: 10px; }
.notify-state { display: grid; gap: 10px; }
.notify-btn {
  width: 100%; min-height: 54px; border: 0; border-radius: 16px; padding: 10px 18px; background: var(--do-blue); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; cursor: pointer;
}
.notify-btn:hover { background: var(--do-blue-dark); }
.notify-btn:disabled, .notify-btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.notify-btn:focus-visible, .notify-switch:focus-visible, .notify-install:focus-visible, .notify-copy-btn:focus-visible { outline-color: var(--do-blue); }
.notify-note { text-align: center; }
.notify-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.notify-bell {
  width: 40px; height: 40px; border-radius: 12px; background: var(--do-soft); color: var(--do-blue);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.notify-msg { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ink); }
/* The on/off switch: 52×32 track, 44px tall tap area. Off track #7D8396: 3.8:1 against the white card and the white knob (WCAG 1.4.11). */
.notify-switch {
  position: relative; width: 52px; height: 44px; padding: 0; border: 0; background: transparent; flex: none; cursor: pointer;
}
.notify-switch::before {
  content: ""; position: absolute; inset-inline: 0; top: 6px; height: 32px; border-radius: 999px; background: #7D8396; transition: background .15s;
}
.notify-switch[aria-checked="true"]::before { background: var(--do-blue); }
.notify-knob {
  position: absolute; top: 9px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 19, 31, .3); transition: inset-inline-start .15s;
}
.notify-switch[aria-checked="true"] .notify-knob { inset-inline-start: 23px; }
.notify-switch:disabled, .notify-switch[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
/* Text that takes focus after a state change (so screen readers read it): no ring, it is not a control. */
.notify-state [tabindex="-1"]:focus { outline: none; }
.notify-h { margin: 0; font-size: 18px; font-weight: 800; }
.notify-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.notify-after { font-weight: 700; color: var(--ink); }
.notify-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: notify; }
.notify-steps > li { counter-increment: notify; display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--do-soft); font-size: 14px; line-height: 1.5; }
/* The number in its own column: wrapped lines (Arabic too) start under the words, not under the number. */
.notify-steps { text-align: start; }
.notify-steps > li > p:first-of-type { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.notify-steps > li > p:first-of-type::before {
  content: counter(notify); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  margin-top: 1px; border-radius: 50%; background: var(--do-blue); color: #fff; font-size: 12px; font-weight: 800;
}
.notify-steps > li > p.hint { padding-inline-start: 30px; }
.notify-after { text-align: start; text-wrap: pretty; }
/* The two pictures: Safari's bottom bar with Share lit up, and the "Add to Home Screen" row of the share sheet. */
.notify-shot { display: flex; align-items: center; border-radius: 12px; background: #fff; color: #8A90A2; padding: 6px 10px; min-height: 48px; }
.notify-bar { justify-content: space-between; padding-top: 18px; }
.notify-shot .notify-hl { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--do-blue); background: var(--do-soft); box-shadow: 0 0 0 2px var(--do-blue); }
.notify-pointer {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1px;
  color: var(--do-blue); font-size: 15px; font-weight: 800; line-height: 1; animation: notify-nudge 1.2s ease-in-out infinite;
}
/* iPad Safari (a big touch screen) has Share in its top bar, not at the bottom: the "top" wording and no bottom-bar
   drawing. iPad Safari in a narrow window (Split View) has the iPhone's bottom bar, so it keeps the iPhone steps. */
.notify-steps .hs-ipad { display: none; }
@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
  .notify-steps .hs-ipad { display: inline; }
  .notify-steps .hs-iphone, .notify-steps .notify-bar { display: none; }
}
@keyframes notify-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 3px); } }
@media (prefers-reduced-motion: reduce) { .notify-pointer { animation: none; } }
.notify-sheetrow { justify-content: space-between; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.notify-copy { display: flex; gap: 8px; }
.notify-link {
  flex: 1; min-width: 0; height: 46px; border: 1.5px solid var(--field); border-radius: 12px; padding: 0 12px; background: var(--bg);
  font-size: 16px; color: var(--ink-2); text-align: left;
}
.notify-copy-btn {
  flex: none; height: 46px; border: 0; border-radius: 12px; padding: 0 16px; background: var(--do-blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.notify-install {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px dashed var(--field); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.notify-install:hover { border-color: var(--do-blue); color: var(--do-blue); }

/* ---------- Home / not found ---------- */
.simple-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.simple { max-width: 560px; margin: 0 auto; padding: 64px 20px 48px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.brand-mark {
  width: 56px; height: 56px; border-radius: 16px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
}
.simple-title { margin: 8px 0 0; font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.5px; }
.simple-sub { margin: 4px 0 12px; color: var(--muted); font-weight: 600; font-size: 15px; }
.simple-lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.simple-text { font-size: 15px; line-height: 1.5; color: var(--muted); }
.simple-card { margin-top: 12px; width: 100%; background: var(--card); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; box-shadow: var(--shadow-1); }
.simple-card-title { font-family: var(--font-head); font-size: 20px; font-weight: 800; }

/* ---------- Breakpoints ---------- */
@media (min-width: 720px) {
  .sheet-wrap { align-items: center; padding: 24px; }
  .sheet { border-radius: 24px; max-height: 88vh; }
  .sheet-foot { border-radius: 0 0 24px 24px; }
}
@media (min-width: 1000px) {
  .cart-aside { display: flex; }
  .cart-bar { display: none !important; }
  body.has-cart-bar .layout { padding-bottom: 24px; }
}

/* "Your orders": the customer's own orders on this store, so leaving the tracking page never loses one. Uses the store's colours. */
.my-orders { margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.closed-orders { width: 100%; }
.closed-orders .my-orders { margin: 0; }
.my-orders-h { margin: 0; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--ink); }
.my-order {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border-radius: 16px;
  background: var(--soft); color: var(--ink); text-decoration: none; border: 1px solid var(--card-border);
}
.my-order:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.my-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); flex: none; }
.my-live .my-dot { animation: my-pulse 1.4s ease-in-out infinite; }
@keyframes my-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .my-live .my-dot { animation: none; } }
.my-done { background: var(--card); }
.my-off { background: var(--card); }
.my-off .my-dot { background: var(--muted-2); }
.my-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.my-no { font-weight: 700; font-size: 15px; }
.my-status { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-go { font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap; }
.my-go .flip-rtl { display: inline-block; }

/* ---------- Privacy / terms ---------- */
.legal { gap: 10px; padding-bottom: 64px; }
.legal-h { margin: 18px 0 0; font-family: var(--font-head); font-size: 19px; font-weight: 800; }
.legal .simple-text { color: var(--ink-2); }
.legal-list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.legal a, .legal-links a, .agree-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-nav { margin-top: 18px; font-weight: 600; }
.legal-links { margin: 0; font-size: 13px; color: var(--muted-2); }
.agree-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.reassure { margin: 0 0 10px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Home page (dosa.sa) and the owner page (/join) ---------- */
/* DO (SA) identity (brand/identity) with Apple-like restraint (brand/90_SYNTHESIS.md §10): a cool grey-white ground,
   content on white panels with hairline dividers, DO Blue as the only accent, Ready green for status only, frosted glass
   only where layers overlap (the sticky bar), and no decorative tricks. Tokens follow the apple-liquid-glass skill. */
body.home {
  --wrap: 1080px;
  --do-blue: #2438D6; --do-blue-dark: #1A2BB0; --ready: #12805C; --ready-soft: #E3F0EB; --ready-ink: #0F7352;
  --bg: #F6F7FA; --card: #FFFFFF; --hover: #FBFBFD; --ink: #10131F; --ink-2: #3A4052; --muted: #4B5163; --muted-2: #5A6072; --muted-3: #868CA0;
  --line: #E3E6EF; --line-2: #ECEEF4; --card-border: #E3E6EF; --field: #D5D9E4; --accent: #2438D6;
  --hairline: rgba(16, 19, 31, 0.08); --chip: rgba(16, 19, 31, 0.05); --glass: rgba(246, 247, 250, 0.74);
  --r-pill: 999px; --r-thumb: 12px; --r-card: 18px; --r-panel: 22px; --r-hero: 26px;
  /* One side gutter for every page container, one inner padding for every panel, tile and row: edges line up. */
  --gutter-l: max(clamp(16px, 3vw, 22px), env(safe-area-inset-left, 0px)); --gutter-r: max(clamp(16px, 3vw, 22px), env(safe-area-inset-right, 0px));
  --pad: clamp(16px, 3vw, 24px);
  --sh-card: 0 1px 2px rgba(16, 19, 31, .04), 0 8px 24px rgba(16, 19, 31, .05);
  --sh-panel: 0 1px 3px rgba(16, 19, 31, .05), 0 14px 40px rgba(16, 19, 31, .05);
  --sh-float: 0 2px 8px rgba(16, 19, 31, .08), 0 30px 80px rgba(16, 19, 31, .16);
  --sh-cta: 0 20px 54px rgba(36, 56, 214, .26);
  --font-head: 'Readex Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-body: 'Readex Pro', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-size: 16px; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
}
/* Arabic: Almarai headings, IBM Plex Sans Arabic text (see brandFontsUrl). Almarai's bold is its 800. */
html[lang="ar"] body.home {
  --font-head: 'Almarai', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
}
html[lang="ar"] body.home h1, html[lang="ar"] body.home h2 { font-weight: 800; }
.home h1, .home h2, .home h3 { text-wrap: balance; }
.home-muted { color: var(--muted-2); }
.home-sub { margin: 12px auto 0; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--muted-2); max-width: 54ch; }

/* The top bar: the one glass surface (it floats over scrolling content). Its hairline shows once content is beneath. */
.home-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  max-width: none; margin: 0; padding: 0 var(--gutter-r) 0 var(--gutter-l); min-height: 54px;
  background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.home-top.scrolled { border-bottom-color: var(--hairline); }
.home-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.home-logo { width: 24px; height: 24px; color: var(--do-blue); flex: none; }
.home-brand-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.home-brand-sa { font-weight: 400; color: var(--muted-2); }
.home-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.home-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; font-size: 13.5px; color: var(--muted-2); }
.home-nav a:hover { color: var(--ink); background: var(--chip); }
/* The one blue thing in the bar: white words on DO Blue (not the grey of the other links). */
.home-nav a.home-nav-cta { min-height: 32px; padding: 0 14px; background: var(--do-blue); color: #fff; font-weight: 600; font-size: 13px; }
.home-nav a.home-nav-cta:hover { background: var(--do-blue-dark); color: #fff; }
.home .lang-switch { min-height: 36px; padding: 0 12px; box-shadow: none; background: transparent; color: var(--muted-2); font-family: var(--font-body); font-weight: 500; font-size: 13.5px; }
.home .lang-switch:hover { color: var(--ink); background: var(--chip); }
@media (max-width: 640px) { .home-nav a:not(.home-nav-cta) { display: none; } }

/* Buttons */
.home .btn-dark, .home-join-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 46px; padding: 0 24px; border-radius: var(--r-pill);
  background: var(--do-blue); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .15s, transform .2s cubic-bezier(.25, 1, .5, 1);
}
.home .btn-dark:hover, .home-join-btn:hover { background: var(--do-blue-dark); color: #fff; }
.home .btn-dark:active, .home-join-btn:active, .home-btn-line:active { transform: scale(.98); }
.home-btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: var(--card); color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: none; box-shadow: 0 1px 2px rgba(16, 19, 31, .05);
}
.home-btn-line:hover { background: var(--hover); color: var(--ink); }
.home-link { color: var(--do-blue); font-weight: 500; text-decoration: none; white-space: nowrap; }
.home-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ready); flex: none; vertical-align: middle; animation: home-pulse 2.2s infinite; }
@keyframes home-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 128, 92, .45); } 70% { box-shadow: 0 0 0 7px rgba(18, 128, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 128, 92, 0); } }

/* Hero: for customers. Phone: centred, the café's page under the words. From 1000px: two columns, the words and the
   search on the start side, the phone on the end side, so a wide screen isn't one narrow column in empty space. */
.home main { display: block; }
.home-hero { padding: clamp(36px, 7vw, 72px) var(--gutter-r) 0 var(--gutter-l); text-align: center; }
.home-hero-in { max-width: var(--wrap); margin: 0 auto; }
.home-hero-text { max-width: 760px; margin: 0 auto; }
.home-hero h1 { margin: 0 auto; font-size: clamp(36px, 6.4vw, 72px); line-height: 1.04; font-weight: 700; letter-spacing: -0.04em; max-width: 14ch; text-wrap: balance; }
html[lang="ar"] .home-hero h1 { letter-spacing: 0; line-height: 1.25; }
.home-lead { margin: 18px auto 0; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.55; color: var(--muted-2); max-width: 46ch; }
.home-hero-search { display: flex; gap: 8px; max-width: 480px; margin: 26px auto 0; padding: 6px; background: var(--white, #fff); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 30px rgba(16, 19, 31, .08); }
.home-hero-search:focus-within { border-color: var(--do-blue); }
.home-hero-q { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; padding: 0 14px; font: inherit; font-size: max(16px, 1em); color: var(--ink); outline: none; }
.home-hero-q::-webkit-search-cancel-button { display: none; }
.home-hero-search .btn-dark { flex: none; height: 44px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; }
.home-hero-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 16px; }
.home-stat { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted-2); }
.home-stat strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The stage: the café's page on the customer's phone, cropped by one soft panel (Apple's product tile), with the
   "your order is ready" notification over it. */
.home-stage { position: relative; height: 560px; max-width: 520px; margin: clamp(32px, 6vw, 56px) auto 0; overflow: hidden; border-radius: var(--r-hero); background: var(--line-2); text-align: start; }
.home-phone { position: absolute; left: 50%; top: 40px; transform: translateX(-50%) scale(.78); transform-origin: top center; }
.home-ready-note { position: absolute; inset-inline: 24px; bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px; box-shadow: 0 18px 40px rgba(16, 19, 31, .18); }
.home-ready-note strong { display: block; font-size: 15px; font-weight: 600; color: #1D1D1F; }
.home-ready-note span:not(.home-ready-icon) { display: block; font-size: 13px; color: #6E6E73; }
.home-ready-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ready); color: #fff; }
.home-ready-icon svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .home-stage { height: 480px; }
  .home-phone { transform: translateX(-50%) scale(.7); }
  .home-ready-note { inset-inline: 14px; bottom: 18px; }
}
@media (min-width: 1000px) {
  .home-hero { text-align: start; padding-top: clamp(40px, 5vw, 64px); }
  .home-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
  .home-hero-text { margin: 0; max-width: none; }
  .home-hero h1 { font-size: clamp(42px, 4.3vw, 62px); max-width: 16ch; }
  .home-hero h1, .home-lead, .home-hero-search { margin-inline: 0; }
  .home-hero-more, .home-stat { justify-content: flex-start; }
  .home-stage { margin: 0; max-width: none; height: 600px; }
  .home-ready-note { inset-inline: auto 28px; width: 300px; bottom: 40px; }
}

/* The iPhone frame (apple-liquid-glass app.md spec: 393×852, 55/44 radii, island 125×37) */
.ios { position: relative; width: 393px; height: 852px; background: #0B0C10; border-radius: 55px; padding: 12px; box-shadow: 0 40px 90px rgba(16, 19, 31, .28); }
.ios-screen { position: relative; width: 100%; height: 100%; background: var(--bg); border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; }
.ios-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 125px; height: 37px; background: #000; border-radius: 999px; z-index: 6; }
.ios-status { flex: none; height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; font-size: 15px; font-weight: 600; color: var(--ink); direction: ltr; }
.ios-icons { display: flex; align-items: center; gap: 6px; }
.ios-icons svg { display: block; }
.ios-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 139px; height: 5px; border-radius: 999px; background: rgba(0, 0, 0, .85); z-index: 8; }
/* The café's page inside the phone: its own colour on its mark and its order bar (restaurants keep their colours). */
.sf { flex: 1; display: flex; flex-direction: column; min-height: 0; font-size: 15px; --store: #1F3A8A; }
.sf-head { padding: 6px 20px 16px; }
.sf-store { display: flex; align-items: center; gap: 12px; }
.sf-logo { width: 48px; height: 48px; border-radius: 14px; background: var(--store); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.sf-name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
html[lang="ar"] .sf-name { letter-spacing: 0; }
.sf-line { display: block; font-size: 13px; color: var(--muted-2); margin-top: 2px; }
.sf-seg { margin-top: 14px; display: flex; background: var(--chip); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.sf-seg span { flex: 1; text-align: center; font-size: 13px; font-weight: 500; padding: 8px 0; border-radius: var(--r-pill); color: var(--muted-2); }
.sf-seg .on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 19, 31, .12); }
.sf-eta { margin: 10px 0 0; font-size: 13px; color: var(--muted-2); display: flex; align-items: center; gap: 8px; }
.sf-cats { display: flex; gap: 6px; padding: 0 20px 12px; overflow: hidden; }
.sf-cats span { font-size: 13px; font-weight: 500; color: var(--muted-2); padding: 6px 12px; border-radius: var(--r-pill); background: var(--chip); white-space: nowrap; }
.sf-cats .on { background: var(--ink); color: var(--bg); font-weight: 600; }
.sf-list { margin: 0 14px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.sf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px 16px; }
.sf-item + .sf-item { border-top: 1px solid var(--hairline); }
.sf-item-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.sf-item-desc { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.sf-price { font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-add { width: 32px; height: 32px; border-radius: 50%; background: var(--chip); color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 500; line-height: 1; }
.sf-add.in { background: var(--store); color: #fff; font-size: 13px; font-weight: 700; }
.sf-bar { margin: 16px 14px 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 20px; height: 54px; border-radius: var(--r-pill); background: var(--store); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 14px 34px rgba(31, 58, 138, .35); font-variant-numeric: tabular-nums; }
.sf-bar-n { font-weight: 500; font-size: 13px; opacity: .85; }

/* The restaurant's tablet card: solid white with a deeper two-layer shadow (it floats on the ground). On /join it sits
   beside the benefits. */
.home-mock { display: flex; justify-content: center; }
.mock-card { width: 100%; max-width: 380px; background: var(--card); color: var(--ink); border-radius: var(--r-card); padding: 18px var(--pad); box-shadow: var(--sh-float); display: flex; flex-direction: column; gap: 10px; text-align: start; }
.mock-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted-2); }
.mock-head strong { color: var(--ink); font-weight: 600; }
.mock-no { margin-inline-start: auto; font-size: 13px; color: var(--muted-3); font-variant-numeric: tabular-nums; }
.mock-ping { width: 7px; height: 7px; border-radius: 50%; background: var(--ready); animation: home-pulse 2.2s infinite; }
.mock-here { align-self: flex-start; padding: 5px 11px; border-radius: var(--r-pill); background: var(--ready-soft); color: var(--ready-ink); font-weight: 600; font-size: 13px; }
.mock-meta { margin: 0; color: var(--muted-2); font-size: 14px; max-width: none; }
.mock-lines { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 4px; font-size: 14.5px; font-weight: 500; }
.mock-paid { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted-2); }
.mock-total { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mock-accept { display: flex; align-items: center; justify-content: center; margin-top: 4px; height: 44px; border-radius: var(--r-pill); background: var(--do-blue); color: #fff; font-weight: 600; font-size: 15px; }

/* Sections */
.home-section { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 7vw, 72px) var(--gutter-r) 0 var(--gutter-l); scroll-margin-top: 64px; }
.home-section h2, .home-join h2 { margin: 0; font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
html[lang="ar"] .home-section h2, html[lang="ar"] .home-join h2 { letter-spacing: 0; line-height: 1.3; }
.home-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.home-section-head .home-muted { margin: 4px 0 0; font-size: 14px; }
.home-panel { background: var(--card); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; }

/* How it works: three tiles, each with its own small picture */
.home-tiles-section { text-align: center; }
.home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; text-align: start; }
.home-tile { background: var(--card); border-radius: var(--r-panel); box-shadow: var(--sh-card); padding: var(--pad) var(--pad) 0; display: flex; flex-direction: column; min-height: 320px; overflow: hidden; }
.home-tile h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
html[lang="ar"] .home-tile h3 { letter-spacing: 0; }
.home-tile p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted-2); line-height: 1.55; }
.tile-pic { margin-top: auto; padding-top: 22px; display: flex; justify-content: center; }
.tile-card { width: 100%; max-width: 250px; background: var(--bg); border-radius: 16px 16px 0 0; padding: 14px 16px 18px; box-shadow: var(--sh-card); font-size: 13px; }
.tile-row { display: flex; align-items: center; gap: 10px; }
.tile-row strong { display: block; font-weight: 600; font-size: 14px; }
.tile-row span:not(.tile-pin):not(.tile-ready) { color: var(--muted-2); font-size: 12px; }
.tile-pin, .tile-ready { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--chip); color: var(--ink); }
.tile-pin svg, .tile-ready svg { width: 18px; height: 18px; }
.tile-ready { border-radius: 10px; background: var(--ready-soft); color: var(--ready-ink); }
.tile-btns { display: flex; gap: 6px; margin-top: 12px; }
.tile-btns span { flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-pill); background: var(--chip); font-size: 12px; font-weight: 500; color: var(--muted-2); }
.tile-btns .on { background: var(--do-blue); color: #fff; font-weight: 600; }
.tile-ways .on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 19, 31, .12); }
.tile-pay { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-variant-numeric: tabular-nums; }
.tile-pay + .tile-pay { border-top: 1px solid var(--hairline); }
.tile-pay bdi { font-weight: 600; }
.tile-total { font-size: 15px; font-weight: 600; }
.tile-methods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tile-methods span { font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 6px; background: var(--chip); color: var(--muted-2); }
.tile-methods .on { background: var(--ink); color: var(--bg); }

/* Restaurants: search, "Near me" and the cities as one segmented control, then one panel of rows */
.home-search input {
  width: min(320px, 100%); min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: var(--chip); color: var(--ink); font: inherit; font-size: 16px;
}
.home-search input::placeholder { color: var(--muted-3); }
.home-search input:focus { outline: 2px solid var(--do-blue); outline-offset: 2px; }
.home-cities { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--chip); border-radius: var(--r-pill); padding: 3px; gap: 2px; margin: 0 0 14px; }
.home-cities::-webkit-scrollbar { display: none; }
.home-city {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 0; background: transparent;
  color: var(--muted-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .25s cubic-bezier(.25, 1, .5, 1), color .15s;
}
.home-city:hover { color: var(--ink); }
.home-city[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 19, 31, .12); }
.home-city-n { opacity: .6; font-weight: 400; font-variant-numeric: tabular-nums; }
/* "Near me" is the first choice and the blue one: a location dot before its words. */
.home-near { color: var(--do-blue); font-weight: 600; }
.home-near::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.home-near[aria-pressed="true"] { background: var(--do-blue); color: #fff; }
.home-city-msg { margin: -6px 0 14px; font-size: 14px; }
.home-grid { list-style: none; margin: 0; padding: 0; }
.home-grid li:not([hidden]) ~ li:not([hidden]) .home-card { border-top: 1px solid var(--hairline); }
.home-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 76px; padding: 14px var(--pad);
  color: var(--ink); text-decoration: none; transition: background .15s;
}
.home-card:hover { background: var(--hover); color: var(--ink); }
.home-card-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-thumb); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px; flex: none; }
.home-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-card h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="ar"] .home-card h3 { letter-spacing: 0; }
.home-card .home-muted { margin: 0; font-size: 13.5px; }
.home-card-dist { font-size: 13px; font-weight: 600; color: var(--do-blue); font-variant-numeric: tabular-nums; }
.home-card-foot { display: flex; align-items: center; gap: 14px; }
.home-pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--chip); color: var(--muted-2); white-space: nowrap; }
/* Darker green than --ready so the small text reaches 4.5:1 on the pale green. */
.home-pill.open { background: var(--ready-soft); color: var(--ready-ink); }
.home-card-go { font-weight: 600; font-size: 14px; white-space: nowrap; }
.home-none { margin: 0; padding: 20px var(--pad); }
.home-list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 12px var(--pad); border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted-2); }
@media (max-width: 640px) {
  .home-search, .home-search input { width: 100%; }
  .home-card { grid-template-columns: 44px minmax(0, 1fr); }
  .home-card-badge { width: 44px; height: 44px; font-size: 13px; }
  .home-card-foot { grid-column: 2; }
  .home-card-go { display: none; }
}

/* Who we are: flat prose, no box */
.home-about { text-align: center; }
/* Centred like everything else on the page; the one-line purpose is the section's sub text, not a second heading. */
.home-about-lead { margin: 18px auto 0; max-width: 720px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.8; color: var(--ink-2); }
.home-purpose { margin: 18px auto 0; max-width: 46ch; font-size: clamp(15px, 2vw, 17px); font-weight: 500; line-height: 1.6; color: var(--muted-2); }

/* For restaurants: what joining gives (one panel) and what it costs (one panel) */
.home-join .home-join-text { text-align: center; }
.home-join-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 28px); align-items: stretch; margin-top: 28px; }
.home-benefits { list-style: none; margin: 0; padding: 0; }
.home-benefits li { display: flex; gap: 14px; align-items: flex-start; padding: 14px var(--pad); font-size: 15.5px; line-height: 1.5; }
.home-benefits li + li { border-top: 1px solid var(--hairline); }
.home-benefits li::before { content: "✓"; flex: none; margin-top: 1px; color: var(--do-blue); font-weight: 700; }
.home-cost { padding: var(--pad); display: flex; flex-direction: column; }
.home-cost h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted-2); }
html[lang="ar"] .home-cost h3 { letter-spacing: 0; }
.home-cost-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.home-cost-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 16px; }
.home-cost-rows li + li { border-top: 1px solid var(--hairline); }
.home-cost-rows strong { font-weight: 600; white-space: nowrap; }
.home-steps-h { margin: 22px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted-2); }
html[lang="ar"] .home-steps-h { letter-spacing: 0; }
.home-steps { margin: 8px 0 0; padding-inline-start: 22px; list-style: decimal; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.home-steps li::marker { color: var(--muted-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.home-cost .home-join-btn { margin-top: 22px; align-self: flex-start; }
@media (max-width: 760px) { .home-join-grid { grid-template-columns: 1fr; } .home-tiles { grid-template-columns: 1fr; } .home-tile { min-height: 0; } }

/* The one DO Blue block: the call to action. Its button is glass because it sits on colour. */
.home-cta { position: relative; overflow: hidden; border-radius: var(--r-hero); padding: clamp(32px, 6vw, 64px) var(--pad); background: var(--do-blue); box-shadow: var(--sh-cta); color: #fff; text-align: center; }
.home-cta-orb { position: absolute; border-radius: 50%; filter: blur(52px); pointer-events: none; }
.home-cta-orb-1 { width: 340px; height: 340px; background: rgba(255, 255, 255, .20); top: -140px; inset-inline-end: -80px; }
.home-cta-orb-2 { width: 280px; height: 280px; background: rgba(120, 140, 255, .6); bottom: -150px; inset-inline-start: 8%; }
.home-cta-in { position: relative; max-width: 640px; margin: 0 auto; }
.home-cta h2 { margin: 0; font-size: clamp(28px, 4.6vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
html[lang="ar"] .home-cta h2 { letter-spacing: 0; line-height: 1.3; }
.home-cta p { margin: 14px 0 0; font-size: clamp(15px, 2vw, 17px); color: rgba(255, 255, 255, .86); line-height: 1.6; }
.home-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.home-cta-btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: var(--r-pill); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.home-cta-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.home-cta-btn.solid { background: #fff; color: var(--do-blue); border-color: #fff; }
.home-cta-btn.solid:hover { background: #F6F7FA; color: var(--do-blue); }

/* Footer */
.home-foot { max-width: var(--wrap); margin: clamp(40px, 7vw, 72px) auto 0; padding: 28px var(--gutter-r) 44px var(--gutter-l); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; color: var(--muted-2); font-size: 13px; border-top: 1px solid var(--hairline); }
.home-foot p { margin: 0; }
.home-foot a { color: inherit; }
.powered-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.powered-link:hover { text-decoration: underline; }
.powered-mark { width: 13px; height: 13px; color: #2438D6; flex: none; }
.legal-home { display: inline-flex; text-decoration: none; }
.legal-logo { width: 44px; height: 44px; color: #2438D6; }

/* The owners' questions: one panel of rows (on the home page centred, on /join under its hero) */
.join-faq h2 { text-align: center; }
.join-faq-list { max-width: 720px; margin: 22px auto 0; background: var(--card); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: hidden; }
.join-q { padding: 0 var(--pad); }
.join-q + .join-q { border-top: 1px solid var(--hairline); }
.join-q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; min-height: 44px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
html[lang="ar"] .join-q summary { letter-spacing: 0; }
.join-q summary::-webkit-details-marker { display: none; }
.join-q summary::after { content: "+"; color: var(--muted-3); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .25s cubic-bezier(.25, 1, .5, 1); }
.join-q[open] summary::after { transform: rotate(45deg); }
.join-q p { margin: 0; padding-bottom: 16px; font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 60ch; }

/* The owner page (/join): the customer hero's two columns, with the restaurant's new-order card in the panel; then
   the benefits as one row of cards, the three steps side by side, the questions beside their heading, a blue close. */
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.jn-promises { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 20px 0 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.jn-promises li { display: inline-flex; align-items: center; gap: 7px; }
.jn-promises li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ready); }
.jn-stage { height: 560px; }
@media (min-width: 761px) { .jn-stage .home-phone { left: 38%; } html[dir="rtl"] .jn-stage .home-phone { left: 62%; } }
.jn-stage .home-mock { position: absolute; inset-inline-end: 20px; top: 150px; width: min(78%, 330px); z-index: 2; }
.jn-why h2 { text-align: center; }
.jn-benefits { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; }
.jn-benefits li { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--card); border-radius: var(--r-panel); box-shadow: var(--sh-panel); font-size: 15px; line-height: 1.5; font-weight: 500; }
.jn-tick { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--do-soft, #ECEEFC); color: var(--do-blue); }
.jn-tick svg { width: 18px; height: 18px; }
.jn-steps-h { margin: 44px 0 0; text-align: center; font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; }
.jn-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; }
.jn-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-panel); font-size: 15px; line-height: 1.5; }
.jn-step-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--do-blue); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.join-contact .home-cta-in p { margin-inline: auto; max-width: 52ch; }
.join-mail { margin: 18px 0 0; font-size: 14px; }
.join-mail a { color: inherit; }
@media (max-width: 760px) { .jn-steps { grid-template-columns: 1fr; } .jn-stage .home-mock { top: auto; bottom: 20px; inset-inline-end: 14px; width: min(86%, 320px); } }
@media (min-width: 1000px) {
  .home-actions, .jn-promises { justify-content: flex-start; }
  /* The questions beside their heading: a long list stops being one narrow column in the middle. */
  .join-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .join-faq h2 { text-align: start; position: sticky; top: 88px; }
  .join-faq-list { max-width: none; margin: 0; }
}

@media (prefers-reduced-motion: reduce) { .home-live, .mock-ping { animation: none; } .home * { transition: none !important; } }

/* ---------- "Get our app" (AppBar.kt, install.js) ---------- */
/* A slim bar at the very top: the app's icon, what it is, a "Get" pill and a quiet close. Store pages use the store's
   colour; the home page Dosa's blue. */
.app-bar { --app-c: var(--accent, #2438D6); position: relative; z-index: 5; display: flex; align-items: center; gap: 4px;
  padding: 8px max(10px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--card); border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 3px rgba(16, 19, 31, .05); }
.home .app-bar { --app-c: #2438D6; }
.app-bar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 2px 0; border: 0;
  background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.app-bar-main:focus-visible, .app-bar-close:focus-visible { outline: 3px solid var(--app-c); outline-offset: 2px; border-radius: 12px; }
/* Rounded like an app icon on the phone (about 22% of its side). */
.app-bar-icon { flex: none; width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: #fff;
  box-shadow: 0 1px 4px rgba(16, 19, 31, .2); }
.app-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app-bar-t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.app-bar-d { font-size: 12px; line-height: 1.35; color: var(--muted-2); text-wrap: balance; }
/* The store's colour takes black text when it is light (and in dark mode): --on-accent, as every store button. */
.app-bar-get { flex: none; padding: 7px 16px; border-radius: 999px; background: var(--app-c); color: var(--on-accent, #fff); font-size: 14px; font-weight: 700; }
.home .app-bar-get { color: #fff; }
.app-bar-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: none; color: var(--muted-2); cursor: pointer; }
.app-bar-close:hover { background: var(--line-2); }
/* Small phones (320 px): one line, so the bar stays slim; the short line is still read out as its description. */
@media (max-width: 359px) { .app-bar-d { display: none; } .app-bar-main { gap: 10px; } .app-bar-get { padding: 7px 12px; } }

/* The sheet: always reads from the start side (Arabic right-aligned), whatever page it sits on. */
.app-sheet { --do-blue: #2438D6; --do-blue-dark: #1A2BB0; --do-soft: #ECEEFC;
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(16, 19, 31, .5); padding: 0; text-align: start; }
.app-sheet-box {
  width: 100%; max-width: 480px; max-height: calc(100% - 12px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--ink); border-radius: 22px 22px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.app-sheet-box h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.3; text-wrap: balance; }
.app-guide { display: grid; gap: 12px; margin-bottom: 12px; }
.app-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; line-height: 1.55; }
.app-sheet-done { width: 100%; margin-top: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
@media (min-width: 700px) { .app-sheet { align-items: center; } .app-sheet-box { border-radius: 22px; } }

/* The animation: a small phone plays Share → Add to Home Screen → the icon appears (7 s, on a loop). */
.app-demo { display: flex; justify-content: center; padding: 6px 0 2px; }
.app-demo-phone { width: 196px; height: 300px; padding: 7px; border-radius: 30px; background: #10131F; box-shadow: 0 10px 30px rgba(16, 19, 31, .25); }
.app-demo-screen { position: relative; overflow: hidden; height: 100%; border-radius: 24px; background: #F5F5F7; color: #1D1D1F; font-size: 10px; }
.app-demo-page { position: absolute; inset: 0 0 38px; padding: 26px 12px 0; display: flex; flex-direction: column; gap: 7px; }
.app-demo-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 11px; }
.app-demo-head img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: #fff; }
.app-demo-head span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-demo-line { display: block; height: 7px; border-radius: 4px; background: #E3E4EA; }
.app-demo-line:nth-child(3) { width: 70%; }
.app-demo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.app-demo-card { height: 46px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.app-demo-bar { position: absolute; inset: auto 0 0; height: 38px; display: flex; align-items: center; justify-content: space-around;
  background: rgba(249, 249, 251, .96); border-top: 1px solid #E3E4EA; color: #8A90A2; }
.app-demo-bar svg { width: 15px; height: 15px; display: block; }
.app-demo-share { position: relative; color: #2438D6; }
.app-demo-share svg { width: 17px; height: 17px; }
.app-demo-sheet { position: absolute; inset: auto 0 0; padding: 10px 8px 14px; border-radius: 14px 14px 0 0; background: #fff;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .12); display: grid; gap: 5px; transform: translateY(105%); }
.app-demo-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px;
  border-radius: 9px; background: #F2F2F7; font-size: 10px; font-weight: 600; }
.app-demo-ico { display: inline-flex; width: 16px; height: 16px; border-radius: 4px; background: #E3E4EA; }
.app-demo-add .app-demo-ico { background: none; color: #2438D6; }
.app-demo-add .app-demo-ico svg { width: 16px; height: 16px; }
.app-demo-home { position: absolute; inset: 0; padding: 30px 14px; background: linear-gradient(160deg, #4A5BE0, #8E4FD8 60%, #E07A5F); opacity: 0; }
.app-demo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; justify-items: center; }
.app-demo-app { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .35); }
.app-demo-new { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 44px; color: #fff; font-size: 8px; font-weight: 600; transform: scale(0); }
.app-demo-new img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #fff; }
.app-demo-new span { max-width: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The finger: a ring that presses where to tap. */
.app-demo-tap { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(36, 56, 214, .25); border: 2px solid rgba(36, 56, 214, .7); opacity: 0; pointer-events: none; }
.app-demo-tap2 { left: auto; inset-inline-end: 2px; }
.app-demo.play .app-demo-tap1 { animation: app-tap1 7s ease-in-out infinite; }
.app-demo.play .app-demo-sheet { animation: app-sheet 7s ease-in-out infinite; }
.app-demo.play .app-demo-tap2 { animation: app-tap2 7s ease-in-out infinite; }
.app-demo.play .app-demo-home { animation: app-home 7s ease-in-out infinite; }
.app-demo.play .app-demo-new { animation: app-new 7s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes app-tap1 { 0%, 8% { opacity: 0; transform: scale(1.6); } 13% { opacity: 1; transform: scale(1); } 18% { opacity: 1; transform: scale(.8); } 24%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes app-sheet { 0%, 22% { transform: translateY(105%); } 30%, 60% { transform: translateY(0); } 66%, 100% { transform: translateY(105%); } }
@keyframes app-tap2 { 0%, 38% { opacity: 0; transform: scale(1.6); } 44% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(.8); } 56%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes app-home { 0%, 60% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes app-new { 0%, 68% { transform: scale(0); } 76%, 96% { transform: scale(1); } 100% { transform: scale(0); } }
/* iPad (Share is at the top) and people who asked for less motion: the pictured steps only. */
@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) { .app-demo { display: none; } }
@media (prefers-reduced-motion: reduce) { .app-demo { display: none; } }

/* ---------- Apply to join (/join/apply), set PIN, fix ---------- */
.ob-main { display: block; }
.ob-lang { margin-inline-start: auto; }
.ob-wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.ob-narrow { max-width: 480px; }
.ob-wrap h1 { margin: 0 0 8px; font-size: clamp(26px, 6vw, 34px); font-weight: 700; letter-spacing: -0.4px; }
html[lang="ar"] .ob-wrap h1 { letter-spacing: 0; }
.ob-intro { margin: 0 0 8px; line-height: 1.6; }
.ob-fees { margin: 0 0 20px; font-weight: 600; color: var(--ready); }
.ob-form { display: flex; flex-direction: column; gap: 16px; }
.ob-step { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; padding: 20px 16px; }
.ob-step h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ob-step h2:focus { outline: none; }
.ob-count { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.ob-lead { margin: 0; color: var(--muted); line-height: 1.6; }
.ob-field { gap: 6px; }
.ob-field input[type=file] { height: auto; padding: 10px; }
.ob-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-files li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #FAFBFD; font-size: 14px; }
.ob-files .ob-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-files .ob-file-size { color: var(--muted-2); font-size: 13px; }
.ob-files button { border: 0; background: none; color: var(--danger); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 4px; min-height: 36px; }
.ob-opt { font-weight: 400; color: var(--muted-2); }
.ob-hint { margin: 0; font-size: 13px; color: var(--muted-2); line-height: 1.5; }
.ob-msg { margin: 0; font-size: 14px; font-weight: 600; min-height: 1em; }
.ob-msg.ok { color: var(--ready); }
.ob-msg.bad { color: var(--danger); }
.ob-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 4px; }
.ob-nav .btn-dark { margin-inline-start: auto; }
.ob .btn-dark, .ob .home-btn-line { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ob .btn-dark { background: var(--do-blue); color: #fff; }
.ob .btn-dark:disabled { opacity: 0.6; cursor: progress; }
.ob .home-btn-line { background: transparent; border: 1.5px solid var(--field); color: var(--ink); }
.ob-code-row { display: flex; flex-direction: column; gap: 10px; }
.ob-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.ob-radio { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--field); border-radius: 12px; font-weight: 600; cursor: pointer; }
.ob-radio:has(input:checked) { border-color: var(--do-blue); background: #EEF0FD; }
.ob-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.ob-checks .ok { color: var(--ready); }
.ob-checks .bad { color: var(--danger); }
.ob-checks[aria-busy="true"] { opacity: .45; }
.ob-contract p { margin: 0; }
.ob-contract { white-space: pre-wrap; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #FAFBFD; font-size: 14px; line-height: 1.7; }
.ob-agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.5; cursor: pointer; }
.ob-agree input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--do-blue); }
.ob-sign { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto; border: 1.5px dashed var(--field); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.ob-clear { align-self: flex-start; border: 0; background: none; color: var(--do-blue); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 0; }
.ob-done { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; padding: 20px 16px; }
.ob-done:focus { outline: none; }
.ob-done h2 { margin: 0; font-size: 22px; }
.ob-fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ob-fieldset legend { font-weight: 700; padding: 0 6px; }
/* A trial store's page: a preview, not taking orders yet. */
.trial-notice strong { display: block; font-size: 15px; }
.trial-notice p { margin: 4px 0 0; font-weight: 500; }

/* The customer's plate on the order page: one left-to-right block, like the real plate. */
.plate-inline { display: inline-block; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; }

/* ---------- Where the store is: header line, "Find us" sheet, checkout line, order page card, cash near the store ---------- */
/* The header's «📍 area, city · Directions»: a quiet button in the store's colour, 44px tall to tap. */
.store-loc { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.store-loc-btn {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 2px; min-height: 44px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--muted); text-align: start; cursor: pointer;
}
.store-loc-go { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.findus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.findus-close {
  flex: none; width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
}
.findus-name { margin: 0; font-size: 16px; font-weight: 700; }
.findus-addr { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.findus-place { margin: 0; font-size: 14px; }
.where-actions { display: flex; flex-direction: column; gap: 10px; }
.where-actions .btn-primary, .where-actions .btn-outline { min-height: 48px; height: auto; font: inherit; font-weight: 600; cursor: pointer; }
.where-card .where-h { margin: 0; font-size: 17px; font-weight: 700; }
.where-addr { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.where-park { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 600; }
.foot-where { display: flex; flex-direction: column; gap: 2px; }
.foot-where p { margin: 0; }
.foot-where-h { font-weight: 700; color: var(--ink-2); }
.foot-where a, .browse-all { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot-where a:hover, .browse-all:hover { text-decoration: underline; }
.browse-all-row { margin: 0; text-align: center; }
.co-where { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--soft); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.co-where-text, .co-where-park { margin: 0; font-size: 14px; line-height: 1.5; }
.co-where-park { font-weight: 600; }
.co-where-go { color: var(--accent); font-weight: 600; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
/* Cash near the store: what happens, and what to do instead (open in Safari/Chrome, pay online). */
.cash-loc { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--chip); display: flex; flex-direction: column; gap: 10px; }
.cash-loc.bad { background: #FFF4DF; color: #5C3F10; }
/* Checkout has no Dosa blue: the copy button takes the store's colour. */
.cash-loc .notify-copy-btn { background: var(--accent); color: var(--on-accent); }
.cash-loc-text { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500; }
.cash-loc-actions { display: flex; flex-direction: column; gap: 8px; }
.cash-loc-actions button { font: inherit; font-weight: 600; cursor: pointer; }
.cash-loc-actions .btn-outline { height: 46px; }

/* ---------- Night: store, checkout and order pages (html.shop) ----------
   The same screens on a black ground with dark panels; the store's colour lightened until it reads on them, and
   black text on it (storefront's --on-accent). The Saudi plate stays a plate; Dosa's own cards keep Dosa blue. */
@media (prefers-color-scheme: dark) {
  html.shop {
    --bg: #000000; --card: #1C1C1E; --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #A1A1A6; --muted-2: #8E8E93;
    --line: rgba(255, 255, 255, 0.10); --line-2: #2C2C2E; --field: #48484A; --ctl: #3A3A3C; --ring: #636366; --card-border: #2C2C2E;
    --chip: rgba(255, 255, 255, 0.08); --glass: rgba(28, 28, 30, 0.72); --danger: #FF6B5E; --amber: #F2B04A;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.50), 0 14px 40px rgba(0, 0, 0, 0.40);
    color-scheme: dark;
  }
  /* The <html> style carries the store's day and night colours; the night ones take over from <body> down. */
  html.shop body { --accent: var(--accent-d, #2E9C7A); --soft: var(--soft-d, #072D21); --on-accent: #000000; }
  html.shop .store-lang, html.shop .mode-switch { background: rgba(255, 255, 255, 0.10); }
  html.shop .mode[aria-pressed="true"], html.shop .seg button[aria-pressed="true"] { background: var(--ctl); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
  html.shop .notice, html.shop .notice-warm, html.shop .cash-loc.bad { background: #2E2410; color: #F3D9A4; }
  html.shop .items-grid.rows .item-card:hover { background: #232325; }
  /* Dish pictures sit on a warm dark tile instead of the day's pastel (the tint is inline, hence !important). */
  html.shop .item-pic, html.shop .sheet-hero { background: #2A2724 !important; }
  html.shop .plus { background: #2C2C2E; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3); }
  html.shop .plus.n { background: var(--accent); }
  html.shop .sheet-wrap, html.shop .findus-wrap { background: rgba(0, 0, 0, 0.6); }
  html.shop .close-btn { background: rgba(44, 44, 46, 0.78); }
  html.shop .map-box.set.out { background: #3A1512; color: #FFB4AB; box-shadow: inset 0 0 0 1.5px #FF6B5E; }
  /* A real plate: white, black letters, whatever the theme. */
  html.shop .plate { --ink: #1D1D1F; --ring: #AEAEB2; }
  html.shop .swatch { border-color: rgba(255, 255, 255, 0.2); }
  html.shop .pay-btn.apple { background: #FFFFFF; color: #000000; }
  html.shop .btn-danger { color: #000000; }
  /* Black on the lightened colour: the multi-choice tick and the rating button's star follow the text. */
  html.shop .opt.multi.on .opt-mark { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
  html.shop .rate-card .rate-btn span { color: inherit; }
  html.shop .notify-card, html.shop .app-sheet { --do-soft: #1A1F3A; }
  html.shop .notify-shot { background: #2C2C2E; color: #A1A1A6; }
}