/* ===== BellaMia — Custom Styles ===== */

/* --- CSS Variables — Dark Theme (default) --- */
:root,
[data-theme="dark"] {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-card: rgba(30, 30, 30, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-glass: rgba(255, 255, 255, 0.08);
  --text-primary: #f5f0eb;
  --text-secondary: #a09888;
  --text-muted: #6b6156;
  --accent: #d4a24e;
  --on-accent: #0f0f0f;   /* text sitting on an --accent fill */
  --accent-hover: #e8b95f;
  --accent-glow: rgba(212, 162, 78, 0.25);
  --danger: #e85d4a;
  --success: #4ecb71;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px var(--accent-glow);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Dark-specific surface tokens */
  --navbar-bg: rgba(15, 15, 15, 0.82);
  --navbar-bg-scrolled: rgba(15, 15, 15, 0.97);
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --modal-overlay-bg: rgba(0, 0, 0, 0.78);
  --mobile-menu-bg: rgba(15, 15, 15, 0.97);
  --footer-bg: #1a1a1a;
  /* Shaped around the text column: the old 135deg scrim faded to 0.28 alpha
     exactly where the subtitle and buttons sit, leaving them on bare photo. */
  --hero-overlay:
    linear-gradient(to right, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.82) 34%, rgba(0,0,0,0.58) 60%, rgba(0,0,0,0.34) 100%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0.30) 100%);
}

/* --- CSS Variables — Light Theme --- */
[data-theme="light"] {
  --bg-primary: #faf8f4;
  --bg-secondary: #f0ece3;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-glass: rgba(0, 0, 0, 0.04);
  --border-glass: rgba(0, 0, 0, 0.1);
  --text-primary: #1c1510;
  --text-secondary: #5a4a36;
  --text-muted: #9e8e78;
  /* Darker than the dark-theme gold so accent *text* (prices, size buttons, the
     cart total) clears WCAG AA on the pale ground. #c4892a measured 2.8-3.0:1. */
  --accent: #9a6a12;
  --on-accent: #ffffff;   /* white on the darker light-theme gold */
  --accent-hover: #7d5510;
  --accent-glow: rgba(154, 106, 18, 0.22);
  --danger: #d94035;
  --success: #3aaf5c;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Light-specific surface tokens */
  --navbar-bg: rgba(250, 248, 244, 0.88);
  --navbar-bg-scrolled: rgba(250, 248, 244, 0.98);
  --overlay-bg: rgba(0, 0, 0, 0.35);
  --modal-overlay-bg: rgba(0, 0, 0, 0.45);
  --mobile-menu-bg: rgba(250, 248, 244, 0.99);
  --footer-bg: #e8e2d6;
  /* The hero photo is identical in both themes, so the scrim has to be too.
     The lighter variant was the main reason the light theme read worse. */
  --hero-overlay:
    linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.78) 34%, rgba(0,0,0,0.54) 60%, rgba(0,0,0,0.30) 100%),
    linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.10) 38%, rgba(0,0,0,0.28) 100%);
}


/* --- Base & Reset Overrides --- */
* { box-sizing: border-box; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 9999;
  padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip-link:focus { transform: translateY(0); }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Smooth theme transition */
  transition: background-color 0.35s ease, color 0.35s ease;
}
html, body { overflow-x:clip; }

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --- Typography --- */
.font-display {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* --- Header / Navbar --- */
.navbar {
  /* Above .mobile-menu (997), below the toast (1000) and the modals (1100+).
     The hamburger turns into the X that closes the menu, so if the overlay
     covers the navbar that button becomes unreachable — which left mobile
     users with no way out of the menu except reloading the page. */
  z-index: 998;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--border-glass);
  transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
}

