/* ============================================================================
   ORDERLY COMPONENTS — ods.css
   ----------------------------------------------------------------------------
   One definition per kind of element, shared by the storefront AND the back
   office (served from /assets/ods/). The apps mirror the same components in
   Quasar. Change a component here and it changes everywhere; never restyle
   one on a single page - that is how one search box became twelve.

   Loaded LAST in every layout (after <title>, so after Bootstrap and Element
   Plus, which Yii injects just before <title>) - components win on order,
   not on !important.

   Standing design rules (owner):
     * no lines - depth is shadow and spacing, never a border
     * one accent, Orderly orange; GREEN for go/accept, red only for danger
     * DM Sans; Lucide icons; every component in light and dark
     * few taps - nothing here should need a second screen

   Tokens come from tokens-oklch.css (--ods-*). The --o-* layer below is the
   only thing components read, so dark mode is one block, not a rule per page.
   ============================================================================ */

:root {
  --o-font: var(--ods-font-sans, "DM Sans", system-ui, sans-serif);
  --o-bg: var(--ods-bg, #fafafa);
  --o-surface: var(--ods-surface, #fff);
  --o-surface-2: var(--ods-surface-sunken, #f4f4f5);
  --o-surface-3: var(--ods-surface-sunken-2, #ededee);
  --o-text: var(--ods-text, #18181b);
  --o-text-2: var(--ods-text-secondary, #52525b);
  --o-text-3: var(--ods-text-muted, #71717a);
  --o-accent: var(--ods-brand-primary, #f97316);
  --o-accent-deep: var(--ods-brand-deep, #c2410c);
  --o-accent-tint: var(--ods-brand-tint, #fff4eb);
  /* Orange behind white text: 4.6:1 (the brand orange is 2.8:1). */
  --o-accent-solid: #c4510a;
  --o-accent-solid-hover: #a8440a;
  --o-go: oklch(60% 0.16 150);
  --o-go-deep: oklch(52% 0.15 150);
  --o-go-tint: oklch(95% 0.04 150);
  --o-warn: oklch(52% 0.13 75);
  --o-warn-tint: oklch(95% 0.05 85);
  --o-danger: oklch(56% 0.2 25);
  --o-danger-tint: oklch(95% 0.03 25);
  /* red behind white text, same in light and dark (4.5:1) */
  --o-danger-solid: oklch(52% 0.2 25);
  --o-elev-1: 0 1px 2px rgb(0 0 0 / .04), 0 2px 10px rgb(0 0 0 / .05);
  --o-elev-2: 0 2px 6px rgb(0 0 0 / .05), 0 10px 30px rgb(0 0 0 / .08);
  --o-elev-3: 0 6px 16px rgb(0 0 0 / .08), 0 24px 56px rgb(0 0 0 / .12);
  --o-ring: 0 0 0 4px oklch(70% 0.19 45 / .2);
  --o-r-sm: 10px;
  --o-r: 14px;
  --o-r-lg: 18px;
  --o-r-pill: 999px;
  --o-ease: 180ms cubic-bezier(.16, 1, .3, 1);
  --o-sticky-top: 88px;          /* below the storefront header */
}

:root[data-orderly-theme="dark"], html.dark {
  --o-bg: var(--ods-dark-bg, #111);
  --o-surface: var(--ods-dark-surface-raised, #222);
  --o-surface-2: var(--ods-dark-surface, #1a1a1a);
  --o-surface-3: oklch(26% 0 0);
  --o-text: var(--ods-dark-text, #f5f5f5);
  --o-text-2: oklch(80% 0 0);
  --o-text-3: var(--ods-dark-text-muted, #a1a1aa);
  --o-accent: var(--ods-dark-accent, #fb923c);
  --o-accent-tint: oklch(30% 0.07 45);
  /* "deep" is text on a tint; on dark tints it must be light to read (4.5:1) */
  --o-accent-deep: oklch(82% 0.12 60);
  --o-go: oklch(68% 0.15 150);
  --o-go-deep: oklch(84% 0.13 150);
  --o-go-tint: oklch(30% 0.06 150);
  --o-warn: oklch(80% 0.12 80);
  --o-warn-tint: oklch(30% 0.05 85);
  --o-danger: oklch(74% 0.16 25);
  --o-danger-tint: oklch(30% 0.06 25);
  --o-elev-1: 0 1px 2px rgb(0 0 0 / .45), 0 2px 12px rgb(0 0 0 / .3);
  --o-elev-2: 0 2px 8px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .4);
  --o-elev-3: 0 8px 20px rgb(0 0 0 / .55), 0 28px 60px rgb(0 0 0 / .5);
}

/* [hidden] must win over a component's own display (an .o-row is flex). */
[class^="o-"][hidden], [class*=" o-"][hidden] { display: none !important; }

/* ---------------------------------------------------------------- icons -- */
.o-ico, .o-ico svg { width: 20px; height: 20px; stroke-width: 2; flex: 0 0 auto; }
.o-ico--sm, .o-ico--sm svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- card ---- */
.o-card {
  background: var(--o-surface);
  border: 0;
  border-radius: var(--o-r);
  padding: 18px 20px;
  color: var(--o-text);
}
.o-card--flat { box-shadow: none; background: var(--o-surface-2); }
/* on a tinted (flat) card, ghost buttons step up to the surface so they still read as buttons */
.o-card--flat .o-btn--ghost { background: var(--o-surface); }
.o-card--flat .o-btn--ghost:hover { background: var(--o-surface); }

/* -------------------------------------------------------------- buttons --- */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--o-r-pill);
  font: 600 15px/1 var(--o-font); letter-spacing: .01em;
  text-decoration: none !important; cursor: pointer;
  transition: background var(--o-ease), box-shadow var(--o-ease), transform var(--o-ease);
  -webkit-tap-highlight-color: transparent;
}
.o-btn:active { transform: scale(.98); }
.o-btn:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-btn[disabled], .o-btn.is-disabled { opacity: .5; pointer-events: none; }
.o-btn--primary { background: var(--o-accent-solid); color: #fff !important; }
.o-btn--primary:hover { background: var(--o-accent-solid-hover); }
.o-btn--go { background: var(--o-go); color: #fff !important; }
.o-btn--go:hover { background: oklch(52% 0.15 150); }
.o-btn--soft { background: var(--o-accent-tint); color: var(--o-accent-deep) !important; }
.o-btn--ghost { background: var(--o-surface-2); color: var(--o-text) !important; }
.o-btn--ghost:hover { background: var(--o-surface-3); }
.o-btn--danger { background: var(--o-danger-tint); color: var(--o-danger) !important; }
.o-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.o-btn--block { display: flex; width: 100%; }

.o-link {
  color: var(--o-accent-deep) !important; font-weight: 600; text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.o-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }

.o-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--o-r-pill);
  background: var(--o-surface-2); color: var(--o-text-2);
  cursor: pointer; transition: background var(--o-ease), color var(--o-ease);
  -webkit-tap-highlight-color: transparent;
}
.o-icon-btn:hover { background: var(--o-surface-3); color: var(--o-text); }
a.o-icon-btn { color: var(--o-text-2) !important; text-decoration: none !important; }
a.o-icon-btn:hover { color: var(--o-text) !important; }
.o-icon-btn:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-icon-btn svg { width: 19px; height: 19px; stroke-width: 2; }

/* --------------------------------------------------------------- chips ---- */
.o-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 12px;
  border-radius: var(--o-r-pill); border: 0;
  background: var(--o-surface-2); color: var(--o-text-2);
  font: 600 13px/1 var(--o-font); white-space: nowrap;
}
.o-chip svg { width: 14px; height: 14px; }
.o-chip--go { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-chip--warn { background: var(--o-warn-tint); color: var(--o-warn); }
.o-chip--accent { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-chip--danger { background: var(--o-danger-tint); color: var(--o-danger); }
/* raised: sits on a tinted background (the homepage hero) */
.o-chip--raised { background: var(--o-surface); color: var(--o-text-2); box-shadow: var(--o-elev-1); }
/* Status chip: one colour language for every order/payment/ticket status, so
   staff read it at a glance. <span class="o-chip" data-status="{raw}">Label</span>
   new = accent, in progress = warn, ready = go, done = neutral, failed = danger. */
.o-chip[data-status] { text-transform: capitalize; }
.o-chip[data-status="payment_unverified"] { text-transform: none; } /* a sentence: "Awaiting M-Pesa confirmation" */
.o-chip[data-status="new"], .o-chip[data-status="pending"], .o-chip[data-status="draft"] { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-chip[data-status="accepted"], .o-chip[data-status="preparing"], .o-chip[data-status="in_kitchen"], .o-chip[data-status="cooking"], .o-chip[data-status="unpaid"], .o-chip[data-status="partial"], .o-chip[data-status="payment_unverified"], .o-chip[data-status="delivery on its way"], .o-chip[data-status="on_the_way"], .o-chip[data-status="assigned"] { background: var(--o-warn-tint); color: var(--o-warn); }
.o-chip[data-status="ready"], .o-chip[data-status="ready_for_pickup"], .o-chip[data-status="paid"], .o-chip[data-status="publish"], .o-chip[data-status="active"], .o-chip[data-status="available"] { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-chip[data-status="delivered"], .o-chip[data-status="complete"], .o-chip[data-status="completed"], .o-chip[data-status="served"], .o-chip[data-status="picked_up"], .o-chip[data-status="closed"] { background: var(--o-surface-2); color: var(--o-text-2); }
.o-chip[data-status="cancelled"], .o-chip[data-status="canceled"], .o-chip[data-status="rejected"], .o-chip[data-status="declined"], .o-chip[data-status="failed"], .o-chip[data-status="voided"], .o-chip[data-status="expired"], .o-chip[data-status="refund"], .o-chip[data-status="refunded"] { background: var(--o-danger-tint); color: var(--o-danger); }
a.o-chip, button.o-chip { cursor: pointer; text-decoration: none !important; transition: background var(--o-ease), color var(--o-ease), box-shadow var(--o-ease); }
a.o-chip:hover, button.o-chip:hover { background: var(--o-surface-3); color: var(--o-text); }
a.o-chip--raised:hover { background: var(--o-surface); color: var(--o-accent-deep); box-shadow: var(--o-elev-2); }
.o-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

/* No theme toggle anywhere: light or dark follows the device setting
   (orderly-ui.js). The button and all its rules were removed 2026-10-07. */
@media (pointer: coarse) {                       /* phones: a 44px target, not 40 */
  .o-icon-btn { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px !important; }
}

/* -------------------------------------------------------------- search ----
   One search component, three sizes:
     .o-search--hero   the big homepage box, Google-style, with Ask AI
     .o-search--bar    headers, menus, lists (default)
     .o-search--field  compact filters in tables and the back office
   Markup (see store/_search.php / ods.js):
     form.o-search > .o-search__icon + input.o-search__input
                     + .o-search__clear + [.o-search__mic] + [.o-search__ai]
                     + .o-search__panel
   One placeholder, never a floating label on top of it. */
.o-search {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  width: 100%;
  min-height: 46px; padding: 0 6px 0 16px; margin: 0;
  background: var(--o-surface-2);
  border: 0 !important; border-radius: var(--o-r-pill);
  box-shadow: none;
  color: var(--o-text);
  transition: background var(--o-ease), box-shadow var(--o-ease);
}
.o-search:focus-within { background: var(--o-surface); box-shadow: var(--o-elev-2), var(--o-ring); }
.o-search__icon { display: inline-flex; color: var(--o-text-3); margin-right: 6px; flex: 0 0 auto; }
.o-search__icon svg { width: 19px; height: 19px; stroke-width: 2.2; }
/* :not(#o) adds ID-level specificity without an id in the markup. custom.css
   boxes every input on the site with input:not([type=...])x6 !important,
   which outranks any plain class; this is how the component stays one box. */
.o-search__input:not(#o), .o-search__input:not(#o):focus, .o-search__input:not(#o):hover {
  flex: 1 1 auto; min-width: 0; width: auto;
  min-height: 0 !important; border-radius: 0 !important; background-clip: border-box !important;
  height: 44px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important;
  color: var(--o-text) !important;
  font: 400 16px/1.2 var(--o-font) !important;   /* 16px stops iOS zooming in */
  -webkit-appearance: none; appearance: none;
}
.o-search__input::placeholder { color: var(--o-text-3); opacity: 1; }
.o-search__input::-webkit-search-cancel-button,
.o-search__input::-webkit-search-decoration { -webkit-appearance: none; }
.o-search__clear, .o-search__mic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 0; border-radius: var(--o-r-pill); background: transparent;
  color: var(--o-text-3); cursor: pointer; padding: 0;
}
.o-search__clear:hover, .o-search__mic:hover { background: var(--o-surface-3); color: var(--o-text); }
.o-search__clear svg, .o-search__mic svg { width: 18px; height: 18px; }
.o-search__clear[hidden], .o-search__mic[hidden] { display: none; }
.o-search.is-listening .o-search__mic { color: var(--o-danger); background: var(--o-danger-tint); animation: o-pulse 1.2s ease-in-out infinite; }
.o-search__ai {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 36px; padding: 0 14px 0 12px; margin-left: 2px;
  border: 0; border-radius: var(--o-r-pill);
  background: var(--o-accent-tint); color: var(--o-accent-deep);
  font: 700 14px/1 var(--o-font); cursor: pointer; white-space: nowrap;
  transition: background var(--o-ease), color var(--o-ease);
}
.o-search__ai:hover { background: var(--o-accent-solid); color: #fff; }
.o-search__ai svg { width: 17px; height: 17px; }

.o-search--hero { min-height: 60px; padding: 0 8px 0 22px; background: var(--o-surface); box-shadow: var(--o-elev-2); }
.o-search--hero:hover { box-shadow: var(--o-elev-3); }
.o-search--hero .o-search__input:not(#o) { height: 58px; font-size: 17px !important; }
.o-search--hero .o-search__ai { height: 44px; padding: 0 18px 0 14px; font-size: 15px; }
/* phones: the AI button becomes its sparkle so the placeholder can be read */
@media (max-width: 480px) {
  .o-search--hero { padding-left: 16px; }
  .o-search--hero .o-search__ai span { display: none; }
  .o-search--hero .o-search__ai { padding: 0; width: 44px; justify-content: center; }
}
.o-search--field { min-height: 40px; padding: 0 4px 0 12px; border-radius: var(--o-r-sm); }
.o-search--field .o-search__input:not(#o) { height: 38px; font-size: 15px !important; }
.o-search--field .o-search__icon svg { width: 17px; height: 17px; }

/* the panel under the box: instant results and the AI answer */
.o-search__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1040;
  max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain;
  background: var(--o-surface); color: var(--o-text);
  border-radius: var(--o-r-lg); box-shadow: var(--o-elev-3);
  padding: 8px; text-align: left;
}
.o-search__panel[hidden] { display: none; }
.o-search__label { font: 700 12px/1 var(--o-font); letter-spacing: .06em; text-transform: uppercase; color: var(--o-text-3); padding: 10px 12px 6px; }
.o-search__opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--o-r-sm);
  color: var(--o-text) !important; text-decoration: none !important; cursor: pointer;
}
.o-search__opt:hover, .o-search__opt.is-active { background: var(--o-surface-2); }
.o-search__opt-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--o-r-sm); background: var(--o-accent-tint); color: var(--o-accent-deep); flex: 0 0 auto; }
.o-search__opt-ico svg { width: 18px; height: 18px; }
.o-search__opt-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.o-search__opt-name { font: 600 15px/1.3 var(--o-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-search__opt-meta { font: 400 13px/1.3 var(--o-font); color: var(--o-text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.o-search__opt-meta > span + span::before { content: "\00b7"; margin-right: 8px; }
.o-search__opt-go { color: var(--o-text-3); display: inline-flex; }
.o-search__opt-go svg { width: 16px; height: 16px; }
.o-search__opt { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }
a.o-search__opt { width: auto; }
.o-search__opt--ask .o-search__opt-name { color: var(--o-accent-deep); }
/* the "/" hint on the back-office pill; gone once the box is in use or on touch screens */
.o-search__kbd { flex: 0 0 auto; margin-right: 8px; padding: 3px 8px; border-radius: var(--o-r-sm); background: var(--o-surface-3); color: var(--o-text-3); font: 600 12px/1 var(--o-font); }
.o-search:focus-within .o-search__kbd, .o-search:has(.o-search__clear:not([hidden])) .o-search__kbd { display: none; }
@media (pointer: coarse) { .o-search__kbd { display: none; } }
/* top bar: the panel may be wider than the pill */
.o-search--topbar .o-search__panel { min-width: min(480px, calc(100vw - 24px)); }
.o-search__empty { padding: 14px 12px; color: var(--o-text-3); font: 400 14px/1.4 var(--o-font); }
.o-search__answer { padding: 12px 12px 6px; }
.o-search__answer-head { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--o-font); color: var(--o-accent-deep); margin-bottom: 8px; }
.o-search__answer-head svg { width: 16px; height: 16px; }
.o-search__answer-text { font: 400 15px/1.55 var(--o-font); color: var(--o-text); white-space: pre-wrap; }
.o-search__dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.o-search__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--o-accent); animation: o-pulse 1s ease-in-out infinite; }
.o-search__dots i:nth-child(2) { animation-delay: .15s; } .o-search__dots i:nth-child(3) { animation-delay: .3s; }
.o-search__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 6px; }

@keyframes o-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Phones open the homepage on the search, Google-style. The banner block above
   it was a hero photo washed out to a blank 300px box by a 90% white overlay. */
.ods-store .mobile-home-banner { display: none !important; }

/* Containers that clip their content (the homepage hero hides overflow for
   its background art) let an open results panel out, above what follows. */
#main-search-banner:has(.o-search__panel:not([hidden])) { overflow: visible !important; z-index: 20; }

/* --------------------------------------------------------------- forms ----
   Fields are a tinted well with no outline; focus lifts them onto the surface
   with the orange ring. :not(#o) outranks custom.css, which boxes every input
   on the site (input:not([type=...])x6 !important). */
.o-field { margin: 0 0 18px; }
.o-label { display: block; margin: 0 0 8px; font: 600 14px/1.3 var(--o-font); color: var(--o-text); }
.o-help { margin: 7px 0 0; font: 400 13px/1.45 var(--o-font); color: var(--o-text-3); }
.o-input:not(#o), .o-select:not(#o), .o-textarea:not(#o) {
  display: block; width: 100% !important; min-height: 50px !important; margin: 0 !important;
  padding: 0 16px !important; border: 0 !important; border-radius: var(--o-r-sm) !important;
  background: var(--o-surface-2) !important; color: var(--o-text) !important;
  font: 400 16px/1.3 var(--o-font) !important;            /* 16px: no iOS zoom */
  box-shadow: none !important; outline: none !important; background-clip: padding-box !important;
  transition: background var(--o-ease), box-shadow var(--o-ease);
}
.o-textarea:not(#o) { min-height: 104px !important; padding: 12px 16px !important; resize: vertical; }
.o-input:not(#o)::placeholder, .o-textarea:not(#o)::placeholder { color: var(--o-text-3); opacity: 1; }
.o-input:not(#o):focus, .o-select:not(#o):focus, .o-textarea:not(#o):focus { background: var(--o-surface) !important; box-shadow: var(--o-ring), var(--o-elev-1) !important; }
.o-input--code:not(#o) { text-align: center; letter-spacing: .5em; font-size: 26px !important; font-weight: 700 !important; min-height: 60px !important; }

/* phone: one field, country on the left - never two boxes side by side */
.o-phone { display: flex; align-items: stretch; border-radius: var(--o-r-sm); background: var(--o-surface-2); transition: background var(--o-ease), box-shadow var(--o-ease); }
.o-phone:focus-within { background: var(--o-surface); box-shadow: var(--o-ring), var(--o-elev-1); }
.o-phone .o-select:not(#o) { flex: 0 0 auto; width: auto !important; min-width: 118px; padding: 0 30px 0 14px !important; background-color: transparent !important; box-shadow: none !important; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; font-weight: 600 !important; }
.o-phone .o-input:not(#o) { flex: 1 1 auto; min-width: 0; background: transparent !important; box-shadow: none !important; padding-left: 6px !important; }
/* the same one-field well for an input plus a trailing button (password + show) */
.o-phone--plain .o-input:not(#o) { padding-left: 16px !important; }

/* selectable cards (business type, plan): tint + check, no outline */
.o-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .o-choices { grid-template-columns: 1fr; } }
.o-choices--list { grid-template-columns: 1fr; }
.o-choice {
  position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  padding: 14px 16px; margin: 0; border: 0; border-radius: var(--o-r);
  background: var(--o-surface-2); color: var(--o-text); cursor: pointer;
  font: inherit; transition: background var(--o-ease), box-shadow var(--o-ease), transform var(--o-ease);
}
.o-choice:hover { background: var(--o-surface-3); }
.o-choice:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-choice.is-selected { background: var(--o-accent-tint); box-shadow: var(--o-elev-1); }
.o-choice__icon { display: inline-flex; color: var(--o-accent); flex: 0 0 auto; margin-top: 1px; }
.o-choice__icon svg { width: 22px; height: 22px; }
.o-choice__body { min-width: 0; flex: 1 1 auto; }
.o-choice__title { display: block; font: 700 15px/1.3 var(--o-font); }
.o-choice__text { display: block; margin-top: 3px; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-choice__side { flex: 0 0 auto; text-align: right; font: 700 15px/1.3 var(--o-font); color: var(--o-accent-deep); }
.o-choice__check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--o-accent); color: #fff; display: none; align-items: center; justify-content: center; }
.o-choice__check svg { width: 14px; height: 14px; stroke-width: 3; }
.o-choice.is-selected .o-choice__check { display: inline-flex; }
.o-choices--list .o-choice.is-selected .o-choice__check { position: static; margin-left: 4px; }

.o-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border-radius: var(--o-r-sm); font: 500 14px/1.45 var(--o-font); background: var(--o-surface-2); color: var(--o-text-2); }
.o-alert--danger { background: var(--o-danger-tint); color: var(--o-danger); }
.o-alert--go { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

/* Page banner: one notice across the top of a back-office page (plan ending,
   payment failed, trial, plan limits - OrderlyPlanBanner). Icon, two lines,
   one button, close. Accent by default; --danger / --warn by urgency. */
.o-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 12px 12px 14px; margin: 0 0 16px; border-radius: var(--o-r);
  background: var(--o-accent-tint); color: var(--o-text); font-family: var(--o-font);
  animation: o-banner-in 160ms cubic-bezier(.16, 1, .3, 1);
}
.o-banner--danger { background: var(--o-danger-tint); }
.o-banner--warn { background: var(--o-warn-tint); }
.o-banner__icon { display: inline-flex; color: var(--o-accent); flex: 0 0 auto; }
.o-banner--danger .o-banner__icon { color: var(--o-danger); }
.o-banner--warn .o-banner__icon { color: var(--o-warn); }
.o-banner__icon svg { width: 20px; height: 20px; stroke-width: 2; }
.o-banner__body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-banner__title { font: 600 15px/1.35 var(--o-font); color: var(--o-text); }
.o-banner__text { font: 400 14px/1.45 var(--o-font); color: var(--o-text-2); }
.o-banner__close { background: transparent; flex: 0 0 auto; margin-left: auto; width: 44px; height: 44px; }
.o-banner__close:hover { background: var(--o-surface-3); }
.o-banner.is-hiding { opacity: 0; transition: opacity 120ms ease; }
@keyframes o-banner-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) {
  .o-banner { align-items: flex-start; }
  .o-banner__body { flex-basis: calc(100% - 100px); }
  .o-banner__close { order: 2; margin-top: -6px; }
  .o-banner__action { order: 3; width: 100%; }
}

.o-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; vertical-align: -3px; animation: o-spin .7s linear infinite; }
/* three bouncing dots inside a button: they take the button's text colour on any surface (o-dot is the status dot, a different job) */
.o-dot-cur { display: inline-block; flex: 0 0 auto; border-radius: 50%; background-color: currentColor; }
@keyframes o-spin { to { transform: rotate(360deg); } }

/* step progress with labels: "Your business / Verify / Plan / Menu / Go live" */
.o-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.o-steps li { display: flex; flex-direction: column; gap: 7px; font: 600 12px/1.2 var(--o-font); color: var(--o-text-3); }
.o-steps li::before { content: ""; height: 4px; border-radius: 4px; background: var(--o-surface-3); }
.o-steps li.is-done::before { background: var(--o-accent); }
.o-steps li.is-current { color: var(--o-text); }
.o-steps li.is-current::before { background: linear-gradient(90deg, var(--o-accent) 50%, var(--o-surface-3) 50%); }
@media (max-width: 480px) { .o-steps li span { display: none; } .o-steps li.is-current span { display: block; } }

/* ------------------------------------------------- info rows (store page) - */
.o-info { display: flex; flex-direction: column; gap: 22px; }
.o-info__row { display: flex; gap: 14px; align-items: flex-start; }
.o-info__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  background: var(--o-accent-tint); color: var(--o-accent-deep);
}
.o-info__icon svg { width: 20px; height: 20px; stroke-width: 2; }
.o-info__body { min-width: 0; flex: 1 1 auto; padding-top: 1px; }
.o-info__title { font: 700 16px/1.3 var(--o-font) !important; color: var(--o-text) !important; margin: 0 0 4px !important; }
.o-info__text { font: 400 14.5px/1.55 var(--o-font); color: var(--o-text-2); margin: 0; }
.o-info__text + .o-info__text { margin-top: 2px; }
.o-info__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.o-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.o-clamp.is-open { -webkit-line-clamp: unset; display: block; }

/* opening hours: today first-class, the rest quiet */
.o-hours { width: 100%; border-collapse: collapse; margin-top: 8px; font: 400 14px/1.4 var(--o-font); }
.o-hours td { padding: 5px 0; border: 0 !important; color: var(--o-text-2); vertical-align: top; }
.o-hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.o-hours tr.is-today td { color: var(--o-text); font-weight: 700; }
.o-hours tr.is-closed td:last-child { color: var(--o-text-3); }

/* ratings */
.o-stars { --o-stars: 0; position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px; }
.o-stars::before { content: "★★★★★"; color: var(--o-surface-3); }
.o-stars::after {
  content: "★★★★★"; position: absolute; left: 0; top: 0; overflow: hidden;
  width: calc(var(--o-stars) / 5 * 100%); color: oklch(78% 0.16 75); white-space: nowrap;
}
.o-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.o-rating__score { font: 700 32px/1 var(--o-font); color: var(--o-text); }
.o-rating__count { font: 400 14px/1.3 var(--o-font); color: var(--o-text-3); }

/* map image that opens directions */
.o-map {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--o-r-lg); box-shadow: var(--o-elev-1);
  aspect-ratio: 16 / 9; max-height: 320px; background: var(--o-surface-2);
}
.o-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-map__cta {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--o-surface); color: var(--o-text) !important; box-shadow: var(--o-elev-2);
}

/* gallery strip */
/* .gallery_magnific stays on the element (front.js opens the lightbox from it);
   responsive.css sizes that class to 50% !important, so outrank it here. */
.o-gallery.gallery_magnific { width: auto !important; }
.o-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.o-gallery a { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--o-surface-2); }
.o-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-gallery__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / .45); color: #fff; font: 700 18px/1 var(--o-font); }

/* empty states say what will appear, not that nothing is here */
.o-empty { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text-2); font: 400 14.5px/1.5 var(--o-font); }
.o-empty svg { width: 20px; height: 20px; color: var(--o-text-3); flex: 0 0 auto; }

/* section heading used by the store page blocks */
/* vertical rhythm only: .container's auto side margins must survive */
.o-section { margin-top: 40px; margin-bottom: 40px; }
.o-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.o-section__title { font: 700 22px/1.25 var(--o-font) !important; color: var(--o-text) !important; margin: 0 !important; }

/* visually hidden but still focusable (radio inside an .o-choice label) */
.o-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.o-choice:focus-within { box-shadow: var(--o-ring); }
@media (min-width: 900px) { .o-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------- list rows ------
   People and simple records (riders, staff, zones): icon or avatar, two
   lines, one trailing action. A list, not a table. */
.o-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.o-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px;
  border-radius: var(--o-r-sm); color: var(--o-text); text-decoration: none !important;
  transition: background var(--o-ease);
}
a.o-row:hover, .o-row:hover { background: var(--o-surface-2); }
a.o-row:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-row__avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--o-surface-3); color: var(--o-text-2);
  font: 700 15px/1 var(--o-font); text-decoration: none !important;
}
.o-row__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.o-row__avatar svg { width: 20px; height: 20px; }
.o-row__avatar .o-dot { position: absolute; right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--o-surface); }
.o-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; text-decoration: none !important; color: inherit !important; }
.o-row__title { display: block; font: 600 15px/1.3 var(--o-font); color: var(--o-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-row__sub { display: block; margin-top: 2px; font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-row__end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: 0 0 auto; }

/* status dot: on shift / online (go) vs off (muted) */
.o-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--o-text-3); flex: 0 0 auto; }
.o-dot--go { background: var(--o-go); }

/* switch: one setting, one row, label on the left */
.o-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin: 0; cursor: pointer; }
.o-switch__text { min-width: 0; font: 600 15px/1.35 var(--o-font); color: var(--o-text); }
.o-switch__text small { display: block; margin-top: 2px; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-switch__track { position: relative; flex: 0 0 auto; width: 46px; height: 28px; border-radius: var(--o-r-pill); background: var(--o-surface-3); transition: background var(--o-ease); }
.o-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--o-surface); box-shadow: var(--o-elev-1); transition: transform var(--o-ease); }
.o-switch input:checked + .o-switch__track { background: var(--o-go); }
/* off track in dark: surface-3 on a raised card was nearly invisible */
:root[data-orderly-theme="dark"] .o-switch__track, html.dark .o-switch__track { background: oklch(40% 0 0); }
:root[data-orderly-theme="dark"] .o-switch input:checked + .o-switch__track, html.dark .o-switch input:checked + .o-switch__track { background: var(--o-go); }
.o-switch input:checked + .o-switch__track::after { transform: translateX(18px); }
.o-switch input:focus-visible + .o-switch__track { box-shadow: var(--o-ring); }

/* "More options": advanced settings folded away, one tap to open */
.o-more { margin-top: 16px; border-radius: var(--o-r); background: var(--o-surface-2); }
.o-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px;
  font: 600 15px/1.3 var(--o-font); color: var(--o-text); cursor: pointer; list-style: none; border-radius: var(--o-r);
}
.o-more > summary::-webkit-details-marker { display: none; }
.o-more > summary:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-more > summary svg { width: 18px; height: 18px; color: var(--o-text-3); transition: transform var(--o-ease); }
.o-more[open] > summary svg { transform: rotate(180deg); }
.o-more__body { padding: 0 8px 12px; }
.o-more .o-row:hover { background: var(--o-surface-3); }
/* ------------------------------------------------- overview pages ------
   The pieces of an overview page (Reports > Business is the reference):
   a head with one primary action, stat tiles, a small chart, a timeline of
   today and list rows. Markup: booking/booking_dashboard.php.
     .o-head > .o-head__title + .o-head__actions
     .o-grid.o-grid--N > .o-card ...        (N = 2 | 3 | 5; one column on phones)
     .o-stat > .o-stat__label + .o-stat__value + .o-stat__note
     .o-bars > .o-bar(.is-today) > .o-bar__val + .o-bar__col[style=--h:0..100] + .o-bar__day
     .o-timeline > .o-tl > .o-tl__time + .o-tl__body + .o-tl__actions
     .o-rows > .o-row > .o-avatar + .o-row__main(.o-row__title + .o-row__meta) + .o-row__end */
.o-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.o-head__title { font: 700 24px/1.2 var(--o-font) !important; color: var(--o-text) !important; margin: 0 !important; }
.o-head__sub { display: block; margin-top: 4px; font: 400 14px/1.4 var(--o-font); color: var(--o-text-3); }
.o-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.o-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
.o-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.o-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .o-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 700px) { .o-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px) {
  .o-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-grid--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) { .o-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.o-card__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 12px; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-card__title small { font: 500 13px/1.3 var(--o-font); color: var(--o-text-3); }

.o-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.o-stat__label { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-stat__label svg { width: 16px; height: 16px; color: var(--o-accent); }
.o-stat__value { font: 700 28px/1.15 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.o-stat__note { font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); }
.o-stat--alert .o-stat__value { color: var(--o-danger); }

/* a small column chart drawn in CSS: --h is the bar height in % of the tallest */
.o-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 180px; padding-top: 4px; }
.o-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.o-bar__val { font: 600 12px/1 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.o-bar__col { width: 100%; max-width: 34px; height: calc(var(--h, 0) * 1%); min-height: 3px; border-radius: 6px 6px 3px 3px; background: var(--o-accent-tint); transition: height 240ms ease-out; }
.o-bar.is-today .o-bar__col { background: var(--o-accent); }
.o-bar__day { display: flex; flex-direction: column; align-items: center; font: 500 11px/1.2 var(--o-font); color: var(--o-text-3); white-space: nowrap; }
.o-bar.is-today .o-bar__day { color: var(--o-text); font-weight: 700; }
/* Stacked bar (customers: new on top of returning): --h = height %, each segment's --n = its count */
.o-bars--thin { gap: 3px; }
.o-bar__stack { display: flex; flex-direction: column-reverse; width: 100%; max-width: 18px; height: calc(var(--h, 0) * 1%); min-height: 3px; border-radius: 4px 4px 2px 2px; overflow: hidden; transition: height 240ms ease-out; }
.o-bar__seg { flex: var(--n, 0) 1 0; min-height: 0; }
.o-bar__seg--ret { background: var(--o-accent-tint); }
.o-bar__seg--new { background: var(--o-accent); }
.o-legend { display: flex; gap: 16px; margin-top: 10px; font: 500 12px/1 var(--o-font); color: var(--o-text-3); }
.o-legend span { display: inline-flex; align-items: center; gap: 6px; }
.o-dot--new { background: var(--o-accent); }
.o-dot--ret { background: var(--o-accent-tint); }
@media (max-width: 480px) { .o-bars { gap: 3px; } .o-bar__day b { display: none; } }

.o-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.o-tl { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0 12px; }
.o-tl::before { content: ""; position: absolute; left: 86px; top: 0; bottom: 0; width: 2px; background: var(--o-surface-3); }
.o-tl:first-child::before { top: 20px; } .o-tl:last-child::before { bottom: calc(100% - 20px); }
.o-tl::after { content: ""; position: absolute; left: 82px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--o-surface-3); box-shadow: 0 0 0 3px var(--o-surface); }
.o-tl.is-go::after { background: var(--o-go); } .o-tl.is-warn::after { background: var(--o-warn); } .o-tl.is-now::after { background: var(--o-accent); }
.o-tl__time { font: 700 14px/1.3 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; padding-top: 2px; white-space: nowrap; }
.o-tl__body { min-width: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 6px; }
.o-tl__title { font: 600 15px/1.3 var(--o-font); color: var(--o-text) !important; text-decoration: none !important; }
a.o-tl__title:hover { color: var(--o-accent-deep) !important; }
.o-tl__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-tl__actions { grid-column: 2; padding-left: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.o-tl.is-done .o-tl__title, .o-tl.is-done .o-tl__time { color: var(--o-text-3) !important; }

.o-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.o-row__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); }
.o-row__meta > span + span::before { content: "\00b7"; margin-right: 8px; }
.o-row__end .o-btn { white-space: nowrap; }
.o-row__num { font: 700 15px/1 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.o-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); font: 700 15px/1 var(--o-font); }
.o-avatar svg { width: 18px; height: 18px; }
/* phones: a row with buttons puts them on their own line under the text */
@media (max-width: 560px) { .o-row--actions { flex-wrap: wrap; } .o-row--actions .o-row__end { width: 100%; box-sizing: border-box; justify-content: flex-start; padding-left: 52px; } }
.o-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.o-toolbar .o-search { flex: 1 1 260px; }
.o-toolbar .o-chips { margin: 0; justify-content: flex-start; }

/* ------------------------------------------------------------ tabs --------
   Pages that are one subject in a few panes (Orderly AI: Setup, Behaviour,
   Errors). Links, not JS: each tab is its own URL. Scrolls sideways on phones. */
.o-tabs { display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.o-tabs::-webkit-scrollbar { display: none; }
.o-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--o-r-pill); font: 600 14px/1 var(--o-font); color: var(--o-text-2) !important; text-decoration: none !important; white-space: nowrap; transition: background var(--o-ease), color var(--o-ease); }
.o-tab:hover { color: var(--o-text) !important; }
.o-tab:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-tab.is-on { background: var(--o-surface); color: var(--o-text) !important; box-shadow: var(--o-elev-1); }

