:root {
  --primary: #211C17;
  --accent: #B8893F;
  /* --accent is admin-customizable (Appearance -> Colors), and also doubles as a badge/pill
     background elsewhere — pairing it with dark text there needs it pale, while every place that
     paints plain page text with it needs the opposite: dark/saturated enough to read on the page's
     own background. Those two needs can never both be satisfied by one admin-picked value, which is
     exactly what kept breaking (repeatedly) in Modern's light mode. --accent-text exists so plain
     text has its own guaranteed-readable color, fixed per theme/mode and never admin-overridden —
     it can't go pale (or otherwise unreadable) no matter what an admin sets --accent to. */
  --accent-text: #B8893F;
  --background: #FAF5E9;
  --text: #211C17;
  --surface: #FFFDF8;
  --line: rgba(33,28,23,0.12);
  --muted: #8A8272;
  --font-heading: 'Cairo', serif;
  --font-body: 'Cairo', sans-serif;
}

html[data-theme="dark"] {
  --background: #17140F;
  --surface: #221D17;
  --text: #F3EEE3;
  --line: rgba(255,255,255,0.1);
  --muted: #A99F8E;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Themed scrollbars (page scrollbar, item modal, dropdowns, any other scrolling panel) — driven
   entirely by the same --background/--line/--muted variables every layout template and light/dark
   mode already override, so the scrollbar always matches whichever look is currently active
   without needing a separate rule per template. */
html { scrollbar-width: thin; scrollbar-color: var(--muted) var(--background); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  padding-bottom: 78px; /* room for fixed bottom nav */
  transition: background 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }
.container { max-width: 820px; margin: 0 auto; padding: 0 16px; }

/* ---------- Banner + header ---------- */
.banner { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--line); }
/* display:flow-root gives site-header its own block-formatting context, which
   stops header-top's negative top margin from "collapsing through" and
   dragging the whole header (and .top-bar above it) upward with it — a
   classic CSS margin-collapse pitfall. */