.navbar.scrolled {
  background: var(--navbar-bg-scrolled);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.navbar-logo {
  height: 60px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  transition: opacity var(--transition-fast), filter var(--transition-fast);
  /* Crisp on both themes — subtle shadow gives definition on dark bg */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
#mobile-menu-btn { background:transparent;border:0;border-radius:10px; }
#mobile-menu-btn:focus-visible { outline:3px solid var(--accent);outline-offset:2px; }

.navbar-brand { flex-shrink: 0; }

.navbar-logo:hover {
  opacity: 0.88;
}

@media (min-width: 768px) and (max-width: 899px) {
  /* Just past the md breakpoint the desktop nav appears and there is no slack
     left: flex was letterboxing the logo inside a squeezed box. gap-8 (32px)
     across six items is the cheapest place to find the room. */
  #navbar .hidden.md\:flex { gap: 1.15rem; }
}

@media (max-width: 640px) {
  /* The artwork already contains the "BellaMia Pizzeria" wordmark, so it needs
     enough width to stay legible. The old max-width:72px clipped it, which is
     why a separate text wordmark had been bolted on beside it. */
  .navbar-logo { height: 38px; }
}

.service-notice { max-width:900px;margin:0 auto 24px;padding:14px 18px;border:1px solid rgba(239,68,68,.45);border-radius:12px;background:rgba(239,68,68,.09);color:var(--text-primary);text-align:center; }
.add-to-cart-btn:disabled { opacity:.55;cursor:not-allowed; }
.loc-card { width:100%;font:inherit;text-align:left;color:inherit; }
.loc-card:focus-visible { outline:3px solid var(--accent);outline-offset:3px; }
/* Static, privacy-safe location map: images ship with the site, so nothing
   third-party loads until the customer taps through to Google Maps. */
.location-map-link { position:relative;display:block;line-height:0;text-decoration:none;background:var(--bg-secondary); }
.location-map-img { width:100%;height:auto;display:block;aspect-ratio:720/420;object-fit:cover; }
.location-map-overlay {
  position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
  padding:14px 16px;line-height:1.35;
  background:linear-gradient(to top,rgba(0,0,0,0.78),rgba(0,0,0,0));
}
.location-map-overlay strong { color:#fff;font-size:1rem;font-weight:600; }
/* The navigate CTA now lives on the image: the whole card is one link, so this
   is a span styled as a button rather than a second competing link. */
.location-map-cta {
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  padding:8px 16px;border-radius:999px;font-size:0.82rem;font-weight:600;
  background:linear-gradient(135deg,var(--accent),#c4912e);color:var(--on-accent);
  box-shadow:0 4px 16px rgba(0,0,0,0.35);transition:transform var(--transition-fast);
}
.location-map-link:hover .location-map-cta { transform:translateY(-1px); }
.location-map-link:focus-visible { outline:3px solid var(--accent);outline-offset:3px; }

.map-placeholder { min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;background:radial-gradient(circle at center,rgba(212,162,78,.14),transparent 65%),var(--bg-primary);color:var(--text-secondary); }
.map-placeholder > span { font-size:2.5rem; }
.map-placeholder strong { color:var(--text-primary);font-size:1.05rem; }

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

.legal-page { max-width:780px;margin:0 auto;padding:64px 20px 96px;color:var(--text-secondary);line-height:1.75; }
.legal-page h1 { margin:32px 0 8px;font-family:'Playfair Display',serif;font-size:clamp(2rem,6vw,3.5rem);color:var(--text-primary); }
.legal-page h2 { margin:30px 0 8px;font-size:1.25rem;color:var(--text-primary); }
.legal-page p { margin:0 0 12px; }
.legal-page ul { margin:0 0 16px;padding-left:22px; }
.legal-page li { margin:0 0 6px; }
.legal-page a { color:var(--accent); }
.legal-page strong { color:var(--text-primary); }

/* Header for the legal pages. They do not load app.js, so they carry their own
   compact language switcher and theme toggle rather than the full navbar. */
.legal-header {
  max-width:780px;margin:0 auto;padding:20px 20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.legal-back { color:var(--accent);text-decoration:none;font-weight:600;font-size:0.95rem; }
.legal-back:hover { text-decoration:underline; }
.legal-header-tools { display:flex;align-items:center;gap:8px; }
.legal-lang { position:relative; }
.legal-lang-btn, .legal-theme-btn {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;min-width:40px;padding:0 12px;
  background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:999px;
  color:var(--text-secondary);font-size:0.85rem;font-weight:600;cursor:pointer;
}
.legal-lang-btn:hover, .legal-theme-btn:hover { color:var(--text-primary);border-color:var(--accent); }
.legal-lang-menu {
  position:absolute;right:0;top:calc(100% + 6px);z-index:10;min-width:112px;
  background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:12px;
  overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,0.28);
}
.legal-lang-menu button {
  display:block;width:100%;padding:10px 14px;background:none;border:0;
  color:var(--text-secondary);font-size:0.85rem;text-align:left;cursor:pointer;
}
.legal-lang-menu button:hover { background:var(--bg-glass);color:var(--text-primary); }
.legal-page { padding-top:24px; }

.nav-link {
  position: relative;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all var(--transition-smooth);
  transform: translateX(-50%);
  border-radius: 2px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The hero keeps a dark photograph behind a dark gradient in BOTH themes, so its
   foreground has to stay light-on-dark. Without this the light theme painted a
   near-black title and dark-brown body copy straight onto the dark image.
   Re-pointing the tokens on .hero re-colours every descendant, including the
   inline-styled info pills, because custom properties resolve at use time. */
/* The hero keeps a dark photograph in BOTH themes, so its foreground is pinned
   to a light-on-dark palette regardless of the active theme. --text-secondary is
   near-white here rather than the muted grey used on solid surfaces: over a photo
   that grey measured 1.79:1. */
.hero {
  --text-primary: #ffffff;
  --text-secondary: #f0e9df;
  --accent: #f0c46a;
  --on-accent: #14100a;
  --bg-glass: rgba(0, 0, 0, 0.42);
  --border-glass: rgba(255, 255, 255, 0.28);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  z-index: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  animation: heroZoom 25s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 500px;
  line-height: 1.7;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* Text over a photograph gets a shadow as a secondary aid — the scrim above is
   what actually carries the contrast; this keeps edges crisp over busy detail. */
.hero-title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.hero-subtitle { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); }
.hero-badge { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* The outline CTA is transparent by default, which left its label sitting on bare
   photo at 1.94:1. A translucent dark fill gives it a surface of its own. */
.hero .btn-outline {
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(240, 196, 106, 0.85);
}
.hero .btn-outline:hover {
  background: rgba(0, 0, 0, 0.62);
  border-color: var(--accent);
}

/* Info pills read on top of the photo's brightest areas. */
.hero-content .rounded-full {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
  /* No room for the scrim to fall off to one side — text spans the full width. */
  .hero::before { background:
    linear-gradient(to right, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.86) 60%, rgba(0,0,0,0.72) 100%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.40) 100%);
  }
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: linear-gradient(135deg, var(--accent), #c4912e);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: 0 4px 20px var(--accent-glow);
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow), 0 8px 30px var(--accent-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: var(--accent);
  font-weight: 500;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  font-size: 0.9rem;
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Category Tabs --- */
.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

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

.category-tab {
  flex-shrink: 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.category-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.category-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* --- Menu Cards --- */
.menu-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-smooth);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.menu-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 162, 78, 0.2);
  box-shadow: var(--shadow-card), 0 0 40px rgba(212, 162, 78, 0.08);
}

.menu-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.menu-card:hover .menu-card-img {
  transform: scale(1.06);
}

.menu-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Bottom section (price + add button) — pushed to bottom of card */
.menu-card-bottom {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ingredient description text */
.card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.menu-card-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}

.menu-card-price-small {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Size selector for pizza cards */
.size-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

/* Same treatment as the modal's size buttons: the label should fill the button
   rather than float in the middle of it.
   `overflow: hidden` with `nowrap` was silently cutting labels off — "Голяма —
   €10.60" at 320px and every Russian label at 360-390px were being clipped, not
   shrunk. Wrapping is the safety valve instead: a label that cannot fit on one
   line takes two, and the 44px tap target still holds. */
.size-btn {
  flex: 1;
  padding: 6px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  /* Never wrap and never clip. A label that will not fit on one line is shrunk
     to fit by fitSizeLabels() in app.js, which sets a per-button font size only
     on the few buttons that actually need it. Everything else keeps 1rem. */
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.size-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Add to cart button on cards */
.add-to-cart-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, rgba(212, 162, 78, 0.15), rgba(212, 162, 78, 0.05));
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.add-to-cart-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  transform: scale(1.02);
}

.add-to-cart-btn.added {
  background: var(--success);
  color: #fff;
}

/* --- Cart Badge --- */
.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-bounce);
}

.cart-badge.bounce {
  animation: badgeBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* --- Cart Drawer --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 1199;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--transition-smooth);
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 90vw);
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-glass);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--border-glass);
}