/* ------------------------------------------------------------- related ----
   "Looking for something else?" under a back-office page: one quiet line of
   links to the next places people usually go (OrderlyRelated.php). */
.o-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 40px 0 24px; padding: 18px 0 0; font-family: var(--o-font); }
.o-related__q { font: 600 14px/1.3 var(--o-font); color: var(--o-text-3); }
.o-related__links { display: flex; flex-wrap: wrap; gap: 8px; }
.o-related__link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 16px; border-radius: var(--o-r-pill); background: var(--o-surface); color: var(--o-text) !important; font: 600 14px/1 var(--o-font); text-decoration: none !important; transition: background var(--o-ease); }
.o-related__link:hover { background: var(--o-surface-2); }
.o-related__link:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-related__link svg { width: 16px; height: 16px; color: var(--o-text-3); }
@media (max-width: 575.98px) { .o-related { margin-top: 28px; } .o-related__links { width: 100%; } }

/* --------------------------------------------------------------- pager ----
   Under a list: "Showing 1-20 of 312" left, page buttons right. */
.o-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 4px; }
.o-pager__info { font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-pager__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.o-pager__nav .o-icon-btn { width: 38px; height: 38px; }
.o-pager__nav .o-icon-btn[disabled] { opacity: .35; pointer-events: none; }
.o-pager__nav .o-icon-btn svg { width: 17px; height: 17px; }
.o-pager__page { min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); font: 600 14px/1 var(--o-font); font-variant-numeric: tabular-nums; cursor: pointer; }
.o-pager__page:hover { background: var(--o-surface-2); color: var(--o-text); }
.o-pager__page.is-on { background: var(--o-text); color: var(--o-surface); }
.o-pager__page:focus-visible { outline: none; box-shadow: var(--o-ring); }

/* ------------------------------------------------------- data table ------
   Only for many rows to compare or export (reports, ledgers, usage, audit).
   ONE container owns the radius and clips; header, rows and pager live
   inside it, so corners cannot break. Zebra on surface-2, no lines.
     <div class="o-table"><table>…</table></div>
     td.num / th.num  right-aligned tabular figures
     td.o-table__end  trailing action cell */
.o-table { position: relative; border-radius: var(--o-r); overflow: auto; background: var(--o-surface); -webkit-overflow-scrolling: touch; }
.o-table table { width: 100%; border-collapse: collapse; border: 0; margin: 0; font: 400 14px/1.4 var(--o-font); color: var(--o-text); }
.o-table th { text-align: left; padding: 12px 16px; border: 0; font: 600 12px/1.2 var(--o-font); letter-spacing: .04em; text-transform: uppercase; color: var(--o-text-3); background: var(--o-surface-2); white-space: nowrap; }
.o-table td { padding: 12px 16px; border: 0; vertical-align: middle; background: transparent; }
.o-table tbody tr:nth-child(even) td { background: var(--o-surface-2); }
.o-table tbody tr:hover td { background: var(--o-surface-3); }
.o-table .o-chip:not([data-status]):not([class*="o-chip--"]) { background: var(--o-surface-3); }
.o-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-table__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--o-text-3); }
.o-table__end { text-align: right; white-space: nowrap; }
.o-table code { font: 500 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--o-text-2); background: none; padding: 0; }

/* ------------------------------------------------------- cookie banner ----
   WidgetCookieConsent (an Element Plus notification) takes its colours from
   one admin "theme mode", while Element Plus themes the title with the site.
   With the site in dark mode that was a white title on a white card. It now
   follows the site theme like everything else. */
.ods-store #vue-cookie-consent .el-notification {
  background: var(--o-surface) !important; color: var(--o-text) !important;
  border: 0 !important; border-radius: var(--o-r-lg) !important; box-shadow: var(--o-elev-3) !important;
}
.ods-store #vue-cookie-consent .el-notification__title,
.ods-store #vue-cookie-consent .el-notification .el-content-message,
.ods-store #vue-cookie-consent div.font13,
.ods-store #vue-cookie-consent .el-checkbox__label { color: var(--o-text) !important; }

/* ------------------------------------------------------- sticky columns ----
   The menu page's category list and cart stay in view while the menu
   scrolls, and stop at the end of their own column. These were pinned by
   StickySidebar with position:fixed, which never let go at the end of a
   short menu: the cart ran into the section below, under the map. */
.ods-store .sticky-sidebar, .ods-store .sticky-cart { position: sticky !important; top: var(--o-sticky-top); }
.ods-store .sticky-sidebar > .inner-wrapper-sticky, .ods-store .sticky-cart > .inner-wrapper-sticky {
  position: static !important; transform: none !important;
  top: auto !important; left: auto !important; width: auto !important;
}
@media (max-width: 991.98px) { .ods-store .sticky-sidebar, .ods-store .sticky-cart { position: static !important; } }

@media (prefers-reduced-motion: reduce) {
  .o-btn, .o-search, .o-icon-btn, .o-choice, .o-phone, .o-row, .o-bar__col, .o-switch__track, .o-switch__track::after, .o-more > summary svg { transition: none; }
  .o-banner { animation: none; }
  .o-spinner { animation-duration: 2s; }
  .o-search__dots i, .o-search.is-listening .o-search__mic { animation: none; }
}

/* === clock-in ===
   "Start your shift?" (OrderlyShiftPrompt) and the manager's Clock-in rules
   card (views/employees/list.php). Tokens only: right in light and dark. */
.oclock-prompt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 0 18px; padding: 16px 18px; border-radius: var(--o-r);
  background: var(--o-go-tint); color: var(--o-text); font-family: var(--o-font);
  animation: o-banner-in 160ms cubic-bezier(.16, 1, .3, 1);
}
.oclock-prompt__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--o-surface); color: var(--o-go-deep, var(--o-go));
}
.oclock-prompt__icon svg { width: 22px; height: 22px; stroke-width: 2; }
.oclock-prompt__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oclock-prompt__title { font: 700 17px/1.3 var(--o-font); color: var(--o-text); }
.oclock-prompt__text { font: 400 14px/1.45 var(--o-font); color: var(--o-text-2); }
.oclock-prompt form { margin: 0; display: flex; }
.oclock-prompt .o-btn { min-height: 44px; }
.oclock-prompt__go .o-btn { min-width: 132px; }
.oclock-prompt .o-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.oclock-note { flex: 1 0 100%; margin: 0; font: 500 13px/1.4 var(--o-font); color: var(--o-text-2); }
:root[data-orderly-theme="dark"] .oclock-prompt__icon { background: var(--o-surface-2); color: var(--o-go); }
@media (max-width: 600px) {
  .oclock-prompt { align-items: flex-start; }
  .oclock-prompt__go, .oclock-prompt__later { flex: 1 1 0; }
  .oclock-prompt__go .o-btn, .oclock-prompt__later .o-btn { width: 100%; min-width: 0; }
}

.oclock-rules { margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; }
.oclock-rules__title { margin: 0; font: 700 16px/1.3 var(--o-font) !important; color: var(--o-text) !important; }
.oclock-rules__radius { width: 100%; max-width: 320px; }
.oclock-rules__radius .o-input:not(#o) { width: 100%; max-width: 100%; box-sizing: border-box; }
.oclock-rules__radius .o-help { margin-top: 7px; }
.oclock-rules__pin { background: var(--o-warn-tint); color: var(--o-text); }
.oclock-rules__log { border-top: 1px solid var(--o-surface-3); padding-top: 12px; }
.oclock-rules__log .o-row__title, .oclock-rules__log .o-row__sub { white-space: normal; }
.oclock-rules__log .o-row__avatar { background: var(--o-danger-tint); color: var(--o-danger); }
@media (prefers-reduced-motion: reduce) { .oclock-prompt { animation: none; } }
/* === setup progress === */
/* Header bar (OrderlySetupBar), dashboard card (OrderlySetupCard) and the
   "Scan your menu" page (views/orderlymenuscan). Tokens only. */
.o-setupbar {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 6px 6px 10px 14px; margin: 0 0 16px; overflow: hidden;
  border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); font-family: var(--o-font);
  animation: o-banner-in 160ms cubic-bezier(.16, 1, .3, 1);
}
.o-setupbar__meter { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--o-surface-3); }
.o-setupbar__fill { display: block; height: 100%; width: var(--o-setup-pct, 0%); border-radius: 0 2px 2px 0; background: var(--o-accent); transition: width 400ms cubic-bezier(.16, 1, .3, 1); }
.o-setupbar__text { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font: 400 14px/1.4 var(--o-font); color: var(--o-text-2) !important; text-decoration: none !important; }
.o-setupbar__text strong { font-weight: 600; color: var(--o-text); }
.o-setupbar__text:hover span:last-child { text-decoration: underline; }
.o-setupbar__text:focus-visible { outline: none; box-shadow: var(--o-ring); border-radius: var(--o-r-sm); }
.o-setupbar__sep { color: var(--o-text-3); }
.o-setupbar__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.o-setupbar__actions .o-btn svg, .o-setup__ask svg { width: 16px; height: 16px; }
.o-setupbar__close { flex: 0 0 auto; width: 44px; height: 44px; background: transparent; }
.o-setupbar__close:hover { background: var(--o-surface-3); }
.o-setupbar.is-hiding { opacity: 0; transition: opacity 120ms ease; }
@media (max-width: 575.98px) {
  .o-setupbar { padding-right: 4px; }
  .o-setupbar__text { flex-basis: calc(100% - 60px); }
  .o-setupbar__close { order: 2; }
  .o-setupbar__actions { order: 3; flex: 1 1 100%; padding-right: 10px; }
  .o-setupbar__actions .o-btn { flex: 1 1 auto; white-space: nowrap; padding: 0 10px; }
}

.o-setup { position: relative; overflow: hidden; padding: 20px 20px 12px; margin: 0 0 24px; }
.o-setup__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.o-setup__title { font: 700 20px/1.25 var(--o-font) !important; color: var(--o-text) !important; margin: 0 !important; }
.o-setup__sub { margin: 4px 0 0; font: 400 14px/1.4 var(--o-font); color: var(--o-text-3); }
.o-setup__pct { font: 700 24px/1 var(--o-font); color: var(--o-accent); font-variant-numeric: tabular-nums; }
.o-setup__meter { position: relative; height: 6px; border-radius: var(--o-r-pill); margin: 0 0 12px; overflow: hidden; }
.o-setup__meter .o-setupbar__fill { border-radius: var(--o-r-pill); }
.o-setup__list { margin: 0 -8px; }
.o-setup .o-row__avatar { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-setup .o-row__sub { white-space: normal; }
.o-setup__lead { padding: 16px; margin: 4px 0 12px; border-radius: var(--o-r); background: var(--o-surface-2); }
.o-setup__lead-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.o-setup__lead-title { display: block; font: 600 16px/1.3 var(--o-font); color: var(--o-text); }
.o-setup__lead-sub { display: block; margin-top: 2px; font: 400 14px/1.4 var(--o-font); color: var(--o-text-2); }
.o-setup__ways { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.o-setup__way {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
  min-height: 64px; padding: 12px; border-radius: var(--o-r-sm); background: var(--o-surface); box-shadow: var(--o-elev-1);
  color: var(--o-text) !important; text-decoration: none !important; transition: box-shadow var(--o-ease), transform 120ms ease;
}
.o-setup__way:hover { box-shadow: var(--o-elev-2); }
.o-setup__way:active { transform: scale(.99); }
.o-setup__way:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-setup__way-icon { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-setup__way-icon svg { width: 20px; height: 20px; }
.o-setup__way-title { font: 600 15px/1.3 var(--o-font); color: var(--o-text); }
.o-setup__way-sub { font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
@media (min-width: 900px) {
  .o-setup { padding: 24px 24px 14px; }
  .o-setup__ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-setup__way { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; row-gap: 6px; padding: 16px; }
  .o-setup__way-icon { grid-row: auto; margin-bottom: 4px; }
}
@media (max-width: 575.98px) {
  .o-setup { padding: 16px 16px 8px; }
  .o-setup .o-row { flex-wrap: wrap; }
  .o-setup .o-row__main { flex-basis: calc(100% - 56px); }
  .o-setup .o-row__end { flex: 1 1 100%; justify-content: flex-end; flex-wrap: nowrap; }
  .o-setup .o-row__end .o-btn { white-space: nowrap; }
}

.o-scan [hidden] { display: none !important; }
.o-scan__step { padding: 20px; margin: 0 0 16px; }
.o-scan__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 200px; padding: 24px 16px; margin: 0; border-radius: var(--o-r); cursor: pointer;
  background: var(--o-surface-2); outline: 2px dashed var(--o-surface-3); outline-offset: -8px; transition: background var(--o-ease);
}
.o-scan__drop:hover { background: var(--o-surface-3); }
.o-scan__drop:focus-within { box-shadow: var(--o-ring); }
.o-scan__drop-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-scan__drop-icon svg { width: 26px; height: 26px; }
.o-scan__drop-title { font: 600 17px/1.3 var(--o-font); color: var(--o-text); }
.o-scan__drop-sub { font: 400 14px/1.45 var(--o-font); color: var(--o-text-3); max-width: 420px; }
.o-scan__thumbs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.o-scan__thumbs:empty { display: none; }
.o-scan__thumb { position: relative; aspect-ratio: 1; border-radius: var(--o-r-sm); overflow: hidden; background: var(--o-surface-2); }
.o-scan__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-scan__thumb-remove { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-1); }
.o-scan__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.o-scan__actions .o-btn svg, .o-scan .o-head__actions .o-btn svg { width: 18px; height: 18px; }
.o-scan__busy { display: flex; align-items: center; gap: 12px; font: 500 15px/1.4 var(--o-font); color: var(--o-text-2); }
.o-scan__done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 32px 20px; }
.o-scan__hint { margin: -8px 0 12px; }
.o-scan__item { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; padding: 10px 0; min-height: 0; border-radius: 0; }
.o-scan__item + .o-scan__item { box-shadow: 0 -1px 0 var(--o-surface-3); }
.o-scan__item:hover { background: transparent; }
.o-scan__item .o-scan__name { grid-column: 1; }
.o-scan__item .o-scan__cat { grid-column: 1; }
.o-scan__item .o-scan__price { grid-column: 1; }
.o-scan__item .o-scan__remove { grid-column: 2; grid-row: 1; width: 44px; height: 44px; background: transparent; color: var(--o-text-3); }
.o-scan__item .o-scan__remove:hover { color: var(--o-danger); background: var(--o-danger-tint); }
@media (min-width: 720px) {
  .o-scan__item { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .8fr) 44px; }
  .o-scan__item .o-scan__name, .o-scan__item .o-scan__cat, .o-scan__item .o-scan__price { grid-column: auto; }
  .o-scan__item .o-scan__remove { grid-column: 4; }
}
:root[data-orderly-theme="dark"] .o-setup .o-row__avatar,
:root[data-orderly-theme="dark"] .o-setup__way-icon,
:root[data-orderly-theme="dark"] .o-scan__drop-icon,
:root[data-orderly-theme="dark"] .o-setup .o-btn--soft { color: var(--o-accent) !important; }
@media (prefers-reduced-motion: reduce) {
  .o-setupbar, .o-setupbar__fill, .o-setup__way { animation: none; transition: none; }
}

/* === header search === */
.oh-sr { color: var(--o-text) !important; text-decoration: none !important; }
.oh-sr:hover, .oh-sr:focus-visible { background: var(--o-surface-2); outline: none; }
.oh-sr-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: var(--o-surface-2); color: var(--o-text-2); }
.oh-sr-title { font: 600 13px/1.3 var(--o-font); color: var(--o-text); }
.oh-sr-sub { margin-top: 2px; font: 400 11px/1.3 var(--o-font); color: var(--o-text-3); }
.oh-sr--ai { background: var(--o-accent-tint); }
.oh-sr--ai .oh-sr-ic { background: transparent; color: var(--o-accent-deep); }
.oh-sr--ai:hover { background: var(--o-accent-tint); filter: brightness(1.05); }

/* === order limits (settings screen) === */
.olim { max-width: 900px; }
.olim-card { padding: 8px; margin-bottom: 14px; }
.olim-empty { display: flex; gap: 14px; align-items: center; padding: 18px; color: var(--o-text-2); }
.olim-empty svg { width: 28px; height: 28px; color: var(--o-accent); flex: 0 0 auto; }
.olim-empty strong { display: block; color: var(--o-text); font: 600 15px/1.35 var(--o-font); }
.olim-empty span { font: 400 14px/1.4 var(--o-font); }
.olim-item > summary { list-style: none; cursor: pointer; }
.olim-item > summary::-webkit-details-marker { display: none; }
.olim-item[open] > summary { background: var(--o-surface-2); }
.olim-item .olim-form { padding: 14px 12px 16px; }
.olim-add { padding: 0; }
.olim-add > summary.olim-add-sum { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; list-style: none; cursor: pointer; font: 600 15px/1.3 var(--o-font); color: var(--o-accent-deep); }
.olim-add > summary::-webkit-details-marker { display: none; }
.olim-add > summary svg { width: 18px; height: 18px; }
.olim-add .olim-form { padding: 4px 18px 18px; }
.olim-form { display: flex; flex-direction: column; gap: 16px; }
.olim-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.olim-lab { font: 600 13px/1.2 var(--o-font); color: var(--o-text-3); }
.olim-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .olim-row { grid-template-columns: 1fr 1fr; } .olim-row > :last-child { grid-column: 1 / -1; } }
.olim-num { display: flex; align-items: center; gap: 8px; color: var(--o-text-2); }
.olim-num .o-input { max-width: 110px; }
.olim-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.olim-chip { position: relative; margin: 0; cursor: pointer; }
.olim-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.olim-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-2); font: 600 14px/1 var(--o-font); transition: background var(--o-ease), color var(--o-ease); }
.olim-chip--day span { min-width: 52px; justify-content: center; padding: 0 10px; }
.olim-chip input:checked + span { background: var(--o-accent-solid); color: #fff; } /* ui-lint: allow - text on the accent */
.olim-chip input:focus-visible + span { box-shadow: var(--o-ring); }
.olim-help { margin: 0 0 10px; font: 400 13px/1.45 var(--o-font); color: var(--o-text-3); }
.olim-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.olim input[type="time"], .olim input[type="number"] { color-scheme: light dark; }
.olim-actions .o-btn { min-height: 44px; padding: 0 18px; font: 600 15px/1 var(--o-font) !important; }

/* ------------------------------------------------- customer account menu -- */
/* OrderlyCustomerMenu: the desktop dropdown and the phone drawer. Icons are
   inline SVG in currentColor; the legacy text-indent/PNG rules are beaten here. */
/* As a Bootstrap dropdown the menu is hidden until .show; an unconditional
   display:flex here kept it open from page load and it could never close. */
.o-cmenu { flex-direction: column; gap: 2px; }
.o-cmenu:not(.dropdown-menu), .dropdown-menu.o-cmenu.show { display: flex; }
.dropdown-menu.o-cmenu { min-width: 240px; padding: 6px; border: 0; border-radius: var(--o-r); background: var(--o-surface); box-shadow: var(--o-elev-2); }
ul.top-menu .o-cmenu a.o-cmenu__item, .o-cmenu a.o-cmenu__item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: var(--o-r-sm); text-indent: 0; background: transparent none !important;
  color: var(--o-text) !important; font: 500 15px/1.2 var(--o-font); text-decoration: none !important; white-space: nowrap;
  transition: background var(--o-ease), color var(--o-ease);
}
.o-cmenu a.o-cmenu__item:hover, .o-cmenu a.o-cmenu__item:focus-visible { background: var(--o-surface-2) !important; outline: none; }
.o-cmenu a.o-cmenu__item:focus-visible { box-shadow: var(--o-ring); }
.o-cmenu a.o-cmenu__item.is-current { background: var(--o-accent-tint) !important; font-weight: 600; }
.o-cmenu__icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--o-accent); }
.o-cmenu a.o-cmenu__item--out { margin-top: 6px; border-top: 1px solid var(--o-surface-3); border-radius: 0 0 var(--o-r-sm) var(--o-r-sm); }
.o-cmenu a.o-cmenu__item--out .o-cmenu__icon { color: var(--o-text-3); }
.o-cmenu a.o-cmenu__item--out:hover { color: var(--o-danger) !important; }
.o-cmenu a.o-cmenu__item--out:hover .o-cmenu__icon { color: var(--o-danger); }
.o-cmenu--drawer a.o-cmenu__item { min-height: 48px; font-size: 16px; }
.el-drawer.drawer-menu { max-width: 88vw; background: var(--o-surface) !important; color: var(--o-text); }
@media (prefers-reduced-motion: reduce) { .o-cmenu a.o-cmenu__item { transition: none; } }
/* === locations === ------------------------------------------------------
   Zone editor (views/attributes/zone_create.php): pick a county, tick wards.
   Phone: one column, the "In this zone" panel follows the list. From 992px
   the list and the chosen wards sit side by side and the panel stays in view. */
.o-loc { max-width: 1180px; }
.o-loc .o-input, .o-loc .o-select, .o-loc .o-textarea, .o-loc .o-search { box-sizing: border-box; max-width: 100%; }
.o-loc [hidden] { display: none !important; }
.o-loc__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 600 14px/1.3 var(--o-font); }
.o-loc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 992px) { .o-loc__grid { grid-template-columns: minmax(0, 1fr) 320px; } .o-loc__side { position: sticky; top: 16px; } }
.o-loc__main > .o-card + .o-card { margin-top: 16px; }
.o-loc__more { margin-top: 4px; }
.o-loc__more > .o-textarea:not(#o) { margin: 0 10px 10px; width: calc(100% - 20px); }
.o-loc__err { color: var(--o-danger); }
.o-loc__hint { margin-bottom: 16px; }
.o-loc__grow { flex: 1 1 200px; }
.o-loc__pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 640px) { .o-loc__pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.o-loc__group + .o-loc__group { margin-top: 14px; }
.o-loc__ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding: 0 4px; }
.o-loc__ghead h3 { margin: 0 !important; font: 700 13px/1.3 var(--o-font) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--o-text-3) !important; }
.o-loc__list .o-list { gap: 2px; }
@media (min-width: 1200px) { .o-loc__list .o-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o-loc__ward { min-height: 48px; cursor: pointer; margin: 0; transition: background 120ms ease; }
.o-loc__ward:focus-within { box-shadow: var(--o-ring); }
.o-loc__ward.is-on { background: var(--o-accent-tint); }
.o-loc__tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--o-text-3); position: relative; transition: background 120ms ease, box-shadow 120ms ease; }
.o-loc__ward.is-on .o-loc__tick { background: var(--o-accent); box-shadow: none; }
.o-loc__ward.is-on .o-loc__tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--o-surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.o-loc__chosen { display: flex; flex-wrap: wrap; gap: 6px; max-height: 50vh; overflow: auto; }
.o-loc__chip { padding-right: 4px; }
.o-loc__x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--o-text-3); font: 600 18px/1 var(--o-font); cursor: pointer; }
.o-loc__x:hover { background: var(--o-surface-3); color: var(--o-text); }
.o-loc__x:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-loc__save { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .o-loc__ward, .o-loc__tick { transition: none; } }
/* === recipe book === */
/* The recipe card, editor and standard-recipe library (backoffice/themes/
   classic/views/recipe/*). Built from the shared pieces - .o-head, .o-stat,
   .o-timeline, .o-row - with only the recipe-specific layout here. Tokens
   only, so light and dark both follow --o-*. Phone first; the editor's
   cost summary moves beside the work from 900px (.o-grid--wide). */
.orb-flash { margin: 0 0 14px; }
.orb-size { font: 500 16px/1.3 var(--o-font); color: var(--o-text-3); }
.orb-inline { display: inline-flex; margin: 0; }
.orb-num { text-align: right; font-variant-numeric: tabular-nums; }
.orb-owe { color: var(--o-danger) !important; }
.orb-go { color: var(--o-go-deep) !important; }
.orb-over { color: var(--o-danger); }
.orb-panel { padding: 16px; }
@media (min-width: 900px) { .orb-panel { padding: 20px; } }

/* draft + "start from the standard recipe" banners */
.orb-draft, .orb-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.orb-draft .o-banner__body, .orb-suggest .o-banner__body { flex: 1 1 240px; min-width: 0; }
.orb-draft__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* card: ingredients as rows, amount first so a cook reads down one column */
.orb-ings .o-row { min-height: 52px; padding: 8px 4px; }
.orb-amt { flex: 0 0 auto; min-width: 84px; font: 700 15px/1.3 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.orb-cost { font: 600 14px/1.3 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.orb-notes { margin-top: 16px; padding: 12px 14px; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); font: 400 14px/1.5 var(--o-font); }
.orb-notes p { margin: 4px 0 0; }

/* timeline: a step you can walk away from reads quieter, with a hollow dot */
.orb-steps .o-tl__title { font-weight: 500; line-height: 1.45; }
.o-tl.orb-wait::after { background: var(--o-surface); box-shadow: 0 0 0 2px var(--o-text-3), 0 0 0 4px var(--o-surface); }
.o-tl.orb-wait .o-tl__title { color: var(--o-text-2) !important; }
.o-tl__meta .o-chip { display: inline-flex; align-items: center; gap: 4px; }

/* editor */
.orb-fields { display: grid; gap: 12px 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .orb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .orb-fields--4 { grid-template-columns: 2fr 1.5fr 1fr auto; align-items: center; } }
.orb-fields .o-field { margin: 0; }
.orb-unit-wrap { position: relative; display: flex; align-items: center; }
.orb-unit-wrap .o-input { padding-right: 52px; }
.orb-unit { position: absolute; right: 12px; font: 500 13px/1 var(--o-font); color: var(--o-text-3); pointer-events: none; }
.orb-ask .orb-unit, .orb-ask .o-input { position: static; }
.orb-pair { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }

.orb-line {
  display: grid; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--o-surface-3);
  grid-template-columns: minmax(0, 1fr) 96px 44px;
  grid-template-areas: "ing ing del" "qty unit unit" "loss cost cost" "more more more";
}
.orb-line > select:first-child { grid-area: ing; }
.orb-line > [name$="[qty]"] { grid-area: qty; }
.orb-line > [name$="[unit]"] { grid-area: unit; }
.orb-line > .orb-unit-wrap { grid-area: loss; }
.orb-line > .orb-lc { grid-area: cost; font: 600 14px/1.2 var(--o-font); color: var(--o-text-2); }
.orb-line > .orb-del { grid-area: del; }
.orb-line__more { grid-area: more; display: flex; flex-direction: column; gap: 6px; }
.orb-line__more:empty, .orb-line__more:not(:has(> :not([hidden]))) { display: none; }
.orb-line--head { display: none; }
@media (min-width: 760px) {
  .orb-line { grid-template-columns: minmax(0, 2.2fr) 92px 112px 92px 96px 44px; grid-template-areas: "ing qty unit loss cost del" "more more more more more more"; }
  .orb-line--head { display: grid; padding: 0 0 6px; border-bottom: 0; font: 600 12px/1.2 var(--o-font); color: var(--o-text-3); text-transform: uppercase; letter-spacing: .03em; }
  .orb-line--head > span:nth-child(1) { grid-area: ing; } .orb-line--head > span:nth-child(2) { grid-area: qty; }
  .orb-line--head > span:nth-child(3) { grid-area: unit; } .orb-line--head > span:nth-child(4) { grid-area: loss; }
  .orb-line--head > span:nth-child(5) { grid-area: cost; }
}
.orb-hint { font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); }
.orb-hint::before { content: "\2192\00a0"; color: var(--o-accent); }
.orb-ask, .orb-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 500 13px/1.35 var(--o-font); color: var(--o-text-2); }
.orb-ask { padding: 8px 10px; border-radius: var(--o-r-sm); background: var(--o-warn-tint); color: var(--o-text); }
.orb-ask[hidden], .orb-ref[hidden], .orb-hint[hidden] { display: none; }
.orb-ask .o-input, .orb-ref .o-input { width: 110px; min-height: 40px; }