header.site-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 0 16px; position: relative; display: flow-root; }
.header-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: 0px; position: relative; z-index: 2; }
.header-top img.logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); background: var(--surface); }
.header-top h1 { font-family: var(--font-heading); font-size: 1.6rem; margin: 0; padding-bottom: 6px; }
.header-top p.tagline { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
.store-status { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.store-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.store-status-open { color: var(--pine, #33503F); }
.store-status-open::before { background: var(--pine, #33503F); }
.store-status-closing_soon { color: var(--brass, #B8893F); }
.store-status-closing_soon::before { background: var(--brass, #B8893F); }
.store-status-closed { color: var(--rust, #A8412E); }
.store-status-closed::before { background: var(--rust, #A8412E); }
.header-rating {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; color: var(--accent-text);
  /* Was a hardcoded brass tint regardless of theme — always looked right on Classic (whose
     --accent literally is that brass tone) but visibly clashed on any other theme's own accent
     color (e.g. Modern's blue). Deriving the tint from --accent itself keeps it matching
     whichever theme/template is actually active. The plain rgba() line first is a fallback for
     browsers/webviews that don't understand color-mix() — an invalid value there is simply
     ignored, leaving the line before it in effect, instead of no background showing at all. */
  background: rgba(128,128,128,0.14); background: color-mix(in srgb, var(--accent) 15%, transparent); padding: 2px 9px; border-radius: 999px; text-decoration: none;
}
.header-rating i { font-size: 0.7rem; }

/* ---------- Header layout variants ---------- */
/* Only the logo overlaps the banner (like a profile picture) — the name, tagline, and
   hamburger button stay in the normal header row below it, on the solid header background,
   so they're always legible no matter what the banner photo looks like.
   The logo is taken out of flex flow with position:absolute — a negative margin-top on a
   flex item (an earlier version of this) also shrinks that item's contribution to the flex
   line's height, which shrank the whole row and cancelled out the overlap almost entirely
   instead of producing a visible profile-picture effect. Absolute positioning sidesteps that
   flex-sizing interaction altogether, so the overlap actually renders, on any screen size. */
.header-layout-overlap .header-top { align-items: center; }
.header-layout-overlap .header-top img.logo { position: absolute; top: -20px; left: 68px; z-index: 3; }
.header-layout-overlap .header-top > div { margin-left: 86px; }
/* The rule pair above never had an RTL mirror — every other position-anchored element in this
   file gets one (see the html[dir="rtl"] rules throughout), but this one was missed, so an
   Arabic/RTL site's logo sat pinned to the physical left (now the trailing edge, past where the
   name/tagline start) instead of overlapping the banner near the leading edge like it does in LTR. */
html[dir="rtl"] .header-layout-overlap .header-top img.logo { left: auto; right: 68px; }
html[dir="rtl"] .header-layout-overlap .header-top > div { margin-left: 0; margin-right: 86px; }
/* Minimal: no banner photo at all (see index.php — it's skipped server-side, not just
   hidden, so it isn't even downloaded) — just a slim logo + name bar. The logo is only
   enlarged when there's a tagline underneath the name (so it spans both text lines) —
   with just the name alone, the smaller size already matches the row's height. */
.header-layout-minimal .header-top { padding-top: 14px; align-items: center; }
.header-layout-minimal .header-top img.logo { width: 52px; height: 52px; }
.header-layout-minimal .header-top.has-tagline img.logo { width: 72px; height: 72px; }
.header-layout-minimal .header-top h1 { font-size: 1.3rem; }

/* Banner overlay: the whole logo/name/tagline row sits on top of the banner photo as a bold
   hero treatment (not just the logo, like "Overlapping" above) — a dark gradient scrim
   behind the row keeps the light-colored text and the button readable over any photo.
   Taller than the other layouts' banner (170px) and still object-fit:cover (inherited from
   the base .banner rule), so a smaller/lower-res photo is scaled up to fill the whole hero
   area instead of leaving blank space around it or looking cramped once the overlay text
   covers the bottom portion. */
.header-layout-banner-overlay .banner { height: 260px; margin-bottom: -92px; position: relative; }
.header-layout-banner-overlay .header-top { position: relative; z-index: 2; padding-top: 44px; align-items: center; }
.header-layout-banner-overlay .header-top::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -44px; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 85%);
}
.header-layout-banner-overlay .header-top h1,
.header-layout-banner-overlay .header-top p.tagline { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.header-layout-banner-overlay .header-top .site-menu-toggle { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.4); color: #fff; }

/* ---------- Site menu drawer — a grouped, icon-led nav panel (opened from the header's
   hamburger button) alongside the existing header row and bottom nav, for quicker access
   to the same destinations without needing to scroll a horizontal row. ---------- */
.site-menu-toggle {
  background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--text);
  width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; align-self: center;
}
.site-drawer-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 63;
}
.site-drawer-backdrop.open { display: block; }
.site-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 82vw;
  background: var(--surface); color: var(--text); z-index: 65; overflow-y: auto;
  transform: translateX(-100%); transition: transform 0.2s ease;
  display: flex; flex-direction: column;
}
.site-drawer.open { transform: translateX(0); }
html[dir="rtl"] .site-drawer { left: auto; right: 0; transform: translateX(100%); }
html[dir="rtl"] .site-drawer.open { transform: translateX(0); }
.site-drawer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.site-drawer-brand { font-family: var(--font-heading); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-drawer-close { background: none; border: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; }
.site-drawer-nav { padding: 8px 10px 20px; }
.drawer-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 16px 10px 4px; }
.drawer-group-label:first-child { margin-top: 6px; }
.site-drawer-nav a, .site-drawer-nav button.drawer-link {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 10px 10px; border-radius: 8px; color: var(--text); text-decoration: none;
  font-size: 0.92rem; font-family: inherit; background: none; border: none; text-align: left; cursor: pointer;
}
.site-drawer-nav a:hover, .site-drawer-nav button.drawer-link:hover { background: var(--background); }
.site-drawer-nav .drawer-icon { width: 20px; text-align: center; flex-shrink: 0; color: var(--accent-text); }
html[dir="rtl"] .site-drawer-nav a, html[dir="rtl"] .site-drawer-nav button.drawer-link { text-align: right; }

.contact-row-wrap { position: relative; }
.contact-row {
  display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 14px; padding: 0 16px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.contact-row::-webkit-scrollbar { display: none; }
/* Zero-width marker after the last item — an IntersectionObserver watches this (rather than
   doing scrollLeft arithmetic, which has inconsistent conventions in RTL and rounding quirks)
   to know when the row has been scrolled all the way to its end. */
.contact-row-end-sentinel { flex-shrink: 0; width: 1px; height: 1px; }
/* A small "there's more this way" hint over the scrollable row's right edge — hidden once
   the row is scrolled all the way to its end (see cart.js). */
.contact-row-scroll-hint {
  position: absolute; right: 12px; top: 50%; transform: translateY(calc(-50% + 7px));
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: opacity 0.15s ease; pointer-events: auto;
}
.contact-row-scroll-hint.hidden { opacity: 0; pointer-events: none; }
.contact-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px; background: var(--background);
  border: 1px solid var(--line); font-size: 0.78rem; white-space: nowrap;
}
.contact-pill:hover { border-color: var(--accent); }
.contact-pill-select, button.contact-pill {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0;
  padding: 6px 22px 6px 12px; border-radius: 999px; background: var(--background);
  border: 1px solid var(--line); font-size: 0.78rem; color: var(--text); font-family: inherit; white-space: nowrap;
}
button.contact-pill { padding: 6px 12px; }
/* Icon/label display mode (Admin -> Appearance -> Header menu) — applies to both the header's
   pills and the footer's "Connect With Us" icons, which don't have a name-only equivalent. */
body.icon-style-icon .contact-pill .pill-label,
body.icon-style-icon .footer-icons .icon-label { display: none; }
body.icon-style-name .contact-pill .pill-icon,
body.icon-style-name .footer-icons .icon-circle { display: none; }
.contact-pill-select:hover, button.contact-pill:hover { border-color: var(--accent); }

/* Currency toggle — both currencies shown side by side (rather than a dropdown a customer has
   to open to see the other option) with the one currently displayed on item cards highlighted. */
.currency-toggle {
  display: inline-flex; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line);
  background: var(--background); overflow: hidden;
}
.currency-toggle-btn {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: none; background: none; color: var(--text); cursor: pointer; font-family: inherit;
  padding: 6px 12px; font-size: 0.78rem; white-space: nowrap;
}
.currency-toggle-btn.active { background: var(--primary); color: #fff; }

/* ---------- Combined header "Info" menu (call/WhatsApp/directions/about) ---------- */
.info-menu-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
/* position: fixed (not absolute) is deliberate — the toggle button lives inside .contact-row,
   which scrolls horizontally (overflow-x: auto). That alone forces the row's overflow-y to
   "auto" too per the CSS spec, which would clip an absolutely-positioned dropdown right at the
   row's own height. A fixed-position panel isn't subject to an ancestor's overflow clipping at
   all, so it stays clear of that — its top/left are computed in cart.js from the button's
   on-screen position each time it opens, since "fixed" has no relationship to the button itself. */
.info-menu-dropdown {
  display: none; position: fixed; z-index: 55; min-width: 170px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.info-menu-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
.info-menu-dropdown a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 0.84rem; white-space: nowrap;
}
.info-menu-dropdown a:hover { background: var(--background); }

/* ---------- News ticker ---------- */
.ticker-wrap { background: var(--ticker-bg, var(--accent)); color: var(--ticker-text, var(--primary)); overflow: hidden; white-space: nowrap; padding: 7px 0; font-size: 0.8rem; font-weight: 600; }
.ticker-track { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* Right-to-left reading text scrolls the opposite way — starts off-screen on the left instead
   of the right, so it enters/exits in the direction that matches how the text is read. */
.ticker-rtl .ticker-track { padding-left: 0; padding-right: 100%; animation-name: ticker-rtl; }
@keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ---------- Sticky category nav + search ---------- */
.sticky-nav { position: sticky; top: 0; z-index: 30; background: var(--background); border-bottom: 1px solid var(--line); padding: 10px 0; }
.sticky-nav-row { display: flex; align-items: center; }
/* Keeps the drawer reachable once the header (with the original hamburger button) has
   scrolled out of view — same drawer, opened from wherever the customer currently is. Hidden
   until the nav bar is actually stuck to the top (see cart.js), so the two menu buttons are
   never both visible at once. */
.sticky-menu-toggle {
  display: none; background: none; border: none; color: var(--text); flex-shrink: 0; cursor: pointer;
  width: 40px; height: 40px; margin-left: 6px; font-size: 1.05rem;
  align-items: center; justify-content: center;
}
.sticky-nav.stuck .sticky-menu-toggle { display: flex; }
/* Once the full header (logo + restaurant name) has scrolled out of view, this sticky bar used
   to show nothing but the hamburger button and category chips — no indication of which site
   you're even still on. A small logo + name here, matched to the header's own, keeps the brand
   visible without needing the full header height back. Hidden until stuck for the same reason
   the hamburger button is: no point showing a second, redundant brand mark while the real
   header is already on screen. */
.sticky-nav-brand { display: none; align-items: center; gap: 8px; flex-shrink: 0; max-width: 38%; overflow: hidden; padding-left: 2px; }
.sticky-nav.stuck .sticky-nav-brand { display: flex; }
.sticky-nav-brand img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.sticky-nav-brand span { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.category-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; flex: 1; min-width: 0; }
.category-scroll::-webkit-scrollbar { display: none; }
.category-chip {
  flex-shrink: 0; padding: 7px 15px; border-radius: 20px; border: 1px solid var(--line);
  /*! background: var(--surface); */ font-size: 0.82rem; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.category-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.category-chip-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; vertical-align: -3px; margin-right: 4px; }
/* Image chips: the category image fills the whole chip as a background photo, with the
   name overlaid on top (a dark gradient scrim keeps the white label readable over any photo). */
.category-chip.has-nav-image {
  position: relative; flex-direction: row; align-items: flex-end; justify-content: center;
  width: 92px; height: 68px; padding: 0; border: none; overflow: hidden;
}
.category-chip.has-nav-image .category-nav-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 0;
}
.category-chip.has-nav-image::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%);
}
.category-chip.has-nav-image .category-chip-label {
  position: relative; z-index: 2; width: 100%; padding: 6px 6px; font-weight: 600; text-align: center;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); white-space: normal; line-height: 1.15;
}
.category-chip.has-nav-image.active { box-shadow: 0 0 0 2px var(--primary) inset; }
.custom-icon { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; display: inline-block; }
.icon-circle .custom-icon { width: 18px; height: 18px; }

/* The 820px reading-width .container only ever fit ~4 grid cards (or one narrow column of
   compact/magazine cards) and left the rest of a wide desktop/tablet screen empty — every
   layout template gets more room to breathe once there's space for it. */
@media (min-width: 900px) { .container { max-width: 1100px; } }
@media (min-width: 1300px) { .container { max-width: 1320px; } }

/* ---------- Grid template variant ---------- */
/* Column count is admin-configurable (Appearance -> Layout template): "Auto" keeps the
   fit-as-many-as-possible behavior via the --grid-columns-template custom property set
   inline on <body>, or an explicit 3-6 column count can be chosen instead. */
.template-grid .item-grid { grid-template-columns: var(--grid-columns-template, repeat(auto-fill, minmax(160px, 1fr))); gap: 14px; }
.template-grid .item-card { flex-direction: column; text-align: center; }
.template-grid .item-card .photo-wrap { width: 100%; }
.template-grid .item-card .photo { width: 100%; height: 130px; }
/* Keep at least 2 columns on phones — otherwise auto-fill collapses to a single stacked
   photo-over-text card, which looks nearly identical to the Magazine template below. */
@media (max-width: 480px) {
  .template-grid .item-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .template-grid .item-card .photo { height: 100px; }
}

/* ---------- Compact list template variant ---------- */
/* Column count is admin-configurable (Appearance -> Layout template), applied via the
   --compact-columns custom property set inline on <body>; 3 by default. */
.template-compact .item-grid { grid-template-columns: repeat(var(--compact-columns, 3), 1fr); gap: 2px 16px; }
.template-compact .item-card { padding: 10px 12px; gap: 10px; border-radius: 8px; }
.template-compact .item-card .photo-wrap { display: none; }
.template-compact .item-card .info h3 { font-size: 0.92rem; }
.template-compact .item-card .info p.desc { -webkit-line-clamp: 1; }
@media (max-width: 700px) { .template-compact .item-grid { grid-template-columns: 1fr; } }

/* ---------- Magazine template variant ---------- */
/* Column count is admin-configurable the same way as Grid gallery above, via
   --magazine-columns-template; 1 (single scrollable feed) by default. */
.template-magazine .item-grid { grid-template-columns: var(--magazine-columns-template, 1fr); gap: 22px; }
@media (max-width: 700px) { .template-magazine .item-grid { grid-template-columns: 1fr; } }
.template-magazine .item-card { flex-direction: column; padding: 0; overflow: hidden; }
.template-magazine .item-card .photo-wrap { width: 100%; }
.template-magazine .item-card .photo { width: 100%; height: 220px; border-radius: 0; }
.template-magazine .item-card .info { padding: 14px; }
.template-grid .item-card .info .price-row { justify-content: center; }
/* Distinctly bigger, edge-to-edge photos than the grid template's small square-ish
   thumbnails, so the two don't collapse into the same look on a phone screen. */
@media (max-width: 480px) { .template-magazine .item-card .photo { height: 260px; } }

/* ---------- Cards template variant ---------- */
/* Elevated, shadowed cards rather than grid's flat outlined ones — a more "app store"
   feel, still photo-forward but with more visual weight per item. */
.template-cards .item-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.template-cards .item-card {
  flex-direction: column; padding: 0; border: none; border-radius: 18px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.template-cards .item-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.15); }
.template-cards .item-card .photo-wrap { width: 100%; }
.template-cards .item-card .photo { width: 100%; height: 140px; border-radius: 0; }
.template-cards .item-card .info { padding: 12px 14px 14px; }
@media (max-width: 480px) {
  .template-cards .item-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .template-cards .item-card .photo { height: 110px; }
}

/* ---------- Modern template variant ---------- */
/* A distinct editorial, blue-accented look (not just a layout change like the other templates) —
   full-bleed photos, inset rounded cards, and a quick "+" button for items with no size/add-on
   choices to make (those go straight into the cart without opening the item modal at all; items
   that DO need a choice still open the modal as usual). Pairs with the Banner overlay header
   layout for the fullest effect — see the header rules further down.
   Has its own admin-editable palette (Admin -> Appearance -> Modern theme colors) for both light
   and dark mode, separate from the site's regular Colors/Dark theme colors sections — these two
   blocks are just the fallback defaults, normally overridden by index.php's inline per-setting
   version. body.template-modern is more specific than the plain :root default above, so it wins
   there regardless of source order; html[data-theme="dark"] .template-modern is more specific
   again so it correctly wins over both. */
.template-modern {
  --primary: #2f6fed; --accent: #FFFFFF; --accent-text: #1d4ed8; --background: #eef2f9; --surface: #ffffff;
  --text: #16233a; --muted: #6b7a90; --line: #dbe2ec;
}
html[data-theme="dark"] .template-modern {
  --primary: #2f6fed; --accent: #FFFFFF; --accent-text: #5b8dff; --background: #0d1826; --surface: #131f30;
  --text: #f2f5f9; --muted: #93a2b8; --line: #24344c;
}
.template-modern .item-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 620px) { .template-modern .item-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.template-modern .item-card {
  flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--surface); padding: 10px; gap: 0; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.template-modern .item-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.template-modern .item-card .photo-wrap { width: 100%; position: relative; }
.template-modern .item-card .photo { width: 100%; height: 140px; border-radius: 14px; }
.template-modern .item-card .badge {
  top: 8px; left: 8px; border-radius: 999px; padding: 3px 11px; font-size: 0.68rem; letter-spacing: 0.03em;
  /* The base rule below pairs an --accent background with --primary text, which only reads well
     if --accent stays pale — not something this template's own --accent is guaranteed to be (it's
     also used as plain colored text all over the page, which needs the opposite: dark enough to
     read on a light background). Scoped to --primary here instead, which every button already
     relies on being safe to pair with white text in both of this template's light and dark modes. */
  background: var(--primary); color: #fff;
}
.template-modern .item-card .card-discount-badge { top: 8px; right: 38px; }
html[dir="rtl"] .template-modern .item-card .card-discount-badge { right: auto; left: 38px; }
.template-modern .item-card .info { padding: 12px 4px 4px; }
.template-modern .item-card .info h3 { font-size: 1.02rem; }
.template-modern .item-card .info .price-row { padding-top: 10px; }
.template-modern .item-card .quick-add-btn {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; background: var(--primary); color: #fff; border: none;
  font-size: 1.25rem; line-height: 1; cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.template-modern .item-card .quick-add-btn:active { transform: scale(0.92); }
/* Every other template already adds via the item modal, so the quick-add button only makes
   sense (and is only rendered with real markup) in Modern — this is just an extra safety net
   in case a future edit ever renders it elsewhere without meaning to. */
.item-card .quick-add-btn { display: none; }

/* Category nav becomes a single dropdown button (current category + caret) instead of a
   scrolling row of chips — cart.js swaps in a dedicated dropdown for .template-modern instead
   of reusing the chip row, since it's a fundamentally different control, not just a restyle. */
.template-modern .category-scroll { display: none; }
.modern-category-dropdown { display: none; position: relative; padding: 0 16px; margin-top: 14px; }
.template-modern .modern-category-dropdown { display: block; }
.modern-category-dropdown-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: #fff;
  border: none; border-radius: 999px; padding: 9px 18px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.modern-category-dropdown-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 16px; z-index: 32; min-width: 200px;
  max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.modern-category-dropdown-panel.open { display: block; }
.modern-category-dropdown-panel button {
  display: block; width: 100%; text-align: left; background: none; border: none; color: var(--muted);
  padding: 9px 12px; border-radius: 9px; font-size: 0.88rem; cursor: pointer;
}
.modern-category-dropdown-panel button:hover { background: var(--background); }
.modern-category-dropdown-panel button.active { color: var(--text); font-weight: 700; }
html[dir="rtl"] .modern-category-dropdown-panel { left: auto; right: 16px; text-align: right; }

/* ---------- Header hero, when paired with the Banner overlay layout ---------- */
.template-modern.header-layout-banner-overlay .banner { height: 380px; margin-bottom: -210px; }
.template-modern.header-layout-banner-overlay .header-top { padding-top: 60px; }
.template-modern.header-layout-banner-overlay .header-top::before { top: -210px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(6,12,22,0.85) 88%); }
.template-modern.header-layout-banner-overlay .header-top > div { text-align: center; width: 100%; }
.template-modern.header-layout-banner-overlay .header-top h1 { font-style: italic; font-size: 1.9rem; justify-content: center; }
.template-modern.header-layout-banner-overlay .header-top p.tagline {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; opacity: 0.85;
}
.template-modern.header-layout-banner-overlay .contact-row-wrap { position: relative; z-index: 2; margin-top: -14px; }
.template-modern.header-layout-banner-overlay .contact-row { justify-content: center; }
.template-modern.header-layout-banner-overlay .contact-pill,
.template-modern.header-layout-banner-overlay button.contact-pill {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Floating cart / notification buttons read as the site's own blue accent rather than the usual
   ink/primary tone, matching every other call-to-action in this template. */
.template-modern .floating-cart-btn,
.template-modern .notif-bell-public,
.template-modern .scroll-top-btn,
.template-modern .music-float-btn { background: var(--primary); color: #fff; }
/* Same --accent-as-background/--primary-as-text pairing issue as the item-card badge above —
   scoped to --primary/#fff instead so it stays readable regardless of what --accent is set to. */
.template-modern .bottom-nav .cart-badge { background: var(--primary); color: #fff; }

/* ---------- Item modal, Modern template ---------- */
.template-modern .option-row {
  display: flex; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  margin-bottom: 8px;
}
/* .selected is toggled in JS on every change event (cart.js syncOptionRowHighlight) so the
   highlight doesn't depend solely on :has() support; :has() stays too as a same-effect backup. */
.template-modern .option-row:has(input:checked),
.template-modern .option-row.selected { border-color: var(--primary); background: rgba(128,128,128,0.14); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.template-modern .allergen-note { display: none; }
.template-modern .allergen-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
/* Modern hides the full "⚠ Allergens: ..." sentence above (replaced by these pills, one per
   allergen) but the pills alone — just "Dairy", "Nuts" floating with no context — didn't say what
   they actually meant. This puts the missing icon/label back without repeating the same list
   twice in two different forms. */
.template-modern .allergen-pills::before { content: '⚠ Allergens:'; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.template-modern .allergen-pill {
  display: inline-block; background: rgba(255,180,60,0.16); color: #e8ab3f; border: 1px solid rgba(232,171,63,0.35);
  border-radius: 999px; padding: 3px 11px; font-size: 0.72rem; font-weight: 600;
}

/* Item modal hero photo: the name overlays a full-bleed photo that bleeds past the modal's own
   padding via matching negative margins, mirroring the homepage's banner-overlay header treatment. */
.template-modern .item-modal-hero {
  position: relative; margin: -22px -20px 14px; border-radius: 20px 20px 0 0; overflow: hidden;
}
.template-modern .item-modal-hero img.item-photo {
  width: 100%; height: 280px; max-height: none; margin-bottom: 0; border-radius: 0; display: block;
}
.template-modern .item-modal-hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 65%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,24,38,0) 0%, rgba(13,24,38,0.92) 100%);
}
.template-modern .item-modal-hero .close-btn {
  position: absolute; top: 14px; right: 14px; float: none; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(13,24,38,0.55); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
html[dir="rtl"] .template-modern .item-modal-hero .close-btn { right: auto; left: 14px; }
.template-modern .item-modal-hero h2 {
  position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; margin: 0;
  font-style: italic; font-size: 1.45rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

.search-row { padding: 10px 16px 0; }
.search-row input {
  width: 100%; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 0.88rem;
}

/* ---------- Busy mode notice ---------- */
.busy-mode-banner {
  background: rgba(168,65,46,0.12); color: var(--rust, #A8412E); text-align: center;
  padding: 9px 16px; font-size: 0.82rem; font-weight: 600;
}

/* ---------- Daily offer banner ---------- */
.offer-banner {
  margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: linear-gradient(120deg, var(--accent), var(--primary));
  color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer;
}
.offer-banner strong { font-family: var(--font-heading); font-size: 1.05rem; }

/* ---------- Category sections + item grid ---------- */
.category-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; scroll-margin-top: 110px;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent-text); font-weight: 600;
}
.category-eyebrow .rule { flex: 1; height: 1px; background: var(--line); }
.collapsible-toggle { cursor: pointer; user-select: none; }
.collapse-caret { display: inline-block; transition: transform 0.2s; }
.category-section.collapsed .collapse-caret { transform: rotate(-90deg); }
/* Baseline so collapsed sections start hidden even before cart.js's applyFilters() runs (avoids a flash of open content). */
.category-section.collapsed .item-grid { display: none; }
/* The name moves onto the banner photo itself (see .category-banner-name below), so the
   plain-text eyebrow is left empty for categories that have a banner image — collapsed to
   zero size rather than display:none, since it still carries the #cat-<id> anchor that
   category-chip clicks scrollIntoView() to (a display:none element can't be scrolled to). */
.category-eyebrow.has-banner { margin: 0; height: 0; min-height: 0; overflow: hidden; }
.category-banner { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 0; }
.category-banner-wrap { position: relative; margin: 26px 0 12px; scroll-margin-top: 110px; }
.category-banner-wrap::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.7) 100%);
}
.category-banner-name {
  position: absolute; z-index: 2; left: 0; right: 44px; bottom: 0; padding: 14px 8px 14px 18px;
  font-family: var(--font-heading); font-size: clamp(1.3rem, 4.5vw, 1.9rem); font-weight: 700;
  line-height: 1.15; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.category-banner-caret {
  position: absolute; z-index: 2; bottom: 8px; right: 8px; background: rgba(0,0,0,0.55); color: #fff;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.show-category-separators .category-section { border-top: 1px solid var(--line); padding-top: 18px; }
.show-category-separators .category-section:first-child { border-top: none; padding-top: 0; }

.item-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }

.item-card {
  position: relative; display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; cursor: pointer; transition: border-color 0.15s;
  /* Tells the browser this element only ever needs a plain tap, not double-tap-to-zoom or pan
     gestures — removes the delay/detection some mobile browsers otherwise add before firing a
     click, which is what let a second stray click occasionally reach the item modal's own photo
     right after it opened (see the zoom-suppression comment in cart.js). */
  touch-action: manipulation;
}
.item-card:hover { border-color: var(--accent); }
.item-card .photo-wrap { position: relative; flex-shrink: 0; }
.item-card .photo { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--line); }
.item-card .badge {
  position: absolute; top: -6px; left: -6px; background: var(--accent); color: var(--primary);
  font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
}
.item-card .spicy-flag { position: absolute; bottom: -4px; right: -4px; font-size: 0.95rem; }
.item-card .favorite-btn {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.35); border: none; color: #fff; font-size: 0.82rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1; padding: 0;
}
.item-card .favorite-btn:hover { background: rgba(0,0,0,0.55); }
.item-card .favorite-btn.active { color: var(--rust, #A8412E); }
html[dir="rtl"] .item-card .favorite-btn { right: auto; left: 4px; }
/* A discounted item's -X% badge — kept out of the price line itself (which was getting
   unreadable, especially a long LBP amount, once it also had to fit a struck-through original
   price and this badge all on one row) and placed here instead, next to the favorite button —
   the photo's top-left corner already has the item's own tag badge (Special/Hot/New...), so
   top-right next to the heart keeps the two badges symmetric instead of competing for the same
   corner. Percentage never depends on which currency the customer is browsing in, so — unlike
   the price row — this one never needs updating when the currency toggle is used. */
.item-card .card-discount-badge {
  position: absolute; top: 4px; right: 34px; background: var(--rust, #A8412E); color: #fff;
  font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; z-index: 1;
}
html[dir="rtl"] .item-card .card-discount-badge { right: auto; left: 34px; }
.item-card .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-card .info h3 { font-family: var(--font-heading); font-size: 1.02rem; margin: 0; }
.item-card .info p.desc { font-size: 0.78rem; color: var(--muted); margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-card .info .price-row { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 8px; }
/* The original (struck-through) and discounted price stacked on their own two lines instead of
   crammed into one row with the quick-add button — same unreadable-LBP-price reasoning as the
   corner badge above. Unscoped (not just .item-card) since the item modal's own price line
   reuses this same class. */
.price-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-card.unavailable { opacity: 0.5; cursor: default; }
.item-card .sold-out-badge { background: var(--rust, #A8412E); color: #fff; }
.item-card.hidden-by-filter { display: none; }

.price-original { text-decoration: line-through; color: var(--muted); font-size: 0.78rem; }
.discount-badge { background: var(--rust, #A8412E); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

.option-row img.option-thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; margin-right: 8px; }
.option-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }

.nutrition-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.nutrition-fact { background: var(--background); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 0.75rem; text-align: center; min-width: 64px; }
.nutrition-fact .fact-value { font-weight: 700; display: block; }
.nutrition-fact .fact-label { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; }

/* ---------- Price tag ---------- */
/* color used to be var(--background) here (and on every other var(--primary)-background pill/
   button in this file — .btn-primary, .btn, .currency-toggle-btn.active, .category-chip.active,
   .offer-banner, .fulfillment-toggle button.active, the floating action buttons, the notification
   bell) — that reads fine in light mode (--background is pale) but silently flips to near-black
   the moment dark mode's own --background takes over, making the text on every one of these
   nearly unreadable against its own var(--primary) fill. Hardcoded #fff everywhere instead, matching
   the buttons that already got this right (.quick-add-btn, .template-modern's own button overrides). */
.price-tag {
  display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden;
  background: var(--primary); color: #fff; font-family: 'Cairo'; font-size: 0.8rem;
}
.item-card .info .price-tag {
  margin-top: auto;
  /* padding-top: 8px; */
}
.price-tag-usd, .price-tag-lbp { padding: 4px 11px; }
.currency-icon { font-size: 0.85em; margin-right: 3px; }

.menu-images-gallery { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.menu-image-item { margin: 0; }
.menu-image-item img { width: 100%; border-radius: 12px; display: block; }
.menu-image-item figcaption { text-align: center; margin-top: 6px; color: var(--muted); font-size: 0.85rem; }
/* .price-tag-lbp deliberately has no color rule of its own — it inherits the same color as
   .price-tag-usd from their shared parent .price-tag (background: var(--primary); color:
   var(--background);), so both currencies read as one consistent color inside the price pill
   instead of LBP standing out in a different shade. Applies the same way in every theme and both
   light/dark modes, including Modern, since none of them override .price-tag's own colors. */
.price-tag-divider { width: 1px; border-left: 1px dashed rgba(255,255,255,0.3); margin: 4px 0; }

/* ---------- Modals (item / cart / about / image zoom) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none;
  align-items: flex-end; justify-content: center; z-index: 60;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface); color: var(--text); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 22px 20px 26px; position: relative;
}
@media (min-width: 620px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 20px; }
}
.modal h2 { font-family: var(--font-heading); margin: 0 0 4px; font-size: 1.3rem; }
.modal .close-btn { position: sticky; top: 0; float: right; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.modal img.item-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; cursor: zoom-in; margin-bottom: 10px; }
/* Multi-photo gallery (item-edit.php's own uploader) — a horizontally swipeable strip instead of
   the single fixed photo above; falls back to that single-photo markup whenever there's only one
   image, so nothing changes for the common case. */
.item-photo-gallery {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.item-photo-gallery::-webkit-scrollbar { display: none; }
.item-photo-gallery img.item-photo { flex: 0 0 100%; scroll-snap-align: start; max-height: 220px; object-fit: cover; border-radius: 14px; cursor: zoom-in; margin-bottom: 0; }
.item-video-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 14px; overflow: hidden; margin-bottom: 10px; background: #000; }
.item-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal .tags-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.modal .tags-row span { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--background); border: 1px solid var(--line); }
.modal .allergen-note { font-size: 0.76rem; color: var(--accent-text); margin-top: 4px; }

.zoom-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 90; cursor: zoom-out; }
.zoom-backdrop.open { display: flex; }
.zoom-backdrop img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

.option-group { margin-top: 18px; }
.option-group h4 { font-size: 0.85rem; margin: 0 0 8px; }
.option-group .required-tag { color: var(--accent-text); font-size: 0.7rem; font-weight: 600; margin-left: 6px; }
.option-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; cursor: pointer; }
.option-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.option-group textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px; font-family: inherit; font-size: 0.88rem; background: var(--background); color: var(--text); }
.option-qty-stepper { display: flex; align-items: center; gap: 8px; }
.option-qty-stepper .qty-btn { width: 24px; height: 24px; font-size: 0.9rem; flex-shrink: 0; }
.option-qty-stepper [data-stepper-value] { min-width: 14px; text-align: center; font-weight: 600; }

.qty-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--text); font-size: 1.1rem; cursor: pointer; }

.btn-primary {
  display: block; width: 100%; text-align: center; padding: 13px; border: none; border-radius: 999px;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 0.95rem; cursor: pointer; margin-top: 20px;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Smaller, inline buttons used throughout the site (promo apply, redeem points, etc.) —
   sized to their content rather than full-width like .btn-primary above. */
.btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: #A8412E; border: 1px solid rgba(168,65,46,0.3); }

/* ---------- Button style presets — same setting as the bottom nav / footer icons,
   applied to every button on the site so they all read as one consistent system. ---------- */
body.style-ios .btn-primary, body.style-ios .btn {
  border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
body.style-android .btn-primary, body.style-android .btn {
  border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); font-weight: 700; letter-spacing: 0.02em;
}
/* Each of these sets a plain solid var(...) background first, immediately overwritten by the
   color-mix() translucency on any browser that understands it — on one that doesn't, the invalid
   color-mix() line is simply ignored and the solid one before it stays in effect, so a button
   never ends up with no background at all instead of just a less "glassy" one. */
body.style-glass .btn-primary, body.style-glass .btn {
  background: var(--primary);
  background: color-mix(in srgb, var(--primary) 75%, transparent);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.25);
}
body.style-android .btn.secondary, body.style-android .btn.danger { border-radius: 10px; font-weight: 700; letter-spacing: 0.02em; }
body.style-glass .btn.secondary, body.style-glass .btn.danger {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
}
/* Same presets extended to the floating action buttons (view-cart bar, scroll-to-top,
   customer notification bell) so they read as the same button system, not a separate one. */
body.style-android .floating-cart-btn { border-radius: 10px; font-weight: 700; letter-spacing: 0.02em; }
body.style-glass .floating-cart-btn, body.style-glass .scroll-top-btn, body.style-glass .notif-bell-public, body.style-glass .music-float-btn {
  background: var(--primary);
  background: color-mix(in srgb, var(--primary) 75%, transparent);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.25);
}

.cart-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.cart-line .meta { flex: 1; min-width: 0; }
.cart-line .meta .name { font-size: 0.9rem; font-weight: 600; }
.cart-line .meta .opts { font-size: 0.75rem; color: var(--muted); }
.cart-line .qty-row { margin-top: 0; gap: 8px; }
.remove-line { background: none; border: none; color: var(--accent-text); font-size: 0.75rem; cursor: pointer; }

.checkout-field { margin-top: 12px; }
.checkout-field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.checkout-field input, .checkout-field select, .checkout-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: inherit; font-size: 0.88rem;
  background: var(--background); color: var(--text);
}
.fulfillment-toggle { display: flex; gap: 8px; margin-top: 12px; }
.fulfillment-toggle button {
  flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--background); color: var(--text);
  font-size: 0.82rem; cursor: pointer;
}
.fulfillment-toggle button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Scroll to top ---------- */
.scroll-top-btn {
  position: fixed; right: 16px; bottom: 88px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none; font-size: 1.1rem; cursor: pointer;
  display: none; align-items: center; justify-content: center; z-index: 35; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.scroll-top-btn.visible { display: flex; }
/* Pushed up out of the way whenever the View Cart bar below is showing, so the two never overlap. */
.scroll-top-btn.cart-bar-visible { bottom: 132px; }

.floating-cart-btn {
  position: fixed; left: 16px; right: 16px; bottom: 68px; margin: 0 auto; max-width: 420px;
  background: var(--primary); color: #fff; border: none; border-radius: 999px;
  padding: 13px 20px; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  display: none; align-items: center; justify-content: center; gap: 8px; z-index: 39;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.floating-cart-btn.visible { display: flex; }

/* ---------- Floating background-music button ---------- */
/* Sits directly above the scroll-to-top button (bottom:88px, height:40px — an 8px gap above its
   own top edge) rather than a fixed spot chosen only to clear its highest possible position, and
   rises in step with it via the same .cart-bar-visible class/trigger so the two always stay a
   fixed 8px apart regardless of whether the floating cart bar is showing. */
.music-float-btn {
  position: fixed; right: 16px; bottom: 136px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none; font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 39; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.music-float-btn.cart-bar-visible { bottom: 180px; }
.music-float-btn.playing { animation: music-btn-pulse 1.6s ease-in-out infinite; }
@keyframes music-btn-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  50% { box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 8px color-mix(in srgb, var(--primary) 0%, transparent); }
}
/* The hidden YouTube player's wrapper — same fixed position (including the .cart-bar-visible
   raised state, kept in lockstep by the same JS toggle as the button itself), size, AND shape
   (round, matching .music-float-btn's own border-radius:50%) as the button, one z-index behind
   it, so the iframe stays fully on-screen (avoiding browsers throttling/suspending playback in
   off-screen iframes as a power-saving measure) while staying completely covered by the opaque
   button on top of it — a plain square wrapper behind a round button would leave its four corners
   peeking out past the button's circular edge once the iframe actually rendered something, and a
   wrapper that didn't move when the button does would eventually be left uncovered by it. */
.music-hidden-player-wrap { position: fixed; right: 16px; bottom: 136px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; z-index: 38; pointer-events: none; }
.music-hidden-player-wrap.cart-bar-visible { bottom: 180px; }

/* ---------- Custom menu banners (image / video / carousel), shown above the menu items ---------- */
.menu-banner-image { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.menu-banner-link { display: block; }
.menu-banner-video {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 14px; margin-bottom: 16px; background: #000;
}
.menu-banner-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.menu-banner-carousel {
  position: relative; width: 100%; max-height: 320px; height: 260px; overflow: hidden;
  border-radius: 14px; margin-bottom: 16px; background: var(--surface);
}
.menu-banner-carousel-track { position: relative; width: 100%; height: 100%; }
.menu-banner-carousel-track .menu-banner-image {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
  border-radius: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.menu-banner-carousel-track .menu-banner-image.active { opacity: 1; pointer-events: auto; }
.menu-banner-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.3rem;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.menu-banner-carousel-btn:hover { background: rgba(0,0,0,0.65); }
.menu-banner-carousel-btn.prev { left: 10px; }
.menu-banner-carousel-btn.next { right: 10px; }
/* Spacing between category sections normally comes from the *next* section's own top margin
   (.category-eyebrow / .category-banner-wrap below), not a bottom margin on the previous one.
   A banner placed "after a specific category" becomes the next sibling instead, so that
   mechanism never fires and the banner sits flush against the category above it. Scoped to
   the adjacent-sibling case only, so a top banner (never preceded by .category-section) is
   unaffected. */
.category-section + .menu-banner-image,
.category-section + .menu-banner-video,
.category-section + .menu-banner-carousel,
.category-section + .menu-banner-link { margin-top: 16px; }

/* ---------- Admin bar (shown on the public site when an admin/staff account is logged in) ---------- */
.admin-bar {
  position: sticky; top: 0; z-index: 50; background: #211C17; color: #FAF5E9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.admin-bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 900px; margin: 0 auto; padding: 8px 16px;
}
/* Either a wide/horizontal logo image, or the restaurant name as plain text if no wide
   logo was uploaded (Admin -> Restaurant info -> Basics) — shown to logged-in staff AND
   logged-in customers alike, so it doubles as a "home" link either way. */
.admin-bar-brand { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; font-size: 0.92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-bar-brand img { max-height: 30px; max-width: 160px; object-fit: contain; }
.admin-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.admin-bar-btn {
  position: relative; background: none; border: 1px solid rgba(255,255,255,0.25); color: inherit;
  border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; text-decoration: none;
}
.admin-bar-avatar { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.admin-bar-dot {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: #B8893F; border: 1px solid #211C17;
}
.admin-bar-dropdown { position: relative; }
.admin-bar-menu {
  display: none; position: absolute; top: 40px; right: 0; min-width: 170px; background: #FFFDF8; color: #211C17;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; z-index: 51;
}
.admin-bar-menu.open { display: block; }
.admin-bar-menu a, .admin-bar-menu .admin-bar-menu-label {
  display: block; padding: 10px 14px; font-size: 0.85rem; color: inherit; text-decoration: none;
}
.admin-bar-menu a:hover { background: rgba(128,128,128,0.14); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.admin-bar-menu-label { font-weight: 600; border-bottom: 1px solid var(--line); }
.notif-panel.admin-bar-panel { position: fixed; top: 54px; right: 16px; left: auto; bottom: auto; }
/* The admin bar sticks at top:0 same as the site's own sticky header — without this offset the
   header slides underneath/collides with the admin bar instead of sitting right below it once scrolled. */
body.admin-bar-active .sticky-nav { top: 54px; }

/* ---------- Customer notification bell ---------- */
.notif-bell-public {
  position: fixed; left: 16px; bottom: 88px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none; font-size: 1.05rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 39; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.notif-badge {
  position: absolute; top: -2px; right: -2px; background: var(--rust, #A8412E); color: #fff; font-size: 0.6rem;
  font-weight: 700; border-radius: 999px; padding: 1px 5px; display: none; min-width: 15px; text-align: center;
}
.notif-badge.visible { display: block; animation: notif-badge-pulse 1.4s ease-in-out infinite; }
@keyframes notif-badge-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.65; } }
.notif-panel {
  position: fixed; left: 16px; bottom: 136px; z-index: 45; width: 300px; max-width: calc(100vw - 32px);
  max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: none;
}
.notif-panel.open { display: block; }
.notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-panel-header button { background: none; border: none; color: var(--accent-text); font-size: 0.78rem; cursor: pointer; padding: 0; }
.notif-item { position: relative; padding: 10px 34px 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.85rem; cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(128,128,128,0.1); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.notif-item .notif-title { font-weight: 600; }
.notif-item .notif-body { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.notif-item .notif-time { color: var(--muted); font-size: 0.7rem; margin-top: 4px; }

.notif-archive-btn {
  position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 4px; font-size: 0.78rem; border-radius: 6px;
}
.notif-archive-btn:hover { background: rgba(128,128,128,0.14); background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text); }

/* ---------- New-order popup toast ---------- */
.new-order-toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); }
.new-order-toast {
  width: 320px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--rust, #A8412E);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 14px 16px; animation: toast-in 0.25s ease-out;
}
.new-order-toast .toast-title { font-weight: 700; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.new-order-toast .toast-title button { background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0; }
.new-order-toast .toast-body { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.new-order-toast .toast-actions { margin-top: 10px; display: flex; gap: 8px; }
.new-order-toast .toast-actions a { font-size: 0.78rem; padding: 5px 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
html[dir="rtl"] .new-order-toast-wrap { right: auto; left: 16px; }
html[dir="rtl"] .new-order-toast { border-left: none; border-right: 4px solid var(--rust, #A8412E); }

/* ---------- PWA install prompt, dropped down from the top like a push notification instead of
   a plain footer button the visitor might never scroll down to see ---------- */
.pwa-install-banner {
  position: fixed; top: 0; left: 16px; right: 16px; z-index: 210;
  margin: 8px auto 0; max-width: 480px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 12px 12px 12px 14px;
  transform: translateY(-130%); transition: transform 0.3s ease; pointer-events: none;
}
.pwa-install-banner.open { transform: translateY(0); pointer-events: auto; }
.pwa-install-banner .pwa-install-icon { font-size: 1.5rem; flex-shrink: 0; }
.pwa-install-banner .pwa-install-text { flex: 1; min-width: 0; }
.pwa-install-banner .pwa-install-title { font-weight: 700; font-size: 0.85rem; }
.pwa-install-banner .pwa-install-sub { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
.pwa-install-banner .pwa-install-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pwa-install-banner .pwa-install-go { font-size: 0.78rem; padding: 6px 12px; white-space: nowrap; }
.pwa-install-banner .pwa-install-dismiss { background: none; border: none; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }

/* ---------- Page footer (about/social/copyright) ---------- */
footer.site-footer { text-align: center; padding: 34px 20px 20px; color: var(--muted); font-size: 0.78rem; border-top: 1px solid var(--line); margin-top: 30px; }
footer.site-footer .connect-title { font-family: var(--font-heading); font-size: 1rem; color: var(--text); margin-bottom: 12px; }
.footer-icons { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-icons a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--muted); }
.footer-icons .icon-circle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--surface); }
.credit-line { margin-top: 14px; font-size: 0.7rem; }
.credit-line a { color: var(--accent-text); }

/* ---------- Fixed bottom tab bar ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; padding: 8px 6px 10px;
}
.bottom-nav button {
  background: none; border: none; color: var(--text); display: flex; flex-direction: column; align-items: center;
  gap: 3px; font-size: 0.68rem; cursor: pointer; position: relative; flex: 1;
}
.bottom-nav .nav-icon { font-size: 1.15rem; }
.bottom-nav .cart-badge {
  position: absolute; top: -4px; right: 22%; background: var(--accent); color: var(--primary);
  font-size: 0.6rem; font-weight: 700; border-radius: 999px; padding: 1px 5px; display: none;
}
.bottom-nav .cart-badge.visible { display: block; }

/* ---------- Bottom nav bar style presets ---------- */
.bottom-nav.style-ios {
  left: 14px; right: 14px; bottom: 14px; border-radius: 24px; border-top: none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.bottom-nav.style-android {
  border-top: 3px solid var(--accent); box-shadow: 0 -2px 14px rgba(0,0,0,0.12);
}
.bottom-nav.style-glass {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.25);
}

/* ---------- "Connect With Us" footer icons — same style preset as the bottom nav ---------- */
.footer-icons.style-ios .icon-circle {
  border-radius: 30%; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: none;
}
.footer-icons.style-android .icon-circle {
  border-radius: 10px; border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.footer-icons.style-glass .icon-circle {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.25);
}

/* ---------- RTL support ----------
   Setting dir="rtl" on <html> already makes standard flexbox rows lay out
   right-to-left automatically (that's how the CSS `direction` property
   works) — so most of our flex layouts need NO extra rules here. We only
   need overrides for things that use *physical* positioning (left/right,
   float) rather than direction-aware layout, since those don't auto-flip. */
html[dir="rtl"] .item-card .badge { left: auto; right: -6px; }
html[dir="rtl"] .item-card .spicy-flag { right: auto; left: -4px; }
html[dir="rtl"] .bottom-nav .cart-badge { right: auto; left: 22%; }
html[dir="rtl"] .modal .close-btn { float: left; }
html[dir="rtl"] .cart-line { text-align: right; }
html[dir="rtl"] .scroll-top-btn { right: auto; left: 16px; }
html[dir="rtl"] .music-float-btn { right: auto; left: 16px; }
html[dir="rtl"] .music-hidden-player-wrap { right: auto; left: 16px; }
html[dir="rtl"] .menu-banner-carousel-btn.prev { left: auto; right: 10px; }
html[dir="rtl"] .menu-banner-carousel-btn.next { right: auto; left: 10px; }
html[dir="rtl"] .contact-row-scroll-hint { right: auto; left: 12px; }
html[dir="rtl"] .sticky-menu-toggle { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .sticky-nav-brand { padding-left: 0; padding-right: 2px; }

/* Prices/currency codes stay left-to-right even on an RTL page — this is
   standard practice (phone numbers, prices, codes read LTR everywhere,
   including on Arabic sites) and keeps USD always before LBP. */
.price-tag { direction: ltr; }

/* ---------- First-load popup ---------- */
.popup-modal img { width: 100%; border-radius: 14px; }