.cart-items-wrapper {
  flex: 1;
  /* Without min-height:0 a column flex child refuses to shrink below its content,
     so on a short screen the footer was pushed past the bottom of the drawer. */
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-glass);
  animation: fadeInUp 0.3s ease-out;
}

.cart-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-size {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cart-item-price {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.cart-qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-qty-btn {
  /* Comfortable thumb target; the rest of the drawer is already sized for touch. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.cart-qty-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.cart-qty-count {
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 20px;
  text-align: center;
}

.cart-footer {
  padding: 24px;
  border-top: 1px solid var(--border-glass);
  background: var(--bg-primary);
}

.cart-subtotal-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-glass);
}

.cart-minor-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cart-total-label {
  font-size: 1rem;
  color: var(--text-secondary);
}

.cart-total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Playfair Display', serif;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 1rem;
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.cart-empty-icon {
  font-size: 3rem;
  opacity: 0.4;
}

/* --- Section Headers --- */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(212, 162, 78, 0.1);
  border: 1px solid rgba(212, 162, 78, 0.2);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
}

/* --- About Section --- */
.about-glass {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* --- Delivery Zone Cards --- */
.zone-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition-smooth);
}

.zone-card:hover {
  border-color: rgba(212, 162, 78, 0.3);
  box-shadow: 0 0 30px rgba(212, 162, 78, 0.05);
}

/* --- Footer --- */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-glass);
}