.orb-pantry { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.orb-pantry .o-chips { justify-content: flex-start; margin: 0; }
.orb-chip.is-on { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.orb-new-ing { margin-top: 12px; }

.orb-sub { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; gap: 8px; align-items: center; padding: 8px 0; }
@media (max-width: 480px) { .orb-sub { grid-template-columns: minmax(0, 1fr) 44px; } .orb-sub > .orb-unit-wrap { grid-column: 1; } }

/* method editor: the same timeline, each step a small form */
.orb-steps-edit .o-tl { grid-template-columns: 52px minmax(0, 1fr); }
.orb-steps-edit .o-tl::before { left: 62px; }
.orb-steps-edit .o-tl::after { left: 58px; }
.orb-steps-edit .o-tl__time { font-size: 13px; color: var(--o-text-3); }
.orb-step__text:not(#o) { min-height: 64px !important; resize: vertical; }
/* never rely on the page's global box-sizing: a full-width field must stay inside its card */
.orb-editor .o-input:not(#o), .orb-editor .o-textarea:not(#o), .orb-editor .o-select:not(#o) { box-sizing: border-box; min-width: 0; }
/* phones: the clock column costs a third of the width - put it above the step instead */
@media (max-width: 560px) {
  .orb-steps-edit .o-tl { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; border-top: 1px solid var(--o-surface-3); }
  .orb-steps-edit .o-tl::before, .orb-steps-edit .o-tl::after { display: none; }
  .orb-steps-edit .o-tl__body { padding-left: 0; }
  .orb-amt { min-width: 64px; }
}
.orb-step__meta { display: grid; gap: 8px; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.orb-step__meta > select, .orb-step__meta > [data-k="equipment"] { grid-column: span 2; }
.orb-step__tools { grid-column: span 2; display: flex; gap: 4px; justify-content: flex-end; }
@media (min-width: 760px) {
  .orb-step__meta { grid-template-columns: 110px auto 140px minmax(0, 1fr) auto; }
  .orb-step__meta > select, .orb-step__meta > [data-k="equipment"], .orb-step__tools { grid-column: auto; }
}
.orb-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font: 500 14px/1.2 var(--o-font); color: var(--o-text-2); cursor: pointer; }
.orb-check input { width: 18px; height: 18px; accent-color: var(--o-accent); }
.orb-notes-field { margin-top: 16px; }

/* cost summary: beside the work on wide screens, sticky so it stays in view */
.orb-side { min-width: 0; }
@media (min-width: 900px) { .orb-summary { position: sticky; top: var(--o-sticky-top, 16px); } }
.orb-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font: 400 14px/1.3 var(--o-font); color: var(--o-text-2); }
.orb-sum strong { font: 700 16px/1.2 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.orb-sum--big strong { font-size: 24px; }
.orb-sum + .orb-sum { border-top: 1px solid var(--o-surface-3); }
.orb-target-row { display: flex; align-items: center; gap: 8px; }
.orb-target:not(#o) { display: inline-block; width: 76px !important; min-height: 40px !important; padding: 0 10px !important; text-align: center; }
.orb-summary .o-btn--block { margin-top: 12px; }
.orb-side-link { display: block; margin-top: 10px; text-align: center; }
.orb-remove { margin: 4px 0 24px; }
.orb-danger { color: var(--o-danger) !important; }

/* library */
.orb-lib-group { margin-bottom: 14px; }
.orb-lib .o-more > summary.o-row { padding: 10px 8px; }
.orb-lib.is-best .o-more > summary.o-row { background: var(--o-accent-tint); }
.orb-lib__body { padding: 4px 8px 16px; }
.orb-lib__cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .orb-lib__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.orb-lib__ings, .orb-lib__steps { margin: 0; padding-left: 18px; font: 400 14px/1.55 var(--o-font); color: var(--o-text-2); }
.orb-lib__ings { list-style: none; padding-left: 0; }
.orb-lib__ings .orb-amt { display: inline-block; min-width: 72px; font-size: 14px; }
.orb-lib__steps small, .orb-lib__ings small { color: var(--o-text-3); }
.orb-fork { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 640px) { .orb-fork { grid-template-columns: auto minmax(0, 1fr) auto; } .orb-fork .o-label { margin: 0; } }

@media print {
  .orb-tiles, .orb-draft, .orb-suggest { display: none !important; }
  .orb-card { grid-template-columns: 1fr 1fr !important; }
}
@media (prefers-reduced-motion: reduce) { .orb-chip, .orb-lib summary { transition: none; } }

/* ---------- Storefront filters (restaurant feed) ---------- */
.o-filter { display: flex; flex-direction: column; font-family: var(--o-font); color: var(--o-text); }
.o-fgroup { border-bottom: 1px solid var(--o-surface-3); padding: 4px 0; }
.o-fgroup > summary, .o-fmore > summary { list-style: none; cursor: pointer; }
.o-fgroup > summary::-webkit-details-marker, .o-fmore > summary::-webkit-details-marker { display: none; }
.o-fgroup > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font: 700 16px/1.3 var(--o-font); color: var(--o-text); border-radius: var(--o-r-sm); }
.o-fgroup > summary::after { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; color: var(--o-text-3); transition: transform var(--o-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.o-fgroup[open] > summary::after { transform: rotate(180deg); }
.o-fgroup > summary:focus-visible, .o-fmore > summary:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-fgroup__body { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 2px 0 12px; }
.o-fgroup__body--2col { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.o-fgroup__label { margin: 0 0 8px; font: 500 14px/1.3 var(--o-font); color: var(--o-text-2); }
.o-fgroup__label b { color: var(--o-text); }

.o-fopt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 6px; border-radius: var(--o-r-sm); cursor: pointer; transition: background var(--o-ease); }
.o-fopt:hover { background: var(--o-surface-2); }
.o-fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-fopt__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--o-text-3); background: transparent; display: grid; place-items: center; transition: background var(--o-ease), border-color var(--o-ease); }
.o-fopt__mark--radio { border-radius: 50%; }
.o-fopt__mark::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #fff; transform: scale(0); transition: transform var(--o-ease); } /* ui-lint: allow — mark on accent fill */
.o-fopt__mark--radio::after { border-radius: 50%; }
.o-fopt input:checked + .o-fopt__mark { background: var(--o-accent-solid); border-color: var(--o-accent-solid); }
.o-fopt input:checked + .o-fopt__mark::after { transform: scale(1); }
.o-fopt input:focus-visible + .o-fopt__mark { box-shadow: var(--o-ring); }
.o-fopt__text { min-width: 0; font: 500 15px/1.3 var(--o-font); color: var(--o-text); overflow-wrap: anywhere; }

.o-fseg { display: flex; gap: 6px; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.o-fseg label { position: relative; flex: 1 1 0; margin: 0; min-height: 40px; display: grid; place-items: center; border-radius: var(--o-r-pill); font: 600 15px/1 var(--o-font); color: var(--o-text-2); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-fseg label:hover { color: var(--o-text); }
.o-fseg label.is-on { background: var(--o-surface); color: var(--o-accent-deep); box-shadow: var(--o-elev-1); }
.o-fseg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-fseg label:focus-within { box-shadow: var(--o-ring); }
:root[data-orderly-theme="dark"] .o-fseg label.is-on { color: var(--o-accent); }

/* :not(#o) lifts specificity over the legacy `input:not([type=...])` !important rules */
input.o-range:not(#o), input.o-range:not(#o):focus { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; min-height: 0; background: transparent !important; margin: 0; padding: 0 !important; border: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.o-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: var(--o-text-3); opacity: .45; }
.o-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--o-text-3); opacity: .45; }
.o-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--o-accent-solid); border: 3px solid var(--o-surface); box-shadow: var(--o-elev-1); }
.o-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--o-accent-solid); border: 3px solid var(--o-surface); }
.o-range:focus-visible { outline: none; }
.o-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--o-ring); }

.o-fmore > summary { display: inline-flex; min-height: 44px; align-items: center; padding: 0 6px; font: 600 14px/1 var(--o-font); color: var(--o-accent-deep); border-radius: var(--o-r-sm); }
:root[data-orderly-theme="dark"] .o-fmore > summary { color: var(--o-accent); }
.o-fmore__less, .o-fmore[open] .o-fmore__more { display: none; }
.o-fmore[open] .o-fmore__less { display: inline; }

.o-nodeliver { max-width: 460px; padding: 28px 4px; font-family: var(--o-font); }
.o-nodeliver .o-ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); margin-bottom: 14px; box-sizing: content-box; }
:root[data-orderly-theme="dark"] .o-nodeliver .o-ico { color: var(--o-accent); }
.o-nodeliver h3 { margin: 0 0 8px; font: 700 24px/1.2 var(--o-font); color: var(--o-text); }
.o-nodeliver p { margin: 0 0 18px; font: 400 15px/1.5 var(--o-font); color: var(--o-text-2); }

@media (prefers-reduced-motion: reduce) { .o-fopt, .o-fopt__mark, .o-fopt__mark::after, .o-fseg label, .o-fgroup > summary::after { transition: none; } }

/* ---------- Storefront: region note + join-us card ---------- */
.o-region { display: flex; align-items: center; gap: 16px; max-width: 1140px; margin: 24px auto; padding: 18px 20px; border-radius: var(--o-r-lg); background: var(--o-surface-2); font-family: var(--o-font); }
.o-region .o-ico { flex: 0 0 auto; width: 24px; height: 24px; padding: 10px; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); box-sizing: content-box; }
:root[data-orderly-theme="dark"] .o-region .o-ico, :root[data-orderly-theme="dark"] .o-join__k { color: var(--o-accent); }
.o-region__k { margin: 0; font: 600 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-region__place { margin: 2px 0; font: 700 20px/1.25 var(--o-font); color: var(--o-text); }
.o-region__sub { margin: 0; font: 400 14px/1.4 var(--o-font); color: var(--o-text-2); }

.o-join { padding: 8px 16px 32px; font-family: var(--o-font); }
.o-join__card { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--o-r-lg); background: var(--o-accent-tint); }
.o-join__k { margin: 0 0 4px; font: 600 13px/1.3 var(--o-font); color: var(--o-accent-deep); }
.o-join__title { margin: 0 0 6px; font: 700 clamp(22px, 3vw, 30px)/1.2 var(--o-font); color: var(--o-text); }
.o-join__sub { margin: 0; font: 400 15px/1.5 var(--o-font); color: var(--o-text-2); }
@media (max-width: 575px) { .o-join__card { padding: 22px 20px; } .o-join__card .o-btn { width: 100%; } }

/* ---------- Storefront footer ---------- */
.sub-footer.o-foot { padding: 40px 0 24px; background: var(--o-surface-2) !important; border-top: 0 !important; font-family: var(--o-font); color: var(--o-text-2); }
.o-foot .row:first-child { align-items: center; row-gap: 20px; }
.o-foot .footer-logo img { max-height: 40px; padding: 4px 10px; border-radius: var(--o-r-sm); background: #fff; } /* ui-lint: allow — the raster logo needs a light plate, as in the header */
.o-foot__social { gap: 10px; }
.o-foot__social a { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--o-surface) !important; color: var(--o-text-2) !important; box-shadow: var(--o-elev-1); transition: color var(--o-ease), box-shadow var(--o-ease); }
.o-foot__social a:hover { color: var(--o-accent-deep) !important; box-shadow: var(--o-elev-2); }
:root[data-orderly-theme="dark"] .o-foot__social a:hover { color: var(--o-accent) !important; }
.o-foot__social a:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-foot__social svg { width: 20px; height: 20px; }
.o-foot .sub-footer-nav { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--o-surface-3); }
.o-foot .sub-footer-nav h6 { margin: 0 0 12px; font: 700 14px/1.3 var(--o-font); color: var(--o-text); }
.o-foot .sub-footer-nav ul { margin: 0; padding: 0; }
.o-foot .sub-footer-nav a { display: inline-flex; align-items: center; min-height: 36px; font: 500 15px/1.3 var(--o-font) !important; color: var(--o-text-2) !important; text-decoration: none !important; transition: color var(--o-ease); }
.o-foot .sub-footer-nav a:hover { color: var(--o-accent-deep) !important; }
:root[data-orderly-theme="dark"] .o-foot .sub-footer-nav a:hover { color: var(--o-accent) !important; }

.o-foot-bar { background: var(--o-surface-2); border-top: 1px solid var(--o-surface-3); padding: 16px 0 20px; font-family: var(--o-font); }
.o-foot-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.o-foot-bar p { margin: 0; font: 400 14px/1.4 var(--o-font); color: var(--o-text-3); }
.o-foot-bar a { color: var(--o-accent-deep); text-decoration: none; font-weight: 600; }
:root[data-orderly-theme="dark"] .o-foot-bar a { color: var(--o-accent); }
.o-foot-bar a:hover { text-decoration: underline; }
.o-foot-bar__apps { display: flex; align-items: center; gap: 10px; }
.o-foot-bar__apps a { display: block; border-radius: 8px; line-height: 0; }
.o-foot-bar__apps a:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-foot-bar__apps img { height: 40px; width: auto; border-radius: 8px; }
@media (max-width: 575px) { .o-foot-bar__in { justify-content: center; text-align: center; } .o-foot-bar__apps { order: -1; width: 100%; justify-content: center; } }

/* ---------- Sign-in / sign-up card ---------- */
:root[data-orderly-theme="dark"] .o-link { color: var(--o-accent) !important; }
.o-authcard { width: min(440px, calc(100% - 32px)); margin: 32px auto 48px; padding: 28px 24px; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-1); font-family: var(--o-font); color: var(--o-text); }
.o-auth__title { margin: 0 0 22px; text-align: center; font: 700 26px/1.2 var(--o-font); color: var(--o-text); }
.o-auth .o-field { margin: 0 0 16px; }
.o-auth__pass { position: relative; }
.o-auth__pass .o-input { padding-right: 52px; }
.o-auth__eye { position: absolute; right: 4px; bottom: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--o-r-pill); background: none; color: var(--o-text-3); cursor: pointer; }
.o-auth__eye:hover { color: var(--o-text); }
.o-auth__eye:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-auth__eye svg { width: 20px; height: 20px; }
.o-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.o-auth__row .o-fopt { padding-left: 0; }
.o-auth__social { margin-top: 22px; text-align: center; }
.o-auth__social .orderly-auth-divider { margin-bottom: 14px; }
.o-auth__social > * + * { margin-top: 10px; }
.o-auth__alt { margin-top: 20px; text-align: center; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-auth__alt .o-link { margin-top: 2px; }
.o-auth .o-alert { margin-bottom: 16px; }

/* ---------- Customer account screens ---------- */
.o-acct-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; font-family: var(--o-font); }
.o-acct-head__title { margin: 0; font: 700 26px/1.2 var(--o-font); color: var(--o-text); }
.o-acct-head__sub { margin: 4px 0 0; font: 400 15px/1.4 var(--o-font); color: var(--o-text-2); }
.o-acct-list { display: grid; gap: 12px; font-family: var(--o-font); }
.o-acct-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--o-r); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-acct-card__icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .o-acct-card__icon { color: var(--o-accent); }
.o-acct-card__icon .o-ico { width: 22px; height: 22px; }
.o-acct-card__main { flex: 1 1 auto; min-width: 0; }
.o-acct-card__title { margin: 0; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-acct-card__sub { margin: 2px 0 0; font: 400 14px/1.4 var(--o-font); color: var(--o-text-2); overflow-wrap: anywhere; }
.o-acct-card__end { display: flex; gap: 8px; flex: 0 0 auto; }
.o-acct-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; border-radius: var(--o-r-lg); background: var(--o-surface-2); color: var(--o-text-2); }
.o-acct-empty .o-ico { width: 40px; height: 40px; color: var(--o-text-3); }
.o-acct-empty p { margin: 0; font: 500 16px/1.4 var(--o-font); }
@media (max-width: 575px) { .o-acct-card { flex-wrap: wrap; } .o-acct-card__end { width: 100%; } .o-acct-card__end .o-btn { flex: 1 1 0; } }
.o-btn .o-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.o-authcard, .login-container.o-authcard { min-height: 0 !important; }

/* ---------- Clickable stat tiles: every number leads to its source ---------- */
a.o-stat--link { color: inherit; text-decoration: none !important; cursor: pointer; transition: box-shadow var(--o-ease), transform var(--o-ease); }
a.o-stat--link:hover { box-shadow: var(--o-elev-2); transform: translateY(-1px); }
a.o-stat--link:active { transform: none; }
a.o-stat--link:focus-visible { outline: none; box-shadow: var(--o-ring); }
a.o-stat--link .o-stat__note::after { content: " \203A"; color: var(--o-accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { a.o-stat--link { transition: none; } a.o-stat--link:hover { transform: none; } }

/* ---------- Notices: what needs the owner (home + dashboard) ---------- */
.o-notices__head { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--o-font); color: var(--o-text-2); }
.o-notices__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--o-go); }
.o-notices__dot.is-warn { background: var(--o-accent); }
.o-notices__grid { display: flex; flex-wrap: wrap; gap: 10px; }
a.o-notice { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-height: 64px; padding: 12px 16px; border-radius: var(--o-r); background: var(--o-surface); box-shadow: var(--o-elev-1); color: var(--o-text) !important; text-decoration: none !important; transition: box-shadow var(--o-ease), transform var(--o-ease); }
a.o-notice:hover { box-shadow: var(--o-elev-2); transform: translateY(-1px); }
a.o-notice:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-notice__n { flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: var(--o-accent-tint); color: var(--o-accent-deep); font: 700 18px/1 var(--o-font); font-variant-numeric: tabular-nums; }
:root[data-orderly-theme="dark"] .o-notice__n { color: var(--o-accent); }
.o-notice__t { font: 500 14.5px/1.3 var(--o-font); color: var(--o-text); }
.o-pending { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--o-r); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-pending__text { font: 500 14.5px/1.4 var(--o-font); color: var(--o-text); }
.o-pending__btns { display: flex; gap: 8px; }
.o-notices__sub { margin: 0; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }


/* Dashboard tiles that are links */
a.o-link-card { display: flex; color: inherit !important; text-decoration: none !important; cursor: pointer; transition: box-shadow var(--o-ease), transform var(--o-ease); }
a.o-link-card:hover { box-shadow: var(--o-elev-2); transform: translateY(-1px); }
a.o-link-card:focus-visible { outline: none; box-shadow: var(--o-ring); }
@media (prefers-reduced-motion: reduce) { a.o-link-card { transition: none; } a.o-link-card:hover { transform: none; } }

/* ---------- Discover on a map ---------- */
.o-discover { display: grid; grid-template-columns: 400px minmax(0, 1fr); height: calc(100vh - 88px); min-height: 520px; font-family: var(--o-font); }
.o-discover__panel { display: flex; flex-direction: column; min-height: 0; padding: 20px 20px 0; background: var(--o-bg); }
.o-discover__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.o-discover__title { margin: 0; font: 700 24px/1.2 var(--o-font); color: var(--o-text); }
.o-discover__tools { display: flex; gap: 8px; margin-bottom: 12px; }
.o-discover__search { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 14px; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-3); }
.o-discover__search:focus-within { box-shadow: var(--o-ring); }
.o-discover__search .o-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.o-discover__search input:not(#o) { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; color: var(--o-text); font: 500 15px/1.2 var(--o-font); }
.o-discover__tools .o-btn .o-ico { width: 18px; height: 18px; }
.o-discover__list { flex: 1 1 auto; margin: 0 -8px; padding: 0 8px 20px; overflow-y: auto; list-style: none; }
.o-discover__empty { margin: 16px 0; color: var(--o-text-2); font: 400 15px/1.4 var(--o-font); }
.o-disc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px; border: 0; border-radius: var(--o-r); background: transparent; text-align: left; cursor: pointer; transition: background var(--o-ease); }
.o-disc:hover { background: var(--o-surface-2); }
.o-disc:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-disc img { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--o-surface-2); }
.o-disc__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-disc__t b { font: 600 15px/1.25 var(--o-font); color: var(--o-text); }
.o-disc__t small { font: 400 13px/1.3 var(--o-font); color: var(--o-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-disc__m { flex: 0 0 auto; font: 600 13px/1 var(--o-font); color: var(--o-text-2); }
.o-discover__map { position: relative; min-height: 360px; z-index: 0; background: var(--o-surface-2); }
/* Just the restaurant logo floating on the map: no orange ring behind it (it read as the Orderly O). */
.o-pin .o-pin__dot { display: block; width: 44px; height: 44px; border-radius: 50%; padding: 0; background: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); box-sizing: border-box; transition: transform var(--o-ease); }
.o-pin:hover .o-pin__dot { transform: scale(1.1); }
.o-pin .o-pin__dot img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; } /* ui-lint: allow — logo plate */
.o-pin.is-closed .o-pin__dot img { filter: grayscale(1); opacity: .8; }
.o-discover .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--o-r); background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-3); }
.o-discover .leaflet-popup-content { margin: 0; }
.o-discover .leaflet-popup-tip { background: var(--o-surface); }
.o-pop { display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--o-text) !important; text-decoration: none !important; font-family: var(--o-font); }
.o-pop img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.o-pop__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-pop__t b { font: 700 15px/1.25 var(--o-font); }
.o-pop__t small { font: 400 13px/1.3 var(--o-font); color: var(--o-text-2); }
.o-pop__go { flex: 0 0 auto; padding: 8px 14px; border-radius: var(--o-r-pill); background: var(--o-accent-solid); color: #fff; font: 600 13px/1 var(--o-font); } /* ui-lint: allow — label on accent fill */
@media (max-width: 767px) {
  .o-discover { grid-template-columns: minmax(0, 1fr); grid-template-rows: 46vh minmax(0, 1fr); height: calc(100vh - 72px); }
  .o-discover__map { order: -1; min-height: 0; }
  .o-discover__panel { padding: 16px 16px 0; }
  .o-discover__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .o-disc, .o-pin .o-pin__dot { transition: none; } .o-pin:hover .o-pin__dot { transform: none; } }
.o-discover__tools .o-btn { white-space: nowrap; flex: 0 0 auto; }
/* OpenStreetMap tiles are light; tint them for the dark theme */
:root[data-orderly-theme="dark"] .o-discover .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.7); }
.o-discover .leaflet-control-attribution { background: color-mix(in srgb, var(--o-surface) 80%, transparent); color: var(--o-text-3); }
.o-discover .leaflet-control-attribution a { color: var(--o-text-2); }
.o-auth__lead { margin: -12px 0 20px; text-align: center; font: 400 15px/1.5 var(--o-font); color: var(--o-text-2); }
.o-auth__terms { margin: 0 0 16px; font: 400 13px/1.5 var(--o-font); color: var(--o-text-3); }
.o-save { margin: 4px 0 18px; border-radius: var(--o-r); background: var(--o-surface-2); padding: 0 16px; }
.o-save > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font: 600 15px/1.3 var(--o-font); color: var(--o-text); }
.o-save > summary::-webkit-details-marker { display: none; }
.o-save > summary span { font: 500 13px/1 var(--o-font); color: var(--o-text-3); }
.o-save[open] { padding-bottom: 4px; }
.o-save .o-field { margin-bottom: 14px; }

/* Checkout: the optional things fold away; the order is name, address, pay */
.o-extras { margin: 12px 0; border-radius: var(--o-r); background: var(--o-surface-2); }
.o-extras > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; font: 600 15px/1.3 var(--o-font); color: var(--o-text); }
.o-extras > summary::-webkit-details-marker { display: none; }
.o-extras > summary::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; opacity: .6; transition: transform var(--o-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.o-extras[open] > summary::after { transform: rotate(180deg); }
.o-extras__hint { margin-left: auto; font: 500 13px/1 var(--o-font); color: var(--o-text-3); }
.o-extras__body { padding: 4px 12px 12px; }
.o-extras > summary:focus-visible { outline: none; box-shadow: var(--o-ring); border-radius: var(--o-r); }
/* the sign-in block was a grid sized by the 320px Google button, pushing the form past the card on phones */
.o-authcard #vue-login, .o-authcard #vue-guest-register, .o-authcard .forms-center { display: block; width: 100%; min-width: 0; }
.o-authcard .o-auth__social > *, .o-authcard .fullwidth-child { max-width: 100%; overflow: hidden; }
.o-authcard .login-container, .login-container.o-authcard { margin-left: auto !important; margin-right: auto !important; }

/* ---------- Restaurant finder page ---------- */
.o-finder__intro { padding-top: 24px; padding-bottom: 8px; font-family: var(--o-font); }
.o-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 14px/1.4 var(--o-font); color: var(--o-text-3); }
.o-crumbs a { color: var(--o-text-2); text-decoration: none; }
.o-crumbs a:hover { color: var(--o-accent-deep); text-decoration: underline; }
.o-crumbs b { color: var(--o-text); font-weight: 600; }
.o-finder__h1 { margin: 0 0 8px; font: 700 clamp(26px, 4vw, 36px)/1.15 var(--o-font); color: var(--o-text); }
.o-finder__lead { margin: 0 0 16px; max-width: 62ch; font: 400 16px/1.55 var(--o-font); color: var(--o-text-2); }
.o-finder__areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.o-finder__areas .o-chip small { margin-left: 4px; opacity: .7; }
.o-finder__more { padding-top: 24px; padding-bottom: 40px; }
.o-finder__more h2 { margin: 0 0 12px; font: 700 18px/1.3 var(--o-font); color: var(--o-text); }
.o-discover--page { height: min(720px, calc(100vh - 140px)); min-height: 480px; margin-bottom: 8px; }
.o-discover--page .o-discover__panel { padding-top: 8px; }
.o-disc__new { margin-left: 6px; padding: 2px 8px; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 11px/1.4 var(--o-font); font-style: normal; }
:root[data-orderly-theme="dark"] .o-disc__new { color: var(--o-accent); }
a.o-disc { text-decoration: none !important; color: inherit; }
.o-discover__list li[hidden] { display: none; }
@media (max-width: 767px) { .o-discover--page { grid-template-rows: 40vh minmax(0, 1fr); height: auto; min-height: 0; } .o-discover--page .o-discover__list { max-height: none; } }

/* ---------- Homepage: meals, popular near you, brands ---------- */
.o-home { padding-top: 8px; padding-bottom: 8px; font-family: var(--o-font); }
.o-home__sec { margin: 0 0 32px; }
.o-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.o-home__head h2 { margin: 0; font: 700 22px/1.25 var(--o-font); color: var(--o-text); }
.o-home__hint { margin: -4px 0 12px; font: 400 14px/1.45 var(--o-font); color: var(--o-text-3); }
.o-meals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.o-meal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text) !important; text-decoration: none !important; text-align: center; transition: background var(--o-ease), transform var(--o-ease); }
.o-meal:hover { background: var(--o-accent-tint); transform: translateY(-1px); }
.o-meal:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-meal__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--o-surface); color: var(--o-accent-deep); box-shadow: var(--o-elev-1); }
:root[data-orderly-theme="dark"] .o-meal__ico { color: var(--o-accent); }
.o-meal__ico svg { width: 24px; height: 24px; }
.o-meal__t { font: 600 14px/1.25 var(--o-font); }
.o-hrow { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; margin: 0 -2px; scrollbar-width: thin; }
.o-rcard { flex: 0 0 232px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--o-r); background: var(--o-surface); box-shadow: var(--o-elev-1); overflow: hidden; color: var(--o-text) !important; text-decoration: none !important; transition: box-shadow var(--o-ease), transform var(--o-ease); }
.o-rcard:hover { box-shadow: var(--o-elev-2); transform: translateY(-2px); }
.o-rcard:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-rcard__img { display: block; height: 120px; background: var(--o-surface-2); }
.o-rcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-rcard__init { width: 100%; height: 100%; display: grid; place-items: center; font: 700 44px/1 var(--o-font); color: var(--o-accent-deep); background: var(--o-accent-tint); }
:root[data-orderly-theme="dark"] .o-rcard__init { color: var(--o-accent); }
.o-rcard__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.o-rcard__name { font: 700 16px/1.3 var(--o-font); }
.o-rcard__sub { font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-rcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font: 500 13px/1.3 var(--o-font); color: var(--o-text-2); }
.o-rcard__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--o-text-3); }
.o-rcard__rate { color: var(--o-text); font-weight: 700; } .o-rcard__rate small { font-weight: 400; color: var(--o-text-3); }
.o-rcard__new { padding: 2px 8px; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font-weight: 600; }
:root[data-orderly-theme="dark"] .o-rcard__new { color: var(--o-accent); }
.o-rcard__open { color: var(--o-go-deep); } :root[data-orderly-theme="dark"] .o-rcard__open { color: var(--o-go); }
.o-rcard__closed { color: var(--o-text-3); }
@media (max-width: 991px) { .o-meals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .o-meals { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; }
  .o-meals li { flex: 0 0 96px; }
  .o-rcard { flex-basis: 200px; }
  .o-home__head h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .o-meal, .o-rcard { transition: none; } .o-meal:hover, .o-rcard:hover { transform: none; } }

