/* ===== BellaMia — Custom Styles ===== */
/* Storefront language: noir gold from the Stitch customer mock
   (obsidian #121212, charcoal #1a1a1a, gold #d4af37, Libre Caslon + Be Vietnam Pro).
   Light theme keeps the same layout on parchment so the default (tested) theme
   still reads as the new editorial menu. */

:root {
  --font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-ui: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
}

/* --- CSS Variables — Dark Theme --- */
:root,
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1a1a1a;
  --bg-card: #1a1a1a;
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-glass: rgba(255, 255, 255, 0.10);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-muted: rgba(255, 255, 255, 0.40);
  --accent: #d4af37;
  --on-accent: #121212;
  --accent-hover: #e4c45a;
  --accent-glow: rgba(212, 175, 55, 0.22);
  --danger: #e85d4a;
  --success: #4ecb71;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --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);
  --navbar-bg: linear-gradient(to bottom, #121212 0%, rgba(18, 18, 18, 0.82) 55%, transparent 100%);
  --navbar-bg-scrolled: rgba(18, 18, 18, 0.96);
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --modal-overlay-bg: rgba(0, 0, 0, 0.78);
  --mobile-menu-bg: rgba(18, 18, 18, 0.98);
  --footer-bg: #121212;
  --hero-overlay: linear-gradient(to top, #121212 0%, rgba(18, 18, 18, 0.78) 32%, rgba(18, 18, 18, 0.28) 70%, transparent 100%);
}

/* --- CSS Variables — Light Theme (parchment companion of the same gold) --- */
[data-theme="light"] {
  --bg-primary: #f6f1e6;
  --bg-secondary: #efe6d4;
  --bg-card: #fffdf8;
  --bg-glass: rgba(22, 18, 12, 0.04);
  --border-glass: rgba(22, 18, 12, 0.12);
  --text-primary: #16120c;
  --text-secondary: #5a403e;
  --text-muted: #8e706d;
  --accent: #8a6910;
  --on-accent: #ffffff;
  --accent-hover: #6f540c;
  --accent-glow: rgba(138, 105, 16, 0.20);
  --danger: #d94035;
  --success: #3aaf5c;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --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);
  --navbar-bg: linear-gradient(to bottom, rgba(246, 241, 230, 0.94) 0%, rgba(246, 241, 230, 0.72) 70%, transparent 100%);
  --navbar-bg-scrolled: rgba(246, 241, 230, 0.97);
  --overlay-bg: rgba(0, 0, 0, 0.35);
  --modal-overlay-bg: rgba(0, 0, 0, 0.45);
  --mobile-menu-bg: rgba(246, 241, 230, 0.99);
  --footer-bg: #121212;
  --hero-overlay: linear-gradient(to top, #f6f1e6 0%, rgba(18, 18, 18, 0.62) 36%, rgba(18, 18, 18, 0.28) 72%, transparent 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: var(--font-ui);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.35s ease, color 0.35s ease;
}
html, body { overflow-x:clip; }

/* Stitch stacked-card scroller: the page itself does not scroll; main does.
   Legal pages have no .stacked-container and keep normal document scroll. */
html:has(.stacked-container),
html:has(.stacked-container) body {
  height: 100%;
  overflow: hidden;
}

.stacked-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 5rem;
  -webkit-overflow-scrolling: touch;
}

.stacked-track {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.stack-dots {
  display: none;
}

@media (min-width: 900px) {
  .stacked-container {
    perspective: 1000px;
    scroll-snap-type: y proximity;
  }
  .card-section {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.5);
    will-change: transform;
    overflow: hidden;
    background: var(--bg-primary);
  }
  .section-alt.card-section { background: var(--bg-secondary); }
  .hero.card-section { background: #121212; }
  .happy-hour.card-section { background: #0a0a0a; }
  .footer.card-section { background: #121212; }
  .stacked-sheet {
    position: relative;
    z-index: 4;
    min-height: 100dvh;
    background: var(--bg-primary);
    scroll-snap-align: start;
  }
  .stacked-sheet.section-alt { background: var(--bg-secondary); }
  .stack-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: fixed;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
  .stack-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  .stack-dot.is-active,
  [data-theme="light"] .stack-dot.is-active {
    background: #d4af37;
    transform: scale(1.35);
  }
  [data-theme="light"] .stack-dot { background: rgba(22, 18, 12, 0.28); }
}

#about.card-section,
#delivery.card-section,
#contact.card-section,
.footer.card-section {
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  .stacked-container { scroll-snap-type: none; perspective: none; }
  .card-section {
    position: relative;
    height: auto;
    min-height: 100dvh;
    box-shadow: none;
    will-change: auto;
  }
}

::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: var(--font-display);
}

.label-caps {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Header / Navbar --- */
.navbar {
  /* Above .mobile-menu (997), below the toast (1000) and the modals (1100+). */
  z-index: 998;
  background: var(--navbar-bg);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.navbar.scrolled {
  background: var(--navbar-bg-scrolled);
  border-bottom-color: var(--border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}

/* Over the hero photograph the bar is always light-on-dark, matching the mock.
   After scroll it returns to the active theme so parchment/light text works. */
.navbar:not(.scrolled) {
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --accent: #d4af37;
  --on-accent: #121212;
  --bg-glass: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 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; }
.btn-link { min-height: 44px; }
.add-to-cart-btn { min-height: 44px; padding-top: 10px; }
.category-tab { min-height: 40px; }
.loc-card { width:100%;font:inherit;text-align:left;color:inherit; }
.loc-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .loc-grid { grid-template-columns: repeat(3, 1fr); }
}
.loc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 0;
  border: 1px solid var(--border-glass);
  background: transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.loc-card.active { border-color: var(--accent); }
.loc-card-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.loc-card-addr { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.loc-card-mark {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.location-map-wrap { border: 1px solid var(--border-glass); overflow: hidden; }
.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:0 0 6px;border-radius:0;font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  background:none;color:#d4af37;border-bottom:1px solid #d4af37;
  box-shadow:none;transition:color 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:var(--font-display);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);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.nav-link::after { display: none; }

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

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --accent: #d4af37;
  --on-accent: #121212;
  --bg-glass: transparent;
  --border-glass: rgba(212, 175, 55, 0.55);
}
@media (min-width: 900px) {
  .hero.card-section {
    position: sticky;
    min-height: 0;
    height: 100dvh;
  }
}

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

.hero::after { display: none; }

.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  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;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 8rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.75rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-subtitle {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--accent);
  max-width: none;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2rem;
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  animation: fadeInUp 0.8s ease-out 1s both;
}

@media (max-width: 768px) {
  .hero::before {
    background: linear-gradient(to top, #121212 0%, rgba(18,18,18,0.82) 40%, rgba(18,18,18,0.4) 100%);
  }
  [data-theme="light"] .hero::before {
    background: linear-gradient(to top, #f6f1e6 0%, rgba(18,18,18,0.7) 42%, rgba(18,18,18,0.35) 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);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.btn-link:hover { color: var(--accent); }
.btn-link-muted {
  border-bottom-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.62);
}
.btn-link-muted:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* --- Category Tabs --- */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2rem;
  overflow-x: auto;
  padding: 0 0 2.5rem;
  margin-bottom: 0.5rem;
  scrollbar-width: none;
}

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

.category-tab {
  flex-shrink: 0;
  padding: 0 0 6px;
  border-radius: 0;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  opacity: 0.45;
}

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

.category-tab.active {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  opacity: 1;
}

/* --- Menu Cards --- */
.menu-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: border-color var(--transition-smooth);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.menu-card:hover {
  transform: none;
  box-shadow: none;
}

.menu-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .menu-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
  }
}

.menu-row {
  padding: 0 0 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-glass);
}
.menu-row:hover { border-bottom-color: rgba(212, 175, 55, 0.45); }

.menu-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

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

.popular-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 2.5rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .popular-list { grid-template-columns: repeat(3, 1fr); }
}

.popular-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
}
[data-theme="light"] .popular-section {
  background: linear-gradient(135deg, #efe6d4 0%, #f6f1e6 100%);
}

.popular-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2rem 2.25rem;
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 4px solid var(--accent);
}
.popular-heading .section-title {
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-theme="light"] .popular-heading {
  background: rgba(255, 253, 248, 0.72);
}
[data-theme="light"] .popular-heading .section-title { text-shadow: none; }

.popular-card {
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-card.popular-card:hover {
  transform: translateY(-8px);
  box-shadow: none;
}
[data-theme="light"] .popular-card {
  background: rgba(255, 253, 248, 0.75);
}

.popular-photo {
  width: min(14rem, 58vw);
  height: min(14rem, 58vw);
  border-radius: 0;
  overflow: hidden;
  margin: 1.75rem auto 2.5rem;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  position: relative;
  transform: rotate(45deg);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.popular-photo .menu-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transform: rotate(-45deg) scale(1.5);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.popular-photo-wash {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 0.5s ease;
}
.popular-card:hover .popular-photo { transform: rotate(0deg); }
.popular-card:hover .popular-photo .menu-card-img {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}
.popular-card:hover .popular-photo-wash { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .popular-photo,
  .popular-photo .menu-card-img,
  .popular-card:hover .popular-photo,
  .popular-card:hover .popular-photo .menu-card-img {
    transform: none;
  }
  .menu-card.popular-card:hover { transform: none; }
}

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

.menu-card-bottom {
  margin-top: 0.85rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.popular-card .menu-card-title { margin-bottom: 0.75rem; color: var(--accent); }
.popular-card .card-desc { margin-bottom: 1rem; padding: 0 0.75rem; }
.popular-card .menu-card-price {
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent),
               0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
[data-theme="light"] .popular-card .menu-card-price { text-shadow: none; }

.menu-card-price {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

.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: 0;
  border: none;
  border-bottom: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

/* Add to cart button on cards */
.add-to-cart-btn {
  width: auto;
  align-self: flex-start;
  padding: 0 0 6px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.popular-card .add-to-cart-btn { align-self: center; }

.add-to-cart-btn:hover {
  background: none;
  color: var(--text-primary);
  transform: none;
}

.add-to-cart-btn.added {
  background: none;
  color: var(--success);
  border-bottom-color: var(--success);
}

/* --- 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: var(--font-display);
}

.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: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

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

.section-block {
  padding: 5rem 1.25rem;
}
@media (min-width: 768px) {
  .section-block { padding: 6rem 2rem; }
}
.section-alt { background: var(--bg-secondary); }
.section-inner {
  max-width: 80rem;
  margin: 0 auto;
}
.section-inner-narrow { max-width: 64rem; }
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

/* --- About Section --- */
.about-layout {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .about-layout { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.about-copy .section-title { text-align: left; letter-spacing: 0.12em; }
.about-text {
  margin: 1.1rem 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.about-text-accent { color: var(--accent); }
.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-glass);
}
.about-stat { display: flex; flex-direction: column; gap: 0.4rem; }
.about-stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.about-stat-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.about-frame {
  position: relative;
  width: 100%;
  min-height: 22rem;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
}
.about-frame::after {
  content: '';
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 1;
}
[data-theme="light"] .about-frame::after {
  border-color: rgba(22, 18, 12, 0.2);
}
.about-frame img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  display: block;
  opacity: 0.82;
}

/* --- Delivery Zone Cards --- */
.zone-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .zone-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.zone-card {
  background: none;
  border: none;
  border-top: 1px solid var(--border-glass);
  border-radius: 0;
  padding: 1.75rem 0 0;
}
.zone-card:hover { box-shadow: none; border-color: rgba(212, 175, 55, 0.4); }
.zone-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.zone-areas {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}
.zone-phones { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* --- Footer --- */
.footer {
  background: #121212;
  color: #fff;
  border-top: none;
  padding: 5rem 1.5rem 3rem;
}
.footer-inner {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.footer-logo { height: 72px; width: auto; opacity: 0.5; mix-blend-mode: luminosity; }
.footer-desc, .footer-hours {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 28rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin: 0.5rem 0 0.25rem;
}
.footer a {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer a:hover { color: #d4af37; }
.footer-legal, .footer-copy {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.7;
}
.footer-legal a { font-size: inherit; }

/* --- 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;
  /* Sit the content just under the navbar rather than floating it in the middle
     of the screen: centred, the menu left large empty bands above and below and
     read as a half-finished page. */
  justify-content: flex-start;
  /* Landscape phones are ~360px tall and the menu is ~430px — scroll, never clip.
     The top padding clears the navbar, which renders above this overlay. */
  overflow-y: auto;
  padding: 88px 20px 28px;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
}

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

/* The menu used to be bare 2rem text centred on a flat fill, with emoji doing
   the work of icons. It now uses the same surfaces, radii and stroke icons as
   the rest of the site, and reads as rows rather than a stack of words. */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible {
  background: var(--bg-glass);
  border-color: var(--border-glass);
  color: var(--accent);
}
.mm-icon { flex-shrink: 0; opacity: .75; }
.mobile-menu a:hover .mm-icon,
.mobile-menu a:focus-visible .mm-icon { opacity: 1; }

.mobile-menu-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding-top: 18px;
  border-top: 1px solid var(--border-glass);
}

.mobile-menu a:hover {
  color: var(--accent);
}
.mobile-menu-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.mobile-menu-action:hover,
.mobile-menu-action:focus-visible { border-color: var(--accent); color: var(--accent); }

/* --- Happy Hour promo band --- */
.happy-hour {
  padding: 5rem 1.25rem;
  margin: 0;
  max-width: none;
  background: #0a0a0a;
}
.happy-hour.card-section {
  padding: 0;
}
.happy-hour.card-section .happy-hour-inner {
  min-height: 100%;
  justify-content: center;
}
[data-theme="light"] .happy-hour { background: #16120c; }
.happy-hour-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  max-width: 44rem;
  margin: 0 auto;
}
.happy-hour-tag {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  padding: 8px 22px;
  border-radius: 999px;
  background: transparent;
  color: #d4af37;
  border: 1px solid #d4af37;
  white-space: nowrap;
}
.happy-hour-copy { flex: 1; min-width: 0; }
.happy-hour-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.happy-hour-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.6;
  max-width: 32rem;
}
.happy-hour-cta {
  flex-shrink: 0;
  padding: 0 0 6px;
  border-radius: 0;
  background: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid #d4af37;
  transition: color var(--transition-fast);
}
.happy-hour-cta:hover { background: none; color: #d4af37; }

@media (max-width: 720px) {
  .happy-hour { padding: 4rem 1.25rem; }
  .happy-hour-inner { gap: 1.15rem; }
  .happy-hour-title { font-size: 1.35rem; }
}

/* 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.15rem; min-height: 46px; }
  .mobile-menu-action { min-height: 44px; }

  /* 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-top: 2.25rem;
    padding-bottom: 2.25rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    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: 12px 20px 12px 48px;
  background: transparent; border: none; border-bottom: 1px solid var(--border-glass);
  border-radius: 0; color: var(--text-primary); font-size: 0.95rem;
  outline: none; transition: all var(--transition-fast); font-family: var(--font-ui);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); background: transparent; box-shadow: none; }
.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: var(--font-display); 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: var(--font-display); }
.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 stay borderless in both themes */
[data-theme="light"] .menu-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: none;
}

/* 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: none;
  border-color: transparent;
}

[data-theme="light"] .category-tab.active {
  color: var(--accent);
}

/* 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: var(--font-ui);
  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: var(--font-display);
  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;
  /* Same reason as .cart-items-wrapper: a column flex child will not shrink
     below its content without this, so the list grows instead of scrolling. */
  min-height: 0;
  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 {
  /* Flex children shrink by default. Inside a fixed-height scrolling column
     that meant every card was squeezed — at four orders each one rendered 96px
     tall around 196px of content, and overflow:hidden cut off exactly the
     footer: the total and the "Reorder" button. The list is supposed to scroll,
     not compress its rows, so the cards keep their own height. Invisible with a
     single order, which is why it survived testing. */
  flex-shrink: 0;
  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;
}
body.scroll-locked .stacked-container {
  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; }
}

/* Password block on the account card. It sits under the profile fields, so it
   needs a rule to separate the two rather than reading as one long form. */
.account-pass {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-glass);
}
.account-pass .account-head { margin-bottom: 10px; }

/* Contact block: pushed to the bottom of the menu so the space between it and
   the navigation is deliberate rather than left over. */
.mobile-menu-contact {
  margin-top: auto;
  width: 100%;
  max-width: 360px;
  padding-top: 22px;
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-contact-title {
  font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 2px;
}
.mm-phone {
  display: flex; align-items: center; gap: 13px;
  min-height: 56px; padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass); background: var(--bg-glass);
  color: var(--text-primary); text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.mm-phone:hover, .mm-phone:focus-visible { border-color: var(--accent); color: var(--accent); }
.mm-phone span { display: flex; flex-direction: column; line-height: 1.25; }
.mm-phone strong { font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; }
.mm-phone small { font-size: 0.76rem; color: var(--text-muted); }
.mm-phone:hover small { color: inherit; opacity: .8; }
.mm-hours { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin: 4px 0 0; }
@media (max-height: 700px) {
  .mobile-menu-contact { padding-top: 14px; gap: 8px; }
  .mm-phone { min-height: 48px; }
  .mm-hours { display: none; }
}

/* Delivery zone picker. Built as real radios so it is keyboard- and
   screen-reader-navigable; the visible card is the label. */
.zone-options { display: flex; flex-direction: column; gap: 10px; }
.zone-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; cursor: pointer;
  border: 1.5px solid var(--border-glass); border-radius: var(--radius-md);
  background: var(--bg-glass);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.zone-option:hover { border-color: var(--accent); }
.zone-option:has(input:checked) { border-color: var(--accent); background: rgba(212, 162, 78, 0.08); }
.zone-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.zone-option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.zone-option-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zone-option-name { font-weight: 600; font-size: 0.94rem; color: var(--text-primary); }
.zone-option-areas { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }

/* Closed-now notice and slot picker. Deliberately not styled as an error: being
   shut at 3am is normal, and the customer has done nothing wrong. */
.checkout-closed {
  padding: 14px 16px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  background: rgba(212, 162, 78, 0.08);
  display: flex; flex-direction: column; gap: 10px;
}
.checkout-closed[hidden] { display: none; }
.checkout-closed-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.checkout-closed-body { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.checkout-sched-row { display: flex; gap: 12px; flex-wrap: wrap; }
.checkout-sched-row .checkout-field { flex: 1 1 150px; min-width: 0; }
.checkout-prepay-note {
  font-size: 0.8rem; color: var(--text-muted);
  padding-top: 4px; border-top: 1px dashed var(--border-glass);
}
.checkout-prepay-note[hidden] { display: none; }