.footer a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.footer a:hover {
  color: var(--accent);
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in { animation: fadeIn 0.6s ease-out both; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out both; }

/* stagger delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--mobile-menu-bg);
  z-index: 997;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Landscape phones are ~360px tall and the menu is ~430px — scroll, never clip.
     The top padding clears the navbar, which now renders above this overlay. */
  overflow-y: auto;
  padding: 96px 16px 24px;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-menu a:hover {
  color: var(--accent);
}
.mobile-menu-action { border:0;background:none;font-family:'Playfair Display',serif;font-size:2rem;color:var(--text-primary);cursor:pointer; }
.mobile-menu-action:hover { color:var(--accent); }

/* --- Happy Hour promo band --- */
.happy-hour {
  padding: 0 1rem;
  margin: 0 auto 4px;
  max-width: 80rem;
}
.happy-hour-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, var(--accent-glow), transparent 70%), var(--bg-glass);
}
.happy-hour-tag {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  white-space: nowrap;
}
.happy-hour-copy { flex: 1; min-width: 0; }
.happy-hour-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 3px;
  line-height: 1.25;
}
.happy-hour-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.happy-hour-cta {
  flex-shrink: 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.happy-hour-cta:hover { background: var(--accent-hover); }

@media (max-width: 720px) {
  /* Keep the band compact: it sits between the hero and the menu, and every
     pixel here delays a returning customer reaching the food. */
  .happy-hour-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 16px;
  }
  .happy-hour-title { font-size: 0.98rem; line-height: 1.2; }
  .happy-hour-desc { font-size: 0.79rem; line-height: 1.4; }
  .happy-hour-tag { font-size: 0.62rem; padding: 4px 10px; }
  .happy-hour-cta { width: 100%; text-align: center; padding: 11px 22px; min-height: 44px; }
}

/* Cart note shown when the order qualifies for Happy Hour */
.cart-hh-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.cart-hh-note::before { content: "★"; color: var(--accent); flex-shrink: 0; }

/* --- Touch target sizing (mobile) ---
   Everything a thumb has to hit gets at least ~44px of height. The size buttons
   matter most: they pick the price, and they were 35px tall. */
@media (max-width: 768px) {
  .size-btn { min-height: 44px; }
  .modal-size-btn { min-height: 46px; }
  .cart-qty-btn { width: 44px; height: 44px; }
  .category-tab { min-height: 46px; }
  #mobile-menu-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #lang-btn { min-height: 44px; }
  .theme-toggle-btn, .auth-nav-btn { min-height: 44px; }
  #navigate-btn { min-height: 44px; }
  /* Overlay dismiss controls — the ✕ in every modal and the cart's close button. */
  .modal-close-btn { width: 44px; height: 44px; }
  #cart-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* Inline "sign up here" / "sign in here" links inside sentences. */
  .auth-card .checkout-form p a { display: inline-block; padding: 12px 4px; }
  .zone-card .btn-outline.text-sm { min-height: 44px; display: inline-flex; align-items: center; }
  /* Footer links are 20px of text; pad them out without changing the layout rhythm. */
  .footer a[href] { display: inline-flex; align-items: center; min-height: 44px; }
  .footer .flex.flex-col.gap-2 { gap: 0; }
}

/* Short viewports (landscape phones) */
@media (max-height: 500px) {
  .mobile-menu { justify-content: flex-start; gap: 14px; }
  .mobile-menu a { font-size: 1.5rem; }
  .mobile-menu-action { font-size: 1.5rem; }

  /* The cart header plus footer alone exceeded a 360px-tall landscape viewport,
     clipping the order button. Compact the chrome so the list keeps some room;
     the Happy Hour note is dropped here because the page band still carries it. */
  .cart-header { padding-top: 12px; padding-bottom: 12px; }
  .cart-footer { padding-top: 12px; padding-bottom: 12px; }
  .cart-hh-note { display: none !important; }
  .cart-subtotal-rows { margin-bottom: 6px; padding-bottom: 6px; gap: 3px; }
  .cart-total-row { margin-bottom: 10px; }
  .cart-total-value { font-size: 1.2rem; }
}

/* Safety net: if the chrome still cannot fit, the drawer scrolls rather than
   putting the order button out of reach. The item list scrolls first. */
.cart-drawer { overflow-y: auto; }
.cart-footer { flex-shrink: 0; }
.cart-header { flex-shrink: 0; }

/* --- Utilities --- */
/* Visible to screen readers only — used for labels that would duplicate a visible icon. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-accent { color: var(--accent); }
.bg-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
}

/* Intersection Observer - Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    align-items: flex-start;
    padding-top: 112px;
    padding-bottom: 48px;
  }

  .menu-card-img {
    height: 160px;
  }

  .cart-drawer {
    width: 100vw;
  }
}

@media (max-width: 640px) {
  #auth-logged-out, #auth-logged-in, #theme-toggle { display:none !important; }
  #navbar .gap-4 { gap:.5rem; }

  /* Top Picks becomes a horizontal swipe row on phones. Stacked, the nine cards
     ran ~4,100px — five screens between the hero and the actual menu, which works
     against the fast-reorder flow. Same interaction as the category tab strip.
     The id beats Tailwind's .grid utility, so display:flex wins. */
  #popular-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-inline: -1rem;      /* bleed past the section's px-4 ... */
    padding-inline: 1rem;      /* ... so the last card scrolls fully into view */
    scrollbar-width: none;
  }
  #popular-grid::-webkit-scrollbar { display: none; }
  #popular-grid > .menu-card {
    flex: 0 0 78%;             /* a sliver of the next card signals scrollability */
    scroll-snap-align: start;
  }
}