/* ---------- Food illustrations (OrderlyArt): soft, alive, never loud ---------- */
.oa { display: block; width: 100%; height: 100%; overflow: visible; }
.oa * { transform-box: fill-box; }
.oa-bob { animation: oa-bob 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.oa-steam { animation: oa-steam 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.oa-tw { animation: oa-tw 2.4s ease-in-out infinite; }
.oa-d1 { animation-delay: .5s; } .oa-d2 { animation-delay: 1.1s; }
.oa-wig { animation: oa-wig 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.oa-flame path { animation: oa-flame .9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.oa-flame path:nth-child(2) { animation-delay: .25s; } .oa-flame path:nth-child(3) { animation-delay: .5s; }
.oa-bub { animation: oa-bub 2.6s ease-in infinite; }
.oa-ride { animation: oa-ride 1.1s ease-in-out infinite alternate; }
.oa-lines { animation: oa-lines .9s linear infinite; }
.oa-wheel { animation: oa-spin .7s linear infinite; transform-origin: 50% 50%; }
@keyframes oa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes oa-steam { 0% { opacity: 0; transform: translateY(8px) scaleY(.8); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-12px) scaleY(1.1); } }
@keyframes oa-tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes oa-wig { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes oa-flame { from { transform: scaleY(.85) scaleX(.95); } to { transform: scaleY(1.12) scaleX(1.04); } }
@keyframes oa-bub { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes oa-ride { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes oa-lines { from { transform: translateX(8px); opacity: 0; } 50% { opacity: .8; } to { transform: translateX(-6px); opacity: 0; } }
@keyframes oa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oa *, .oa { animation: none !important; } }

.o-meal__ico { width: 76px !important; height: 76px !important; border-radius: 22px !important; padding: 8px; background: var(--o-surface) !important; box-shadow: var(--o-elev-1); }
.o-meal:hover .oa-bob { animation-duration: 1.2s; }
.o-meal__ico svg.oa { width: 100% !important; height: 100% !important; }
.o-meal { padding: 14px 8px 12px; }

/* ---------- Homepage offers strip ---------- */
.o-offers { padding-top: 16px; padding-bottom: 4px; font-family: var(--o-font); }
.o-offers__row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 14px; margin: 0 -2px; scrollbar-width: none; }
.o-offers__row::-webkit-scrollbar { display: none; }
.o-offer { position: relative; flex: 0 0 min(440px, 86%); scroll-snap-align: start; display: flex; align-items: center; gap: 8px; min-height: 188px; padding: 22px 8px 22px 24px; border-radius: 24px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #e06a1a 0%, #b84508 100%); box-shadow: var(--o-elev-2); } /* ui-lint: allow — text on a saturated brand gradient */
.o-offer--green { background: linear-gradient(135deg, #1f9d6a 0%, #0f6b47 100%); }
.o-offer--ink { background: linear-gradient(135deg, #2a2523 0%, #121010 100%); }
.o-offer--sand { background: linear-gradient(135deg, #f4c27a 0%, #e0903a 100%); color: #3a1a05; } /* ui-lint: allow — text on a light brand gradient */
.o-offer::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgb(255 255 255 / .09); pointer-events: none; }
.o-offer__text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.o-offer__badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .22); font: 700 11px/1.4 var(--o-font); letter-spacing: .04em; text-transform: uppercase; }
.o-offer__title { margin: 0; font: 800 clamp(20px, 2.4vw, 25px)/1.15 var(--o-font); letter-spacing: -.01em; color: inherit; }
.o-offer__sub { margin: 0; font: 500 14px/1.4 var(--o-font); opacity: .92; }
.o-offer__act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.o-offer__code { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; border: 1.5px dashed rgb(255 255 255 / .7); border-radius: 12px; background: rgb(255 255 255 / .12); color: inherit; font-family: var(--o-font); cursor: pointer; text-align: left; }
.o-offer__code b { font: 800 15px/1.2 var(--o-font); letter-spacing: .06em; }
.o-offer__code span { font: 500 11px/1.2 var(--o-font); opacity: .85; }
.o-offer__code:focus-visible, .o-offer__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ui-lint: allow — focus ring on a gradient */
.o-offer__cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; color: #7a2e04 !important; font: 700 14px/1 var(--o-font); text-decoration: none !important; } /* ui-lint: allow — button on a gradient */
.o-offer__art { position: relative; z-index: 1; flex: 0 0 132px; width: 132px; height: 132px; }
@media (max-width: 575px) { .o-offer { flex-basis: 90%; min-height: 168px; padding: 18px 4px 18px 18px; } .o-offer__art { flex-basis: 96px; width: 96px; height: 96px; } }

/* Coming up */
.o-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.o-event { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--o-r); background: var(--o-surface); box-shadow: var(--o-elev-1); color: var(--o-text) !important; text-decoration: none !important; transition: box-shadow var(--o-ease), transform var(--o-ease); }
.o-event:hover { box-shadow: var(--o-elev-2); transform: translateY(-1px); }
.o-event__art { flex: 0 0 52px; width: 52px; height: 52px; }
.o-event__t b { display: block; font: 700 15px/1.25 var(--o-font); }
.o-event__t small { font: 500 13px/1.3 var(--o-font); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .o-event__t small { color: var(--o-accent); }
@media (max-width: 991px) { .o-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .o-events { grid-template-columns: 1fr; } }

/* Meal tiles v2: a tinted card, the drawing large and a little off the corner, the name underneath */
.o-meals { gap: 14px; }
.o-meal { position: relative; display: block; aspect-ratio: 1 / 1.08; padding: 0; border-radius: 22px; overflow: hidden; text-align: left; background: color-mix(in srgb, var(--tone, #ffe6c8) 70%, var(--o-surface)); box-shadow: none; transition: transform var(--o-ease), box-shadow var(--o-ease); }
:root[data-orderly-theme="dark"] .o-meal { background: color-mix(in srgb, var(--tone, #ffe6c8) 20%, var(--o-surface)); }
.o-meal:hover { transform: translateY(-3px); box-shadow: var(--o-elev-2); background: color-mix(in srgb, var(--tone, #ffe6c8) 85%, var(--o-surface)); }
:root[data-orderly-theme="dark"] .o-meal:hover { background: color-mix(in srgb, var(--tone, #ffe6c8) 28%, var(--o-surface)); }
.o-meal__ico { position: absolute !important; right: -4%; bottom: 6%; top: auto; left: auto; width: 82% !important; height: 82% !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; display: block; }
.o-meal__t { position: absolute; left: 14px; top: 12px; right: 14px; font: 700 15px/1.2 var(--o-font); color: var(--o-text); }
:root:not([data-orderly-theme="dark"]) .o-meal__t { color: #3a2418; } /* ui-lint: allow — label on a pastel tile */
.o-meal .oa-steam { stroke-opacity: .35; }
:root[data-orderly-theme="dark"] .o-meal .oa-steam { stroke: #fff; stroke-opacity: .5; }
@media (max-width: 575px) { .o-meals { gap: 10px; } .o-meals li { flex: 0 0 118px; } .o-meal__t { font-size: 13.5px; left: 10px; top: 10px; } }
.o-disc__init { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--o-accent-tint); color: var(--o-accent-deep); font: 700 20px/1 var(--o-font); }
:root[data-orderly-theme="dark"] .o-disc__init { color: var(--o-accent); }

/* ── Cut-out food pictures (assets/art): float, steam, sparkle, fizz, one light sweep ───────────── */
.oc { position: relative; display: block; width: 100%; height: 100%; --oc-steam: rgb(110 70 40 / .3); --oc-glint: rgb(255 255 255 / .9); }
:root[data-orderly-theme="dark"] .oc { --oc-steam: rgb(255 255 255 / .5); --oc-glint: rgb(255 255 255 / .55); }
.oc__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 90%; animation: oc-float 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
:root[data-orderly-theme="dark"] .oc__img { filter: drop-shadow(0 0 1px rgb(255 255 255 / .35)); }
.oc__sh { position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 1%; height: 7%; border-radius: 50%; background: rgb(0 0 0 / .2); filter: blur(3px); animation: oc-shadow 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.oc::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: var(--oc) center / contain no-repeat; mask: var(--oc) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, var(--oc-glint) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; animation: oc-glint 5.5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) - 1s); }
.oc__fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.oc__fx i { position: absolute; display: block; }
/* steam: three soft wisps lifting off the plate */
.oc--steam .oc__fx i { top: 2%; width: 7%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, var(--oc-steam), transparent); filter: blur(2.5px); opacity: 0; transform-origin: 50% 100%; animation: oc-steam 3s ease-in-out infinite; }
.oc--steam .oc__fx i:nth-child(1) { left: 32%; } .oc--steam .oc__fx i:nth-child(2) { left: 48%; animation-delay: 1s; } .oc--steam .oc__fx i:nth-child(3) { left: 63%; animation-delay: 2s; }
/* sparkle: four-point stars that blink */
.oc--spark .oc__fx i { width: 13%; height: 13%; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: oc-spark 2.6s ease-in-out infinite; } /* ui-lint: allow — sparkle highlight */
.oc--spark .oc__fx i:nth-child(1) { left: 6%; top: 18%; } .oc--spark .oc__fx i:nth-child(2) { right: 8%; top: 8%; width: 9%; height: 9%; animation-delay: .9s; } .oc--spark .oc__fx i:nth-child(3) { right: 14%; bottom: 26%; width: 8%; height: 8%; animation-delay: 1.7s; }
/* fizz: bubbles rising inside the glass */
.oc--fizz .oc__fx i { bottom: 16%; width: 6%; height: 6%; border-radius: 50%; background: rgb(255 255 255 / .85); box-shadow: 0 0 0 1px rgb(255 255 255 / .35); opacity: 0; animation: oc-fizz 2.4s ease-in infinite; } /* ui-lint: allow — bubbles */
.oc--fizz .oc__fx i:nth-child(1) { left: 40%; } .oc--fizz .oc__fx i:nth-child(2) { left: 52%; animation-delay: .5s; width: 4.5%; height: 4.5%; } .oc--fizz .oc__fx i:nth-child(3) { left: 60%; animation-delay: 1s; } .oc--fizz .oc__fx i:nth-child(4) { left: 46%; animation-delay: 1.5s; width: 4%; height: 4%; } .oc--fizz .oc__fx i:nth-child(5) { left: 56%; animation-delay: 1.9s; width: 5%; height: 5%; }
@keyframes oc-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4.5%) rotate(1.2deg); } }
@keyframes oc-shadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.82); opacity: .55; } }
@keyframes oc-glint { 0%, 55% { background-position: 160% 0; } 80%, 100% { background-position: -60% 0; } }
@keyframes oc-steam { 0% { opacity: 0; transform: translateY(14%) scale(.8, .7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70%) scale(1.15, 1.2); } }
@keyframes oc-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(35deg); } 70% { opacity: 0; transform: scale(.4) rotate(70deg); } }
@keyframes oc-fizz { 0% { opacity: 0; transform: translateY(0) scale(.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-330%) scale(1.1); } }
a:hover > .o-meal__ico .oc__img, .o-meal:hover .oc__img, .o-offer:hover .oc__img { animation-duration: 1.7s; }
@media (prefers-reduced-motion: reduce) { .oc__img, .oc__sh, .oc::after, .oc__fx i { animation: none !important; } .oc__fx { display: none; } }

/* ── Menu: Featured row, categories, dish cards, the + button ─────────────────────────────────────
   Type scale on this page:  category 22/700 · dish name 15/600 · price 15/600 · description 13.5/400 · meta 13/500 */
.o-cat { margin: 0; scroll-margin-top: calc(var(--o-sticky-top) + 64px); }
.o-cat__head { margin: 32px 0 14px; }
.o-cat:first-of-type .o-cat__head { margin-top: 8px; }
.o-cat__title { margin: 0; font: 700 22px/1.25 var(--o-font); letter-spacing: -.012em; color: var(--o-text); }
.o-cat__desc { margin: 4px 0 0; font: 400 14px/1.45 var(--o-font); color: var(--o-text-2); }

.o-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 14px; }
.o-dish { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-1); overflow: hidden; transition: transform var(--o-ease), box-shadow var(--o-ease); }
.o-dish:hover { transform: translateY(-2px); box-shadow: var(--o-elev-2); }
.o-dish.is-in { box-shadow: 0 0 0 2px var(--o-accent-solid), var(--o-elev-1); }
.o-dish__media { position: relative; order: -1; aspect-ratio: 4 / 3; background: var(--o-surface-2); cursor: pointer; overflow: hidden; }
.o-dish__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-dish__main { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; cursor: pointer; outline: none; }
.o-dish__main:focus-visible { box-shadow: inset var(--o-ring); border-radius: var(--o-r-lg); }
.o-dish__name { margin: 0; padding-right: 22px; font: 600 15px/1.3 var(--o-font); color: var(--o-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-dish__meta, .o-fcard__meta { margin: 0; font: 500 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-dish__price, .o-fcard__price { font: 600 15px/1.4 var(--o-font); color: var(--o-text); }
.o-dish__price del, .o-fcard__price del { font-weight: 400; font-size: 13px; color: var(--o-text-3); }
.o-dish__sale, .o-dish__free { color: var(--o-go-deep); font-weight: 700; }
:root[data-orderly-theme="dark"] .o-dish__sale, :root[data-orderly-theme="dark"] .o-dish__free { color: var(--o-go); }
.o-dish__desc { margin: 0; font: 400 13.5px/1.45 var(--o-font); color: var(--o-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-dish__promo { margin: 2px 0 0; align-self: flex-start; padding: 3px 10px; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 12px/1.5 var(--o-font); }
.o-dish__promo.is-ok { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-dish__tags { display: flex; gap: 4px; } .o-dish__tags img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.o-dish__info { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--o-text-3); cursor: pointer; }
.o-dish__info svg { width: 18px; height: 18px; } .o-dish__info:hover { color: var(--o-text); }
.o-dish.is-sold .o-dish__media > img, .o-dish.is-sold .o-art { filter: grayscale(1); opacity: .5; }
.o-dish.is-sold .o-dish__name, .o-dish.is-sold .o-dish__price { color: var(--o-text-3); }

/* a dish without a photo: its drawing on a tinted tile (the same tiles as the homepage) */
.o-art { --tone: #ffe6c8; position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 72%, var(--o-surface)); }
:root[data-orderly-theme="dark"] .o-art { background: color-mix(in srgb, var(--tone) 20%, var(--o-surface)); }
.o-art > img, .o-art > svg { width: 74%; height: 74%; object-fit: contain; transition: transform var(--o-ease); }
.o-dish:hover .o-art > img, .o-dish:hover .o-art > svg, .o-fcard:hover .o-art > img, .o-fcard:hover .o-art > svg { transform: scale(1.07) rotate(-2deg); }
.o-art[data-art="pizza"] { --tone: #ffcfc2; } .o-art[data-art="burger"] { --tone: #ffe6a8; } .o-art[data-art="chicken"] { --tone: #ffd9ad; } .o-art[data-art="chips"] { --tone: #ffd6d6; }
.o-art[data-art="shawarma"] { --tone: #efe6bd; } .o-art[data-art="nyamachoma"] { --tone: #ecd2bd; } .o-art[data-art="rice"] { --tone: #dcebc5; } .o-art[data-art="fish"] { --tone: #cfe4f1; }
.o-art[data-art="breakfast"] { --tone: #ffeab0; } .o-art[data-art="juice"] { --tone: #ffd8a8; } .o-art[data-art="coffee"] { --tone: #e6d5c0; } .o-art[data-art="dessert"] { --tone: #fbcfe0; }
.o-art[data-art="plate"] { --tone: #e4e8ee; } .o-art[data-art="salad"] { --tone: #d9efc8; }
:root[data-orderly-theme="dark"] .o-art > img { filter: drop-shadow(0 0 1px rgb(255 255 255 / .35)); }

/* the + that adds a dish (a – 1 + pill once it is in the order) */
.o-add { position: absolute; right: 10px; bottom: 10px; z-index: 2; }
.o-add__btn, .o-add__step button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--o-surface); color: var(--o-text); cursor: pointer; transition: background var(--o-ease), color var(--o-ease), transform var(--o-ease); }
.o-add__btn svg, .o-add__step svg { width: 20px; height: 20px; }
.o-add__btn:hover:not(:disabled) { background: var(--o-accent-solid); color: #fff; } /* ui-lint: allow — icon on the accent fill */
.o-add__btn:active:not(:disabled) { transform: scale(.92); }
.o-add__btn:disabled { opacity: .5; cursor: not-allowed; }
.o-add__btn:focus-visible, .o-add__step button:focus-visible { outline: none; box-shadow: var(--o-ring), var(--o-elev-2); }
.o-add__step { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--o-r-pill); background: var(--o-accent-solid); color: #fff; box-shadow: var(--o-elev-2); } /* ui-lint: allow — on the accent fill */
.o-add__step button { width: 34px; height: 34px; background: transparent; color: inherit; box-shadow: none; }
.o-add__step button:hover { background: rgb(255 255 255 / .18); }
.o-add__step span { min-width: 22px; text-align: center; font: 700 15px/1 var(--o-font); }
.o-add__off { display: inline-block; padding: 4px 10px; border-radius: var(--o-r-pill); background: var(--o-surface); color: var(--o-text-3); font: 600 12px/1.4 var(--o-font); box-shadow: var(--o-elev-1); }
@media (pointer: coarse) { .o-add__btn { width: 44px; height: 44px; } .o-add__step button { width: 38px; height: 38px; } }

/* list: one row per dish, the picture on the right */
html[data-menu-view="list"] .o-dishes { grid-template-columns: 1fr; gap: 10px; }
html[data-menu-view="list"] .o-dish { flex-direction: row; align-items: stretch; min-height: 124px; }
html[data-menu-view="list"] .o-dish__main { padding: 14px 8px 14px 16px; justify-content: center; }
html[data-menu-view="list"] .o-dish__media { order: 2; flex: 0 0 124px; width: 124px; aspect-ratio: auto; margin: 10px 10px 10px 0; border-radius: var(--o-r); }
html[data-menu-view="list"] .o-dish__name { padding-right: 0; }
html[data-menu-view="list"] .o-dish__info { position: static; margin-top: 2px; align-self: flex-start; }
html[data-menu-view="list"] .o-add { right: 6px; bottom: 6px; }
@media (max-width: 575px) { .o-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .o-dish__main { padding: 10px 12px 12px; } .o-cat__title { font-size: 20px; } html[data-menu-view="list"] .o-dish__media { flex-basis: 108px; width: 108px; } }

/* Featured items */
.o-feat { margin-bottom: 8px; }
.o-feat .o-carousel__slide { flex: 0 0 calc((100% - 28px) / 3); }
.o-fcard { position: relative; cursor: pointer; }
.o-fcard__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--o-r-lg); background: var(--o-surface-2); overflow: hidden; }
.o-fcard__media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
.o-fcard:hover .o-fcard__media > img { transform: scale(1.04); }
.o-fcard__badge { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 9px; border-radius: var(--o-r-pill); background: var(--o-surface); color: var(--o-text); font: 700 11.5px/1.5 var(--o-font); box-shadow: var(--o-elev-1); }
.o-fcard__body { padding: 10px 2px 0; }
.o-fcard__name { margin: 0 0 2px; font: 600 15px/1.3 var(--o-font); color: var(--o-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-fcard.is-sold .o-fcard__media > img, .o-fcard.is-sold .o-art { filter: grayscale(1); opacity: .5; }
@media (max-width: 767px) { .o-feat .o-carousel__slide { flex-basis: 44%; } }

/* ── Carousel: swipe, snap, arrows on hover, a few dots (assets/js: orderly-ui.js builds the arrows and dots) ── */
.o-carousel { position: relative; }
.o-carousel__track { display: flex; gap: 14px; margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.o-carousel__track::-webkit-scrollbar { display: none; }
.o-carousel__slide { flex: 0 0 var(--o-slide, 220px); min-width: 0; scroll-snap-align: start; }
.o-carousel__arrow { position: absolute; top: calc(50% - 26px); z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-2); cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity var(--o-ease), transform var(--o-ease), background var(--o-ease); }
.o-carousel__arrow--prev { left: -14px; } .o-carousel__arrow--next { right: -14px; }
.o-carousel__arrow svg { width: 20px; height: 20px; }
.o-carousel__arrow:hover { background: var(--o-surface-2); }
.o-carousel__arrow[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .o-carousel:hover .o-carousel__arrow, .o-carousel:focus-within .o-carousel__arrow { opacity: 1; transform: none; } }
@media (hover: none), (pointer: coarse) { .o-carousel__arrow { display: none; } }
.o-carousel__dots { display: flex; justify-content: center; gap: 2px; margin-top: 8px; }
.o-carousel__dots:empty, .o-carousel.is-static .o-carousel__dots { display: none; }
.o-carousel__dot { position: relative; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.o-carousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: var(--o-r-pill); background: var(--o-surface-3); transition: width var(--o-ease), margin var(--o-ease), background var(--o-ease); }
.o-carousel__dot[aria-current="true"]::before { width: 22px; margin-left: -11px; background: var(--o-accent-solid); }
.o-carousel__dot:focus-visible { outline: none; } .o-carousel__dot:focus-visible::before { box-shadow: var(--o-ring); }
@media (prefers-reduced-motion: reduce) { .o-carousel__track { scroll-behavior: auto; } .o-dish, .o-fcard__media > img, .o-art > img, .o-art > svg { transition: none; } }

/* homepage rows are carousels now (dots, arrows on hover, no scrollbar) */
.o-carousel__track.o-hrow { gap: 16px; padding: 4px 2px 8px; margin: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
.o-carousel__track.o-hrow .o-rcard { scroll-snap-align: start; }
.o-carousel__track.o-offers__row { gap: 16px; padding: 2px 2px 8px; margin: 0; scrollbar-width: none; }
.o-offers .o-carousel__dots, .o-hrow + .o-carousel__dots { margin-top: 4px; }
.o-offers .o-carousel__arrow { top: calc(50% - 30px); }
.floating-cart .btn:not(#o) { background: var(--o-accent-solid) !important; border-color: var(--o-accent-solid) !important; color: #fff !important; } /* ui-lint: allow — label on the accent fill */

/* delivery scene (the rider drawing): road and skyline slide past, the bag glows, the headlight beam breathes */
.oa-road { animation: oa-road .55s linear infinite; }
.oa-city { animation: oa-city 7s linear infinite; }
.oa-puff { animation: oa-puff 1.2s ease-out infinite; transform-origin: 50% 50%; }
.oa-pulse { animation: oa-pulse 1.8s ease-in-out infinite; transform-origin: 50% 50%; }
.oa-beam { animation: oa-beam 1.6s ease-in-out infinite; }
@keyframes oa-road { to { transform: translateX(-24px); } }
@keyframes oa-city { to { transform: translateX(-60px); } }
@keyframes oa-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-16px, -7px) scale(1.7); } }
@keyframes oa-pulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes oa-beam { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .oa-road, .oa-city, .oa-puff, .oa-pulse, .oa-beam { animation: none !important; } }

/* ── Install Orderly (PWA): bottom sheet, homepage card, toast ─────────────────────────────────── */
.o-pwa { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1100; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; padding: 14px; border-radius: 22px; background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-3); font-family: var(--o-font); transform: translateY(24px); opacity: 0; transition: transform 260ms cubic-bezier(.16, 1, .3, 1), opacity 200ms; }
.o-pwa.is-in { transform: none; opacity: 1; }
.o-pwa--up { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.o-pwa__icon { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 0 0 1px var(--o-surface-3); background: #fff; } /* ui-lint: allow — the app icon is always on white */
.o-pwa__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-pwa__text b { font: 700 16px/1.3 var(--o-font); }
.o-pwa__text > span { font: 400 14px/1.45 var(--o-font); color: var(--o-text-2); }
.o-pwa__text > span b { font: 700 14px/1.45 var(--o-font); color: var(--o-text); }
.o-pwa__k { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -5px; border-radius: 6px; background: var(--o-surface-2); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .o-pwa__k { color: var(--o-accent); }
.o-pwa__k svg { width: 15px; height: 15px; }
.o-pwa__act { grid-column: 1 / -1; display: flex; gap: 8px; }
.o-pwa__go, .o-pwa__no { min-height: 46px; border: 0; border-radius: var(--o-r-pill); font: 700 15px/1 var(--o-font); cursor: pointer; transition: background var(--o-ease); }
.o-pwa__go { flex: 1 1 auto; background: var(--o-accent-solid); color: #fff; } /* ui-lint: allow — label on the accent fill */
.o-pwa__go:hover { background: var(--o-accent-solid-hover); }
.o-pwa__no { padding: 0 18px; background: transparent; color: var(--o-text-2); }
.o-pwa__no:hover { background: var(--o-surface-2); }
.o-pwa__go:focus-visible, .o-pwa__no:focus-visible { outline: none; box-shadow: var(--o-ring); }
@media (min-width: 768px) { .o-pwa { left: auto; right: 20px; bottom: 20px; width: 420px; } .o-pwa--up { bottom: 20px; } }
.o-pwa-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1200; transform: translate(-50%, 16px); opacity: 0; padding: 12px 20px; border-radius: var(--o-r-pill); background: var(--o-text); color: var(--o-bg); font: 600 14px/1.3 var(--o-font); box-shadow: var(--o-elev-3); transition: transform 240ms cubic-bezier(.16, 1, .3, 1), opacity 200ms; }
.o-pwa-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .o-pwa, .o-pwa-toast { transition: opacity 120ms; transform: none; } }
.is-app [data-o-install], .is-app [data-o-install-card] { display: none !important; }

/* the homepage card */
.o-appcard { display: flex; align-items: center; gap: 20px; padding: 22px 28px; border-radius: 24px; background: linear-gradient(135deg, #2a2523 0%, #121010 100%); color: #fff; overflow: hidden; } /* ui-lint: allow — text on a dark brand gradient */
.o-appcard[hidden] { display: none; }
.o-appcard__art { flex: 0 0 132px; width: 132px; height: 132px; }
.o-appcard__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.o-appcard__title { margin: 0; font: 800 clamp(20px, 2.4vw, 26px)/1.15 var(--o-font); letter-spacing: -.01em; color: inherit; }
.o-appcard__sub { margin: 0; font: 500 14.5px/1.45 var(--o-font); opacity: .85; }
.o-appcard__btn { align-self: flex-start; margin-top: 8px; min-height: 46px; padding: 0 24px; border: 0; border-radius: var(--o-r-pill); background: var(--o-accent-solid); color: #fff; font: 700 15px/1 var(--o-font); cursor: pointer; } /* ui-lint: allow — label on the accent fill */
.o-appcard__btn:hover { background: var(--o-accent-solid-hover); }
.o-appcard__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ui-lint: allow — focus ring on a dark card */
@media (max-width: 575px) { .o-appcard { flex-direction: column-reverse; align-items: flex-start; padding: 20px; gap: 8px; } .o-appcard__art { flex-basis: 96px; width: 96px; height: 96px; align-self: flex-end; margin-bottom: -28px; } .o-appcard__btn { width: 100%; text-align: center; } }
.o-foot-bar__install { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--o-r-pill); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-foot-bar__install[hidden] { display: none; }
.o-popart { position: relative; height: 170px; border-radius: var(--o-r); overflow: hidden; }

/* ── Dishes without a picture: a plain text card (no stand-in art), the + sits in the corner ───── */
.o-dish--text { min-height: 112px; }
.o-dish--text .o-dish__media { position: absolute; right: 10px; bottom: 10px; order: 0; width: auto; aspect-ratio: auto; margin: 0; background: none; overflow: visible; cursor: default; }
.o-dish--text .o-add { position: static; }
.o-dish--text .o-dish__main { padding: 14px 16px 58px; }
.o-dish--text .o-dish__name { font-size: 16px; padding-right: 0; }
html[data-menu-view="list"] .o-dish--text { min-height: 0; align-items: center; }
html[data-menu-view="list"] .o-dish--text .o-dish__main { padding: 14px 72px 14px 16px; width: 100%; }
html[data-menu-view="list"] .o-dish--text .o-dish__media { top: 50%; right: 12px; bottom: auto; margin: 0; transform: translateY(-50%); flex: none; width: auto; }
/* A dish without a photo is a plain card on the neutral surface, not a tinted block. */
.o-fcard--text { display: flex; flex-direction: column; min-height: 132px; padding: 14px 16px 62px; position: relative; border-radius: var(--o-r-lg); background: var(--o-surface-2); box-shadow: none; }
.o-fcard--text .o-fcard__price { color: var(--o-text-2); }
.o-fcard--text .o-fcard__media { position: absolute; right: 10px; bottom: 10px; aspect-ratio: auto; width: auto; background: none; overflow: visible; border-radius: 0; }
.o-fcard--text .o-add { position: static; }
.o-fcard--text .o-fcard__body { padding: 0; }
.o-fcard--text .o-fcard__name { font: 600 16px/1.3 var(--o-font); -webkit-line-clamp: 3; }
.o-fcard--text .o-fcard__badge { position: static; align-self: flex-start; margin-bottom: 8px; background: rgb(255 255 255 / .7); }
:root[data-orderly-theme="dark"] .o-fcard--text .o-fcard__badge { background: rgb(0 0 0 / .3); }

/* ── Offers on a restaurant page (Uber's "Exclusive promos") ───────────────────────────────────── */
.o-promos { margin: 0 0 20px; }
.o-promos .o-carousel__track { gap: 10px; }
.o-promos .o-carousel__slide { flex: 0 0 min(300px, 84%); }
/* Offers on a restaurant page are one quiet line each: neutral, no clip art. */
.o-promo { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border-radius: var(--o-r-lg); background: var(--o-surface-2); color: var(--o-text); box-shadow: none; }
.o-promos .o-promo__art { display: none; }
.o-promo__art { flex: 0 0 52px; width: 52px; height: 52px; }
.o-promo__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-promo__t b { font: 700 15px/1.25 var(--o-font); }
.o-promo__t small { font: 400 13px/1.35 var(--o-font); color: var(--o-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-promo__code { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 5px 10px; border: 1.5px dashed var(--o-text-3); border-radius: 10px; background: transparent; color: var(--o-text); font-family: var(--o-font); cursor: pointer; text-align: left; }
.o-promo__code b { font: 800 13px/1.2 var(--o-font); letter-spacing: .05em; } .o-promo__code span { font: 500 10.5px/1.2 var(--o-font); color: var(--o-text-3); }
.o-promo__code:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-promos .o-carousel__dots { margin-top: 2px; }
.o-side__hours { margin: -4px 0 10px; padding: 0 14px; font: 500 13px/1.3 var(--o-font); color: var(--o-go-deep); }
:root[data-orderly-theme="dark"] .o-side__hours { color: var(--o-go); }

/* ── FAQ under a restaurant ───────────────────────────────────────────────────────────────────── */
.o-faq { max-width: 860px; margin: 40px auto 24px; font-family: var(--o-font); }
.o-faq__title { margin: 0 0 12px; font: 700 22px/1.25 var(--o-font); letter-spacing: -.012em; color: var(--o-text); }
.o-faq__item { border-bottom: 1px solid var(--o-surface-3); }
.o-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 4px; font: 600 16px/1.35 var(--o-font); color: var(--o-text); cursor: pointer; list-style: none; }
.o-faq__item summary::-webkit-details-marker { display: none; }
.o-faq__item summary::after { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--o-ease); }
.o-faq__item[open] summary::after { transform: rotate(180deg); }
.o-faq__item summary:focus-visible { outline: none; box-shadow: var(--o-ring); border-radius: var(--o-r-sm); }
.o-faq__item p { margin: 0 0 16px; padding: 0 4px; max-width: 70ch; font: 400 15px/1.55 var(--o-font); color: var(--o-text-2); }

/* ── Restaurants on a map, at the top of the delivery feed ────────────────────────────────────── */
.o-band { margin-top: 16px; margin-bottom: 8px; font-family: var(--o-font); }
.o-band__head { margin: 0 0 12px; }
.o-band__title { margin: 0; font: 700 22px/1.25 var(--o-font); letter-spacing: -.012em; color: var(--o-text); }
.o-band__sub { margin: 4px 0 0; font: 400 14px/1.45 var(--o-font); color: var(--o-text-2); }
.o-discover--band { height: 440px; min-height: 0; border-radius: var(--o-r-lg); overflow: hidden; box-shadow: var(--o-elev-1); background: var(--o-bg); grid-template-columns: 380px minmax(0, 1fr); }
.o-discover--band .o-discover__panel { padding: 14px 14px 0; background: var(--o-surface); }
.o-discover--band .o-discover__map { min-height: 0; }
@media (max-width: 991px) {
  .o-discover--band { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 260px auto; }
  .o-discover--band .o-discover__map { order: -1; height: 260px; }
  .o-discover--band .o-discover__list { max-height: 300px; }
  .o-band__title { font-size: 20px; }
}
@media (max-width: 575px) {
  .o-band { padding-left: 12px; padding-right: 12px; }
  .o-discover--band { border-radius: var(--o-r); grid-template-rows: 230px auto; }
  .o-discover--band .o-discover__map { height: 230px; }
  .o-discover--band .o-discover__tools { margin-bottom: 8px; }
}
.o-nodeliver .o-btn + .o-btn { margin-left: 8px; }

/* ── Plans and pricing: four cards, Monthly / Yearly (yearly first), M-Pesa sheet ─────────────── */
.o-plans { max-width: 1180px; margin: 0 auto; padding: 36px 16px 64px; font-family: var(--o-font); color: var(--o-text); }
.o-plans__head { text-align: center; margin: 0 auto 28px; max-width: 640px; }
.o-plans__title { margin: 0 0 8px; font: 800 clamp(28px, 4vw, 40px)/1.12 var(--o-font); letter-spacing: -.02em; color: var(--o-text); }
.o-plans__sub { margin: 0 0 20px; font: 400 16px/1.5 var(--o-font); color: var(--o-text-2); }
.o-plans__bill { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.o-plans__bill button { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); font: 700 15px/1 var(--o-font); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-plans__bill button em { margin-left: 6px; padding: 3px 8px; border-radius: var(--o-r-pill); background: var(--o-go-tint); color: var(--o-go-deep); font: 700 12px/1.4 var(--o-font); font-style: normal; }
.o-plans__bill button.is-on { background: var(--o-surface); color: var(--o-text); }
:root[data-orderly-theme="dark"] .o-plans__bill button em { color: var(--o-go); }
.o-plans__bill button:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 18px; }
.o-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; border-radius: 24px; background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-plan.is-pop { box-shadow: 0 0 0 2px var(--o-accent-solid), var(--o-elev-2); }
.o-plan.is-current { box-shadow: 0 0 0 2px var(--o-go), var(--o-elev-1); }
.o-plan__tag { position: absolute; top: -13px; left: 22px; padding: 4px 12px; border-radius: var(--o-r-pill); background: var(--o-accent-solid); color: #fff; font: 700 12px/1.4 var(--o-font); letter-spacing: .02em; } /* ui-lint: allow — label on the accent fill */
.o-plan__tag--cur { background: oklch(52% 0.15 150); }
.o-plan__name { margin: 0; font: 800 21px/1.2 var(--o-font); letter-spacing: -.01em; color: var(--o-text); }
.o-plan__for { margin: 0; min-height: 42px; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-plan__price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 0; color: var(--o-text); }
.o-plan__price b { font: 800 clamp(34px, 3.4vw, 42px)/1 var(--o-font); letter-spacing: -.03em; }
.o-plan__price small { font: 700 15px/1 var(--o-font); color: var(--o-text-2); }
.o-plan__price span { font: 500 15px/1 var(--o-font); color: var(--o-text-3); }
.o-plan__note { margin: 0 0 8px; min-height: 36px; font: 400 13px/1.45 var(--o-font); color: var(--o-text-3); }
.o-plan__list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--o-surface-3); list-style: none; }
.o-plan__list li { display: flex; gap: 10px; align-items: flex-start; font: 400 14.5px/1.4 var(--o-font); color: var(--o-text); }
.o-plan__list svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--o-go-deep); }
:root[data-orderly-theme="dark"] .o-plan__list svg { color: var(--o-go); }
.o-plan__act { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.o-plan__act .o-link { align-self: center; padding: 8px; border: 0; background: none; font: 600 14px/1.2 var(--o-font); cursor: pointer; }
.o-plan__here { display: block; padding: 12px; text-align: center; border-radius: var(--o-r-pill); background: var(--o-go-tint); color: var(--o-go-deep); font: 700 14px/1.2 var(--o-font); }
:root[data-orderly-theme="dark"] .o-plan__here { color: var(--o-go); }
.o-plans__aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.o-plans__aside > div { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--o-surface-2); }
.o-plans__aside b { font: 700 15px/1.3 var(--o-font); } .o-plans__aside span { font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-plans__sheet { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .55); }
.o-plans__sheet[hidden] { display: none; }
.o-plans__panel { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--o-surface); box-shadow: var(--o-elev-3); }
.o-plans__sheet-t { margin: 0; font: 800 20px/1.25 var(--o-font); }
.o-plans__wait { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 16px/1.45 var(--o-font); }
.o-plans__err { margin: 0; padding: 10px 12px; border-radius: var(--o-r-sm); background: var(--o-danger-tint); color: var(--o-danger); font: 500 14px/1.4 var(--o-font); }
.o-plans__panel .o-link { align-self: center; border: 0; background: none; cursor: pointer; font: 600 14px/1.2 var(--o-font); }
@media (max-width: 1100px) { .o-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o-plans__aside { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .o-plans { padding: 24px 12px 48px; } .o-plans__grid { grid-template-columns: 1fr; gap: 22px; }
  .o-plan__for, .o-plan__note { min-height: 0; }
  .o-plans__sheet { place-items: end center; padding: 0; } .o-plans__panel { width: 100%; border-radius: 24px 24px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

.o-plan__price { flex-wrap: wrap; row-gap: 2px; }
.o-plan__price b { font-size: clamp(30px, 2.6vw, 38px); }
.o-plan__price span { flex-basis: 100%; white-space: nowrap; }
.o-plan__free .o-plan__price span, .o-plan.is-free .o-plan__price span { flex-basis: auto; }

/* ── Plan page inside the back office ─────────────────────────────────────────────────────────── */
.o-plans--app { padding-top: 8px; }
.o-planbar { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 22px 24px; margin-bottom: 16px; border-radius: 22px; background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-planbar__label { font: 700 12px/1 var(--o-font); letter-spacing: .08em; text-transform: uppercase; color: var(--o-text-3); }
.o-planbar__name { margin: 6px 0 4px; font: 800 28px/1.15 var(--o-font); letter-spacing: -.015em; color: var(--o-text); } .o-planbar__name small { font: 600 14px/1 var(--o-font); color: var(--o-text-3); }
.o-planbar__sub { margin: 0; font: 400 15px/1.45 var(--o-font); color: var(--o-text-2); }
.o-planbar__meters { display: flex; gap: 20px; flex-wrap: wrap; flex: 1 1 280px; justify-content: flex-end; }
.o-planbar__meters > div { flex: 1 1 150px; max-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.o-planbar__meters span { display: flex; justify-content: space-between; gap: 8px; font: 500 13px/1.3 var(--o-font); color: var(--o-text-2); } .o-planbar__meters b { color: var(--o-text); font-weight: 700; }
.o-planbar__meters i { display: block; height: 6px; border-radius: 999px; background: var(--o-surface-3); overflow: hidden; } .o-planbar__meters i::after { content: ""; display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--o-accent-solid); }
.o-online { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 20px 24px; margin-bottom: 8px; border-radius: 22px; background: var(--o-accent-tint); }
.o-online__txt { flex: 1 1 380px; } .o-online h2 { margin: 0 0 4px; font: 800 20px/1.25 var(--o-font); } .o-online p { margin: 0; font: 400 15px/1.5 var(--o-font); color: var(--o-text-2); max-width: 62ch; }
.o-online__warn { margin-top: 8px !important; color: var(--o-warn) !important; font-weight: 600 !important; } .o-online__ok { margin-top: 8px !important; color: var(--o-go-deep) !important; font-weight: 600 !important; }
.o-online__act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.o-locked { display: grid; place-items: center; min-height: 60vh; padding: 24px 16px; font-family: var(--o-font); }
.o-locked__card { width: min(520px, 100%); padding: 32px 28px; text-align: center; border-radius: 24px; background: var(--o-surface); box-shadow: var(--o-elev-2); }
.o-locked__ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: var(--o-accent-tint); color: var(--o-accent-deep); } .o-locked__ico i, .o-locked__ico svg { width: 26px; height: 26px; }
.o-locked h1 { margin: 0 0 8px; font: 800 24px/1.2 var(--o-font); letter-spacing: -.01em; color: var(--o-text); } .o-locked p { margin: 0 0 10px; font: 400 15px/1.55 var(--o-font); color: var(--o-text-2); } .o-locked__price { font-weight: 600 !important; color: var(--o-text) !important; }
.o-locked__act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.o-online__nudge { margin-top: 8px !important; padding: 10px 12px; border-radius: var(--o-r-sm); background: var(--o-surface); color: var(--o-text) !important; font-weight: 600 !important; }
.o-online__nudge a { color: var(--o-accent-deep); }

/* Restaurant header: initials when there is no logo; quiet meta. */
.o-rlogo-init { width: 130px; height: 100px; min-width: 130px; display: grid; place-items: center; border-radius: var(--o-r-lg); background: var(--o-surface-2); color: var(--o-text-2); font: 700 40px/1 var(--o-font); }
.o-rmeta-muted { color: var(--o-text-3); font: 500 14px/1.4 var(--o-font); }
@media (max-width: 575px) { .o-rlogo-init { width: 72px; min-width: 72px; height: 72px; font-size: 28px; } }

/* ------------------------------------------------------- invite friends --- */
.o-invite { display: flex; flex-direction: column; gap: 16px; max-width: 720px; font-family: var(--o-font); }
.o-invite__hero { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.o-invite__title { margin: 0; font: 700 24px/1.2 var(--o-font); color: var(--o-text); }
.o-invite__lead { margin: 0; font: 400 15px/1.5 var(--o-font); color: var(--o-text-2); }
.o-invite__code { align-self: flex-start; padding: 12px 20px; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-accent);
  font: 700 32px/1.1 var(--o-font); letter-spacing: .08em; user-select: all; }
.o-invite__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.o-invite__actions .o-btn { min-height: 44px; }
.o-invite__link { margin: 0; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); word-break: break-all; }
.o-invite__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .o-invite__stats { grid-template-columns: 1fr; } .o-invite__code { font-size: 26px; } }

/* ── Location and time sheet (.o-loc*) ─────────────────────────────────────────────────────────────
   One sheet for "where" and "when": bottom sheet on phones, centred dialog on desktop. Built by
   assets/js/orderly-location-sheet.js; backoffice/themes/classic/views/uikit/index.php shows it
   static. No outlined boxes: rows are flat, the only filled button is the primary one. */
.o-loc { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; font-family: var(--o-font); color: var(--o-text); }
.o-loc[hidden] { display: none; }
.o-loc__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .45); animation: o-loc-fade 160ms ease both; }
.o-loc__panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: 90vh; max-height: 90dvh;
  background: var(--o-surface); border-radius: var(--o-r-lg) var(--o-r-lg) 0 0; box-shadow: var(--o-elev-3);
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: o-loc-up 220ms cubic-bezier(.16, 1, .3, 1) both;
}
.o-loc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.o-loc__title { margin: 0; font: 800 20px/1.2 var(--o-font); letter-spacing: -.01em; color: var(--o-text); }
.o-loc__x { width: 40px; height: 40px; border: 0; padding: 0; display: inline-grid; place-items: center; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-loc__x:hover { background: var(--o-surface-2); color: var(--o-text); }
.o-loc__x:focus-visible, .o-loc__row:focus-visible, .o-loc__text:focus-visible, .o-loc__seg button:focus-visible, .o-loc__slot:focus-visible, .o-loc__day:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-loc__x svg { width: 20px; height: 20px; }
.o-loc__body { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 22px; }
.o-loc__sec { display: flex; flex-direction: column; gap: 8px; }
.o-loc__label { margin: 0; font: 700 12px/1 var(--o-font); letter-spacing: .06em; text-transform: uppercase; color: var(--o-text-3); }
.o-loc__go { min-height: 54px; font-size: 16px; }
.o-loc__go svg, .o-loc__here svg { width: 20px; height: 20px; }
.o-loc__go.is-busy svg { animation: o-loc-spin 900ms linear infinite; }
.o-loc__note { margin: 0; font: 400 14px/1.45 var(--o-font); color: var(--o-text-2); }
.o-loc__note[hidden], .o-loc__found[hidden], .o-loc__list[hidden], .o-loc__sched[hidden], .o-loc__sec[hidden], .o-loc__text[hidden] { display: none; }
.o-loc__found { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--o-r); background: var(--o-surface-2); }
.o-loc__addr { display: flex; align-items: flex-start; gap: 10px; font: 600 15px/1.4 var(--o-font); color: var(--o-text); }
.o-loc__addr svg { width: 20px; height: 20px; margin-top: 1px; color: var(--o-accent-deep); }
.o-loc__addr small { display: block; margin-top: 2px; font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); }
.o-loc__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.o-loc__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--o-r-sm); background: transparent; color: var(--o-text); text-align: left; font: 500 15px/1.35 var(--o-font); cursor: pointer; transition: background var(--o-ease); }
.o-loc__row:hover, .o-loc__row.is-on { background: var(--o-surface-2); }
.o-loc__row > svg { width: 20px; height: 20px; color: var(--o-text-3); }
.o-loc__row > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.o-loc__row small { display: block; font: 400 13px/1.3 var(--o-font); color: var(--o-text-3); white-space: normal; }
.o-loc__row .o-loc__tick { width: 18px; height: 18px; color: var(--o-go-deep); }
.o-loc__row[disabled] { opacity: .55; pointer-events: none; }
.o-loc__search { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-3); transition: box-shadow var(--o-ease); }
.o-loc__search:focus-within { box-shadow: var(--o-ring); }
.o-loc__search svg { width: 20px; height: 20px; flex: 0 0 auto; }
.o-loc__search input { flex: 1 1 auto; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--o-text); font: 400 16px/1 var(--o-font); -webkit-appearance: none; appearance: none; }
.o-loc__search input::placeholder { color: var(--o-text-3); }
.o-loc__text { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); font: 600 14px/1 var(--o-font); cursor: pointer; }
.o-loc__text:hover { background: var(--o-surface-2); color: var(--o-text); }
.o-loc__text svg { width: 18px; height: 18px; }
.o-loc__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.o-loc__seg button { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); font: 600 14px/1.15 var(--o-font); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-loc__seg button small { display: block; font: 400 12px/1.2 var(--o-font); color: var(--o-text-3); }
.o-loc__seg button[aria-selected="true"] { background: var(--o-surface); color: var(--o-text); }
.o-loc__sched { display: flex; flex-direction: column; gap: 12px; }
.o-loc__days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.o-loc__days::-webkit-scrollbar { display: none; }
.o-loc__day, .o-loc__slot { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text); font: 600 14px/1 var(--o-font); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-loc__day:hover, .o-loc__slot:hover { background: var(--o-surface-3); }
.o-loc__day[aria-pressed="true"], .o-loc__slot[aria-pressed="true"] { background: var(--o-accent-solid); color: #fff; } /* ui-lint: allow — label on the accent fill */
.o-loc__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.o-loc__slot { padding: 0 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.o-loc__empty { margin: 0; font: 400 14px/1.45 var(--o-font); color: var(--o-text-3); }
@keyframes o-loc-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes o-loc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes o-loc-spin { to { transform: rotate(360deg); } }
@media (min-width: 600px) {
  .o-loc { align-items: center; }
  .o-loc__panel { width: min(440px, calc(100vw - 32px)); max-height: min(720px, 90vh); border-radius: var(--o-r-lg); padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .o-loc__scrim, .o-loc__panel { animation: none; } .o-loc__go.is-busy svg { animation: none; } }
/* Static copy for the UI kit page (no overlay, no animation). */
.o-loc--static { position: relative; inset: auto; z-index: auto; align-items: flex-start; justify-content: flex-start; }
.o-loc--static .o-loc__scrim { display: none; }
.o-loc--static .o-loc__panel { width: min(440px, 100%); max-height: none; border-radius: var(--o-r-lg); padding-bottom: 0; animation: none; }

/* ── "Watch them cook": a strip of 9:16 posters on the restaurant page, a full-screen sheet / centred modal on tap.
   Photo first: no frames, no tinted boxes. The embed iframe exists only after a tap (orderly-ui.js). ── */
.o-cook { margin: 0 0 20px; }
.o-cook__title { margin: 0 0 12px; font: 700 22px/1.25 var(--o-font); color: var(--o-text); }
.o-cook .o-carousel__slide { flex: 0 0 132px; }
.o-vtile { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.o-vtile:focus-visible { outline: none; } .o-vtile:focus-visible .o-vtile__media { box-shadow: var(--o-ring); }
.o-vtile__media { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: var(--o-r-lg); background: var(--o-surface-2); color: var(--o-text-3); overflow: hidden; }
.o-vtile__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
.o-vtile:hover .o-vtile__media > img { transform: scale(1.04); }
.o-vtile__media .o-ico { width: 32px; height: 32px; }
.o-vtile__play { position: absolute; left: 10px; bottom: 10px; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--o-r-pill); background: var(--o-text); color: var(--o-surface); opacity: .88; }
.o-vtile__play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }
.o-vtile__cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 2px 0; font: 600 14px/1.3 var(--o-font); color: var(--o-text); }
.o-vtile__who { display: block; margin: 2px 2px 0; font: 500 12.5px/1.3 var(--o-font); color: var(--o-text-3); }
@media (min-width: 768px) { .o-cook .o-carousel__slide { flex-basis: 160px; } }

.o-vsheet { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: stretch; justify-content: center; }
.o-vsheet[hidden] { display: none; }
.o-vsheet__scrim { position: absolute; inset: 0; background: var(--o-text); opacity: 0; transition: opacity 180ms ease; }
.o-vsheet.is-open .o-vsheet__scrim { opacity: .6; }
.o-vsheet__panel { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--o-surface); color: var(--o-text); transform: translateY(24px); opacity: 0; transition: transform 220ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease; }
.o-vsheet.is-open .o-vsheet__panel { transform: none; opacity: 1; }
.o-vsheet__grab { display: grid; place-items: center; height: 24px; flex: none; touch-action: none; }
.o-vsheet__grab span { width: 40px; height: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-3); }
.o-vsheet__x { position: absolute; top: 24px; right: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface); color: var(--o-text); cursor: pointer; opacity: .92; }
.o-vsheet__x svg { width: 22px; height: 22px; }
.o-vsheet__x:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-vsheet__frame { flex: 1 1 auto; min-height: 0; background: var(--o-surface-2); }
.o-vsheet__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.o-vsheet__buy { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.o-vsheet__buy .o-btn { min-height: 52px; font-size: 16px; }
@media (min-width: 768px) {
  .o-vsheet { align-items: center; }
  .o-vsheet__panel { width: auto; height: min(92vh, 860px); aspect-ratio: 9 / 16; border-radius: var(--o-r-lg); overflow: hidden; }
  .o-vsheet__grab { display: none; }
  .o-vsheet__x { top: 10px; }
}
html.o-vsheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .o-vsheet__scrim, .o-vsheet__panel, .o-vtile__media > img { transition: none; } .o-vsheet__panel { transform: none; } }

/* Restaurant header (storefront menu page): crumbs, logo, name, one meta line, cover. */
.o-rhead { display: none; background: var(--o-surface-2); }
.o-rhead__in { max-width: 1240px; margin: 0 auto; padding: 20px 16px 24px; }
.o-rhead .o-crumbs { margin-bottom: 14px; min-width: 0; }
.o-rhead .o-crumbs .o-ico { color: var(--o-text-3); }
.o-rhead .o-crumbs .o-clamp { display: block; min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-rhead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.o-rhead__main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.o-rhead__logo { flex: 0 0 auto; border-radius: var(--o-r-lg); overflow: hidden; background: var(--o-surface); }
.o-rhead__body { min-width: 0; flex: 1 1 auto; }
.o-rhead__cuisine { margin: 0 0 4px; font: 500 14px/1.4 var(--o-font); color: var(--o-text-3); }
.o-rmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.o-rmeta__item { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.4 var(--o-font); color: var(--o-text-2); text-decoration: none; }
.o-rmeta__item b { color: var(--o-text); font-weight: 700; }
.o-rmeta__item .o-ico { color: var(--o-text-3); }
a.o-rmeta__item:hover span { text-decoration: underline; }
.o-rhead__side { position: relative; min-height: 1px; }
.o-rhead__side .fav-wrap { position: absolute; top: 8px; right: 8px; z-index: 2; }
.o-rhead__cover { display: block; width: 100%; height: 250px; object-fit: cover; border-radius: var(--o-r-lg); background: var(--o-surface); }
.o-rhead-m { display: block; }
@media (min-width: 992px) { .o-rhead { display: block; } .o-rhead-m { display: none; } }

/* Cart panel (menu page side cart and checkout summary). */
.o-cart__title { margin: 0 0 8px; font: 800 22px/1.2 var(--o-font); color: var(--o-text); }
.o-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.o-cart__sub { margin: 0; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-cart__clear { background: none; border: 0; padding: 8px 0; min-height: 44px; font: 500 14px/1 var(--o-font); color: var(--o-text-2); cursor: pointer; }
.o-cart__clear:hover { color: var(--o-danger); }
.o-cart__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 8px; text-align: center; color: var(--o-text-3); }
.o-cart__empty .o-ico { width: 32px; height: 32px; }
.o-cart__empty p { margin: 0; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-cart__items { padding: 12px 0; }
.o-cline { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.o-cline__img .el-image { display: block; width: 48px !important; height: 48px !important; border-radius: var(--o-r-sm); overflow: hidden; background: var(--o-surface-2); }
.o-cline__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.o-cline p { margin: 0; }
.o-cline__name { font: 600 14px/1.35 var(--o-font); color: var(--o-text); }
.o-cline__each, .o-cline__note { font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-cline__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.o-cline__total { font: 700 14px/1.3 var(--o-font); color: var(--o-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-cline__remove { width: 32px; height: 32px; }
.o-cline__addons { margin: 6px 0 0 60px; }
.o-cline__addhead { margin: 0; font: 600 13px/1.4 var(--o-font); color: var(--o-text-2); }
.o-cline__add { display: flex; justify-content: space-between; gap: 12px; font: 400 13px/1.5 var(--o-font); color: var(--o-text-3); }
.o-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; padding: 2px; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.o-qty__btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--o-accent-deep); cursor: pointer; }
.o-qty__btn:hover { background: var(--o-accent-tint); }
.o-qty__btn:focus-visible { outline: none; box-shadow: var(--o-ring); }
:root[data-orderly-theme="dark"] .o-qty__btn { color: var(--o-accent); }
.o-qty__n { min-width: 24px; text-align: center; font: 700 14px/1 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.o-cart__sum { margin: 8px 0 16px; }
.o-cart__srow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font: 400 14px/1.4 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.o-cart__srow.is-total { padding-top: 12px; font: 700 17px/1.3 var(--o-font); color: var(--o-text); }
.o-cart__fee { margin: 8px 0 0; text-align: center; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-cart__free { margin-bottom: 12px; }
.o-cart__freelbl { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 500 13px/1.4 var(--o-font); color: var(--o-text-2); }
.o-cart__go { justify-content: space-between; position: relative; }
.o-cart .o-btn--block { width: 100%; }
.o-cart .o-btn.loading { cursor: wait; opacity: .7; }
.o-cart__alert { margin-top: 10px; }

.o-auth__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 380px) { .o-auth__two { grid-template-columns: 1fr; gap: 0; } }

/* Order tracking: details panel beside the live map. */
.o-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; font-family: var(--o-font); }
.o-track__panel { padding: 24px 0; min-width: 0; }
.o-track__map { position: relative; min-height: 320px; border-radius: var(--o-r-lg); overflow: hidden; }
@media (min-width: 992px) {
  .o-track { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; min-height: 560px; }
  .o-track__map { min-height: 560px; }
}
.o-track__eta { margin: 0 0 4px; font: 800 26px/1.2 var(--o-font); letter-spacing: -.01em; color: var(--o-text); }
.o-track__status { margin: 0 0 4px; font: 700 15px/1.4 var(--o-font); color: var(--o-text); }
.o-track__detail { margin: 0 0 12px; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-track__steps { margin: 20px 0 8px; }
.o-track__sec { margin-top: 24px; }
.o-track__h { margin: 0 0 6px; font: 700 15px/1.3 var(--o-font); color: var(--o-text); }
.o-track__p { margin: 0 0 4px; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-track__p b { color: var(--o-text); font-weight: 700; }
.o-track__merchant { display: flex; align-items: flex-start; gap: 12px; }
.o-track__logo { flex: 0 0 auto; width: 48px; height: 48px; }
.o-track__logo img { width: 48px; height: 48px; object-fit: cover; }
.o-track__mbody { min-width: 0; flex: 1 1 auto; }
.o-track__mname { margin: 0; font: 700 15px/1.35 var(--o-font); color: var(--o-text); text-decoration: none; }
.o-track__cuisine { margin-left: 8px; font: 500 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-track__addr { margin: 2px 0 0; font: 400 13px/1.45 var(--o-font); color: var(--o-text-3); }
.o-track__acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.o-track__driver { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.o-track__driver .o-icon-btn { margin-left: auto; }
.o-track__order { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.o-track__items { list-style: none; margin: 8px 0 0; padding: 0; font: 400 14px/1.6 var(--o-font); color: var(--o-text-2); }
.o-track__fit { background: var(--o-surface); }
.o-btn.loading { cursor: wait; opacity: .7; }

/* Checkout: steps on the left, order summary on the right. */
.o-co { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 0 24px; }
.o-co__merchant { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 0; }
.o-co__mbody { min-width: 0; }
.o-co__cartbody { padding: 16px; }
@media (min-width: 992px) { .o-co { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; } }

/* ── Branch bar and branch sheet (.o-branch*) ──────────────────────────────────────────────────────
   "Nearest branch: Kahawa Sukari, 2.1 km · Open now  Change branch" on a chain's page. The sheet
   reuses .o-loc (bottom sheet on phones, dialog on desktop). Built by assets/js/orderly-branches.js.
   Flat: no boxes, no outlines; open is the go colour, closed is quiet text, never red. */
.o-branch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; font: 500 14px/1.4 var(--o-font); color: var(--o-text-2); }
.o-branch .o-ico { color: var(--o-text-3); flex: none; }
.o-branch__text { margin: 0; min-width: 0; }
.o-branch__text b { color: var(--o-text); font-weight: 700; }
.o-branch__k { color: var(--o-text-3); }
.o-branch__st.is-open { color: var(--o-go-deep); font-weight: 600; }
.o-branch__st.is-closed { color: var(--o-text-3); }
.o-branch__change { margin-left: auto; min-height: 44px; padding: 0 4px; border: 0; background: transparent; font: 600 14px/1 var(--o-font); cursor: pointer; }
.o-branch__change:focus-visible { outline: none; box-shadow: var(--o-ring); border-radius: var(--o-r-sm); }
.o-bsheet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.o-bsheet__row { align-items: flex-start; }
.o-bsheet__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-bsheet__main b { font-weight: 700; color: var(--o-text); }
.o-bsheet__sub { font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-bsheet__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 13px/1.3 var(--o-font); color: var(--o-text-2); }
.o-bsheet__st.is-open { color: var(--o-go-deep); }
.o-bsheet__st.is-closed { color: var(--o-text-3); font-weight: 500; }
.o-bsheet__ask { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 4px; }
.o-bsheet__ask p { margin: 0; font: 400 15px/1.45 var(--o-font); color: var(--o-text-2); }
.o-bsheet__ask h3 { margin: 0; font: 800 18px/1.25 var(--o-font); color: var(--o-text); }
.o-bsheet__err { margin: 0; color: var(--o-danger); font: 500 14px/1.4 var(--o-font); }
:root[data-orderly-theme="dark"] .o-branch__st.is-open, :root[data-orderly-theme="dark"] .o-bsheet__st.is-open { color: var(--o-go); }

/* ======================================================================
   WAVE 1 SHARED COMPONENTS (docs/plans/ui-overhaul-2026-10-14.md §2)
   ====================================================================== */

/* ---------------------------------------------------------- segmented ----
   Two to five choices, one picked: view (cards / list / board), Regular /
   Advanced, Today / 7 days / 30 days. role="radiogroup", buttons with
   aria-pressed or .is-on. 44px on touch screens. */
.o-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--o-r-pill); background: var(--o-surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.o-seg::-webkit-scrollbar { display: none; }
.o-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); font: 600 14px/1 var(--o-font); white-space: nowrap; cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-seg__btn:hover { color: var(--o-text); }
.o-seg__btn.is-on, .o-seg__btn[aria-pressed="true"] { background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-1); }
.o-seg__btn:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-seg__btn svg { width: 16px; height: 16px; }
@media (pointer: coarse) { .o-seg__btn { min-height: 40px; } }

/* -------------------------------------------------------------- board ----
   Work moving through stages (kitchen tickets, live orders, POS open orders).
   Columns side by side on wide screens; one swipe per column on phones. */
.o-board { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.o-board__col { display: flex; flex-direction: column; gap: 8px; flex: 0 0 min(86vw, 320px); scroll-snap-align: start; min-width: 0; padding: 10px; border-radius: var(--o-r); background: var(--o-surface-2); }
@media (min-width: 900px) { .o-board { overflow-x: visible; } .o-board__col { flex: 1 1 0; } }
.o-board__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 4px 4px; font: 700 15px/1.2 var(--o-font); color: var(--o-text); background: var(--o-surface-2); }
.o-board__head .o-chip { min-height: 24px; padding: 0 9px; font-variant-numeric: tabular-nums; }
.o-board__col[data-stage="new"] .o-board__head .o-chip { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-board__col[data-stage="cooking"] .o-board__head .o-chip { background: var(--o-warn-tint); color: var(--o-warn); }
.o-board__col[data-stage="ready"] .o-board__head .o-chip { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-board__body { display: flex; flex-direction: column; gap: 8px; min-height: 24vh; }
.o-board__body > .o-card { padding: 14px; }
.o-board__empty { padding: 18px 8px; text-align: center; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }

/* ----------------------------------------------------------- schedule ----
   Times per day: opening hours, shifts, order limits. One row per day, the
   day's time ranges as chips, an inline editor row under a day (never a
   modal), presets strip above. Rows stack as cards on phones. */
.o-sched { display: flex; flex-direction: column; gap: 4px; }
.o-sched__presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.o-sched__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--o-r-sm); }
.o-sched__row:hover { background: var(--o-surface-2); }
.o-sched__day { font: 600 15px/1.2 var(--o-font); color: var(--o-text); }
.o-sched__cells { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.o-sched__cells .o-chip { font-variant-numeric: tabular-nums; }
.o-sched__row.is-closed .o-sched__day, .o-sched__closed { color: var(--o-text-3); }
.o-sched__end { display: flex; align-items: center; gap: 6px; }
.o-sched__edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: var(--o-r-sm); background: var(--o-surface-2); }
.o-sched__edit .o-input:not(#o) { flex: 1 1 0; width: auto !important; min-width: 0; max-width: 150px; min-height: 44px !important; padding: 0 8px !important; font-variant-numeric: tabular-nums; }
.o-sched__edit .o-icon-btn { flex: 0 0 36px; width: 36px; height: 36px; }
@media (max-width: 575.98px) { .o-sched__edit { padding: 10px; } .o-sched__edit input[type=time]::-webkit-calendar-picker-indicator { display: none; } }
@media (max-width: 575.98px) { .o-sched__row { grid-template-columns: minmax(0, 1fr) auto; } .o-sched__cells { grid-column: 1 / -1; order: 3; } }

/* -------------------------------------------------------------- sheet ----
   Detail beside the work, never instead of it: a side panel on wide screens
   (the list stays clickable), a bottom sheet on phones. ods.js:
   [data-o-sheet-open="#id"] opens, [data-o-sheet-close] / Esc / scrim
   closes, focus returns to the opener. Vue screens may toggle .is-open. */
.o-sheet { position: fixed; z-index: 1060; display: none; flex-direction: column; background: var(--o-surface); color: var(--o-text); font-family: var(--o-font); }
.o-sheet.is-open { display: flex; }
.o-sheet__scrim { position: fixed; inset: 0; z-index: 1059; display: none; background: rgb(0 0 0 / .4); }
.o-sheet.is-open + .o-sheet__scrim { display: block; }
@media (min-width: 992px) {
  .o-sheet { top: 0; right: 0; bottom: 0; width: min(480px, 92vw); box-shadow: var(--o-elev-3); animation: o-sheet-side 180ms cubic-bezier(.16, 1, .3, 1); }
  .o-sheet.is-open + .o-sheet__scrim { background: transparent; pointer-events: none; }
}
@media (max-width: 991.98px) {
  .o-sheet { left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: var(--o-r-lg) var(--o-r-lg) 0 0; animation: o-sheet-up 200ms cubic-bezier(.16, 1, .3, 1); }
}
@keyframes o-sheet-side { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes o-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .o-sheet { animation: none; } }
.o-sheet__grab { width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--o-surface-3); }
@media (min-width: 992px) { .o-sheet__grab { display: none; } }
.o-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; }
.o-sheet__title { margin: 0; font: 700 18px/1.25 var(--o-font); color: var(--o-text); }
.o-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 20px; -webkit-overflow-scrolling: touch; }
.o-sheet__foot { display: flex; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--o-surface); box-shadow: 0 -1px 0 var(--o-surface-2); }
.o-sheet__foot .o-btn { flex: 1 1 0; }
html.o-sheet-lock, html.o-sheet-lock body { overflow: hidden; }

/* -------------------------------------------------------- photo cards ----
   Things with a photo (menu items, offers, banners): the whole card edits,
   a compact switch on the card does not. No photo => initials tile. */
.o-pcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (max-width: 400px) { .o-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.o-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--o-r); background: var(--o-surface); color: var(--o-text); text-decoration: none !important; overflow: hidden; transition: box-shadow var(--o-ease); }
.o-pcard:hover { box-shadow: var(--o-elev-2); }
.o-pcard:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-pcard__media { aspect-ratio: 4 / 3; background: var(--o-surface-2); display: grid; place-items: center; color: var(--o-text-3); font: 700 22px/1 var(--o-font); }
.o-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-pcard__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; min-height: 64px; }
.o-pcard__name { font: 600 15px/1.3 var(--o-font); color: var(--o-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font: 600 14px/1.2 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.o-pcard.is-off .o-pcard__media, .o-pcard.is-off .o-pcard__name { opacity: .5; }
.o-pcard .o-switch { min-height: 32px; }
.o-pcard .o-switch__track { width: 40px; height: 24px; }
.o-pcard .o-switch__track::after { width: 18px; height: 18px; }
.o-pcard .o-switch input:checked + .o-switch__track::after { transform: translateX(16px); }

/* ------------------------------------------------------- form sections ----
   One record edited in place: sections with a title and a hint, fields in
   one column (two on wide screens when they pair), one sticky Save bar. */
.o-form { max-width: 760px; }
.o-fsec { padding: 4px 0 20px; }
.o-fsec + .o-fsec { padding-top: 24px; }
.o-fsec__title { margin: 0 0 4px; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-fsec__hint { margin: 0 0 14px; font: 400 13px/1.45 var(--o-font); color: var(--o-text-3); }
@media (min-width: 900px) { .o-fsec--2col .o-fsec__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } }
.o-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 16px -20px -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--o-surface); box-shadow: 0 -1px 0 var(--o-surface-2); }
.o-savebar__state { margin-right: auto; font: 500 13px/1 var(--o-font); color: var(--o-text-3); }

/* ------------------------------------------------------------- key/value ----
   Detail panels: label left, value right, figures aligned. */
.o-kv { display: flex; flex-direction: column; margin: 0; }
.o-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; }
.o-kv__k { font: 400 14px/1.4 var(--o-font); color: var(--o-text-3); }
.o-kv__v { font: 600 14px/1.4 var(--o-font); color: var(--o-text); text-align: right; font-variant-numeric: tabular-nums; }
.o-kv__row--total .o-kv__k, .o-kv__row--total .o-kv__v { font-size: 16px; font-weight: 700; color: var(--o-text); }

/* -------------------------------------------------------- toast, confirm ----
   ODS.toast(text, {tone:'go'|'danger', action, onAction}) and
   ODS.confirm({title, text, ok, okTone:'danger'|'go', cancel}) => Promise. */
.o-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1100; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); min-height: 48px; padding: 0 8px 0 18px; border-radius: var(--o-r-pill); background: var(--o-text); color: var(--o-surface); font: 600 14px/1.3 var(--o-font); transform: translateX(-50%); box-shadow: var(--o-elev-3); animation: o-toast-in 180ms cubic-bezier(.16, 1, .3, 1); }
.o-toast--go { background: var(--o-go); color: #fff; } /* ui-lint: allow — label on the go fill */
.o-toast--danger { background: var(--o-danger-solid); color: #fff; } /* ui-lint: allow — label on the danger fill */
.o-toast__action { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--o-r-pill); background: rgb(255 255 255 / .16); color: inherit; font: 700 14px/1 var(--o-font); cursor: pointer; }
.o-toast__text { padding: 12px 10px 12px 0; }
@keyframes o-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
dialog.o-confirm { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--o-r-lg); background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-3); font-family: var(--o-font); }
dialog.o-confirm::backdrop { background: rgb(0 0 0 / .45); }
.o-confirm__body { padding: 22px 22px 8px; }
.o-confirm__title { margin: 0 0 6px; font: 700 18px/1.3 var(--o-font); }
.o-confirm__text { margin: 0; font: 400 15px/1.5 var(--o-font); color: var(--o-text-2); }
.o-confirm__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }
.o-btn--danger-solid { background: var(--o-danger-solid); color: #fff !important; } /* ui-lint: allow — label on the danger fill */

/* tables (floor plan) on the shared status chip */
.o-chip[data-status="free"] { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-chip[data-status="occupied"], .o-chip[data-status="seated"] { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-chip[data-status="reserved"] { background: var(--o-warn-tint); color: var(--o-warn); }
.o-chip[data-status="cleaning"] { background: var(--o-surface-2); color: var(--o-text-2); }
.o-chip[data-status="unavailable"] { background: var(--o-surface-3); color: var(--o-text-3); }

/* ------------------------------------------- Wave 3: record forms (Menu) ----
   Markup: .o-field > .o-label + .o-input|.o-select|.o-textarea (+ .o-help);
   pairs in .o-fpair; switch rows in .o-fsec; one .o-savebar. Errors from
   CActiveForm::error() carry .o-help--error. Sort pages: .o-sortlist rows with
   a grab handle (Sortable.js is unchanged); photo sort: .o-sorttiles. */
.o-help--error { color: var(--o-danger); font-weight: 500; }
/* custom.css caps input.datepick at 320px; a field fills its column */
.o-input:not(#o), .o-select:not(#o), .o-textarea:not(#o) { max-width: 100%; }
.o-field .o-help { margin-top: 6px; }
.o-fpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 16px; align-items: stretch; }
.o-fpair > .o-field { display: flex; flex-direction: column; min-width: 0; }
.o-fpair > .o-field > .o-label { flex: 1 0 auto; display: flex; align-items: flex-end; }
.o-fsec .o-switch + .o-switch { margin-top: 4px; }
.o-switch .o-ico, .o-switch__text .o-ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--o-text-3); }
.o-crumbs .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; font: 500 13px/1.4 var(--o-font); color: var(--o-text-3); }
.o-crumbs .breadcrumbs a { color: var(--o-text-2) !important; text-decoration: none !important; }
.o-crumbs .breadcrumbs a:hover { color: var(--o-accent-deep) !important; }
.o-formpage > .o-crumbs { margin-bottom: 12px; }
.o-fnote { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); font: 400 14px/1.5 var(--o-font); }
.o-fnote svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--o-text-3); }
.o-fnote p { margin: 0; }
.o-fpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* "Check all" next to a list of days */
.o-checkall { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.o-checkall .checkbox_select_all.checked { background: var(--o-go-tint); color: var(--o-go-deep) !important; }
/* a day: switch, then the two times; stacks when narrow */
.o-dayrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 6px 0; }
.o-dayrow .o-field { margin: 0; }
@media (max-width: 560px) { .o-dayrow { grid-template-columns: 1fr 1fr; } .o-dayrow > :first-child { grid-column: 1 / -1; } }
.o-dayrow .o-label { margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--o-text-3); }
/* Select2 (multi) skinned as a field: the library hides the native control and draws this */
.o-field .select2-container { width: 100% !important; }
/* custom.css gives every select width:100% !important, which un-hides Select2's native control and scrolls the page sideways */
.o-field select.select2-hidden-accessible:not(#o) { width: 1px !important; min-height: 0 !important; height: 1px !important; padding: 0 !important; }
/* the field itself: ods-legacy.css "choice field" (one skin for every Select2) */
/* sort rows (E4) */
.o-sortgroup { margin: 0 0 18px; }
.o-sortgroup__title { margin: 0 0 6px; padding: 0 12px; font: 700 14px/1.3 var(--o-font); color: var(--o-text-2); }
.o-sortlist { min-height: 8px; }
.o-sortlist > .o-row { min-height: 56px; background: var(--o-surface-2); }
.o-sortlist > .o-row:hover { background: var(--o-surface-3); }
.o-row__grab { cursor: grab; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 44px; margin-left: -6px; color: var(--o-text-3); touch-action: none; }
.o-row__grab svg { width: 18px; height: 18px; }
.sortable-ghost { opacity: .45; }
.sortable-chosen { box-shadow: var(--o-elev-2); }
.o-sorttiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 10px; }
.o-row__grab:active, .o-sorttile:active { cursor: grabbing; }
.o-sorttile { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--o-r-sm); background: var(--o-surface-2); cursor: grab; text-align: center; font: 600 13px/1.3 var(--o-font); color: var(--o-text); }
.o-sorttile img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; background: var(--o-surface-3); }
#sort-items.o-sorttiles .o-sorttile img { width: 100%; height: auto; }
/* collapsible "more" block that is a plain section (translations) */
.o-more--form { margin-top: 24px; }
.o-more--form > summary { cursor: pointer; }
.o-more--form .o-more__body { padding: 4px 16px 16px; }
/* lazy list rows (merchant.js setLazyData): cells arrive as HTML from the list endpoints */
.o-row__lead { flex: 0 0 auto; min-width: 0; }
.o-row__lead img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.o-row__main h6, .o-row__main h5, .o-row__main .h6 { margin: 0; font: 600 15px/1.3 var(--o-font); color: var(--o-text); }
.o-row__main p { margin: 2px 0 0; font: 400 13px/1.35 var(--o-font); color: var(--o-text-3); }
.o-row__main .dim { color: var(--o-text-3); }
.o-row__end .btn { min-width: 44px; min-height: 44px; }
.o-toolbar .o-listsearch { flex: 1 1 260px; margin: 0; }
.o-toolbar__count { margin-left: auto; font: 600 14px/1.3 var(--o-font); color: var(--o-text-2); }
/* barcode labels (food/view_barcode): a tile on screen, the label's cut line on paper */
.o-barcode { display: table; margin: 0 0 12px; padding: 12px; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text); }
.o-barcode__row { display: flex; align-items: flex-end; gap: 8px; }
.o-barcode__name { margin: 0 0 2px; font: 800 18px/1.2 var(--o-font); text-transform: uppercase; }
.o-barcode__desc { max-width: 200px; }
.o-barcode__img { display: block; max-width: 200px; }
.o-barcode__price { padding-left: 8px; }
@media print { .o-barcode { background: none; color: CanvasText; border: 1px solid CanvasText; border-radius: 0; } } /* ui-lint: allow - printed label cut line */
.o-head > .o-head__actions:only-child { margin-left: auto; }
.o-back { margin: 0 0 14px; }
.o-back .o-link svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .o-row--actions.o-row--flush .o-row__end { padding-left: 0; } }
/* Element Plus on the pause list: its primary and fills follow the design system */
#vue-items-availability { --el-color-primary: var(--o-accent-solid); --el-color-primary-light-9: var(--o-accent-tint); --el-color-primary-light-7: var(--o-accent-tint); --el-fill-color-blank: var(--o-surface); --el-fill-color-light: var(--o-surface-2); --el-text-color-regular: var(--o-text); --el-text-color-primary: var(--o-text); --el-text-color-placeholder: var(--o-text-3); --el-border-color: var(--o-surface-3); --el-border-color-light: var(--o-surface-3); --el-bg-color: var(--o-surface); }
.o-back .o-link { min-height: 44px; }
/* phones: the small buttons of these forms and lists are still 44px tall */
@media (max-width: 767px) { .o-checkall .o-btn--sm, .o-toolbar .o-btn--sm, .o-row__end .o-btn--sm, .o-head__actions .o-btn--sm { min-height: 44px; } }
/* ======================================================================
   WAVE 3: team and marketing forms (docs/plans/work/ui/w3-team-marketing.md)
   ====================================================================== */
.o-help--error { color: var(--o-danger); }
.o-field { position: relative; }   /* select2 hides the real <select> with position:absolute; it must stay inside its field */
.o-head__back { min-height: 44px; margin: 0; font-size: 14px; }
@media (max-width: 575.98px), (pointer: coarse) { .o-head__actions .o-btn--sm, .o-toolbar .o-btn--sm, .o-empty .o-btn--sm { min-height: 44px; } }
.o-form--wide { max-width: none; }
.o-fsec__title { display: flex; align-items: center; gap: 10px; }
.o-fsec__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 16px; }

/* a pill that sets another control (role picker over the posted <select>) */
.o-rolechips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.o-chipbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text); font: 600 15px/1 var(--o-font); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-chipbtn:hover { background: var(--o-surface-3); }
.o-chipbtn:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-chipbtn.is-on { background: var(--o-accent-tint); color: var(--o-accent-deep); }

/* permission matrix: one section per menu group, one row per screen */
.o-perm__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 4px 8px 6px; }
.o-perm__head .o-switch__text { font-weight: 700; font-size: 16px; }
.o-perm__count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.o-perm__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 4px 8px; border-radius: var(--o-r-sm); }
.o-perm__row:hover { background: var(--o-surface-2); }
.o-perm__row .o-switch { min-height: 44px; }
.o-perm__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.o-permchip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.o-permchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-permchip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-3); font: 600 13px/1 var(--o-font); transition: background var(--o-ease), color var(--o-ease); }
.o-perm__row:hover .o-permchip span { background: var(--o-surface-3); }
.o-permchip input:checked + span { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-permchip input:focus-visible + span { box-shadow: var(--o-ring); }
@media (pointer: coarse) { .o-permchip span { min-height: 44px; } }
@media (max-width: 575.98px) { .o-perm__row { grid-template-columns: 1fr; padding: 4px 0 10px; } .o-perm__head { padding-left: 0; padding-right: 0; } .o-perm__acts { justify-content: flex-start; } }

/* drag to sort: tiles in a wrapping grid, Sortable.js on #sort-items */
.o-sortgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); margin: 0 0 8px; }
.o-sorttile { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 8px 10px; border-radius: var(--o-r); background: var(--o-surface-2); cursor: grab; touch-action: none; }
.o-sorttile:active { cursor: grabbing; }
.o-sorttile img, #sort-items .o-sorttile img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--o-r-sm); background: var(--o-surface-3); display: block; }
.o-sorttile__name { display: flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--o-font); color: var(--o-text); min-width: 0; }
.o-sorttile__name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-sorttile__name svg { width: 16px; height: 16px; color: var(--o-text-3); flex: 0 0 auto; }
.o-sorttile.sortable-ghost { opacity: .4; }