/* --- Notification Toast --- */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  padding: 14px 28px;
  border-radius: var(--radius-xl);
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transition: all var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ===== SPA ROUTER ===== */
.page { display: none; }
.page.active { display: block; animation: pageFadeIn 0.35s ease-out both; }
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu a.active { color: var(--accent); }

/* ===== SEARCH BAR ===== */
.search-wrapper { position: relative; max-width: 460px; margin: 0 auto 28px; }
.search-input {
  width: 100%; padding: 13px 20px 13px 48px;
  background: var(--bg-glass); border: 1px solid var(--border-glass);
  border-radius: 999px; color: var(--text-primary); font-size: 0.95rem;
  outline: none; transition: all var(--transition-fast); font-family: 'Inter', sans-serif;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); background: var(--bg-glass); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: none; font-size: 1.1rem; line-height: 1; }
.search-clear:hover { color: var(--text-primary); }

/* ===== ITEM MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: var(--modal-overlay-bg);
  backdrop-filter: blur(6px); z-index: 1100;
  /* Centred at every width. It used to dock to the bottom of the screen on
     phones, which put the add button under the home bar and left the dish
     half off screen. */
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
  background: var(--bg-secondary); border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 520px; overflow-y: auto;
  /* The dish modal itself never scrolls — see .modal-card:has(.modal-img) below.
     Checkout and auth still need to. */
  /* dvh follows the browser chrome as it hides and shows; vh does not, which is
     how the add button ended up underneath it. */
  max-height: 88dvh;
  /* Without this, once the card is scrolled to its end the gesture continues
     into the page behind — which is what made the background move instead of
     the modal. */
  overscroll-behavior: contain;
  transform: translateY(40px); transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1); position: relative;
}
@supports not (height: 1dvh) { .modal-card { max-height: 88vh; } }
.modal-overlay.open .modal-card { transform: translateY(0); }
@media (min-width: 640px) {
  .modal-card { transform: translateY(20px) scale(0.97); max-height: 85dvh; }
  .modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
}
/* The dish photos are 0.67-1.57 wide, mostly around 4:3 and 3:2. A fixed 220px
   height made the box 2.36:1 — wider than any source — so object-fit:cover threw
   away most of the picture; a portrait shot showed 28% of its height. Sizing the
   box by ratio instead keeps the crop shallow. max-height stops a tall image
   pushing "Добави в кошницата" off screen on short viewports. */
/* The box takes each photo's own ratio (set in openItemModal), so cover has
   nothing to crop. The declared ratio here is only the value used before the
   image reports its dimensions. Sources run 0.67-1.57; the clamp in the JS keeps
   an extreme one from filling the whole modal. */
.modal-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 46dvh;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--bg-primary);
}
@media (min-width: 640px) {
  .modal-img { max-height: 48dvh; }
}
/* On a short phone (e.g. 360x640) the taller photo pushed "Добави в кошницата"
   17px below the fold, so the primary action needed a scroll it did not need
   before. Cap the photo here so the button stays visible on open. */
@media (max-height: 700px) {
  .modal-img { max-height: 38dvh; }
}
/* Landscape phones have almost no vertical room; the photo must not crowd out
   the price and the add button. */
@media (max-height: 520px) {
  .modal-img { aspect-ratio: auto !important; height: 130px; max-height: 30dvh; }
}
.modal-body { padding: 22px 24px calc(28px + env(safe-area-inset-bottom, 0px)); }
.modal-close-btn {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,0.55); border: none; color: #fff;
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; z-index: 10; transition: background var(--transition-fast);
}
.modal-close-btn:hover { background: var(--danger); }
.modal-category {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: 999px; background: rgba(212,162,78,0.12); border: 1px solid rgba(212,162,78,0.2);
  color: var(--accent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; margin-bottom: 10px;
}
.modal-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; line-height: 1.2; }
.modal-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-glass); }
.modal-size-selector { display: flex; gap: 8px; margin-bottom: 16px; }
/* The label was 0.85rem in a ~150px button, so most of the button read as empty
   padding. Larger text with tighter side padding fills it. clamp() scales the
   size down on narrow screens and for the longer Russian labels, so the text
   never spills out of the button. */
.modal-size-btn {
  flex: 1;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-glass);
  background: transparent;
  color: var(--text-secondary);
  font-size: clamp(0.9rem, 3.9vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}
@media (min-width: 640px) {
  .modal-size-btn { font-size: 1.22rem; padding: 13px 8px; }
  /* Full-width buttons left the label marooned in the middle. Narrowing the row
     lets the text occupy the button rather than float in it. */
  .modal-size-selector { max-width: 400px; margin-left: auto; margin-right: auto; }
}
.modal-size-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.modal-size-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.modal-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-price { font-size: 1.8rem; font-weight: 700; color: var(--accent); font-family: 'Playfair Display', serif; }
.modal-add-btn {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--accent), #c4912e); color: var(--on-accent);
  font-weight: 700; font-size: 1rem; border: none; border-radius: var(--radius-xl);
  cursor: pointer; transition: all var(--transition-smooth);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.modal-add-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow), 0 8px 30px var(--accent-glow); }
.modal-add-btn.added { background: linear-gradient(135deg, var(--success), #3aaf5c); }

/* ===== MISC ===== */
.menu-card { cursor: pointer; }
.no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--text-muted); }
.no-results-icon { font-size: 3rem; margin-bottom: 12px; }

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-glass);
  transform: rotate(20deg) scale(1.08);
}

/* Sun shown in dark mode → click to go light */
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none;  }

/* Moon shown in light mode → click to go dark */
[data-theme="light"] .icon-sun  { display: none;  }
[data-theme="light"] .icon-moon { display: block; }

/* ===== LIGHT THEME COMPONENT OVERRIDES ===== */

/* Cards get a subtle shadow instead of glow in light mode */
[data-theme="light"] .menu-card:hover {
  border-color: rgba(196, 137, 42, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Cart drawer in light mode */
[data-theme="light"] .cart-drawer {
  background: var(--bg-secondary);
  border-left-color: var(--border-glass);
}
[data-theme="light"] .cart-footer {
  background: var(--bg-primary);
}

/* Toast in light mode */
[data-theme="light"] .toast {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Section backgrounds that were hardcoded */
[data-theme="light"] .footer {
  background: var(--footer-bg);
}

/* Modal close button readable on light */
[data-theme="light"] .modal-close-btn {
  background: rgba(0, 0, 0, 0.35);
}

/* Size buttons border in light mode */
[data-theme="light"] .size-btn:not(.active) {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-secondary);
}

/* Category tabs in light mode */
[data-theme="light"] .category-tab {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Active tab in light mode needs DARK text — gold bg + near-white text = invisible */
[data-theme="light"] .category-tab.active {
  color: #1c1510;
}

/* Scrollbar in light mode */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--text-muted); }

/* ===== CHECKOUT MODAL ===== */
.checkout-card {
  max-width: 480px;
  border-radius: var(--radius-xl);
  max-height: 92vh;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .checkout-card { border-radius: var(--radius-xl); transform: translateY(20px) scale(0.97); }
  .modal-overlay.open .checkout-card { transform: translateY(0) scale(1); }
}

/* Order summary strip */
.checkout-summary {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
.checkout-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  color: var(--text-secondary);
}
.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border-glass);
  font-weight: 700;
  color: var(--accent);
  font-size: 1rem;
}

/* Form fields */
.checkout-form { display: flex; flex-direction: column; gap: 14px; }
.checkout-field { display: flex; flex-direction: column; gap: 5px; }
.checkout-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.checkout-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.checkout-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.checkout-input.error { border-color: var(--danger); }
.checkout-textarea { resize: vertical; min-height: 64px; }
.checkout-error {
  font-size: 0.78rem;
  color: var(--danger);
  min-height: 16px;
}