/* banners and offers as photo cards */
.o-pcards--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.o-pcards--wide .o-pcard__media { aspect-ratio: 7 / 3; }
@media (max-width: 400px) { .o-pcards--wide { grid-template-columns: 1fr; } }
.o-pcard__tap { position: absolute; inset: 0 0 56px 0; z-index: 1; }
.o-pcard__tap:focus-visible { outline: none; box-shadow: inset var(--o-ring); border-radius: var(--o-r) var(--o-r) 0 0; }
.o-pcard__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px 12px; }
.o-pcard__foot .o-switch { min-height: 44px; }
.o-pcard__foot .o-icon-btn { width: 44px; height: 44px; }

/* filter bar with a select, a search pill and a count (featured / suggested dishes) */
.o-toolbar .o-select:not(#o) { width: auto !important; flex: 0 1 190px; min-width: 150px; }
.o-toolbar__count { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .o-toolbar .o-select:not(#o) { flex: 1 1 100%; } .o-toolbar__count { margin-left: 0; } }

/* a segmented control that wraps instead of scrolling (presets: five or more choices on a phone) */
.o-seg--wrap { flex-wrap: wrap; overflow: visible; border-radius: var(--o-r); }
.o-seg--wrap .o-seg__btn { min-height: 44px; }
.o-fsec__title + .o-field, .o-fsec__title + .o-fsec__row, .o-fsec__title + .o-switch { margin-top: 12px; }
.o-pcards--wide .o-pcard__body { flex: 1 1 auto; }

/* ---------------------------------------- Wave 3 modules (driver / kitchen apps, integrations, notifications,
   SMS, order settings, wallet, plans, payments config, invoices). Presentation only. */
.o-readline { margin: 0; padding: 12px 16px; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); font: 400 14px/1.5 var(--o-font); overflow-wrap: anywhere; }
.o-readbody { color: var(--o-text-2); font: 400 15px/1.6 var(--o-font); overflow-wrap: anywhere; }
.o-readbody img { max-width: 100%; height: auto; }
.o-help .o-helplist, .o-helplist { margin: 4px 0 0; padding-left: 18px; font: 400 13px/1.5 var(--o-font); color: var(--o-text-3); }
.o-apikey { display: flex; gap: 8px; align-items: stretch; }
.o-apikey > .o-input, .o-apikey > .o-textarea { flex: 1 1 auto; min-width: 0; }
.o-apikey > .o-btn { flex: 0 0 auto; min-height: 50px; }
.o-ledgertools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
@media (max-width: 575.98px) { .o-apikey { flex-direction: column; } .o-apikey > .o-btn { min-height: 44px; } }
/* a radio (or logo) picked as a tinted card: the real radio stays in the page, visually hidden */
.o-logochoice { position: relative; min-width: 0; }
.o-logochoice > .o-choice { height: 100%; align-items: center; }
.o-choices:not(.o-choices--list) .o-logochoice > .o-choice { flex-direction: column; text-align: center; }
.o-logochoice > .o-choice img { width: 100%; max-width: 160px; height: 56px; object-fit: contain; border-radius: var(--o-r-sm); }
.o-logochoice > input:checked + .o-choice { background: var(--o-accent-tint); box-shadow: var(--o-elev-1); }
.o-logochoice > input:checked + .o-choice .o-choice__check { display: inline-flex; }
.o-logochoice > input:focus-visible + .o-choice { box-shadow: var(--o-ring); }
.o-choices--list .o-logochoice > input:checked + .o-choice .o-choice__check { position: static; margin-left: auto; }
.o-choices--list .o-logochoice > .o-choice { min-height: 56px; align-items: center; }
/* a native radio list (Yii activeRadioButtonList) styled as rows */
.o-radiolist > span { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.o-radiolist input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--o-accent); }
.o-radiolist label { margin: 0; font: 500 15px/1.3 var(--o-font); color: var(--o-text); }
.o-filefield { display: block; width: 100%; padding: 12px 16px; border: 0; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); font: 400 14px/1.4 var(--o-font); }
.o-input.o-input--prio:not(#o) { width: 96px !important; min-height: 44px; flex: 0 0 auto; }
.o-switchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 16px; }
.o-rows--scroll { max-height: 40vh; overflow-y: auto; }
.o-row--wrap .o-row__title, .o-row--wrap .o-row__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.o-row--wrap .o-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.o-row--wrap .o-row__main { gap: 3px; }
/* invoice page: the invoice beside its side facts; below 992px one column */
.o-inv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 992px) { .o-inv { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
.o-inv__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.o-inv__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.o-inv__line { margin: 0; font: 400 14.5px/1.55 var(--o-font); color: var(--o-text-2); }
.o-inv__due { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.o-inv__amount { font: 700 28px/1.15 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.o-inv__note { font: 600 13px/1.3 var(--o-font); color: var(--o-text-3); }
@media (max-width: 575.98px) { .o-inv__due { align-items: flex-start; } }
/* notifications list: unread rows are tinted, the message wraps */
.o-notif { position: relative; }
.o-notif__day { margin: 14px 12px 4px; font: 600 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-notif__row { cursor: pointer; }
.o-notif__row.is-unread { background: var(--o-accent-tint); }
.o-notif__busy { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--o-text-2); font: 500 14px/1.3 var(--o-font); }
.o-fsec .o-fpair + .o-field, .o-fsec .o-field + .o-fpair, .o-fsec .o-switch + .o-field { margin-top: 0; }
.o-card > .o-fsec:last-of-type { padding-bottom: 8px; }
.o-choices--list + .o-field, .o-choices + .o-field { margin-top: 18px; }
.o-more + .o-fsec, .o-more + .o-more { margin-top: 12px; }
.o-more + .o-fsec { padding-top: 24px; }
@media (max-width: 480px) { .o-notif__row { align-items: flex-start; } .o-notif__row .o-row__avatar { display: none; } .o-notif__row .o-row__end { flex-wrap: nowrap; } }
/* ======================================================================
   WAVE 3: inventory, tables and reservations (docs/plans/work/ui/w3-inventory-booking.md)
   ====================================================================== */
/* reservation statuses the chip map did not know */
.o-chip[data-status="confirmed"] { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-chip[data-status="finished"] { background: var(--o-surface-2); color: var(--o-text-2); }
.o-chip[data-status="denied"], .o-chip[data-status="no_show"] { background: var(--o-danger-tint); color: var(--o-danger); }
.o-chip[data-status="waitlist"] { background: var(--o-warn-tint); color: var(--o-warn); }
a.o-chip { text-decoration: none !important; }

/* inventory overview */
.oi-sec { margin-bottom: 14px; }
.oi-range { gap: 8px; }
.oi-range .o-input:not(#o) { width: auto !important; flex: 0 1 170px; min-width: 140px; }
.oi-range__to { font: 500 14px/1 var(--o-font); color: var(--o-text-3); }
.o-table .o-table__sub { display: inline; margin: 0; }
.o-table tfoot td { background: var(--o-surface-2); }
.opv-fact { font: 700 18px/1.3 var(--o-font); color: var(--o-text); overflow-wrap: anywhere; }

/* purchase lines: a grid instead of el-row / el-col; the Element controls stay and follow the tokens */
.opl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.opl-top .o-fsec__title { margin: 0; }
.opl-line { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 10px; align-items: center; margin: 0 0 10px; }
.opl-line--head { margin-bottom: 4px; }
.opl-line--head .o-label { margin: 0; }
.opl-lbl { display: none; }
.opl-cell { min-width: 0; }
.opl-cell .el-select, .opl-cell .el-input-number { width: 100%; }
.opl-total { margin-top: 14px; }
@media (max-width: 700px) {
  .opl-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "ing ing ing" "qty cost rm"; align-items: end; padding: 12px 0 14px; }
  .opl-line > .opl-cell--ing { grid-area: ing; }
  .opl-line > .opl-cell--rm { grid-area: rm; }
  .opl-line--head { display: none; }
  .opl-lbl { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--o-text-3); }
}
#app-orderly-purchase-lines { --el-color-primary: var(--o-accent-solid); --el-color-primary-light-9: var(--o-accent-tint); --el-color-primary-light-7: var(--o-accent-tint); --el-fill-color-blank: var(--o-surface-2); --el-fill-color-light: var(--o-surface-3); --el-text-color-regular: var(--o-text); --el-text-color-primary: var(--o-text); --el-text-color-placeholder: var(--o-text-3); --el-border-color: transparent; --el-border-color-light: transparent; --el-bg-color: var(--o-surface); --el-input-border-color: transparent; --el-input-hover-border-color: transparent; --el-select-border-color-hover: transparent; }

/* tables and reservations */
.obk-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; margin: 0 0 14px; }
.obk-sum .o-stat { padding: 14px 16px; }
.obk-sum .o-stat__value { font-size: 24px; }
.obk-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 0 24px; }
.obk-days .o-field { margin: 0; }
.obk-shifts + .obk-shifts { margin-top: 14px; }
.obk-shifts .o-sched__cells a.o-chip { min-height: 32px; padding: 0 14px; }
.obk-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.obk-who__photo { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--o-surface-3); }
.obk-who .o-head__title { overflow-wrap: anywhere; }
.obk-who .o-head__sub { overflow-wrap: anywhere; }
.obk-status { padding-bottom: 14px; }
.obk-status .o-fsec__title { margin-bottom: 8px; }
.obk-split { align-items: start; }
.obk-split .o-tabs { margin-bottom: 18px; }
.obk-details { margin-bottom: 0; }
.obk-details .o-card__title { margin-bottom: 6px; }
.obk-request { margin: 14px 0 0; }
.obk-request p { margin: 6px 0 0; }
.o-kv > .o-kv__row > dd, .o-kv > .o-kv__row > dt { margin: 0; }
.o-kv__v { min-width: 0; overflow-wrap: anywhere; }
.obk-qr { text-align: center; }
.obk-qr__hint { max-width: 320px; margin: 0 auto 14px; }
@media (max-width: 767px), (pointer: coarse) {
  .obk-shifts .o-sched__cells a.o-chip { min-height: 44px; }
  .obk-status .o-seg__btn, .obk-split .o-tab { min-height: 44px; }
  .oi-range .o-btn--sm, .opl-top .o-btn--sm { min-height: 44px; }
  .obk-shifts .o-row__main { min-height: 44px; justify-content: center; }
  .obk-shifts .o-icon-btn, .opl-cell--rm .o-icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 575.98px) { .oi-range .o-input:not(#o) { flex: 1 1 130px; } .oi-range__to { display: none; } }
button.o-tab { border: 0; background: transparent; cursor: pointer; }
button.o-tab.is-on { background: var(--o-surface); }
a.o-seg__btn { color: var(--o-text-2) !important; text-decoration: none !important; }
a.o-seg__btn.is-on { color: var(--o-text) !important; }
/* the Element wrapper is the field; the native input inside it must not draw a second box */
#app-orderly-purchase-lines .el-input__inner:not(#o), #app-orderly-purchase-lines .el-select__input:not(#o), #app-orderly-purchase-lines .el-select__selection input:not(#o) { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
#app-orderly-purchase-lines .el-input__wrapper:not(#o), #app-orderly-purchase-lines .el-select__wrapper:not(#o) { min-height: 50px; border-radius: var(--o-r-sm); background: var(--o-surface-2) !important; box-shadow: none !important; }
#app-orderly-purchase-lines .el-input-number { line-height: normal; }

/* ---------------------------------------- Wave 3: settings screens ----
   Radios (checkout time, tax method, menu style), a skinned file input,
   provider cards (delivery providers) and the checkout-fields rows. */
.o-radios { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.o-radio { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; cursor: pointer; font: 600 15px/1.35 var(--o-font); color: var(--o-text); }
.o-radio input, .o-radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-radio__dot, .o-radio--list label::before { content: ""; position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--o-surface-3); transition: background var(--o-ease); }
.o-radio__dot::after, .o-radio--list label::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; /* ui-lint: allow - the dot on the accent fill */ top: 7px; left: 7px; transform: scale(0); transition: transform var(--o-ease); }
.o-radio input:checked + .o-radio__dot, .o-radio--list input:checked + label::before { background: var(--o-accent-solid); }
.o-radio input:checked + .o-radio__dot::after { transform: scale(1); }
.o-radio input:focus-visible + .o-radio__dot, .o-radio--list input:focus-visible + label::before { box-shadow: var(--o-ring); }
.o-radio__text { min-width: 0; }
.o-radio__text small { display: block; margin-top: 2px; font: 400 13px/1.4 var(--o-font); color: var(--o-text-3); }
/* radioButtonList output: <span class="o-radio o-radio--list"><input><label> */
.o-radio--list { position: relative; }
.o-radio--list label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; cursor: pointer; font: 600 15px/1.35 var(--o-font); color: var(--o-text); position: relative; }
.o-radio--list label::after { left: 7px; top: 18px; }
.o-radio--list input:checked + label::after { transform: scale(1); }
.o-radio--list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-radio--list label::before { content: ""; }
/* a file input in the field well */
.o-file:not(#o) { display: block; width: 100%; min-height: 50px; padding: 8px 12px !important; border: 0 !important; border-radius: var(--o-r-sm); background: var(--o-surface-2) !important; color: var(--o-text-2); font: 400 14px/1.4 var(--o-font); }
.o-file::file-selector-button { margin: 0 12px 0 0; min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 14px/1 var(--o-font); cursor: pointer; }
.o-fieldline { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 14px/1.4 var(--o-font); color: var(--o-text-2); }
.o-fieldline b { color: var(--o-text); }
.o-code { display: block; padding: 10px 14px; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.o-formpage .o-card.o-form { max-width: 760px; }
/* provider cards */
.o-provgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.o-prov { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--o-r); background: var(--o-surface); }
.o-prov__name { margin: 0; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-prov__text { margin: 0; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.o-prov__text.is-open { display: block; -webkit-line-clamp: unset; }
.o-prov__more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--o-accent-deep); font: 600 14px/1.4 var(--o-font); cursor: pointer; min-height: 32px; }
.o-prov .o-btn { align-self: flex-start; margin-top: auto; }
/* checkout fields: one row per field, the two switches and the order types on it */
.o-cfrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 84px; gap: 10px 18px; align-items: center; padding: 12px 14px; border-radius: var(--o-r-sm); }
.o-cfrow:nth-child(even) { background: var(--o-surface-2); }
.o-cfrow__who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.o-cfrow__label { font: 600 15px/1.3 var(--o-font); color: var(--o-text); overflow-wrap: anywhere; }
.o-cfrow__types { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.o-cfrow__types label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; font: 500 14px/1.3 var(--o-font); color: var(--o-text-2); cursor: pointer; }
.o-cfrow__flags { display: flex; flex-wrap: wrap; gap: 0 22px; }
@media (max-width: 760px) { .o-cfrow { grid-template-columns: minmax(0, 1fr) 84px; } .o-cfrow__side { grid-column: 1 / -1; order: 3; } }
.o-cfrow .o-input { text-align: center; padding: 0 6px !important; }
.o-fpick > .o-help { margin: 0; }
.o-fpick > .o-input:not(#o) { flex: 1 1 200px; width: auto; min-width: 0; }
.o-provwrap { min-height: 12rem; }
/* menu builder: the page picker beside the menu tree, stacked when there is no room */
.o-menubuilder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@media (min-width: 900px) { .o-menubuilder { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.o-menubuilder__pick, .o-menubuilder__tree { min-width: 0; }
.o-row__sub--wrap { white-space: normal; overflow-wrap: anywhere; }
.o-fnote-slot { margin-top: 12px; }
.o-fnote-slot:empty { margin: 0; }
.o-fnote-slot .o-alert { margin: 0; }
/* checkout fields: rows with the switches and the order types on the right of the name */
.o-toolbar .o-toolbar__grow { flex: 1 1 240px; }
.o-toolbar > .o-field { margin: 0; }
.o-cfsearch { display: flex; align-items: center; gap: 6px; }
.o-cfwrap { position: relative; padding: 8px; }
.o-cfwrap.is-updating { opacity: .6; pointer-events: none; }
.o-cfwrap__busy { margin: 0 0 8px; font: 600 14px/1.3 var(--o-font); color: var(--o-text-2); }
.o-cfhead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 84px; gap: 10px 18px; padding: 8px 14px; font: 600 12px/1.2 var(--o-font); letter-spacing: .04em; text-transform: uppercase; color: var(--o-text-3); }
@media (max-width: 760px) { .o-cfhead { display: none; } }
.o-cfrow__side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-cfrow__flags .o-switch { min-height: 44px; gap: 10px; }
.o-cfrow__types input { width: 18px; height: 18px; accent-color: var(--o-accent-solid); }
.o-cfrow__who .o-chip { align-self: flex-start; }
.o-cfrow:nth-child(even) .o-input:not(#o) { background: var(--o-surface) !important; }
/* ======================================================================
   WAVE 3: site configuration (docs/plans/work/ui/w3-siteconfig.md)
   ====================================================================== */
/* a file picker that looks like an input; the chosen name sits next to a soft button */
.o-file:not(#o) { display: block; width: 100%; max-width: 100%; min-height: 50px; padding: 8px 12px; border: 0; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); font: 400 14px/1.4 var(--o-font); }
.o-file:not(#o)::file-selector-button { min-height: 34px; margin: 0 12px 0 0; padding: 0 16px; border: 0; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 14px/1 var(--o-font); cursor: pointer; }
.o-file:not(#o):focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-choicegroup > .o-label { display: block; }
.o-choicegroup .o-choice { align-items: center; min-height: 48px; padding: 10px 16px; }
.o-choicegroup .o-choice__title { font-weight: 600; }
/* a read-only value (redirect URL, API address) that is easy to select */
.o-input--ro:not(#o) { background: var(--o-surface-2); color: var(--o-text-2); }
.o-fsec__row .o-switch { min-width: 0; }
.o-fnote a, .o-help a { color: var(--o-accent-deep); }
.o-fnote code { font-size: 13px; }
.o-more--form .o-fnote { margin-top: 12px; }
.o-more--form ol, .o-more--form ul { margin: 8px 0 12px; padding-left: 20px; color: var(--o-text-2); font: 400 14px/1.55 var(--o-font); }
.o-more--form h4 { margin: 14px 0 4px; font: 700 15px/1.3 var(--o-font); color: var(--o-text); }
.o-more--form p { margin: 0 0 6px; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.o-fsec > .o-field:has(> .o-switch:only-child) { margin-bottom: 4px; }
/* a row-select checkbox with a 44px tap area */
.o-tick { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0 -6px 0 -10px; cursor: pointer; }
.o-tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--o-accent); cursor: pointer; }
.o-row--head { min-height: 44px; color: var(--o-text-3); font: 600 13px/1.3 var(--o-font); }
.o-row--head:hover { background: transparent; }
.o-row__stat { flex: 0 0 auto; min-width: 64px; text-align: right; font: 600 14px/1.3 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.o-busy { position: relative; }
.o-busy > .o-busy__veil { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; border-radius: var(--o-r); background: color-mix(in srgb, var(--o-surface) 70%, transparent); color: var(--o-text-2); font: 600 14px/1 var(--o-font); }
.o-row--head button { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none !important; cursor: pointer; }
.o-row--head .o-row__stat { text-align: right; }
/* delivery zone editor: identity on the left, the map beside it from 900px */
.o-zonegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) { .o-zonegrid { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); } }
.o-zonegrid > .o-card { max-width: none; }
.o-zonemapwrap { position: relative; }
.o-zonemap { width: 100%; height: 400px; border-radius: var(--o-r); background: var(--o-surface-2); overflow: hidden; }
.o-zonetools { position: absolute; top: 12px; left: 12px; z-index: 9; display: flex; flex-direction: column; gap: 8px; }
.o-zonetools .o-icon-btn { background: var(--o-surface); box-shadow: var(--o-elev-2); }
.o-zonetools .o-icon-btn.is-on { background: var(--o-accent-solid); color: #fff !important; } /* ui-lint: allow — icon on the accent fill */
.o-zonemode { position: absolute; top: 12px; left: 50%; z-index: 9; transform: translateX(-50%); box-shadow: var(--o-elev-2); }
.o-suggestwrap { position: relative; }
/* Mapbox address suggestions (create-zone.js builds the list) */
.o-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 220px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border-radius: var(--o-r-sm); background: var(--o-surface); box-shadow: var(--o-elev-3); }
.o-suggest__item { padding: 12px; border-radius: 8px; color: var(--o-text); font: 400 15px/1.35 var(--o-font); cursor: pointer; }
.o-suggest__item:hover { background: var(--o-surface-2); }
@media (max-width: 767px) { .o-form .o-btn--sm { min-height: 44px; } }
.o-row--zone { flex-wrap: wrap; }
.o-row--zone > .o-row__main { flex: 1 1 140px; }
@media (max-width: 560px) { .o-hide-sm { display: none !important; } }
.o-row--head { flex-wrap: nowrap; min-height: 44px; }
.o-row--head .o-row__main { align-items: flex-start; justify-content: center; }
   WAVE 3: admin attributes and locations (docs/plans/work/ui/w3-attributes.md)
   ====================================================================== */
/* a field with a fixed prefix (page address: https://site/ + slug) */
.o-affix { display: flex; align-items: stretch; min-height: 50px; border-radius: var(--o-r-sm); background: var(--o-surface-2); }
.o-affix:focus-within { background: var(--o-surface); box-shadow: var(--o-ring), var(--o-elev-1); }
.o-affix__pre { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 60%; padding: 0 0 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--o-text-3); font: 500 15px/1 var(--o-font); }
.o-affix .o-input:not(#o) { flex: 1 1 auto; min-width: 0; background: transparent !important; box-shadow: none !important; }
/* translations of one language: id, key, value, delete */
.o-trans > .o-trans__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px 14px; align-items: center; min-height: 0; padding: 6px 12px; background: transparent; }
.o-trans > .o-trans__row:hover { background: transparent; }
.o-trans__id { color: var(--o-text-3); font: 600 13px/1 var(--o-font); font-variant-numeric: tabular-nums; }
.o-trans__key { margin: 0; font: 600 14px/1.35 var(--o-font); color: var(--o-text); overflow-wrap: anywhere; }
.o-trans__foot { margin: 14px 0 4px; }
.o-trans__foot .pagination { margin: 0; flex-wrap: wrap; }
@media (max-width: 767px) {
  .o-trans > .o-trans__row { grid-template-columns: minmax(0, 1fr) auto; }
  .o-trans__id { display: none; }
  .o-trans__key { grid-column: 1 / -1; }
  .o-trans__row .o-input { grid-column: 1; }
  .o-trans__row .o-btn { min-height: 44px; }
}
.o-field .o-help .o-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) { .o-rows .o-row__end .o-icon-btn { width: 44px; height: 44px; } }

/* ---------------------------------------- Wave 4: Tailwind leftovers ----
   Back-office Vue screens used Tailwind colour utilities (bg-white, bg-gray-50,
   text-slate-500, border-gray-100 ...). They read the ODS tokens through these
   tone classes instead, so light and dark follow the theme without an adapter.
   sf = surface (sf = card, sf-2 = sunken, sf-3 = pressed or placeholder),
   tx = text (tx, tx-2 secondary, tx-3 muted). The h-/f-/a-/d-/gh-/ph- prefixes
   are the hover, focus, active, disabled, group-hover and placeholder states;
   a trailing -i is the old Tailwind !important. Lines are gone by design:
   separation is surface and spacing. */
.o-sf { background-color: var(--o-surface); }
.o-sf-2 { background-color: var(--o-surface-2); }
.o-sf-3 { background-color: var(--o-surface-3); }
.o-sf-veil { background-color: color-mix(in srgb, var(--o-surface) 72%, transparent); }
.o-tx { color: var(--o-text); }
.o-tx-2 { color: var(--o-text-2); }
.o-tx-3 { color: var(--o-text-3); }
.o-sf-i { background-color: var(--o-surface) !important; }
.o-sf-2-i { background-color: var(--o-surface-2) !important; }
.o-tx-i { color: var(--o-text) !important; }
.o-tx-2-i { color: var(--o-text-2) !important; }
.o-tx-3-i { color: var(--o-text-3) !important; }
.o-h-sf-2:hover { background-color: var(--o-surface-2); }
.o-h-sf-3:hover { background-color: var(--o-surface-3); }
.o-h-sf-2-i:hover { background-color: var(--o-surface-2) !important; }
.o-h-sf-3-i:hover { background-color: var(--o-surface-3) !important; }
.o-h-tx:hover { color: var(--o-text); }
.o-h-tx-2:hover { color: var(--o-text-2); }
.o-d-sf-3:disabled { background-color: var(--o-surface-3); }
.group:hover .o-gh-tx-2 { color: var(--o-text-2); }
.o-ph-tx-3::placeholder { color: var(--o-text-3); opacity: 1; }
/* dim layer behind a dialog; dark pill for a tooltip (inverse of the page, right in both themes) */
.o-scrim { background-color: oklch(0% 0 0 / .45); }
.o-tip { background-color: var(--o-text); color: var(--o-bg); box-shadow: var(--o-elev-1); }
/* the one ring spinner: pair it with Tailwind's animate-spin and a size (h-10 w-10) */
.o-spin { display: inline-block; flex: 0 0 auto; border: 3px solid var(--o-surface-3); border-top-color: var(--o-accent); border-radius: 50%; }
.o-spin--sm { border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .o-spin { animation-duration: 2s; } }
/* a compact form control from a Tailwind-sized screen: the ODS field fill and focus ring, the box keeps its own padding and size */
.o-fld { border: 0; background-color: var(--o-surface-2); color: var(--o-text); outline: none; transition: background-color var(--o-ease), box-shadow var(--o-ease); }
.o-fld::placeholder { color: var(--o-text-3); opacity: 1; }
.o-fld:focus { background-color: var(--o-surface); box-shadow: var(--o-ring), var(--o-elev-1); }
@media (max-width: 767px) { .o-fld { min-height: 44px; } }
.o-t-go { color: var(--o-go-deep); }
.o-elev-2 { box-shadow: var(--o-elev-2); }
.o-elev-3 { box-shadow: var(--o-elev-3); }
/* status tones for class-string maps (KotStatus in ko-utilities.js): background and text only, the element keeps its own shape */
.o-chip--muted { background: var(--o-surface-2); color: var(--o-text-2); }
/* status dots, tokens only: pending accent, in progress warn, ready go, failed danger, done or unknown muted */
.o-dot-muted { background-color: var(--o-text-3); }
.o-dot-go { background-color: var(--o-go); }
.o-dot-warn { background-color: var(--o-warn); }
.o-dot-danger { background-color: var(--o-danger); }
.o-dot-accent { background-color: var(--o-accent); }

/* ======================================================================
   ORDERING BLOCK (shared/orderly-order-shared: window.OrderlyOrder and the
   apps' orderly-order.es.js). The till, the kiosk, the storefront menu and
   the table QR page are one set of components; these are the rules ODS did
   not already have. Tokens only. Every tappable thing is --ob-tap (48px) or
   more, tiles --ob-tile (56), the primary button --ob-go (64); body 16px.
   Root: .o-ob[data-surface="till|kiosk|qr|store"][data-w="s|m|l"] (data-w is
   the block's own width: s < 600, m < 1024, l). Sheets are teleported to
   <body> and carry .o-ob themselves.
   ====================================================================== */
.o-ob {
  --ob-tap: 48px; --ob-tile: 56px; --ob-go: 64px;
  --ob-gap: 12px; --ob-pad: 16px;
  --ob-fs: 16px; --ob-fs-sm: 14px; --ob-fs-lg: 20px; --ob-fs-xl: 26px; --ob-fs-xxl: 40px;
  font-family: var(--o-font); font-size: var(--ob-fs); color: var(--o-text);
  -webkit-tap-highlight-color: transparent;
}
/* a kiosk is read standing up, at arm's length, on anything up to a 32" screen */
.o-ob[data-surface="kiosk"] {
  --ob-tap: clamp(56px, 4vmin + 28px, 72px); --ob-tile: clamp(64px, 5vmin + 30px, 84px); --ob-go: clamp(64px, 5vmin + 30px, 88px);
  --ob-gap: clamp(12px, 1.4vmin, 20px); --ob-pad: clamp(16px, 2.4vmin, 36px);
  --ob-fs: clamp(16px, .8vmin + 11px, 21px); --ob-fs-sm: clamp(14px, .6vmin + 10px, 18px); --ob-fs-lg: clamp(20px, 1.1vmin + 13px, 28px);
  --ob-fs-xl: clamp(24px, 1.8vmin + 14px, 40px); --ob-fs-xxl: clamp(36px, 3.6vmin + 14px, 68px);
}
.o-ob-num { font-variant-numeric: tabular-nums; }
.o-ob .o-btn { min-height: var(--ob-tap); font-size: var(--ob-fs-sm); }
.o-ob .o-ob-tap { min-height: var(--ob-tap); padding: 0 20px; }
.o-ob .o-ob-primary { min-height: var(--ob-go); padding: 0 24px; gap: 10px; font: 700 calc(var(--ob-fs) + 1px)/1.2 var(--o-font); }
.o-ob .o-ob-primary.o-btn--block { justify-content: space-between; }
.o-ob .o-btn--go:disabled { background: var(--o-surface-3); color: var(--o-text-3) !important; opacity: 1; }
.o-ob button:focus-visible, .o-ob a:focus-visible, .o-ob [tabindex]:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-ob .o-chip { font-size: 14px; }
.o-ob .o-chip[data-status] { text-transform: none; } /* the block's chips are sentences: "Not paid yet" */
.o-ob .o-ob-chip { min-height: 32px; font-size: var(--ob-fs-sm); }
/* a sheet takes focus when it opens (for Esc and screen readers): no ring on the panel itself */
.o-ob .o-ob-sheet:focus, .o-ob .o-ob-sheet:focus-visible { outline: none; box-shadow: var(--o-elev-3); }
.o-ob .o-ob-sheet--full:focus, .o-ob .o-ob-sheet--full:focus-visible { box-shadow: none; }
.o-ob .o-ob-row { display: flex; gap: 10px; width: 100%; }
.o-ob .o-ob-row--wrap { flex-wrap: wrap; justify-content: center; }
.o-ob .o-ob-grow { flex: 1 1 auto; }

/* the whole flow fills its box; the host gives it a height */
.o-ob-flow { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--o-bg); overflow: hidden; }
.o-ob-shop { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.o-ob-shop.has-side { grid-template-columns: minmax(0, 1fr) clamp(280px, 34%, 420px); }

/* door: "Where will you eat?" */
.o-ob-door { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ob-gap) * 2); padding: var(--ob-pad); text-align: center; overflow-y: auto; }
.o-ob-door__q { margin: 0; font: 700 var(--ob-fs-xxl)/1.1 var(--o-font); letter-spacing: -.02em; color: var(--o-text); }
.o-ob-door__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--ob-gap); width: min(900px, 100%); }
.o-ob-door__card { display: grid; justify-items: center; gap: 8px; padding: calc(var(--ob-pad) * 1.4) var(--ob-pad); border: 0; border-radius: var(--o-r-lg); background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-1); cursor: pointer; font: inherit; animation: o-ob-in .35s cubic-bezier(.16, 1, .3, 1) both; transition: transform var(--o-ease); }
.o-ob-door__card:active { transform: scale(.98); }
.o-ob-door__icon { width: clamp(72px, 12vmin, 140px); height: clamp(72px, 12vmin, 140px); margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-door__icon svg { width: 44%; height: 44%; stroke-width: 1.75; }
.o-ob-door__label { font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-door__hint { font: 400 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-text-3); }

/* menu: search, category chips in one row, the dish grid */
.o-ob-menu { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.o-ob-menu__top { display: grid; gap: 10px; padding: 12px var(--ob-pad) 6px; }
.o-ob-menu__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--ob-pad); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.o-ob-menu.is-page .o-ob-menu__list { overflow: visible; }
.o-ob-menu__end { height: 120px; }
.has-side .o-ob-menu__end { height: 24px; }
.o-ob .o-ob-search { min-height: var(--ob-tap); padding-right: 0; }
.o-ob .o-ob-search .o-search__clear { width: var(--ob-tap); height: var(--ob-tap); }
.o-ob .o-ob-search .o-search__input:not(#o) { height: var(--ob-tap); }
.o-ob-cats { display: flex; gap: 8px; margin: 0 -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.o-ob-cats::-webkit-scrollbar { display: none; }
.o-ob-cat { flex: 0 0 auto; min-height: var(--ob-tap); padding: 0 18px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-2); font: 600 var(--ob-fs-sm)/1 var(--o-font); white-space: nowrap; cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-ob-cat.is-on { background: var(--o-text); color: var(--o-surface); }
.o-ob-sec__title { margin: 22px 0 12px; font: 700 var(--ob-fs-lg)/1.25 var(--o-font); letter-spacing: -.012em; color: var(--o-text); }
.o-ob-sec:first-child .o-ob-sec__title { margin-top: 6px; }
.o-ob .o-ob-dishes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ob-gap); }
.o-ob[data-w="m"] .o-ob-dishes { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.o-ob[data-surface="kiosk"] .o-ob-dishes { grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 20vmin, 270px), 1fr)); }
.o-ob .o-ob-dish { cursor: pointer; }
.o-ob .o-ob-dish .o-dish__name { padding-right: 0; font-size: var(--ob-fs); }
.o-ob .o-ob-dish .o-dish__desc { font-size: var(--ob-fs-sm); }
.o-ob .o-ob-dish .o-dish__price { margin-top: auto; padding-top: 2px; font-size: var(--ob-fs); }
.o-ob .o-ob-dish .o-dish__price small { font-weight: 500; font-size: var(--ob-fs-sm); color: var(--o-text-3); }
.o-ob .o-ob-dish.o-dish--text { min-height: calc(var(--ob-tap) + 72px); }
.o-ob .o-ob-dish.o-dish--text .o-dish__main { padding-bottom: calc(var(--ob-tap) + 14px); }
.o-ob .o-add { right: 6px; bottom: 6px; }
.o-ob .o-add__btn, .o-ob .o-add__step button { width: var(--ob-tap); height: var(--ob-tap); }
.o-ob .o-add__step span { font-size: var(--ob-fs); }
.o-ob .o-add__off { font-size: var(--ob-fs-sm); }
.o-ob-ghost { aspect-ratio: 4 / 3; border-radius: var(--o-r-lg); background: var(--o-surface-2); animation: o-ob-pulse 1.4s ease-in-out infinite; }
.o-ob-ghost--row { display: block; aspect-ratio: auto; height: var(--ob-tile); border-radius: var(--o-r); }
.o-ob .o-ob-error { margin: 24px 0; }