/* Payment options */
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-glass);
}
.payment-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(212, 162, 78, 0.06);
}
.payment-option input[type="radio"] { display: none; }
.payment-icon { font-size: 1.5rem; flex-shrink: 0; }
.payment-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.payment-desc  { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* Confirmation order ID badge */
.confirm-order-id {
  display: inline-block;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

/* ===== AUTH NAV BUTTONS ===== */
.auth-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.auth-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.auth-nav-user {
  background: rgba(212,162,78,0.08);
  border-color: rgba(212,162,78,0.3);
  color: var(--accent);
}

/* ===== AUTH MODAL ===== */
.auth-card {
  max-width: 420px;
  padding: 0;
  /* overflow:hidden was only clipping the tab bar's corners, but it also killed
     the scrolling inherited from .modal-card: in landscape the sign-up form is
     738px inside a 360px viewport and the submit button became unreachable. */
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-glass);
}

.auth-tab {
  flex: 1;
  padding: 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab:hover { color: var(--text-primary); }
.auth-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.auth-welcome {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 0;
}

/* ===== ORDER TRACKER MODAL ===== */
.tracker-overlay { align-items: flex-end; }

@media (min-width: 600px) {
  .tracker-overlay { align-items: center; }
}

.tracker-card {
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 0;
}

@media (min-width: 600px) {
  .tracker-card { border-radius: var(--radius-xl); }
}

/* Transition to green when order is done */
.tracker-card.tracker-done {
  border-color: rgba(34,197,94,0.3);
}

.tracker-header {
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--border-glass);
  text-align: center;
}

.tracker-brand {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tracker-order-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tracker-order-id {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.tracker-order-time {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.tracker-headline {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.tracker-subdesc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Steps row */
.tracker-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px;
  gap: 0;
}

.tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 70px;
}

.tracker-step-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 2px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-muted);
  transition: all 0.4s ease;
}

.tracker-step.done .tracker-step-bubble {
  background: var(--success, #22c55e);
  border-color: var(--success, #22c55e);
  color: white;
  font-size: 0.9rem;
}

.tracker-step.active .tracker-step-bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f0f0f;
  box-shadow: 0 0 0 6px var(--accent-glow);
  animation: trackerPulse 1.8s ease-in-out infinite;
}

.tracker-step.pending .tracker-step-bubble {
  opacity: 0.4;
}

@keyframes trackerPulse {
  0%, 100% { box-shadow: 0 0 0 0px var(--accent-glow); }
  50%       { box-shadow: 0 0 0 10px transparent; }
}

.tracker-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  max-width: 70px;
}

.tracker-step.active .tracker-step-label { color: var(--accent); }
.tracker-step.done   .tracker-step-label { color: var(--success, #22c55e); }
.tracker-step.pending .tracker-step-label { opacity: 0.4; }

/* Connector line between steps */
.tracker-connector {
  flex: 1;
  height: 2px;
  background: var(--border-glass);
  margin-top: 22px; /* aligns with center of 44px bubble */
  transition: background 0.4s;
  min-width: 20px;
}

.tracker-connector.filled { background: var(--accent); }

/* Order details block */
.tracker-details {
  padding: 0 24px 20px;
  border-top: 1px solid var(--border-glass);
}

.tracker-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-glass);
}

.tracker-detail-icon { flex-shrink: 0; }

.tracker-items-list { padding: 10px 0; }

.tracker-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 3px 0;
}

.tracker-size { color: var(--text-muted); font-size: 0.8rem; }

.tracker-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-glass);
  font-weight: 600;
}

.tracker-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.tracker-history-btn {
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  padding: 12px;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.tracker-history-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== HISTORY PANEL (slide-in from right) ===== */
.history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1250;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.history-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-glass);
  /* Must clear the navbar (998). The panel header sits at top:0, exactly under
     the fixed navbar, so at 201 its own Sign-out and Close buttons were being
     hit-tested to the navbar's cart and burger buttons instead. Matches the
     cart drawer, which is the same kind of top-anchored slide-over. */
  z-index: 1251;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.history-panel.open { transform: translateX(0); }

.history-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
}

.history-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Loading state */
.history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--text-muted);
}

.history-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-glass);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Empty state */
.history-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

/* History cards */
.history-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.history-card:hover { border-color: rgba(212,162,78,0.3); }

.history-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 10px;
}

.history-order-id {
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}

.history-order-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.history-status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.history-status-badge.status-new      { background: rgba(59,130,246,0.15);  color: #3b82f6; }
.history-status-badge.status-kitchen  { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.history-status-badge.status-delivery { background: rgba(168,85,247,0.15);  color: #a855f7; }
.history-status-badge.status-done     { background: rgba(34,197,94,0.15);   color: #22c55e; }

.history-preview {
  padding: 0 16px 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-details {
  border-top: 1px solid var(--border-glass);
}

.history-details summary {
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.history-details summary::-webkit-details-marker { display: none; }
.history-details summary::before { content: '+ '; }
.history-details[open] summary::before { content: '− '; }

.history-items-list {
  padding: 6px 16px 10px;
}

.history-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 3px 0;
}

.history-size { color: var(--text-muted); font-size: 0.8rem; }

.history-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  border-top: 1px dashed var(--border-glass);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.history-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border-glass);
}

.history-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.history-reorder-btn {
  padding: 8px 14px;
  background: var(--accent);
  color: #0f0f0f;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.history-reorder-btn:hover { opacity: 0.85; }

/* Light theme overrides for new components */
[data-theme="light"] .auth-nav-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-primary);
}
[data-theme="light"] .auth-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .auth-nav-user { background: rgba(180,100,30,0.08); border-color: rgba(180,100,30,0.25); }
[data-theme="light"] .history-panel { background: #ffffff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .history-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .tracker-card { background: #ffffff; }

/* ===== SOCIAL AUTH BUTTONS ===== */
.social-auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.social-auth[hidden],
.social-btn[hidden],
.auth-divider[hidden],
/* Any class that sets `display` overrides the UA stylesheet's [hidden] rule,
   because author styles win regardless of specificity. Both of these set
   display:flex, so `el.hidden = true` had no effect and they showed always —
   the Happy Hour note rendered as a lone bullet with no text. */
.cart-hh-note[hidden],
.cart-discount-row[hidden],
.cart-subtotal-rows[hidden] {
  display: none !important;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.social-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }

.google-btn:hover   { border-color: #4285F4; }
.facebook-btn:hover { border-color: #1877F2; }

[data-theme="light"] .social-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .social-btn:hover { background: rgba(0,0,0,0.06); }

/* Auth divider "или с имейл" */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}


/* --- Account details, at the top of the history panel --- */
.account-card {
  margin: 16px 20px 8px; padding: 16px; border-radius: var(--radius-md);
  border: 1px solid var(--border-glass); background: var(--bg-glass);
}
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.account-head h3 { font-size: 0.98rem; font-weight: 700; color: var(--text-primary); }
.account-edit-btn {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-glass); background: transparent;
  color: var(--accent); font-size: 0.82rem; font-weight: 600;
}
.account-edit-btn:hover { border-color: var(--accent); }
.account-view { display: flex; flex-direction: column; gap: 9px; }
.account-view > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; }
.account-view dt { color: var(--text-muted); font-size: 0.78rem; }
.account-view dd { color: var(--text-primary); font-size: 0.88rem; word-break: break-word; }
.account-form { display: flex; flex-direction: column; gap: 11px; }
.account-field { display: flex; flex-direction: column; gap: 5px; }
.account-field > span { color: var(--text-muted); font-size: 0.78rem; }
.account-field input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass); background: var(--bg-primary);
  color: var(--text-primary); font-size: 0.9rem; font-family: inherit;
}
.account-field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.account-note { color: var(--text-muted); font-size: 0.74rem; }
.account-error { color: #e5484d; font-size: 0.8rem; min-height: 1em; }
.account-error:empty { min-height: 0; }
.account-actions { display: flex; gap: 8px; }
.account-save-btn, .account-cancel-btn {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; font-family: inherit; border: 1px solid transparent;
}
.account-save-btn { background: var(--accent); color: var(--on-accent); }
.account-save-btn:disabled { opacity: .6; cursor: not-allowed; }
.account-cancel-btn { background: transparent; color: var(--text-secondary); border-color: var(--border-glass); }
.account-cancel-btn:hover { color: var(--text-primary); }
.history-section-title {
  margin: 18px 20px 4px; font-size: 0.88rem; font-weight: 700; color: var(--text-secondary);
}

.cart-discount-row, .checkout-summary-discount { color: var(--accent); font-weight: 600; }
.happy-hour[hidden] { display: none !important; }

.confirm-totals { margin:18px auto 0; max-width:320px; text-align:left; font-size:0.9rem; }
.confirm-totals-row { display:flex; justify-content:space-between; gap:12px; padding:5px 0; color:var(--text-secondary); }
.confirm-totals-discount { color:var(--accent); font-weight:600; }
.confirm-totals-total { border-top:1px solid var(--border-glass); margin-top:6px; padding-top:9px; color:var(--text-primary); font-weight:700; font-size:1rem; }
.confirm-totals[hidden], .confirm-totals-row[hidden] { display:none !important; }

/* Locking the page while an overlay is open. overflow:hidden alone is ignored by
   iOS Safari, so the body is taken out of flow and its offset restored on close;
   see syncScrollLock in app.js. */
/* The page is held still without being taken out of flow, so its scroll position
   is never reset and never has to be restored — closing an overlay cannot make
   the page jump. See syncScrollLock in app.js. */
body.scroll-locked {
  overflow: hidden;
}

/* iOS ignores overflow:hidden for touch scrolling. The overlays cover the whole
   viewport, so refusing gestures on them stops the page behind from moving at
   the source. Cards that genuinely scroll opt back in below. */
.modal-overlay,
.cart-overlay,
.history-overlay { touch-action: none; }

/* These scroll themselves — the dish modal does not, but checkout and auth do,
   the cart list does, order history does, and the mobile menu scrolls in
   landscape. Each must accept a vertical gesture; overscroll-behavior stops it
   chaining to the page once the end is reached. */
.modal-card,
.cart-drawer,
.cart-items-wrapper,
.history-panel,
.history-list,
.mobile-menu {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* ===== Dish modal: fit, never scroll =====
   A scrollbar in a dialog this small looks broken, and the photo was what
   pushed it over. The card is laid out as a column whose photo absorbs whatever
   height is left after the text and the button, so everything fits in one view
   at any height. :has() scopes this to the dish modal — the checkout and auth
   modals are genuinely long and must keep scrolling. */
.modal-card:has(> .modal-img) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-card:has(> .modal-img) > .modal-img {
  flex: 1 1 auto;
  min-height: 96px;
  max-height: none;        /* the flex line governs the height now */
  aspect-ratio: auto;
}
.modal-card:has(> .modal-img) > .modal-body {
  flex: 0 0 auto;          /* text and button keep their natural height */
}

/* Browsers without :has() keep the old behaviour: a scrollable card. */
@supports not selector(:has(> img)) {
  .modal-card { overflow-y: auto; }
}