/* basket: a side panel from 600px, a bar below that */
.o-ob-basket { display: flex; flex-direction: column; min-height: 0; background: var(--o-surface); color: var(--o-text); }
.o-ob-basket--side { height: 100%; box-shadow: var(--o-elev-1); }
.o-ob-basket--sheet { flex: 1 1 auto; max-height: inherit; }
.o-ob-basket__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: var(--ob-pad) var(--ob-pad) 10px; padding-right: calc(var(--ob-pad) + 4px); }
.o-ob-basket--sheet .o-ob-basket__head { padding-right: calc(var(--ob-tap) + 20px); }
.o-ob-basket__title { margin: 0; font: 700 var(--ob-fs-lg)/1.2 var(--o-font); }
.o-ob-basket__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.o-ob .o-ob-seg { padding: 3px; }
.o-ob .o-ob-seg .o-seg__btn { min-height: var(--ob-tap); padding: 0 16px; font-size: var(--ob-fs-sm); }
.o-ob-basket__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px var(--ob-pad) 12px; overscroll-behavior: contain; }
.o-ob-lines { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.o-ob .o-ob-line { grid-template-columns: 52px minmax(0, 1fr) auto; }
.o-ob .o-ob-line .o-cline__name { font-size: var(--ob-fs); font-weight: 600; }
.o-ob .o-ob-line .o-cline__each { font-size: var(--ob-fs-sm); }
.o-ob .o-ob-line .o-cline__total { font-size: var(--ob-fs); }
.o-ob-line__pic { position: relative; width: 52px; height: 52px; border-radius: var(--o-r-sm); overflow: hidden; background: var(--o-surface-2); }
.o-ob-line__pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-ob-line__pic .o-art > img { width: 80%; height: 80%; }
.o-ob-line__initial { display: grid; place-items: center; width: 100%; height: 100%; font: 700 20px/1 var(--o-font); color: var(--o-text-3); }
.o-ob .o-ob-qty { margin-top: 8px; padding: 0; }
.o-ob .o-ob-qty .o-qty__btn { width: var(--ob-tap); height: var(--ob-tap); }
.o-ob .o-ob-qty .o-qty__btn:disabled { opacity: .4; cursor: default; }
.o-ob .o-ob-qty .o-qty__n { min-width: 32px; font-size: var(--ob-fs); }
.o-ob .o-ob-qty--big .o-qty__btn { width: var(--ob-go); height: var(--ob-go); }
.o-ob .o-ob-qty--big .o-qty__n { min-width: 56px; font-size: var(--ob-fs-xl); }
.o-ob .o-ob-basket__empty p { font-size: var(--ob-fs); }
.o-ob-also { margin-top: 20px; }
.o-ob-also__title { margin: 0 0 8px; font: 600 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-2); }
.o-ob-also__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o-ob-also__dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-height: var(--ob-tile); padding: 8px 8px 8px 14px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; font: inherit; }
.o-ob-also__dish:hover { background: var(--o-surface-3); }
.o-ob-also__name { grid-column: 1; font: 600 var(--ob-fs-sm)/1.3 var(--o-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-ob-also__price { grid-column: 1; font: 500 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-also__plus { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-basket__foot { display: grid; gap: 12px; padding: 12px var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); background: var(--o-surface); }
.o-ob .o-ob-basket__total { padding: 0; font-size: var(--ob-fs-lg); }
.o-ob-bar { position: absolute; left: var(--ob-pad); right: var(--ob-pad); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 8px; padding: 6px; border-radius: var(--o-r-pill); background: var(--o-surface); box-shadow: var(--o-elev-3); transition: transform 300ms cubic-bezier(.16, 1, .3, 1), opacity 200ms; }
.o-ob-bar.is-empty { transform: translateY(160%); opacity: 0; pointer-events: none; }
.o-ob-bar__sum { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: var(--ob-go); padding: 0 14px 0 8px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text); font: 700 var(--ob-fs)/1 var(--o-font); cursor: pointer; }
.o-ob-bar__count { min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--o-r-pill); display: grid; place-items: center; background: var(--o-text); color: var(--o-surface); }
.o-ob-bar__count.is-bump { animation: o-ob-pop .35s cubic-bezier(.175, .885, .32, 1.1); }
.o-ob .o-ob-bar__go { flex: 1 1 auto; min-width: 0; padding: 0 16px; font-size: var(--ob-fs); }
.o-ob .o-ob-bar__go span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-ob-undo { z-index: 1100; min-height: 56px; bottom: calc(100px + env(safe-area-inset-bottom)); }
.o-ob-undo .o-ob-undo__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; }
.o-ob-undo .o-ob-undo__btn svg { width: 18px; height: 18px; }
.o-ob-flyer { position: fixed; z-index: 1200; border-radius: 50%; background: var(--o-surface-2) center / 80% no-repeat; pointer-events: none; }

/* sheets: a bottom sheet on a phone, a centred panel on anything wider */
.o-ob-veil { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-end; justify-content: center; background: rgb(0 0 0 / .45); }
.o-ob-veil.is-center { align-items: center; padding: 24px; }
.o-ob-veil.is-full { padding: 0; background: var(--o-bg); }
.o-ob-sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 92vh; max-height: 92dvh; background: var(--o-surface); color: var(--o-text); border-radius: var(--o-r-lg) var(--o-r-lg) 0 0; box-shadow: var(--o-elev-3); overflow: hidden; outline: none; }
.is-center .o-ob-sheet { width: min(560px, 100%); max-height: min(880px, 92vh); border-radius: var(--o-r-lg); }
.is-center .o-ob-sheet--wide { width: min(920px, 100%); }
.o-ob-sheet--full, .is-center .o-ob-sheet--full { width: 100%; height: 100%; max-height: none; border-radius: 0; background: var(--o-bg); box-shadow: none; }
.o-ob .o-ob-x, .o-ob .o-ob-back { width: var(--ob-tap) !important; height: var(--ob-tap) !important; min-width: var(--ob-tap); }
.o-ob .o-ob-x { position: absolute; top: 10px; right: 10px; z-index: 3; background: var(--o-surface); }
.o-ob .o-ob-back { position: absolute; left: 0; top: 0; }

/* dish sheet */
.o-ob-dsheet { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; flex: 1 1 auto; min-height: 0; }
.o-ob-dsheet:not(.has-pic) { grid-template-rows: minmax(0, 1fr) auto; }
.o-ob-dsheet__pic { position: relative; height: clamp(140px, 26vh, 280px); overflow: hidden; background: var(--o-surface-2); }
.o-ob-dsheet__pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-ob-dsheet__pic .o-art > img { width: 60%; height: 60%; }
.o-ob-dsheet__body { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; padding: var(--ob-pad) var(--ob-pad) 12px; }
.o-ob-dsheet:not(.has-pic) .o-ob-dsheet__head { padding-right: calc(var(--ob-tap) + 8px); }
.o-ob-dsheet__name { margin: 0; font: 700 var(--ob-fs-xl)/1.15 var(--o-font); letter-spacing: -.015em; }
.o-ob-dsheet__desc { margin: 6px 0 0; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-2); }
.o-ob-dsheet__loading { display: grid; gap: 10px; }
.o-ob-dsheet__foot { display: flex; align-items: center; gap: 12px; padding: 12px var(--ob-pad) calc(12px + env(safe-area-inset-bottom)); background: var(--o-surface); }
.o-ob-dsheet__foot .o-ob-qty { margin: 0; }
.o-ob .o-ob-dsheet__add { flex: 1 1 auto; min-width: 0; padding: 0 16px; white-space: nowrap; }
.o-ob-dot { opacity: .7; }
.is-center .o-ob-dsheet.has-pic { grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: min(720px, 88vh); }
.is-center .o-ob-dsheet.has-pic .o-ob-dsheet__pic { grid-row: 1 / span 2; height: auto; }
.o-ob-grp { display: grid; gap: 10px; border-radius: var(--o-r); outline: none; }
.o-ob-grp.is-short { animation: o-ob-shake .4s; }
.o-ob-grp__head { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 var(--ob-fs)/1.3 var(--o-font); }
.o-ob .o-choices { gap: 8px; }
.o-ob .o-choice--xl { min-height: var(--ob-tile); align-items: center; gap: 12px; padding: 10px 16px; }
.o-ob .o-choice--xl .o-choice__title { display: inline; font: 600 var(--ob-fs)/1.3 var(--o-font); }
.o-ob .o-choice--xl .o-choice__side { font: 600 var(--ob-fs)/1.3 var(--o-font); color: var(--o-text-2); }
.o-ob .o-choice--xl .o-choice__check { position: static; display: inline-flex; flex: 0 0 auto; width: 24px; height: 24px; }
.o-ob .o-choice--xl:not(.is-selected) .o-choice__check { background: var(--o-surface-3); color: transparent; }
.o-ob .o-choice--xl .o-choice__check.is-square { border-radius: 7px; }
.o-ob .o-ob-usual { min-height: 24px; margin-left: 8px; padding: 0 9px; font-size: 14px; vertical-align: 2px; }
.o-ob-more__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--ob-tap); padding: 0 14px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text-2); font: 600 var(--ob-fs-sm)/1.3 var(--o-font); text-align: left; cursor: pointer; }
.o-ob-more__row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-ob-more__body { margin: 12px 0 0; }
.o-ob .o-textarea:not(#o), .o-ob .o-ob-input:not(#o) { font-size: max(16px, var(--ob-fs)) !important; }
.o-ob .o-ob-input:not(#o) { min-height: var(--ob-tap) !important; }
.o-ob .o-ob-input--code:not(#o) { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-weight: 700 !important; }
.o-ob .o-ob-help--danger { color: var(--o-danger); font-weight: 500; }

/* pay sheet: the title is the amount */
.o-ob-pay { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding: var(--ob-pad) var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); }
.o-ob-sheet--full .o-ob-pay { width: min(720px, 100%); margin: 0 auto; padding-top: max(var(--ob-pad), 24px); }
.o-ob-pay__head { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px calc(var(--ob-tap) + 4px) 0; text-align: center; }
.o-ob-pay__eyebrow { margin: 0; font: 600 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-pay__amount { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 700 var(--ob-fs-xxl)/1.1 var(--o-font); letter-spacing: -.02em; color: var(--o-text); }
.o-ob-pay__amount.is-checking { font-size: var(--ob-fs-lg); color: var(--o-text-3); }
.o-ob-pay__fees { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0; font: 400 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-text-3); }
.o-ob-pay__lines summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ob-tap); list-style: none; cursor: pointer; font: 600 var(--ob-fs-sm)/1 var(--o-font); color: var(--o-text-2); border-radius: var(--o-r); }
.o-ob-pay__lines summary::-webkit-details-marker { display: none; }
.o-ob-pay__lines[open] summary svg { transform: rotate(180deg); }
.o-ob-pay__lines ul { display: grid; gap: 8px; margin: 0; padding: 12px 16px; list-style: none; border-radius: var(--o-r); background: var(--o-surface-2); }
.o-ob-pay__lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; font: 400 var(--ob-fs)/1.4 var(--o-font); }
.o-ob-pay__lines small { display: block; font-size: var(--ob-fs-sm); color: var(--o-text-3); }
.o-ob-paytiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.o-ob[data-surface="kiosk"] .o-ob-paytiles { grid-template-columns: 1fr; }
.o-ob-paytile { display: flex; align-items: center; gap: 12px; min-height: var(--ob-tile); padding: 10px 14px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; font: inherit; transition: background var(--o-ease); }
.o-ob-paytile:hover { background: var(--o-surface-3); }
.o-ob-paytile.is-on { background: var(--o-accent-tint); }
.o-ob-paytile:disabled { opacity: .6; cursor: default; }
.o-ob-paytile__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--o-surface); color: var(--o-text-2); }
.o-ob[data-surface="kiosk"] .o-ob-paytile__icon { width: var(--ob-tap); height: var(--ob-tap); }
.o-ob-paytile.is-on .o-ob-paytile__icon { color: var(--o-accent-deep); }
.o-ob-paytile__text { min-width: 0; }
.o-ob-paytile__text b { display: block; font: 700 var(--ob-fs)/1.25 var(--o-font); }
.o-ob-paytile__text small { display: block; margin-top: 2px; font: 400 var(--ob-fs-sm)/1.35 var(--o-font); color: var(--o-text-3); }
.o-ob .o-ob-pay__err { align-items: center; margin: 0; outline: none; }
.o-ob .o-ob-pay__err span { flex: 1 1 auto; }
.o-ob-cash, .o-ob-mpesa, .o-ob-note, .o-ob-split, .o-ob-code { display: grid; gap: 12px; width: min(440px, 100%); margin: 0 auto; }
.o-ob-cash > .o-ob-primary, .o-ob-mpesa > .o-ob-primary, .o-ob-note > .o-ob-primary { position: sticky; bottom: 0; z-index: 1; }
@media (max-width: 599.98px) { .o-ob-paytile__text small { display: none; } .o-ob-pay { gap: 12px; } }
.o-ob-note p { margin: 0; text-align: center; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-2); }
.o-ob-cash__got { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--o-r); background: var(--o-surface-2); font: 500 var(--ob-fs)/1.3 var(--o-font); color: var(--o-text-2); }
.o-ob-cash__got b { font: 700 var(--ob-fs-xl)/1.1 var(--o-font); color: var(--o-text); }
.o-ob-cash__chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 2px; } /* one row that scrolls: every likely amount fits on a phone */
.o-ob-cash__chips::-webkit-scrollbar { display: none; }
.o-ob-cash__chips > * { flex: 0 0 auto; scroll-snap-align: start; }
.o-ob .o-ob-chip-btn { min-height: var(--ob-tap); padding: 0 18px; font-size: var(--ob-fs-sm); }
.o-ob .o-ob-chip-btn.is-on { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-cash__change { margin: 0; text-align: center; font: 500 var(--ob-fs)/1.4 var(--o-font); color: var(--o-text-2); }
.o-ob-cash__change b { color: var(--o-go-deep); }
.o-ob-cash__change.is-short b { color: var(--o-text); }
.o-ob-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.o-ob-key { display: grid; place-items: center; min-height: max(56px, var(--ob-tap)); border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); font: 600 var(--ob-fs-xl)/1 var(--o-font); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background var(--o-ease), transform var(--o-ease); }
.o-ob-key:active { background: var(--o-surface-3); transform: scale(.97); }
.o-ob-key--fn { background: transparent; color: var(--o-text-2); }
.o-ob-key--blank { visibility: hidden; }
.o-ob-key svg { width: 26px; height: 26px; }
.o-ob-phone { display: flex; align-items: center; gap: 12px; min-height: var(--ob-go); padding: 0 18px; border-radius: var(--o-r); background: var(--o-surface-2); font: 600 var(--ob-fs-xl)/1 var(--o-font); color: var(--o-text); }
.o-ob-phone__cc, .o-ob-phone .is-ph { color: var(--o-text-3); }
.o-ob-phone svg { margin-left: auto; width: 26px; height: 26px; color: var(--o-go); }
.o-ob-phone.is-ok { background: var(--o-go-tint); }
.o-ob .o-ob-splitdoor { align-self: center; }
.o-ob-split__people { display: grid; justify-items: center; gap: 10px; }
.o-ob-split__people p, .o-ob-split__each { margin: 0; font: 500 var(--ob-fs)/1.4 var(--o-font); color: var(--o-text-2); }
.o-ob-split__dishes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.o-ob-pay__center { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 280px; padding: 16px 0; text-align: center; }
.o-ob-pay__title { margin: 0; font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-pay__lead { max-width: 36ch; margin: 0; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-2); }
.o-ob-pay__lead b { color: var(--o-text); }
.o-ob-pay__small { margin: 0; font: 400 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-text-3); }
.o-ob .o-ob-spin { width: 40px; height: 40px; border-width: 4px; color: var(--o-go); }
.o-ob-wait__icon { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--o-go-tint); color: var(--o-go-deep); animation: o-ob-breathe 2.4s ease-in-out infinite; }
.o-ob-wait__icon svg { width: 44px; height: 44px; stroke-width: 1.75; }
.o-ob-wait__icon.is-warn { background: var(--o-warn-tint); color: var(--o-warn); animation: none; }
.o-ob-progress { width: min(320px, 80%); height: 6px; border-radius: var(--o-r-pill); background: var(--o-surface-2); overflow: hidden; }
.o-ob-progress span { display: block; height: 100%; background: var(--o-go); transform-origin: left center; transition: transform 3s linear; }
.o-ob-qr { width: 200px; height: 200px; border-radius: var(--o-r); background: var(--o-surface); }

/* done: the order number, big */
.o-ob-done { flex: 1 1 auto; display: grid; justify-items: center; align-content: center; gap: 14px; padding: var(--ob-pad); text-align: center; overflow-y: auto; }
.o-ob-done__badge { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--o-go-tint); color: var(--o-go-deep); animation: o-ob-pop .4s cubic-bezier(.175, .885, .32, 1.1); }
.o-ob-done.is-unverified .o-ob-done__badge, .o-ob-done.is-later .o-ob-done__badge { background: var(--o-warn-tint); color: var(--o-warn); }
.o-ob-done__badge svg { width: 48px; height: 48px; stroke-width: 2.5; }
.o-ob-done__title { margin: 0; font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-ticket { display: grid; justify-items: center; gap: 6px; min-width: min(400px, 100%); padding: 20px 24px; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-ob-ticket p { margin: 0; }
.o-ob-ticket__label { font: 600 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-ticket__num { font: 700 clamp(64px, 14vmin, 180px)/1 var(--o-font); letter-spacing: -.04em; color: var(--o-text); }
.o-ob-ticket__ready, .o-ob-ticket__hint { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--ob-fs)/1.4 var(--o-font); color: var(--o-text-2); }
.o-ob-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(560px, 100%); }
.o-ob .o-ob-done__actions .o-btn { flex: 1 1 150px; white-space: nowrap; }
.o-ob-done__count { min-width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--o-surface); color: var(--o-text); font: 700 14px/1 var(--o-font); }
.o-ob-powered { margin: 8px 0 0; font: 500 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-text-3); }

/* who: a name and a number, once */
.o-ob-who { display: grid; gap: 4px; padding: 20px var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); }
.o-ob-who__title { margin: 0; padding-right: calc(var(--ob-tap) + 8px); font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-who__lead { margin: 0 0 14px; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-2); }
.o-ob-who__small { margin: 10px 0 0; text-align: center; font: 400 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-text-3); }

/* motion: transform and opacity only; fades alone when motion is reduced */
.o-ob-fade-enter-active, .o-ob-fade-leave-active { transition: opacity 180ms ease; }
.o-ob-fade-enter-from, .o-ob-fade-leave-to { opacity: 0; }
.o-ob-rise-enter-active { transition: transform 260ms cubic-bezier(.16, 1, .3, 1), opacity 200ms; }
.o-ob-rise-enter-from { transform: translateY(24px); opacity: 0; }
@keyframes o-ob-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes o-ob-pop { from { transform: scale(.8); } }
@keyframes o-ob-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes o-ob-breathe { 50% { transform: scale(1.05); } }
@keyframes o-ob-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .o-ob *, .o-ob-veil *, .o-ob-flyer { animation: none !important; }
  .o-ob-rise-enter-from { transform: none; }
  .o-ob-bar, .o-ob-key, .o-ob-door__card, .o-ob-progress span { transition: opacity 120ms; }
  .o-ob-bar.is-empty { transform: none; }
}

/* ---------------------------------------------- reviews summary card ----
   Dashboards (tpl/review-summary.php): the average is the headline, five stars filled to it,
   then one bar per rating: a quiet track and the one accent, the count at the end. */
.o-rsum__all { font: 600 14px/1.3 var(--o-font); }
.o-rsum__body { display: flex; align-items: center; gap: 24px; }
.o-rsum__head { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; text-align: center; }
.o-rsum__avg { font: 700 40px/1 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.o-rsum__stars { display: inline-flex; gap: 2px; }
.o-rsum__star { display: inline-flex; color: var(--o-surface-3); }
.o-rsum__star .o-ico { width: 16px; height: 16px; }
.o-rsum__star.is-on { color: var(--o-accent); }
.o-rsum__star.is-on .o-ico { fill: currentColor; }
.o-rsum__count { font: 500 14px/1.3 var(--o-font); color: var(--o-text-2); }
.o-rsum__bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.o-rsum__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.o-rsum__label { display: inline-flex; align-items: center; gap: 3px; font: 600 14px/1 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.o-rsum__label .o-rsum__star .o-ico { width: 12px; height: 12px; }
.o-rsum__track { height: 8px; border-radius: var(--o-r-pill); background: var(--o-surface-2); overflow: hidden; }
.o-rsum__fill { display: block; height: 100%; border-radius: var(--o-r-pill); background: var(--o-accent); transition: width var(--o-ease); }
.o-rsum__n { font: 600 14px/1 var(--o-font); color: var(--o-text-2); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .o-rsum__body { flex-direction: column; align-items: stretch; gap: 16px; } .o-rsum__head { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; } .o-rsum__avg { font-size: 32px; } }

/* -------------------------------------------- sidebar: who is signed in ----
   layouts/_sidebar-profile.php: one row, no border, a surface step for the edge. */
.o-me { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 12px 12px 8px; padding: 10px 12px; border-radius: var(--o-r-lg, 16px); background: var(--o-surface-2); color: var(--o-text); text-decoration: none !important; transition: background var(--o-ease); }
.o-me:hover { background: var(--o-surface-3); }
.o-me:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-me__pic { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; object-fit: cover; }
.o-me__pic--ini { display: inline-flex; align-items: center; justify-content: center; background: var(--o-accent-solid); color: #fff; font: 700 15px/1 var(--o-font); } /* ui-lint: allow — initials on accent fill */
.o-me__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.o-me__name { font: 600 15px/1.25 var(--o-font); color: var(--o-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-me__role { font: 500 13px/1.25 var(--o-font); color: var(--o-text-2); }
.o-me__go { width: 18px; height: 18px; color: var(--o-text-3); flex: 0 0 auto; }

/* --------------------------------------------------------- what sold ----
   merchantreport/what_sold.php: three answers, then every dish ranked with its share as a bar. */
.o-ws { display: flex; flex-direction: column; gap: 16px; }
.o-ws__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.o-ws__top { font-size: 22px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-ws__list { padding-bottom: 8px; }
.o-ws__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.o-ws__row { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
.o-ws__row + .o-ws__row { box-shadow: 0 -1px 0 var(--o-surface-2); } /* ui-lint: allow — a 1px surface step between rows, not a border */
.o-ws__rank { font: 600 14px/1 var(--o-font); color: var(--o-text-3); text-align: right; font-variant-numeric: tabular-nums; }
.o-ws__pic { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--o-surface-2); }
.o-ws__pic--none { display: inline-flex; align-items: center; justify-content: center; color: var(--o-text-3); }
.o-ws__pic--none .o-ico { width: 20px; height: 20px; }
.o-ws__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.o-ws__name { font: 600 15px/1.3 var(--o-font); color: var(--o-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-ws__size { font-weight: 500; color: var(--o-text-2); }
.o-ws__bar { display: block; height: 8px; border-radius: var(--o-r-pill); background: var(--o-surface-2); overflow: hidden; }
.o-ws__bar > span { display: block; height: 100%; border-radius: var(--o-r-pill); background: var(--o-accent); }
.o-ws__row:nth-child(n+4) .o-ws__bar > span { background: color-mix(in oklab, var(--o-accent) 55%, var(--o-surface-2)); }
.o-ws__nums { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 96px; }
.o-ws__qty { font: 700 16px/1 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-ws__qty small { font-weight: 500; font-size: 13px; color: var(--o-text-2); }
.o-ws__rev { font: 500 13px/1.2 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-ws__unsold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.o-ws__unsold summary::-webkit-details-marker { display: none; }
.o-ws__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 480px) {
  .o-ws__row { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 10px; }
  .o-ws__pic { width: 40px; height: 40px; }
  .o-ws__nums { min-width: 72px; }
}

/* ------------------------------------------------------------ reports ----
   Business overview, daily sales, refunds (merchantreport/*). The answer is .o-ws__stats + .o-stat; ranked lists are
   .o-share rows (a name, a share bar on a quiet track in the one accent, the figure that matters in bold);
   columns over time are .o-bars. .o-rep__custom is the "these days" form beside the period switch. */
.o-rep { display: flex; flex-direction: column; gap: 16px; }
.o-rep > .o-grid { margin-bottom: 0; }
.o-rep__custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: -6px 0 0; }
.o-rep__date { display: flex; flex-direction: column; gap: 6px; margin: 0; font: 600 13px/1.2 var(--o-font); color: var(--o-text-3); }
.o-rep__date .o-input:not(#o) { width: 172px !important; min-height: 44px !important; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .o-rep__date { flex: 1 1 0; min-width: 0; } .o-rep__date .o-input:not(#o) { width: 100% !important; } .o-rep__custom .o-btn { flex: 1 1 100%; } }
.o-stat__note.is-up { color: var(--o-go-deep); font-weight: 600; }
.o-kv__k small { display: block; margin-top: 2px; font: 400 12.5px/1.35 var(--o-font); color: var(--o-text-3); }
.o-kv__row--total.is-gain .o-kv__v { color: var(--o-go-deep); }
.o-kv__row--total.is-loss .o-kv__v { color: var(--o-danger); }
.o-rep__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 28px; }
.o-rep .o-kv__k { flex: 1 1 auto; min-width: 0; }
.o-rep .o-kv__v { flex: 0 0 auto; white-space: nowrap; }
/* a period switch in the head shrinks to the page and scrolls inside itself */
.o-head > div:has(> .o-seg), .o-head__actions:has(> .o-seg) { min-width: 0; max-width: 100%; }
.o-rep__money { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px 32px; }
.o-rep__cov { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; }
.o-rep__sub { margin: 14px 0 4px; font: 700 14px/1.3 var(--o-font); color: var(--o-text-2); }
.o-rep__low { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.o-rep__low li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font: 500 14px/1.3 var(--o-font); color: var(--o-text); }
.o-rep__h2 { margin: 32px 0 4px; font: 700 20px/1.25 var(--o-font); color: var(--o-text); }
.o-rep__orders > .o-help { margin: 0 0 14px; }
.o-rep__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; margin: 0 0 14px; }
.o-rep__strip > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--o-r-sm); background: var(--o-surface); }
.o-rep__strip dt { font: 600 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-rep__strip dd { margin: 0; font: 700 18px/1.2 var(--o-font); white-space: nowrap; color: var(--o-text); font-variant-numeric: tabular-nums; }
.o-rep__todo .o-row { min-height: 56px; padding: 8px 0; }
.o-rep__todo .o-row:hover { background: transparent; }
.o-share { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.o-share__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0; }
.o-share > .o-share__row + .o-share__row { box-shadow: 0 -1px 0 var(--o-surface-2); } /* ui-lint: allow — a 1px surface step between rows, not a border */
.o-share__main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.o-share__name { font: 600 14.5px/1.3 var(--o-font); color: var(--o-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-share__name small { font-weight: 500; color: var(--o-text-3); }
.o-share__bar { display: block; height: 6px; border-radius: var(--o-r-pill); background: var(--o-surface-2); overflow: hidden; }
.o-share__bar > span { display: block; height: 100%; min-width: 3px; border-radius: var(--o-r-pill); background: var(--o-accent); }
.o-share__row:nth-child(n+4) .o-share__bar > span { background: color-mix(in oklab, var(--o-accent) 55%, var(--o-surface-2)); }
.o-share__nums { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 84px; text-align: right; }
.o-share__num { font: 700 15px/1.15 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-share__sub { font: 500 12.5px/1.2 var(--o-font); color: var(--o-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-rep .o-bars { height: 168px; }
.o-rep .o-bar__day { min-height: 14px; }
.o-stat--warn .o-stat__value { color: var(--o-warn); }
.o-rep__floor { margin: -10px 0 14px; }
.o-rep__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.o-rep__bar .o-rep__h2 { margin-top: 16px; }
.o-rep__bar .o-help { margin: 0; }
.o-rep section > .o-rep__h2:first-child { margin-top: 16px; }
.o-rep section > .o-rep__h2 + .o-help { margin: 0 0 14px; }

/* -------------------------------------------------------------- money ----
   Earnings, withdrawals, transactions, payout history and methods, invoices (commission/*, invoicemerchant/*).
   Presentation only: the vendor Vue apps are unchanged. The balance is an .o-stat; the ledger is an .o-table;
   credits read green, everything else neutral. */
.o-money { display: flex; flex-direction: column; gap: 16px; }
.o-money > .o-head { margin-bottom: 2px; }
.o-money__wait { justify-content: center; min-height: 120px; }
.o-money__ledger { position: relative; display: flex; flex-direction: column; gap: 12px; }
.o-money__ledger.o-card { padding-bottom: 12px; }
.o-money__ledger .o-table { background: transparent; }
.o-money__ledger.o-card .o-table { margin: 0 -20px; border-radius: 0; }
.o-money__veil { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--o-r); background: color-mix(in oklab, var(--o-surface) 78%, transparent); font: 600 14px/1 var(--o-font); color: var(--o-text-2); }
.o-money__bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.o-money__bar .o-card__title { margin-bottom: 2px; }
.o-money__bar .o-help { margin: 0; }
.o-money__filter:not(#o) { width: auto !important; min-width: 180px; min-height: 44px !important; }
.o-money__amt { font-weight: 700; }
.o-money__amt.is-in { color: var(--o-go-deep); }
.o-money__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 14px; padding-bottom: 2px; }
.o-money__filters .o-field { margin-bottom: 14px; }
.o-money__filters .o-search { min-height: 50px; }
.o-money__clear { width: 36px; height: 36px; background: transparent; }
.o-money__range { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.o-money__range.hidden { display: none; }
.o-money__date { position: relative; display: inline-flex; align-items: center; flex: 0 1 180px; }
.o-money__date .o-ico { position: absolute; left: 14px; color: var(--o-text-3); pointer-events: none; }
.o-money__date .o-input:not(#o) { padding-left: 40px !important; min-height: 44px !important; }
.o-money__to { font: 500 14px/1 var(--o-font); color: var(--o-text-3); }
.o-money__act { justify-content: space-between; }
.o-money__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.o-money__acct { display: flex; flex-direction: column; gap: 2px; position: relative; font: 600 17px/1.3 var(--o-font); color: var(--o-text); }
.o-money__lead { margin: -10px 0 4px; }
.o-money__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .o-money__split { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.o-money__list { display: flex; flex-direction: column; gap: 12px; }
.o-money__method { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.o-money__method-main { flex: 1 1 220px; min-width: 0; }
.o-money__method-main .o-help { margin: 4px 0 0; overflow-wrap: anywhere; }
.o-money__method-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-money__method-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.o-money__add .o-help { margin: -6px 0 10px; }
.o-money__provider { width: 100%; border: 0; background: var(--o-surface-2); text-align: left; cursor: pointer; font-family: var(--o-font); }
.o-money__provider:hover { background: var(--o-surface-3); }
.o-money__provider:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-money__provider > .o-ico { color: var(--o-text-3); }
@media (max-width: 575.98px), (pointer: coarse) { .o-money .o-btn--sm { min-height: 44px; } }
.o-money .o-table .o-table__sub { display: block; margin-top: 2px; }
.o-money__addr { margin: 0; font: 400 14.5px/1.5 var(--o-font); color: var(--o-text-2); }
.o-money__addr strong { color: var(--o-text); }
.o-money__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.o-money__how { margin: -4px 0 8px; }
.o-money__pay { margin-top: 14px; min-height: 48px; }
.o-money .o-tl__time { white-space: normal; font-size: 13px; }
.o-money .o-kv__k { flex: 1 1 auto; min-width: 0; }
.o-money .o-kv__v { flex: 0 0 auto; white-space: nowrap; }

/* -------------------------------------------------------- list pages ----
   Purchases, suppliers, rider cash and reviews: the answer (.o-rep stats, share rows) above a vendor list.
   .o-rep--lead closes with the list's heading; the list follows outside it. */
.o-rep--lead { margin-bottom: 14px; }
.o-rep--lead > .o-rep__h2:last-child { margin-bottom: 0; }
.o-rep > [id^="vue-"] { min-width: 0; }

/* ------------------------------------------------------------ upload ----
   Add photos (merchant/gallery_create.php): one quiet well, no dashed line; uploads land in a grid below. */
.o-upload { display: flex; flex-direction: column; gap: 16px; }
.o-drop.dropzone_container:not(#o) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 200px; margin: 0; padding: 24px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text-2); cursor: pointer; transition: background var(--o-ease); }
.o-drop.dropzone_container:not(#o):hover, .o-drop.dz-drag-hover:not(#o) { background: var(--o-surface-3); }
.o-drop .dz-message { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.o-drop .dz-message p { margin: 0; font: 600 15px/1.3 var(--o-font); color: var(--o-text); }
.o-drop .dz-message .o-ico { width: 28px; height: 28px; color: var(--o-accent); }
.o-upload .item_gallery_preview .row { row-gap: 16px; }
.o-upload .preview-image { position: relative; }
.o-upload .preview-image img { width: 100%; border-radius: var(--o-r-sm); }
.o-upload .preview-image .delete_image:not(#o) { position: absolute; top: 8px; right: 23px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--o-surface) !important; color: var(--o-danger) !important; box-shadow: var(--o-elev-1); }
.o-rep > .o-rep__h2--list { margin: 16px 0 -2px; }

/* ------------------------------------------------------ order dialogs ----
   orders/view: customer, assign rider and print dialogs (template_customer / template_assigned_driver /
   template_print). The Bootstrap modals and their Vue components are unchanged. */
.o-order-cust { margin: 4px 0 12px; }
.o-order-cust .o-kv__v { overflow-wrap: anywhere; }
.o-order-cust__block { margin-top: 4px; }
.o-order-cust__addr { min-height: 52px; }
.o-order-cust__addr .o-row__title { white-space: normal; }
.o-order-assign { padding: 6px 8px; }
.o-order-assign .o-row { min-height: 60px; }
.o-order-assign__map { padding: 8px; min-height: 240px; }
.o-order-assign__clear { min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
@media (max-width: 991.98px) { .o-order-assign__map { margin-top: 14px; } }
.modal .o-rep__strip > div { background: var(--o-surface-2); }
/* the zone / group pickers and rider photos are Element Plus: its variables follow the tokens here, as on the purchase lines */
.o-order-assign-body { --el-color-primary: var(--o-accent-solid); --el-color-primary-light-7: var(--o-accent-tint); --el-color-primary-light-9: var(--o-accent-tint); --el-fill-color-blank: var(--o-surface); --el-bg-color: var(--o-surface); --el-text-color-regular: var(--o-text); --el-border-color: transparent; --el-border-color-light: transparent; }
.o-order-assign-body .el-avatar { --el-avatar-bg-color: var(--o-surface-3); }
.o-order-assign-body .el-radio-group { flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.o-order-assign-body .el-radio-button__inner { min-height: 40px; border-radius: var(--o-r-pill) !important; box-shadow: none !important; }
/* phones: the small links and chips on report cards are full taps */
@media (max-width: 767.98px), (pointer: coarse) {
  .o-rep .o-card__title .o-link, .o-rep a.o-chip { min-height: 44px; }
}
/* ------------------------------------------- ordering block: Wave 2 till pieces ----
   OpenStrip, TablePick, OrderSheet, PinSheet, AdjustSheet, till DoneScreen (shared/orderly-order-shared). */
/* ---- ordering block, Wave 2: the till's pieces ----------------------------
   OpenStrip (service switch, table, open orders), TablePick, OrderSheet,
   PinSheet, the basket's Adjust door (AdjustSheet) and the done screen's
   receipt sheet. Same rules: tokens only, no borders, 48 / 56 / 64 px.
   Status tones are the o-chip[data-status] ones: free go, seated accent,
   unpaid warn; every tone also says its word. */
/* the strip above the dishes */
.o-ob-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.o-ob-strip__svc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.o-ob .o-ob-seg .o-seg__btn:disabled { opacity: .5; cursor: default; }
.o-ob[data-w="s"] .o-ob-strip__svc { width: 100%; }
.o-ob[data-w="s"] .o-ob-strip__svc .o-seg { flex: 1 1 auto; }
.o-ob[data-w="s"] .o-ob-strip__svc .o-seg__btn { flex: 1 1 0; padding: 0 10px; }
.o-ob[data-w="s"] .o-ob-strip__svc .o-seg__btn svg { display: none; }
.o-ob-strip__table { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ob-tap); padding: 0 16px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-2); font: 600 var(--ob-fs-sm)/1 var(--o-font); white-space: nowrap; cursor: pointer; }
.o-ob-strip__table.is-set { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-strip__open { flex: 1 1 260px; display: flex; gap: 8px; min-width: 0; margin: -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.o-ob-strip__open::-webkit-scrollbar { display: none; }
.o-ob-ochip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--ob-tap); padding: 0 16px 0 14px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text); font: 600 var(--ob-fs-sm)/1 var(--o-font); white-space: nowrap; cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-ob-ochip[data-status="seated"] { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-ochip[data-status="unpaid"] { background: var(--o-warn-tint); color: var(--o-warn); }
.o-ob-ochip.is-on { background: var(--o-text); color: var(--o-surface); }
.o-ob-ochip svg, .o-ob-strip__table svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* tables: rooms as tabs, tiles by status */
.o-ob-tpick { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; padding: 20px var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); }
.o-ob-tpick__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-right: calc(var(--ob-tap) + 8px); }
.o-ob-tpick__title { margin: 0; font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-tpick__guests { display: flex; align-items: center; gap: 10px; font: 600 var(--ob-fs-sm)/1 var(--o-font); color: var(--o-text-2); }
.o-ob .o-ob-tpick__guests .o-ob-qty { margin: 0; }
.o-ob-tpick__rooms { align-self: flex-start; }
.o-ob-tpick__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--ob-pad) * -1); padding: 2px var(--ob-pad); }
.o-ob-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.is-center .o-ob-tables { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.o-ob-ttile { display: grid; align-content: center; gap: 4px; min-height: calc(var(--ob-tile) + 16px); padding: 10px 12px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; font: inherit; transition: transform var(--o-ease), background var(--o-ease); }
.o-ob-ttile:active { transform: scale(.98); }
.o-ob-ttile[data-status="free"] { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-ob-ttile[data-status="seated"] { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-ttile[data-status="unpaid"] { background: var(--o-warn-tint); color: var(--o-warn); }
.o-ob-ttile.is-here { background: var(--o-text); color: var(--o-surface); }
.o-ob-ttile:disabled { opacity: .45; cursor: default; transform: none; }
.o-ob-ttile__name { font: 700 var(--ob-fs-lg)/1.15 var(--o-font); }
.o-ob-ttile__said { font: 500 var(--ob-fs-sm)/1.3 var(--o-font); }
.o-ob-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font: 500 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-legend span { display: inline-flex; align-items: center; gap: 6px; }
.o-ob-legend i { width: 12px; height: 12px; border-radius: 50%; }
.o-ob-legend i[data-status="free"] { background: var(--o-go); }
.o-ob-legend i[data-status="seated"] { background: var(--o-accent); }
.o-ob-legend i[data-status="unpaid"] { background: var(--o-warn); }
/* an open order */
.o-ob-osheet { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.o-ob-osheet__head { display: grid; justify-items: start; gap: 6px; padding: 20px calc(var(--ob-tap) + 20px) 12px var(--ob-pad); }
.o-ob-osheet__title { margin: 0; font: 700 var(--ob-fs-xl)/1.15 var(--o-font); letter-spacing: -.015em; }
.o-ob-osheet__meta { margin: 0; font: 500 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-osheet__scroll { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 14px; padding: 4px var(--ob-pad) 12px; overflow-y: auto; overscroll-behavior: contain; }
.o-ob-osheet__lines { display: grid; gap: 8px; margin: 0; padding: 12px 16px; list-style: none; border-radius: var(--o-r); background: var(--o-surface-2); }
.o-ob-osheet__lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; font: 400 var(--ob-fs)/1.4 var(--o-font); }
.o-ob-osheet__lines small { display: block; font-size: var(--ob-fs-sm); color: var(--o-text-3); }
.o-ob-osheet__none { margin: 0; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-3); }
.o-ob-osheet__void { display: grid; gap: 12px; }
.o-ob-osheet__sub { margin: 0; font: 700 var(--ob-fs)/1.3 var(--o-font); }
.o-ob-osheet__err { margin: 7px 0 0; font: 500 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-danger); }
.o-ob-osheet__foot { display: grid; gap: 10px; padding: 12px var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); background: var(--o-surface); }
.o-ob-osheet__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.o-ob .o-ob-osheet__tools .o-btn { flex: 1 1 140px; white-space: nowrap; }
/* PIN: who approves, then the digits */
.o-ob-pin { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 20px var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); }
.o-ob-pin__head { padding-right: calc(var(--ob-tap) + 8px); }
.o-ob-pin__title { margin: 0; font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-pin__lead { margin: 4px 0 0; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-2); }
.o-ob-staff { flex: 0 0 auto; display: flex; gap: 8px; margin: 0 calc(var(--ob-pad) * -1); padding: 2px var(--ob-pad); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.o-ob-staff::-webkit-scrollbar { display: none; }
.o-ob-staff__tile { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 140px; min-height: var(--ob-tile); padding: 8px 16px 8px 8px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; font: inherit; transition: background var(--o-ease); }
.o-ob-staff__tile.is-on { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-staff__initial { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--o-surface); color: var(--o-text-2); font: 700 var(--ob-fs)/1 var(--o-font); }
.o-ob-staff__tile.is-on .o-ob-staff__initial { color: var(--o-accent-deep); }
.o-ob-staff__text b { display: block; font: 700 var(--ob-fs)/1.25 var(--o-font); }
.o-ob-staff__text small { display: block; font: 400 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-staff__tile.is-on .o-ob-staff__text small { color: var(--o-accent-deep); }
.o-ob-staff__ghost { flex: 0 0 140px; }
.o-ob-pin__dots { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 24px; }
.o-ob-pin__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--o-surface-3); transition: background var(--o-ease); }
.o-ob-pin__dot.is-opt:not(.is-on) { width: 10px; height: 10px; }
.o-ob-pin__dot.is-on { background: var(--o-text); }
.o-ob .o-ob-pin__msg { align-items: center; margin: 0; outline: none; }
.o-ob-pin .o-ob-keypad, .o-ob-pin > .o-btn--block { width: min(360px, 100%); margin: 0 auto; }
.o-ob-key:disabled { opacity: .4; cursor: default; }
/* the basket's Adjust door */
.o-ob-basket__foot { grid-template-columns: minmax(0, 1fr); } /* a long Adjust summary must not widen the panel */
.o-ob .o-ob-adjdoor { min-width: 0; }
.o-ob .o-ob-adjdoor:disabled { opacity: .5; cursor: default; }
.o-ob-adjdoor svg { flex: 0 0 auto; width: 18px; height: 18px; }
.o-ob-adj { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 20px var(--ob-pad) calc(var(--ob-pad) + env(safe-area-inset-bottom)); }
.o-ob-adj__head { position: relative; padding-right: calc(var(--ob-tap) + 8px); }
.o-ob-adj__head--back { display: flex; align-items: center; min-height: var(--ob-tap); padding-left: calc(var(--ob-tap) + 6px); }
.o-ob-adj__title { margin: 0; font: 700 var(--ob-fs-xl)/1.2 var(--o-font); }
.o-ob-adj__lead { margin: 4px 0 0; font: 400 var(--ob-fs)/1.5 var(--o-font); color: var(--o-text-2); }
.o-ob-adj__rows { display: grid; gap: 8px; }
.o-ob-adj__row { display: flex; align-items: center; gap: 12px; min-height: var(--ob-tile); padding: 8px 14px 8px 8px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; font: inherit; transition: background var(--o-ease); }
.o-ob-adj__row:hover { background: var(--o-surface-3); }
.o-ob-adj__row > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--o-text-3); }
.o-ob-adj__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--o-surface); color: var(--o-text-2); }
.o-ob-adj__text { flex: 1 1 auto; min-width: 0; }
.o-ob-adj__text b { display: block; font: 700 var(--ob-fs)/1.25 var(--o-font); }
.o-ob-adj__text small { display: block; font: 400 var(--ob-fs-sm)/1.3 var(--o-font); color: var(--o-text-3); }
.o-ob-adj__text small.is-set { font-weight: 600; color: var(--o-accent-deep); }
.o-ob-adj__edit { display: grid; gap: 12px; width: min(440px, 100%); margin: 0 auto; }
.o-ob-adj__unit { justify-self: start; }
.o-ob-adj__note { display: flex; align-items: center; gap: 6px; min-height: 20px; margin: 0; font: 400 var(--ob-fs-sm)/1.4 var(--o-font); color: var(--o-text-3); }
.o-ob-adj__note.is-warn { font-weight: 600; color: var(--o-warn); }
.o-ob-adj__note svg { flex: 0 0 auto; width: 18px; height: 18px; }
.o-ob-adj > .o-ob-row { width: min(440px, 100%); margin: 0 auto; }
/* adding to an open order */
.o-ob-running { display: flex; align-items: center; gap: 10px; margin: 0 var(--ob-pad) 8px; padding: 6px 6px 6px 14px; border-radius: var(--o-r); background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-ob-running > svg { flex: 0 0 auto; width: 20px; height: 20px; }
.o-ob-running__text { flex: 1 1 auto; min-width: 0; font: 500 var(--ob-fs-sm)/1.35 var(--o-font); }
.o-ob-running__text b { font-weight: 700; }
.o-ob-running__text small { display: block; font-size: var(--ob-fs-sm); }
.o-ob .o-ob-running__stop { flex: 0 0 auto; padding: 0 14px; background: var(--o-surface); }
/* the done screen on the till: what printing or sending said */
.o-ob-done__status { margin: 0; font: 500 var(--ob-fs)/1.4 var(--o-font); color: var(--o-text-2); }
.o-ob-done__status.is-bad { color: var(--o-danger); }
.o-ob-receipt__how { justify-self: start; margin: 4px 0 10px; }
.o-ob-receipt .o-ob-pay__err { margin: 8px 0 0; }
.o-ob-receipt > .o-ob-primary { margin-top: 12px; }
  .o-ob-ttile, .o-ob-ochip, .o-ob-staff__tile, .o-ob-adj__row { transition: opacity 120ms; }
  .o-ob-ttile:active { transform: none; }
/* ── Table bar, table sheet, powered-by (.o-tablebar / .o-tsheet* / .o-powered) ────────────────────
   A restaurant page opened from the QR code on a table: "Table 5 · Terrace  Dine-in" under the header,
   and the cart's Checkout opens one sheet (name, phone, how to pay, Send) built by
   assets/js/orderly-table.js on the .o-loc shell. Send is the go colour: it is the safe, expected act. */
.o-tablebar { display: flex; align-items: center; gap: 10px; padding: 10px 0; font: 500 15px/1.4 var(--o-font); color: var(--o-text-2); }
.o-tablebar .o-ico { color: var(--o-text-3); flex: none; }
.o-tablebar__text { margin: 0; min-width: 0; flex: 1 1 auto; }
.o-tablebar__text b { color: var(--o-text); font-weight: 700; }
.o-tsheet__pay { justify-content: space-between; }
.o-tsheet__pay b { display: block; font-weight: 600; }
.o-tsheet__tick { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; color: transparent; }
.o-tsheet__tick svg { width: 18px; height: 18px; }
.o-tsheet__pay.is-on .o-tsheet__tick { color: var(--o-go-deep); }
.o-tsheet .o-loc__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.o-tsheet .o-loc__go:disabled { opacity: 1; cursor: progress; }
.o-tsheet__done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.o-tsheet__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--o-r-pill); background: var(--o-go-tint); color: var(--o-go-deep); animation: o-tsheet-in 260ms cubic-bezier(.16, 1, .3, 1) both; }
.o-tsheet__mark svg { width: 28px; height: 28px; }
.o-tsheet__no { margin: 6px 0 0; font: 600 13px/1.2 var(--o-font); letter-spacing: .04em; color: var(--o-text-3); font-variant-numeric: tabular-nums; }
.o-tsheet__big { margin: 0; font: 700 18px/1.35 var(--o-font); color: var(--o-text); }
a.o-powered:not(#o), a.o-powered:not(#o):visited { color: var(--o-text-3); }
a.o-powered:not(#o):hover { color: var(--o-text-2); }
.o-powered { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); font: 500 13px/1 var(--o-font); color: var(--o-text-3); text-decoration: none; }
.o-powered:hover { color: var(--o-text-2); }
.o-powered b { font-weight: 700; color: var(--o-text-2); }
.o-powered img { width: 16px; height: 16px; }
/* At a table the customer is here once, to eat: no "Get the Orderly app" card over the menu. */
.o-at-table .o-pwa { display: none; }
/* Someone who scanned a table is AT this restaurant: show only it. No marketplace header (where /
   when pill, search, sign-in, menu), no breadcrumb back to "Restaurants", no Orderly offers or
   footer, no distance or delivery/collection choice. Kept: the restaurant, its own promotions,
   menu, photos, videos and reviews, the cart, and "Powered by Orderly". Class set server-side
   (main-layout) so none of it flashes. */
.o-at-table #vue-widget-nav, .o-at-table #vue-widget-nav-mobile,
.o-at-table .orderly-customer-actions > .mr-2,
.o-at-table #vue-cart-preview > li:not(:has(.cart-handle)),
.o-at-table .o-crumbs, .o-at-table .o-promos, .o-at-table .o-away-only,
.o-at-table .sub-footer, .o-at-table .o-foot-bar { display: none !important; }
/* The menu to read: the plan has no table ordering, the waiter takes the order. */
.o-view-only .o-add, .o-view-only .add_to_cart, .o-view-only .sticky-cart, .o-view-only #vue-cart,
.o-view-only #vue-cart-preview { display: none !important; }
.o-tablebar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tablebar__note { flex: 0 1 auto; min-width: 0; font: 600 13px/1.3 var(--o-font); color: var(--o-text-2); text-align: right; text-wrap: balance; }
/* Order by chatting at the table (.o-tchat*): a bar at the foot of the page, the answer in a panel
   just above it. Built by assets/js/orderly-table.js. Flat: one surface, one shadow, no outlines.
   The input needs !important, like .search-geocomplete in ods-legacy.css: the legacy theme boxes every input. */
.o-has-tchat body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.o-tchat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; font-family: var(--o-font); color: var(--o-text); }
.o-tchat > * { pointer-events: auto; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
.o-tchat__bar { display: flex; align-items: center; gap: 8px; margin: 0 auto; padding: 6px 6px 6px 18px; border-radius: var(--o-r-pill); background: var(--o-surface); box-shadow: var(--o-elev-3); }
.o-tchat__bar:focus-within { box-shadow: var(--o-elev-3), var(--o-ring); }
.o-tchat .o-tchat__in:not(#o) { flex: 1 1 auto; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-width: 0; height: 44px; min-height: 0; border: 0 !important; outline: 0; background: transparent !important; color: var(--o-text); font: 400 16px/1 var(--o-font); -webkit-appearance: none; appearance: none; }
.o-tchat .o-tchat__in:not(#o)::placeholder { color: var(--o-text-3); }
.o-tchat__go { flex: none; width: 44px; height: 44px; border: 0; padding: 0; display: grid; place-items: center; border-radius: var(--o-r-pill); background: var(--o-accent-solid); color: #fff; cursor: pointer; transition: background var(--o-ease), opacity var(--o-ease); } /* ui-lint: allow — icon on the accent fill */
.o-tchat__go:hover { background: var(--o-accent-solid-hover); }
.o-tchat__go:disabled { opacity: .5; cursor: progress; }
.o-tchat__go:focus-visible, .o-tchat__x:focus-visible, .o-tchat__dish:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-tchat__go svg { width: 20px; height: 20px; }
.o-tchat__panel { position: relative; max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 44px 14px 16px; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-3); animation: o-loc-up 200ms cubic-bezier(.16, 1, .3, 1) both; }
.o-tchat__panel[hidden] { display: none; }
.o-tchat__x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; padding: 0; display: grid; place-items: center; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-3); cursor: pointer; }
.o-tchat__x:hover { background: var(--o-surface-2); color: var(--o-text); }
.o-tchat__x svg { width: 18px; height: 18px; }
.o-tchat__body { display: flex; flex-direction: column; gap: 10px; }
.o-tchat__line { font: 500 15px/1.45 var(--o-font); color: var(--o-text); }
.o-tchat__line b { font-weight: 700; }
.o-tchat__dishes { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.o-tchat__dish { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 8px; border: 0; border-radius: var(--o-r-sm); background: transparent; color: var(--o-text); text-align: left; font: 500 15px/1.3 var(--o-font); cursor: pointer; transition: background var(--o-ease); }
.o-tchat__dish:hover { background: var(--o-surface-2); }
.o-tchat__dish b { display: block; font-weight: 600; }
.o-tchat__dish small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-tchat__dish:disabled { opacity: .55; cursor: default; }
.o-tchat__plus { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--o-r-pill); background: var(--o-go-tint); color: var(--o-go-deep); }
.o-tchat__plus svg { width: 18px; height: 18px; }
.o-tchat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.o-tchat__chip:not(#o) { border: 0; cursor: pointer; min-height: 36px; font-size: 14px; background: var(--o-surface-2); box-shadow: none; color: var(--o-text); }
.o-tchat__chip:not(#o):hover { background: var(--o-surface-3); }
.o-tchat__ask { display: flex; flex-direction: column; gap: 10px; }
.o-tchat__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.o-tchat__send { min-height: 48px; }
.o-tchat__dots { display: inline-flex; gap: 5px; padding: 6px 0; }
.o-tchat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--o-text-3); animation: o-tchat-dot 1s ease-in-out infinite; }
.o-tchat__dots i:nth-child(2) { animation-delay: .15s; }
.o-tchat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes o-tchat-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .o-tchat__panel, .o-tchat__dots i { animation: none; } }
:root[data-orderly-theme="dark"] .o-tchat__plus { color: var(--o-go); }
@keyframes o-tsheet-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .o-tsheet__mark { animation: none; } }
:root[data-orderly-theme="dark"] .o-tsheet__pay.is-on .o-tsheet__tick, :root[data-orderly-theme="dark"] .o-tsheet__mark { color: var(--o-go); }