/* ════════════════════════════════════════════════════════════════════════
   Al Madina Fast Food & Pizza — premium styles
   Light / Dark / Gradient themes · Glassmorphism · Mobile-first
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. RESET ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }

/* ───────────────────────── 2. THEME VARIABLES ───────────────────────── */
:root, [data-theme="light"] {
  --bg: #faf6f1;
  --bg-soft: #f3ece2;
  --bg-elev: #ffffff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.55);
  --surface-glass-border: rgba(255, 255, 255, 0.7);
  --text: #1a1410;
  --text-soft: #5c4d40;
  --text-mute: #8b7e6f;
  --accent: #e63946;
  --accent-strong: #c1212d;
  --accent-2: #f77f00;
  --gold: #f4a261;
  --amber: #ffb703;
  --success: #16a34a;
  --warning: #f59e0b;
  --error: #dc2626;
  --info: #0ea5e9;
  --shadow-sm: 0 2px 8px rgba(40, 25, 10, 0.08);
  --shadow: 0 8px 24px rgba(40, 25, 10, 0.12);
  --shadow-lg: 0 18px 50px rgba(40, 25, 10, 0.18);
  --shadow-glow: 0 0 40px rgba(230, 57, 70, 0.18);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-head: Georgia, 'Times New Roman', Cambria, serif;
  --header-h: 64px;
  --topbar-glass-blur: 18px;
}

[data-theme="dark"] {
  --bg: #0e0d10;
  --bg-soft: #15131a;
  --bg-elev: #1c1a22;
  --surface: rgba(28, 26, 34, 0.72);
  --surface-strong: rgba(28, 26, 34, 0.92);
  --surface-glass: rgba(20, 18, 24, 0.6);
  --surface-glass-border: rgba(255, 255, 255, 0.15);
  --text: #f5f0e6;
  --text-soft: #c8bdaf;
  --text-mute: #8d8275;
  --accent: #e63946;
  --accent-strong: #ff5868;
  --accent-2: #f77f00;
  --gold: #f4a261;
  --amber: #ffb703;
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #38bdf8;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 60px rgba(230, 57, 70, 0.28);
}

[data-theme="gradient"] {
  --bg: #0d0b14;
  --bg-soft: #16131f;
  --bg-elev: #1d1a2a;
  --surface: rgba(30, 26, 44, 0.7);
  --surface-strong: rgba(34, 28, 50, 0.92);
  --surface-glass: rgba(40, 30, 60, 0.55);
  --surface-glass-border: rgba(255, 255, 255, 0.18);
  --text: #f7e9d7;
  --text-soft: #d9c8b1;
  --text-mute: #948578;
  --accent: #e63946;
  --accent-strong: #ff5868;
  --accent-2: #f77f00;
  --gold: #ffb703;
  --amber: #ffd166;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #38bdf8;
  --shadow-sm: 0 2px 12px rgba(60, 20, 50, 0.4);
  --shadow: 0 12px 40px rgba(50, 20, 60, 0.5);
  --shadow-lg: 0 28px 70px rgba(40, 10, 50, 0.7);
  --shadow-glow: 0 0 80px rgba(230, 57, 70, 0.4);
  --gradient-bg: radial-gradient(1200px 800px at 10% -10%, rgba(247, 127, 0, 0.18), transparent 60%),
                 radial-gradient(1000px 700px at 90% 0%, rgba(230, 57, 70, 0.18), transparent 60%),
                 radial-gradient(900px 600px at 50% 110%, rgba(244, 162, 97, 0.14), transparent 60%),
                 linear-gradient(180deg, #0d0b14 0%, #16131f 100%);
}

/* ───────────────────────── 3. BODY / LAYOUT ───────────────────────── */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  transition: background 0.4s ease, color 0.3s ease;
}
[data-theme="gradient"] body { background: var(--gradient-bg); background-attachment: fixed; }

main { flex: 1 0 auto; min-width: 0; }
footer { margin-top: auto; flex-shrink: 0; }

.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* Lock scroll when a modal/drawer is open */
body.modal-open, body.cart-open, body.chat-open, body.search-overlay-open, body.drawer-open { overflow: hidden; }
body.checkout-locked { pointer-events: none; }
body.checkout-locked #checkout-modal, body.checkout-locked #checkout-modal * { pointer-events: auto; }

/* ───────────────────────── 4. UTILITIES ───────────────────────── */
.hidden { display: none !important; }
.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;
}
.muted { color: var(--text-mute); font-size: 0.875rem; }
.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(var(--topbar-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--topbar-glass-blur)) saturate(140%);
  border: 1px solid var(--surface-glass-border);
}
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal:not(.visible) { opacity: 0; }

/* ───────────────────────── 5. TYPOGRAPHY ───────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.section { padding: clamp(48px, 8vw, 96px) 0; position: relative; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-eyebrow { display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill); background: rgba(230, 57, 70, 0.12); color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--text); }
.section-sub { color: var(--text-soft); margin-top: 8px; font-size: 1rem; }

/* ───────────────────────── 6. BUTTONS ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  border: 1px solid transparent; cursor: pointer; min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: scale(1.02); }
.btn:not(:disabled):active { transform: scale(0.98); }
.btn-lg { padding: 14px 30px; font-size: 1.05rem; min-height: 52px; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; min-height: 36px; }
.btn-xs { padding: 4px 10px; font-size: 0.78rem; min-height: 28px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  color: #fff; border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  background-size: 200% 200%; box-shadow: var(--shadow-sm);
  animation: gradient-shift 8s ease infinite;
}
.btn-primary:not(:disabled):hover { box-shadow: var(--shadow), var(--shadow-glow); }
.btn-primary.loading { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); opacity: 0.9; pointer-events: none; }

.btn-secondary {
  color: var(--text); background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:not(:disabled):hover { background: var(--bg-soft); }

.btn-ghost { color: var(--text); background: transparent; border: 1px solid transparent; }
.btn-ghost:not(:disabled):hover { background: rgba(255, 255, 255, 0.06); }

.btn-danger { color: #fff; background: linear-gradient(135deg, var(--error), #b91c1c); border: none; }
.btn-danger:not(:disabled):hover { box-shadow: var(--shadow); }

.btn-wa { color: #fff; background: linear-gradient(135deg, #25d366, #128c7e); border: none; }
.btn-wa:not(:disabled):hover { box-shadow: var(--shadow); }

/* ───────────────────────── 7. TOPBAR / HEADER ───────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  padding: 8px 0;
  background: transparent;
  transition: padding 0.25s ease;
}
.topbar-inner {
  display: flex; align-items: center; gap: 16px;
  max-width: 1280px; margin: 0 auto; padding: 8px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: var(--radius-pill);
  font-weight: 700; color: var(--text);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 18px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-head); font-size: 1.05rem; }
.brand-sub { font-size: 0.65rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.12em; }

.search-box {
  position: relative; flex: 1 1 auto; max-width: 460px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
}
.search-icon { color: var(--text-mute); font-size: 0.9rem; }
.search-box input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 0.9rem; padding: 6px 0; color: var(--text);
}
.search-box input::placeholder { color: var(--text-mute); }

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 60vh; overflow-y: auto;
  display: none; padding: 6px; z-index: 110;
}
.search-results.open { display: block; }
.search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.15s ease;
}
.search-result:hover, .search-result.active { background: var(--bg-soft); }
.search-result-image {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
  background: var(--bg-soft);
}
.search-result.img-fallback { background: linear-gradient(135deg, var(--accent), var(--gold)); }
.search-result-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.search-result-name { font-weight: 600; font-size: 0.9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-cat { font-size: 0.75rem; color: var(--text-mute); }
.search-result-price { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.search-result-icon { color: var(--text-mute); }
.search-section-label { padding: 6px 10px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); }
.search-empty { padding: 16px; text-align: center; color: var(--text-mute); font-size: 0.9rem; }
.search-result-recent .search-result-remove { margin-left: auto; padding: 2px 8px; border-radius: 50%; color: var(--text-mute); font-size: 1rem; }
.search-result-recent .search-result-remove:hover { background: var(--bg-soft); color: var(--error); }

.topbar-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-pill); min-height: 40px;
  color: var(--text); background: transparent;
  transition: background 0.2s ease, transform 0.15s ease;
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn .theme-icon, .icon-btn .cart-icon, .icon-btn .account-icon { font-size: 1.05rem; }
.theme-label, .account-label { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 768px) { .theme-label, .account-label { display: none; } }

.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-elev);
}
.cart-count.pulse { animation: cart-pulse 0.6s ease; }

.health-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600;
  background: var(--bg-soft); color: var(--text-soft);
  transition: background 0.3s ease, color 0.3s ease;
}
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.health-indicator.online { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.health-indicator.online .health-dot { background: var(--success); animation: dot-pulse 2s infinite; }
.health-indicator.degraded { background: rgba(245, 158, 11, 0.14); color: var(--warning); }
.health-indicator.degraded .health-dot { background: var(--warning); }
.health-indicator.offline { background: rgba(220, 38, 38, 0.14); color: var(--error); }
.health-indicator.offline .health-dot { background: var(--error); }
@media (max-width: 640px) { .health-indicator .health-label { display: none; } }

/* Broadcast strip */
.broadcast-strip {
  display: flex; align-items: center; gap: 12px;
  max-width: 1280px; margin: 6px auto 0; padding: 8px 16px;
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.12), rgba(247, 127, 0, 0.12));
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius);
  color: var(--text); font-size: 0.88rem;
}
.broadcast-message { flex: 1; }
.broadcast-close { padding: 2px 10px; border-radius: 50%; color: var(--text-mute); font-size: 1.1rem; line-height: 1; }
.broadcast-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }

/* ───────────────────────── 8. HERO ───────────────────────── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
  padding: calc(var(--header-h) + 40px) 20px 80px;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-poster.hidden { display: none; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(1200px 600px at 50% 100%, rgba(13, 11, 20, 0.85), transparent 70%),
    linear-gradient(180deg, rgba(13, 11, 20, 0.45) 0%, rgba(13, 11, 20, 0.7) 60%, rgba(13, 11, 20, 0.92) 100%);
}
.hero-content {
  position: relative; z-index: 2; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.hero-eyebrow { display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.hero-title { font-size: clamp(2.4rem, 7vw, 5rem); color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.hero-tagline { font-size: clamp(1rem, 2.4vw, 1.4rem); color: rgba(255, 255, 255, 0.92); font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 14px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.92); }
.shop-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.shop-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.shop-status.open .shop-status-dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.shop-status.open .shop-status-text { color: #fff; }
.shop-status.closed .shop-status-dot { background: var(--error); }
.shop-status.closed .shop-status-text { color: rgba(255, 255, 255, 0.85); }
.delivery-info.unavailable { opacity: 0.6; text-decoration: line-through; }
.hero-scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255, 255, 255, 0.7); font-size: 1.4rem;
  animation: bob 2s ease-in-out infinite;
}
.hero-scroll-cue:hover { color: #fff; }

/* ───────────────────────── 9. RESTAURANT INFO ───────────────────────── */
.restaurant-info { background: var(--bg-soft); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.info-card { padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-icon { font-size: 1.6rem; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(230, 57, 70, 0.1); margin-bottom: 12px; }
.info-title { font-size: 1.05rem; margin-bottom: 6px; }
.info-text { color: var(--text-soft); font-size: 0.92rem; }
.info-text .restaurant-phone { display: block; padding: 2px 0; color: var(--text-soft); }
.info-text .restaurant-phone:hover { color: var(--accent); }
.info-text ul li.delivery-area { padding: 4px 0; border-bottom: 1px dashed var(--surface-glass-border); }
.info-text ul li.delivery-area:last-child { border-bottom: none; }
.coins-card { background: linear-gradient(135deg, rgba(255, 183, 3, 0.18), rgba(244, 162, 97, 0.18)); }

/* ───────────────────────── 10. CAROUSEL (shared) ───────────────────────── */
.carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.carousel-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 16px; flex: 1; scroll-behavior: smooth;
  scrollbar-width: thin;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.carousel-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.carousel-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-sm); color: var(--text); font-size: 1.6rem; line-height: 1;
  transition: transform 0.15s ease, background 0.2s ease; flex-shrink: 0;
}
.carousel-nav:hover { background: var(--bg-soft); transform: scale(1.06); }
.carousel-nav:active { transform: scale(0.96); }
@media (max-width: 768px) { .carousel-nav { display: none; } }

/* ───────────────────────── 11. DEALS ───────────────────────── */
.deals-track { gap: 18px; }
.deal-card {
  width: 300px; max-width: 80vw; padding: 22px;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.deal-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--gold), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.4; pointer-events: none;
}
.deal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.deal-emoji { font-size: 2rem; }
.deal-badge { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: var(--radius-pill); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.deal-name { font-size: 1.2rem; }
.deal-desc { color: var(--text-soft); font-size: 0.88rem; }
.deal-items { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.deal-item { font-size: 0.85rem; color: var(--text-soft); padding-left: 14px; position: relative; }
.deal-item::before { content: '•'; color: var(--accent); position: absolute; left: 0; }
.deal-price { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.deal-original-price { color: var(--text-mute); text-decoration: line-through; font-size: 0.9rem; }
.deal-discount-price { color: var(--accent); font-weight: 700; font-size: 1.4rem; }
.deal-discount-pct { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--success); color: #fff; font-size: 0.72rem; font-weight: 700; }
.deals-empty { padding: 24px; text-align: center; color: var(--text-mute); }

/* ───────────────────────── 12. CATEGORY NAV ───────────────────────── */
.category-nav {
  position: sticky; top: var(--header-h); z-index: 90;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 20px;
  background: var(--surface-glass); backdrop-filter: blur(var(--topbar-glass-blur));
  border-top: 1px solid var(--surface-glass-border);
  border-bottom: 1px solid var(--surface-glass-border);
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill); flex-shrink: 0;
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  color: var(--text-soft); font-size: 0.85rem; font-weight: 600; min-height: 36px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.category-pill:hover { transform: scale(1.04); color: var(--text); }
.category-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 200% 200%; color: #fff; border-color: transparent;
  animation: gradient-shift 8s ease infinite;
}
.category-pill-emoji { font-size: 1rem; }
.category-pill-label { white-space: nowrap; }

/* ───────────────────────── 13. MENU GRID ───────────────────────── */
.menu { background: var(--bg); }
.menu-grid { display: flex; flex-direction: column; gap: 32px; }
.menu-section-header {
  display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px;
  border-bottom: 2px solid var(--surface-glass-border);
}
.menu-section-emoji { font-size: 1.6rem; }
.menu-section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.menu-section-desc { color: var(--text-soft); font-size: 0.92rem; }
.menu-grid-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.menu-card {
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer; position: relative;
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.menu-card:hover, .menu-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); outline: none; }
.menu-card .menu-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-soft); }
.menu-card .menu-image.img-fallback { background: linear-gradient(135deg, var(--accent), var(--gold)); }
.menu-card-price {
  position: absolute; top: 12px; left: 12px; padding: 4px 12px;
  border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.7); color: #fff;
  font-size: 0.85rem; font-weight: 700; backdrop-filter: blur(8px);
}
.menu-card-body { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.menu-card-name { font-size: 1.05rem; }
.menu-card-desc { color: var(--text-soft); font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-card-unavailable {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 4px;
  background: rgba(220, 38, 38, 0.14); color: var(--error); font-size: 0.72rem; font-weight: 600;
}
.menu-card-add {
  margin: 0 16px 16px; padding: 10px 14px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.2s ease; align-self: flex-start;
}
.menu-card-add:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.menu-card-add:active { transform: scale(0.98); }
.menu-card-add-icon { font-size: 1.1rem; line-height: 1; }

/* Search-result highlight */
.menu-card--highlight {
  outline: 3px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.18), var(--shadow);
}
.menu-card--shake { animation: card-shake 0.5s ease; animation-iteration-count: 4; }

/* Skeletons */
.menu-card-skeleton, .review-card-skeleton, .order-history-skeleton {
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.skeleton-img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.skeleton-line { height: 12px; border-radius: 6px; }
.skeleton-line-1 { width: 60%; }
.skeleton-line-2 { width: 80%; }
.skeleton-line-3 { width: 40%; }
.skeleton-line.short { width: 30%; }
.skeleton-stars { width: 100px; height: 16px; border-radius: 8px; }
.skeleton-btn { height: 36px; border-radius: var(--radius-pill); margin-top: 6px; }
.skeleton, .skeleton-img, .skeleton-line, .skeleton-stars, .skeleton-btn {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.menu-empty, .menu-error, .deals-empty, .reviews-empty, .order-history-empty {
  padding: 32px; text-align: center; color: var(--text-mute); grid-column: 1 / -1;
}

/* ───────────────────────── 14. POPULAR ───────────────────────── */
.popular { background: var(--bg-soft); }
.popular-track { gap: 14px; padding: 4px; }
.popular-card {
  width: 200px; max-width: 60vw; padding: 14px;
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.popular-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.popular-card .menu-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); }
.popular-name { font-size: 1rem; }
.popular-price { color: var(--accent); font-weight: 700; font-size: 1.1rem; }

/* ───────────────────────── 15. ABOUT ───────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.about-text { display: flex; flex-direction: column; gap: 14px; }
.about-text p { color: var(--text-soft); }
.about-media { display: flex; justify-content: center; }
.about-img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; max-width: 600px; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }

/* ───────────────────────── 16. FEATURES ───────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.feature-card {
  padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon { font-size: 1.8rem; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(230, 57, 70, 0.1); }
.feature-title { font-size: 1.05rem; }
.feature-desc { color: var(--text-soft); font-size: 0.88rem; }

/* ───────────────────────── 17. REVIEWS ───────────────────────── */
.reviews { background: var(--bg-soft); }
.reviews-track { gap: 16px; }
.review-card {
  width: 320px; max-width: 80vw; padding: 20px;
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.review-stars { display: flex; gap: 2px; color: var(--gold); font-size: 1rem; }
.review-stars .star { color: var(--text-mute); opacity: 0.4; }
.review-stars .star.filled { color: var(--gold); opacity: 1; }
.review-message { color: var(--text); font-size: 0.92rem; line-height: 1.5; flex: 1; }
.review-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-mute); }
.review-name { font-weight: 700; color: var(--text-soft); }
.review-date { font-style: italic; }
.reviews-track.static-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  overflow: visible; scroll-snap-type: none;
}
.reviews-track.static-grid .review-card { width: 100%; max-width: none; }

/* ───────────────────────── 18. ORDER CTA ───────────────────────── */
.order-cta { padding: 32px 0; }
.cta-band {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto; padding: 40px; border-radius: var(--radius-lg);
  background:
    radial-gradient(800px 400px at 0% 50%, rgba(247, 127, 0, 0.4), transparent 70%),
    linear-gradient(135deg, var(--accent), var(--accent-strong));
  background-size: 200% 200%; animation: gradient-shift 8s ease infinite;
  color: #fff; box-shadow: var(--shadow);
}
.cta-title { font-size: clamp(1.6rem, 3vw, 2.4rem); color: #fff; }
.cta-sub { opacity: 0.9; }
.cta-band .btn-primary { background: rgba(255, 255, 255, 0.95); color: var(--accent); }

/* ───────────────────────── 19. CONTACT ───────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 8px; }
.contact-title { font-size: 1.4rem; margin-bottom: 8px; }
.contact-line { display: flex; align-items: center; gap: 10px; color: var(--text-soft); padding: 4px 0; }
.contact-line a { color: var(--accent); }
.contact-map { min-height: 280px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--surface-glass-border); }
.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 280px; background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), rgba(230, 57, 70, 0.1));
  font-size: 3rem; color: var(--text-soft);
}
.map-placeholder p { font-size: 0.9rem; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

/* ───────────────────────── 20. FOOTER ───────────────────────── */
.footer {
  padding: 40px 0 calc(24px + env(safe-area-inset-bottom));
  background: var(--bg-elev); border-top: 1px solid var(--surface-glass-border);
}
.footer-inner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-name { font-family: var(--font-head); font-weight: 700; }
.footer-tag { color: var(--text-mute); font-size: 0.8rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.footer-links a { color: var(--text-soft); font-size: 0.88rem; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.footer-copy {
  grid-column: 1 / -1; text-align: center; color: var(--text-mute); font-size: 0.8rem;
  padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--surface-glass-border);
}
.footer-powered { color: var(--text-mute); }
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-actions { justify-content: center; }
  .footer-brand { justify-content: center; }
}

/* ───────────────────────── 21. DRAWERS (cart, profile) ───────────────────────── */
.backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(13, 11, 20, 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(4px);
}
.backdrop.open { opacity: 1; visibility: visible; }
.backdrop-soft { background: rgba(13, 11, 20, 0.25); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 210;
  width: min(420px, 100vw); background: var(--bg-elev);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid var(--surface-glass-border);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--surface-glass-border);
  padding-top: max(18px, env(safe-area-inset-top));
}
.drawer-title { font-size: 1.2rem; }
.drawer-close {
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
  color: var(--text-soft); transition: background 0.2s ease;
}
.drawer-close:hover { background: var(--bg-soft); color: var(--text); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--surface-glass-border); }

@media (max-width: 640px) {
  .drawer { width: 100vw; transform: translateY(100%); border-left: none; border-top: 1px solid var(--surface-glass-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .drawer.open { transform: translateY(0); }
}

/* Cart drawer specifics */
.cart-body { padding-bottom: 8px; }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start;
  padding: 12px; border-radius: var(--radius); background: var(--surface-strong);
  border: 1px solid var(--surface-glass-border);
  animation: cart-item-in 0.25s ease;
}
.cart-item-image {
  width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--bg-soft);
}
.cart-item-image.img-fallback { background: linear-gradient(135deg, var(--accent), var(--gold)); }
.cart-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: 0.92rem; }
.cart-item-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; color: var(--text-mute); }
.cart-item-size { padding: 1px 6px; border-radius: 4px; background: var(--bg-soft); }
.cart-item-notes { font-style: italic; }
.cart-item-price { color: var(--text-soft); font-size: 0.85rem; }
.cart-item-qty { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.qty-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--surface-glass-border);
  background: var(--surface-strong); color: var(--text); font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease, background 0.2s ease;
}
.qty-btn:hover { background: var(--bg-soft); }
.qty-btn:active { transform: scale(0.9); }
.qty-value { min-width: 28px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-item-line-total { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.cart-item-remove { color: var(--text-mute); font-size: 0.78rem; padding: 4px 8px; border-radius: 4px; }
.cart-item-remove:hover { color: var(--error); background: rgba(220, 38, 38, 0.1); }

.cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 32px 8px; color: var(--text-soft);
}
.cart-empty-icon { font-size: 2.4rem; opacity: 0.6; }
.cart-empty-title { font-size: 1.1rem; color: var(--text); }
.cart-empty-sub { font-size: 0.88rem; }
.cart-recommendations { margin-top: 18px; width: 100%; }
.cart-recs-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); margin-bottom: 8px; }
.cart-recs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.cart-rec-item {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  padding: 10px; border-radius: var(--radius-sm); background: var(--bg-soft); cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.cart-rec-item:hover { transform: translateY(-2px); background: var(--surface-strong); }
.cart-rec-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-strong); }
.cart-rec-img.img-fallback { background: linear-gradient(135deg, var(--accent), var(--gold)); }
.cart-rec-name { font-size: 0.78rem; font-weight: 600; }
.cart-rec-price { font-size: 0.78rem; color: var(--accent); font-weight: 700; }

.cart-summary { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.summary-line { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--text-soft); }
.summary-line.total { font-size: 1.1rem; font-weight: 700; color: var(--text); border-top: 1px solid var(--surface-glass-border); padding-top: 8px; }
.cart-actions { display: flex; gap: 8px; }
.cart-actions .btn-primary { flex: 1; }
.cart-actions .btn-ghost { flex: 0 0 auto; }

/* ───────────────────────── 22. MODALS ───────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 220;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-shell {
  width: 100%; max-width: 560px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: scale(0.95); transition: transform 0.25s ease;
}
.modal.open .modal-shell { transform: scale(1); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--surface-glass-border);
  padding-top: max(18px, env(safe-area-inset-top));
}
.modal-title { font-size: 1.2rem; }
.modal-close {
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
  color: var(--text-soft); transition: background 0.2s ease;
}
.modal-close:hover { background: var(--bg-soft); color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--surface-glass-border);
}

@media (max-width: 640px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-shell { max-width: 100%; max-height: 100vh; border-radius: 0; height: 100vh; height: 100svh; }
  .modal-foot { position: sticky; bottom: 0; background: var(--bg-elev); }
}

/* Checkout modal specifics */
.checkout-modal .modal-shell { max-width: 620px; }
.checkout-steps { display: flex; flex-direction: column; gap: 18px; }
.checkout-step { display: flex; flex-direction: column; gap: 8px; }
.checkout-step.hidden { display: none; }
.step-title { font-size: 1.1rem; }
.step-sub { color: var(--text-soft); font-size: 0.88rem; }
.step-summary { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 14px; }

.field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; }
.field {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  color: var(--text); font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18); }
textarea.field { resize: vertical; min-height: 64px; }
.field-with-toggle { position: relative; display: flex; align-items: center; }
.field-with-toggle .field { padding-right: 48px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; line-height: 1;
  color: var(--text-mute); transition: background 0.2s ease;
}
.pw-toggle:hover { background: var(--bg-soft); }
.pw-toggle.visible { color: var(--accent); }
.field-radios { display: flex; flex-direction: column; gap: 8px; padding: 0; border: none; }
.radio-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--surface-strong);
  border: 1px solid var(--surface-glass-border); cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.radio-option:has(input:checked) { border-color: var(--accent); background: rgba(230, 57, 70, 0.08); }
.radio-option input { width: 18px; height: 18px; accent-color: var(--accent); }
.checkbox-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.9rem; color: var(--text-soft); }
.checkbox-option input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.field-hint { font-size: 0.78rem; color: var(--text-mute); }
.file-input { padding: 8px; }
.order-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.order-success {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 20px;
}
.success-icon { font-size: 3rem; }
.success-title { font-size: 1.6rem; }
.success-text, .success-total, .success-sub { color: var(--text-soft); }
.success-total { font-weight: 700; color: var(--text); }
.step-progress { font-size: 0.82rem; color: var(--text-mute); }

/* Auth modal specifics */
.auth-modal .modal-shell { max-width: 480px; }
.auth-banner { padding: 10px 14px; margin: 0 20px; border-radius: var(--radius-sm); background: rgba(245, 158, 11, 0.14); color: var(--warning); font-size: 0.85rem; }
.auth-banner.hidden { display: none; }
.auth-tabs { display: flex; gap: 0; padding: 0 20px; border-bottom: 1px solid var(--surface-glass-border); }
.auth-tab {
  flex: 1; padding: 12px; font-weight: 600; color: var(--text-mute);
  border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease;
}
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.auth-form.hidden { display: none; }
.auth-hint { font-size: 0.78rem; color: var(--text-mute); text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--text-mute); font-size: 0.78rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--surface-glass-border); }
.auth-wa-panel { padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-soft); }
.auth-wa-panel.hidden { display: none; }
.auth-wa-panel h3 { font-size: 1.05rem; }
.auth-wa-explain { color: var(--text-soft); font-size: 0.88rem; }
.wa-send-btn { padding: 11px 18px; border-radius: var(--radius-pill); background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-weight: 600; }
.wa-code-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--surface-strong); border: 1px dashed var(--surface-glass-border); }
.wa-code-value { font-size: 2rem; font-family: var(--font-head); letter-spacing: 0.1em; color: var(--accent); }
.wa-code-label { font-size: 0.78rem; color: var(--text-mute); }
.wa-status { font-size: 0.85rem; color: var(--text-soft); text-align: center; min-height: 1.2em; }
.wa-waiting { font-size: 0.85rem; color: var(--text-soft); text-align: center; }
.auth-phone-form { display: flex; gap: 8px; }
.google-btn-wrap { display: flex; justify-content: center; min-height: 40px; }

/* Item-detail modal specifics */
.item-detail-modal .modal-shell { max-width: 540px; }
.item-detail-image { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; background: var(--bg-soft); }
.item-detail-image .menu-image { width: 100%; height: 100%; object-fit: cover; }
.item-detail-image:empty { display: none; }
.item-detail-desc { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 14px; }
.item-detail-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.item-detail-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.item-detail-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes-label { font-size: 0.78rem; color: var(--text-mute); }
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-option {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  color: var(--text-soft); font-size: 0.88rem; min-width: 80px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.size-option:hover { transform: scale(1.03); color: var(--text); }
.size-option.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border-color: transparent;
}
.size-option .size-label { font-weight: 600; }
.size-option .size-price { font-size: 0.78rem; opacity: 0.9; }
.single-price { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.item-detail-qty { display: flex; align-items: center; gap: 10px; }
.item-detail-qty .qty-btn { width: 36px; height: 36px; font-size: 1.2rem; }
.item-detail-qty .qty-value { font-size: 1.2rem; font-weight: 700; min-width: 36px; }

/* Order tracking specifics */
.order-tracking-modal .modal-shell { max-width: 520px; }
.tracking-body { display: flex; flex-direction: column; gap: 18px; }
.tracking-order-id { color: var(--text-soft); font-size: 0.92rem; }
.tracking-status { color: var(--text); font-size: 1rem; }
.tracking-status #ot-status { font-weight: 700; color: var(--accent); }
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; position: relative; }
.timeline-step::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: -12px; width: 2px; background: var(--surface-glass-border); }
.timeline-step:last-child::before { display: none; }
.timeline-step.done::before { background: var(--success); }
.timeline-step.active::before { background: linear-gradient(180deg, var(--accent), var(--surface-glass-border)); }
.timeline-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-soft); color: var(--text-mute); font-size: 0.85rem;
  border: 2px solid var(--surface-glass-border); flex-shrink: 0; z-index: 1;
}
.timeline-step.done .timeline-dot { background: var(--success); color: #fff; border-color: var(--success); }
.timeline-step.active .timeline-dot { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.18); }
.timeline-label { font-size: 0.92rem; color: var(--text-soft); }
.timeline-step.done .timeline-label, .timeline-step.active .timeline-label { color: var(--text); font-weight: 600; }
.timeline-connector { display: none; }

/* ───────────────────────── 23. PROFILE DRAWER ───────────────────────── */
.profile-drawer { width: min(440px, 100vw); }
.profile-body { display: flex; flex-direction: column; gap: 24px; }
.profile-section { display: flex; flex-direction: column; gap: 12px; }
.profile-section-title { font-size: 1rem; padding-bottom: 6px; border-bottom: 1px solid var(--surface-glass-border); }
.profile-rows { display: flex; flex-direction: column; gap: 8px; }
.profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--surface-glass-border); }
.profile-row:last-child { border-bottom: none; }
.profile-label { font-size: 0.82rem; color: var(--text-mute); }
.profile-value { font-size: 0.92rem; color: var(--text); font-weight: 600; text-align: right; }
.profile-value #profile-gmail-delink, .profile-value .btn { margin-left: 8px; }
.profile-form { display: flex; flex-direction: column; gap: 10px; }
.profile-row-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profile-status { font-size: 0.85rem; color: var(--text-soft); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--bg-soft); }
.profile-status.no-password { background: rgba(245, 158, 11, 0.14); color: var(--warning); }
.profile-wa-code-display {
  padding: 8px 14px; border-radius: var(--radius-sm); background: rgba(230, 57, 70, 0.1);
  font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 0.1em; color: var(--accent); text-align: center;
}
.profile-wa-code-display.hidden { display: none; }
.profile-orders { display: flex; flex-direction: column; gap: 8px; }
.order-history-list { display: flex; flex-direction: column; gap: 10px; }
.order-history-item {
  padding: 12px; border-radius: var(--radius); background: var(--surface-strong);
  border: 1px solid var(--surface-glass-border); display: flex; flex-direction: column; gap: 6px;
}
.oh-row { display: flex; justify-content: space-between; align-items: center; }
.oh-id { font-weight: 700; }
.oh-status { padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; background: var(--bg-soft); color: var(--text-soft); }
.oh-status-s4 { background: rgba(22, 163, 74, 0.16); color: var(--success); }
.oh-status-s5 { background: rgba(220, 38, 38, 0.16); color: var(--error); }
.oh-items { font-size: 0.85rem; color: var(--text-soft); }
.oh-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-mute); }
.oh-total { color: var(--text); font-weight: 700; }
.oh-actions { display: flex; gap: 8px; }
.profile-danger { border-top: 1px solid var(--surface-glass-border); padding-top: 20px; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; }

/* ───────────────────────── 24. CHAT WIDGET ───────────────────────── */
.chat-fab {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 200; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: var(--shadow), var(--shadow-glow);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-fab.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.chat-fab:hover { transform: scale(1.06) rotate(5deg); }

.chat-greeting {
  position: fixed; right: 88px; bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 200; max-width: 260px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow); color: var(--text); font-size: 0.88rem; cursor: pointer;
  opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-greeting.visible { opacity: 1; transform: translateX(0); }
.chat-greeting::after {
  content: ''; position: absolute; right: -8px; bottom: 16px;
  border: 8px solid transparent; border-left-color: var(--surface-strong);
}

.chat-panel {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 220; width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 40px);
  background: var(--bg-elev); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(0.96); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
}
.chat-title { font-size: 1rem; color: #fff; }
.chat-sub { font-size: 0.75rem; opacity: 0.85; }
.chat-close { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 1rem; }
.chat-close:hover { background: rgba(255, 255, 255, 0.18); }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); }
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--radius); font-size: 0.88rem; line-height: 1.45; word-wrap: break-word; }
.chat-bubble-user { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-assistant { align-self: flex-start; background: var(--surface-strong); border: 1px solid var(--surface-glass-border); color: var(--text); border-bottom-left-radius: 4px; }
.chat-typing { display: flex; gap: 4px; align-items: center; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); animation: typing-bounce 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
.chat-cta-btn {
  margin-top: 8px; padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: 0.82rem; font-weight: 600;
}
.chat-foot { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--surface-glass-border); background: var(--bg-elev); }
.chat-input {
  flex: 1; resize: none; padding: 10px 14px; border-radius: var(--radius-pill);
  background: var(--bg-soft); border: 1px solid var(--surface-glass-border);
  color: var(--text); font-size: 0.88rem; max-height: 120px; overflow-y: auto;
}
.chat-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18); }
.chat-send { padding: 10px 16px; }
.chat-whatsapp { font-size: 0.78rem; }

@media (max-width: 640px) {
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100svh; max-height: 100svh; border-radius: 0; }
  .chat-greeting { right: 76px; max-width: 220px; }
}

/* ───────────────────────── 25. SEARCH OVERLAY (mobile) ───────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 230; background: var(--bg);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--surface-glass-border); background: var(--bg-elev);
}
.search-overlay-head input {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-pill);
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border); color: var(--text);
}
.search-overlay-body { flex: 1; overflow-y: auto; padding: 8px; }
.search-overlay-results { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 769px) { .search-overlay { display: none !important; } }

/* ───────────────────────── 26. FEEDBACK MODAL ───────────────────────── */
.feedback-modal .modal-shell { max-width: 460px; }
.feedback-form { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.feedback-rating-wrap { border: none; padding: 0; }
.feedback-rating { display: flex; gap: 4px; }
.star-input {
  font-size: 2rem; line-height: 1; color: var(--text-mute); padding: 4px;
  background: transparent; border: none; cursor: pointer;
  transition: transform 0.15s ease, color 0.2s ease;
}
.star-input:hover { transform: scale(1.1); color: var(--gold); }
.star-input .star { color: inherit; }
.star-input.selected .star, .star-input.selected { color: var(--gold); }
.star-input.selected { text-shadow: 0 0 12px rgba(255, 183, 3, 0.5); }
#feedback-message-count.over { color: var(--error); font-weight: 700; }

/* ───────────────────────── 27. TOASTS ───────────────────────── */
.toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 320;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px; pointer-events: none;
  padding-top: env(safe-area-inset-top);
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-strong); border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow); color: var(--text); font-size: 0.88rem;
  pointer-events: auto; max-width: 360px;
  opacity: 0; transform: translateX(120%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.toast-visible { opacity: 1; transform: translateX(0); }
.toast.toast-leave { opacity: 0; transform: translateX(120%); }
.toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; font-weight: 700; font-size: 0.85rem; color: #fff;
}
.toast-success .toast-icon { background: var(--success); }
.toast-error .toast-icon { background: var(--error); }
.toast-warning .toast-icon { background: var(--warning); }
.toast-info .toast-icon { background: var(--info); }
.toast-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.toast-message { line-height: 1.4; }
.toast-action { align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--accent); font-size: 0.8rem; font-weight: 600; }
.toast-action:hover { background: var(--surface-strong); }
.toast-close { color: var(--text-mute); font-size: 1.2rem; line-height: 1; padding: 0 4px; }
.toast-close:hover { color: var(--text); }
@media (max-width: 640px) {
  .toast-container { left: 12px; right: 12px; top: 12px; max-width: none; }
  .toast { max-width: none; }
}

/* ───────────────────────── 28. LOADING OVERLAY ───────────────────────── */
.loading-overlay {
  position: fixed; inset: 0; z-index: 330; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(13, 11, 20, 0.7); backdrop-filter: blur(8px); color: #fff;
}
.loading-overlay.hidden { display: none; }
.loading-spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.loading-message { font-size: 0.95rem; }

/* ───────────────────────── 29. ANIMATIONS ───────────────────────── */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cart-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); }
  100% { transform: scale(1); }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
@keyframes card-shake {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px) rotate(-1deg); }
  75% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes cart-item-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ───────────────────────── 30. RESPONSIVE ───────────────────────── */
@media (max-width: 1024px) {
  .topbar-inner { gap: 8px; }
  .search-box { max-width: 320px; }
}
@media (max-width: 768px) {
  .topbar { padding: 6px 0; }
  .topbar-inner { padding: 6px 12px; gap: 6px; border-radius: var(--radius); }
  .brand-text { display: none; }
  .search-box { max-width: none; flex: 1 1 100%; order: 5; }
  .topbar-inner { flex-wrap: wrap; }
  .topbar-actions { margin-left: auto; }
  .icon-btn { padding: 8px 10px; }
  .hero { padding: calc(var(--header-h) + 20px) 16px 60px; }
  .hero-actions .btn { width: 100%; }
  .section { padding: 48px 0; }
  .container { padding: 0 16px; }
  .menu-grid-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 28px; }
}
@media (max-width: 640px) {
  .icon-btn .theme-label, .icon-btn .account-label { display: none; }
  .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
  .deal-card { width: 85vw; }
  .review-card { width: 85vw; }
  .popular-card { width: 60vw; }
  .footer-inner { gap: 18px; }
}

/* ───────────────────────── 31. REDUCED MOTION ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ───────────────────────── 32. PRINT ───────────────────────── */
@media print {
  .topbar, .hero-scroll-cue, .cart-drawer, .cart-backdrop,
  .checkout-modal, .checkout-backdrop, .auth-modal, .auth-backdrop,
  .item-detail-modal, .item-detail-backdrop, .profile-drawer, .profile-backdrop,
  .order-tracking-modal, .ot-backdrop, .chat-fab, .chat-panel, .chat-backdrop,
  .chat-greeting, .search-overlay, .search-overlay-backdrop, .feedback-modal,
  .feedback-backdrop, .toast-container, .loading-overlay, .broadcast-strip,
  .category-nav, .carousel-nav, .hero-actions, .hero-media, .hero-overlay {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; padding: 24px 0; }
  .hero-title, .hero-tagline, .hero-eyebrow, .hero-meta { color: #000; text-shadow: none; }
  .menu-grid-row { grid-template-columns: repeat(2, 1fr); }
  .menu-card { box-shadow: none; border: 1px solid #ccc; }
  .section { padding: 16px 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEW FEATURES CSS (Task 5-C)
   Language toggle · RTL/Urdu support · Midnight Deals (dark-only)
   Share menu/popover · Print receipt · Glassmorphism polish · A11y
   Appended below — does NOT override base rules unless explicitly extending.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── 5-C.1  LANGUAGE TOGGLE BUTTON (#lang-toggle) ───────────── */
#lang-toggle .lang-icon {
  font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}
#lang-toggle .lang-label { font-size: 0.85rem; font-weight: 600; }
#lang-toggle:hover .lang-icon { transform: rotate(15deg); }
#lang-toggle:active .lang-icon { transform: rotate(0deg); }
@media (max-width: 768px) { #lang-toggle .lang-label { display: none; } }

/* ───────────── 5-C.2  LANGUAGE TRANSITION + RTL SUPPORT ───────────── */

/* Brief opacity/blur transition while language swaps (mirrors .theme-transitioning) */
.lang-transitioning,
.lang-transitioning *,
.lang-transitioning *::before,
.lang-transitioning *::after {
  transition: opacity 0.35s ease, color 0.35s ease, background-color 0.35s ease,
              border-color 0.35s ease !important;
}

/* RTL: flip topbar action order (per spec) */
html[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }

/* RTL: drawer slides in from the LEFT instead of right */
html[dir="rtl"] .drawer {
  right: auto; left: 0;
  transform: translateX(-100%);
  border-left: none; border-right: 1px solid var(--surface-glass-border);
}
html[dir="rtl"] .drawer.open { transform: translateX(0); }
@media (max-width: 640px) {
  /* On mobile the drawer slides up from the bottom — keep that in RTL too */
  html[dir="rtl"] .drawer {
    left: 0; right: 0; width: 100vw;
    transform: translateY(100%);
    border-right: none; border-top: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  html[dir="rtl"] .drawer.open { transform: translateY(0); }
}

/* RTL: flip text alignment for left-aligned content blocks (centered blocks stay centered) */
html[dir="rtl"] .menu-section-header,
html[dir="rtl"] .about-text,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .info-card,
html[dir="rtl"] .deal-card,
html[dir="rtl"] .popular-card,
html[dir="rtl"] .review-card,
html[dir="rtl"] .cart-rec-item { text-align: right; }

/* RTL: flip directional paddings/margins */
html[dir="rtl"] .deal-item { padding-left: 0; padding-right: 14px; }
html[dir="rtl"] .deal-item::before { left: auto; right: 0; }
html[dir="rtl"] .profile-value #profile-gmail-delink,
html[dir="rtl"] .profile-value .btn { margin-left: 0; margin-right: 8px; }

/* RTL: flip absolutely-positioned chips/badges */
html[dir="rtl"] .menu-card-price { left: auto; right: 12px; }
html[dir="rtl"] .deal-badge { right: auto; left: 14px; }
html[dir="rtl"] .cart-count { right: auto; left: -4px; }

/* RTL: search-results dropdown align right */
html[dir="rtl"] .search-results { text-align: right; }
html[dir="rtl"] .search-result-meta { text-align: right; }

/* RTL: broadcast-strip — natural RTL flow flips the close button; ensure it stays left */
html[dir="rtl"] .broadcast-strip { flex-direction: row-reverse; }

/* RTL: chat FAB + greeting + panel on the LEFT side */
html[dir="rtl"] .chat-fab,
html[dir="rtl"] .chat-panel { right: auto; left: 20px; }
html[dir="rtl"] .scroll-top-btn { right: auto; left: 28px; }
html[dir="rtl"] .chat-greeting {
  right: auto; left: 88px;
  transform: translateX(-20px);
}
html[dir="rtl"] .chat-greeting.visible { transform: translateX(0); }
html[dir="rtl"] .chat-greeting::after {
  right: auto; left: -8px;
  border-left-color: transparent;
  border-right-color: var(--surface-strong);
}
@media (max-width: 640px) {
  html[dir="rtl"] .chat-panel { left: 0; right: 0; }
  html[dir="rtl"] .chat-greeting { left: 76px; right: auto; }
}

/* RTL: drawer-entrance keyframe variant */
@keyframes drawer-enter-rtl {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Urdu typography — applied when <html lang="ur"> */
html[lang="ur"] {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaliq', serif;
}
html[lang="ur"] body { line-height: 1.8; }
html[lang="ur"] .brand-name {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaliq', serif;
}

/* ───────────── 5-C.3  MIDNIGHT DEALS SECTION (dark theme only) ───────────── */

/* Hidden by default in light/gradient themes */
#midnight-deals { display: none; }

[data-theme="dark"] #midnight-deals {
  display: block;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a1a 100%);
  border: 1px solid rgba(120, 100, 255, 0.3);
  box-shadow: 0 0 40px rgba(120, 100, 255, 0.15), inset 0 0 60px rgba(120, 100, 255, 0.05);
  border-radius: 20px;
  padding: 2rem;
  margin: 2rem 0;
}

.midnight-deals-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem;
}
.midnight-emoji {
  font-size: 2.5rem; line-height: 1;
  display: inline-block;
  animation: midnight-float 4s ease-in-out infinite;
}
.midnight-title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  background: linear-gradient(90deg, #b39dff 0%, #6d8bff 50%, #b39dff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: midnight-gradient 6s linear infinite;
}
.midnight-subtitle {
  color: rgba(200, 200, 255, 0.7);
  font-size: 0.95rem;
  margin-top: 2px;
}

.midnight-deals-track {
  display: flex; gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 100, 255, 0.6) transparent;
}
.midnight-deals-track::-webkit-scrollbar { height: 6px; }
.midnight-deals-track::-webkit-scrollbar-track { background: transparent; }
.midnight-deals-track::-webkit-scrollbar-thumb {
  background: rgba(120, 100, 255, 0.6);
  border-radius: 3px;
}

.midnight-deal-card {
  position: relative; overflow: hidden;
  min-width: 280px; flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(20, 20, 40, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(120, 100, 255, 0.2);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.midnight-deal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(120, 100, 255, 0.6);
  box-shadow: 0 8px 30px rgba(120, 100, 255, 0.25);
}
.midnight-deal-glow {
  position: absolute; inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(120, 100, 255, 0.18), transparent 60%);
  animation: midnight-glow-pulse 3s ease-in-out infinite;
}
.midnight-deal-badge {
  align-self: flex-start;
  background: rgba(120, 100, 255, 0.2);
  border: 1px solid rgba(120, 100, 255, 0.4);
  color: #c9c9ff;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
}
.midnight-deal-name {
  font-size: 1.2rem; font-weight: 600;
  color: #e8e8ff;
}
.midnight-deal-desc {
  font-size: 0.9rem; line-height: 1.5;
  color: rgba(200, 200, 255, 0.6);
}
.midnight-deal-price {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-top: 4px;
}
.midnight-deal-orig {
  text-decoration: line-through;
  color: rgba(200, 200, 255, 0.4);
  font-size: 0.9rem;
}
.midnight-deal-now {
  font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, #ffb703 0%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes midnight-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes midnight-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes midnight-gradient {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ───────────── 5-C.4  SHARE MENU BUTTON + POPOVER ───────────── */

/* .share-menu-btn inherits .btn.btn-secondary.btn-sm from markup; add hover lift + glyph */
.share-menu-btn {
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.share-menu-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.share-menu-btn:active { transform: translateY(0) scale(0.98); }
.share-menu-btn .share-menu-icon { font-size: 1.05rem; line-height: 1; }

.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 8px;
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--surface-glass-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.share-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* .hidden already sets display:none !important in base; explicit override for clarity */
.share-popover.hidden { display: none; }

.share-option {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.share-option .share-option-icon { font-size: 1.1rem; line-height: 1; }
.share-option:hover { background: rgba(230, 57, 70, 0.12); color: var(--accent); }

.share-whatsapp:hover { background: #25D366; color: #fff; }
.share-twitter:hover  { background: #1DA1F2; color: #fff; }
.share-facebook:hover { background: #1877F2; color: #fff; }
.share-copy:hover     { background: var(--accent); color: #fff; }

/* RTL: flip popover anchor + option alignment */
html[dir="rtl"] .share-popover { right: auto; left: 0; }
html[dir="rtl"] .share-option  { text-align: right; }

/* ───────────── 5-C.5  PRINT RECEIPT BUTTON ───────────── */

.print-receipt-btn {
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.print-receipt-btn .print-icon { font-size: 1.05rem; line-height: 1; }
.print-receipt-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(40, 25, 10, 0.18),
              0 0 0 1px var(--surface-glass-border);
}
.print-receipt-btn:active { transform: translateY(0) scale(0.98); }

/* ───────────── 5-C.6  POLISH: MICRO-INTERACTIONS & GLASS REFINEMENT ───────────── */

/* .glass refinement: subtle top-left light-source highlight (intentional extension) */
.glass { position: relative; }
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.08), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.glass > * { position: relative; z-index: 1; }

/* .menu-card hover: animated gradient border glow (::after) */
.menu-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--gold), var(--accent-2), transparent);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  animation: shimmer-sweep 4s linear infinite;
}
.menu-card:hover::after,
.menu-card:focus-visible::after { opacity: 0.85; }

/* .btn-primary: shine sweep across on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.6s ease;
}
.btn-primary:hover::before { left: 130%; }

/* .icon-btn hover/active polish (intentional extension of base rules) */
.icon-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  background: var(--bg-soft);
}
.icon-btn:active { transform: translateY(0) scale(0.95); }

/* Focus-visible refinement: thicker offset + accent glow ring */
:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.2);
}

/* Smooth scrolling on html (reduced-motion override below) */
html { scroll-behavior: smooth; }

/* Selection already styled in base — re-affirm for new components */
::selection { background: var(--accent); color: #fff; }

/* Modal entrance animation */
@keyframes modal-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal.open .modal-shell {
  animation: modal-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Drawer entrance keyframes (LTR + RTL variants) */
@keyframes drawer-enter {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Shimmer sweep (for menu-card border + reusable) */
@keyframes shimmer-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ───────────── 5-C.7  ACCESSIBILITY ENHANCEMENTS ───────────── */

/* aria-live regions need a positioning context for correct SR announcements */
[aria-live="polite"],
[aria-live="assertive"] { position: relative; }

/* .sr-only already defined in base — extended coverage via attribute selector */
[data-sr-only] {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: disable ALL new animations from Task 5-C */
@media (prefers-reduced-motion: reduce) {
  #lang-toggle:hover .lang-icon { transform: none; }
  .midnight-emoji,
  .midnight-deal-glow,
  .midnight-title { animation: none !important; }
  .menu-card::after { animation: none !important; }
  .btn-primary::before { display: none; }
  .modal.open .modal-shell { animation: none !important; }
  html { scroll-behavior: auto !important; }
  .lang-transitioning,
  .lang-transitioning *,
  .lang-transitioning *::before,
  .lang-transitioning *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MAJOR CSS STYLING IMPROVEMENTS (Task 7-C)
   Shortcuts Help · Quick Reorder · Coins Redemption · Delivery Map
   Glassmorphism Polish · Loading States · A11y · Responsive · Dark/Gradient
   Appended below — does NOT override base rules unless explicitly extending.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── 7-C.1  KEYBOARD SHORTCUTS HELP POPOVER ───────────── */

.shortcuts-popover {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 350;
  min-width: 320px;
  max-width: 420px;
  padding: 20px 24px;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s ease;
}
.shortcuts-popover.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

#shortcuts-help .shortcuts-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text);
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--surface-glass-border);
  box-shadow: 0 2px 0 var(--surface-glass-border), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  flex-shrink: 0;
}
.shortcut-desc {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.shortcuts-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.shortcuts-close:hover {
  background: var(--bg-soft);
  color: var(--text);
}

/* ───────────── 7-C.2  QUICK REORDER STRIP ───────────── */

.reorder-strip {
  position: relative;
  padding: 16px 0;
  margin-top: -1px;
  background: var(--surface-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--surface-glass-border);
  overflow: hidden;
}
.reorder-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  margin-bottom: 10px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.reorder-title .reorder-clock {
  font-size: 1.15rem;
  line-height: 1;
}
.reorder-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.reorder-track::-webkit-scrollbar { height: 4px; }
.reorder-track::-webkit-scrollbar-track { background: transparent; }
.reorder-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.reorder-card {
  flex: 0 0 120px;
  width: 120px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius);
  background: var(--surface-strong);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.reorder-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.reorder-card-image {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-soft);
}
.reorder-card-image.img-fallback {
  background: linear-gradient(135deg, var(--accent), var(--gold));
}
.reorder-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.reorder-card-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}
.reorder-btn {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  min-height: 26px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.reorder-btn:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-sm);
}
.reorder-btn:active {
  transform: scale(0.96);
}

/* Scroll fade gradients on left/right edges */
.reorder-strip::before,
.reorder-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.reorder-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.reorder-strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

#quick-reorder:empty,
#quick-reorder .reorder-track:empty { display: none; }

/* ───────────── 7-C.3  COINS REDEMPTION UI ───────────── */

.coins-section {
  padding: 14px 0;
  border-top: 1px solid var(--surface-glass-border);
}
.coins-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coins-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.coins-balance .coin-emoji {
  font-size: 1.2rem;
  line-height: 1;
}
.coins-balance .coin-value {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Custom styled range slider — golden accent */
.coins-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-soft);
  outline: none;
  transition: background 0.2s ease;
}
.coins-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9c468, #f4a261);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(244, 162, 97, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.coins-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 14px rgba(244, 162, 97, 0.6);
}
.coins-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9c468, #f4a261);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(244, 162, 97, 0.4);
  cursor: pointer;
}
.coins-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.3);
}

.coins-discount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--success);
  font-weight: 600;
}
.coins-discount .discount-amount {
  color: var(--gold);
  font-weight: 700;
}

/* Toggle switch */
.coins-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.coins-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--surface-glass-border);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.coins-toggle-switch.active {
  background: linear-gradient(135deg, #f4a261, #e9c468);
  border-color: transparent;
}
.coins-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.coins-toggle-switch.active::after {
  transform: translateX(20px);
}

/* ───────────── 7-C.4  DELIVERY MAP SVG SECTION ───────────── */

.delivery-map-section {
  padding: clamp(32px, 6vw, 64px) 0;
  text-align: center;
}
#delivery-map {
  position: relative;
  display: inline-block;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
#delivery-map svg {
  width: 100%;
  height: auto;
  display: block;
}
.map-zone {
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.map-zone:hover {
  transform: scale(1.08);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(230, 57, 70, 0.4));
}
.map-zone-label {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  fill: var(--text);
  pointer-events: none;
  text-anchor: middle;
}
.map-tooltip {
  position: absolute;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow);
  font-size: 0.82rem;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  z-index: 10;
}
.map-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.map-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Map zone color classes (center=green/free, outer=warm→red/expensive) */
.map-zone-free   { fill: rgba(22, 163, 74, 0.35); stroke: var(--success); stroke-width: 2; }
.map-zone-close  { fill: rgba(251, 191, 36, 0.30); stroke: var(--warning); stroke-width: 2; }
.map-zone-mid    { fill: rgba(247, 127, 0, 0.30);  stroke: var(--accent-2); stroke-width: 2; }
.map-zone-far    { fill: rgba(230, 57, 70, 0.30);  stroke: var(--accent);   stroke-width: 2; }

/* ───────────── 7-C.5  ENHANCED GLASSMORPHISM & MICRO-INTERACTIONS ───────────── */

/* .glass shimmer sweep on hover (::after pseudo-element) */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease, background-position 0.5s ease;
}
.glass:hover::after {
  opacity: 1;
  background-position: -50% 0;
}

/* .menu-card enhanced hover: lift + stronger shadow + border glow */
.menu-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(230, 57, 70, 0.15);
  border-color: rgba(230, 57, 70, 0.25);
}

/* .deal-card enhanced hover: scale + glow pulse */
.deal-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(230, 57, 70, 0.15);
}
@keyframes deal-glow-pulse {
  0%, 100% { box-shadow: var(--shadow), 0 0 8px rgba(230, 57, 70, 0.1); }
  50%      { box-shadow: var(--shadow-lg), 0 0 24px rgba(230, 57, 70, 0.25); }
}
.deal-card:hover {
  animation: deal-glow-pulse 2s ease-in-out infinite;
}

/* .btn-primary:active — press-down effect */
.btn-primary:not(:disabled):active {
  transform: scale(0.97);
  box-shadow: var(--shadow-sm);
}

/* .category-pill.active — animated underline sweep + background shift */
.category-pill.active {
  background-size: 200% 200%;
  animation: category-active-sweep 6s ease infinite;
}
.category-pill.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: width 0.3s ease, left 0.3s ease;
}
.category-pill.active::after {
  width: 60%;
  left: 20%;
}
@keyframes category-active-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* .cart-item — slide-in animation when added */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.cart-item {
  animation: slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .toast — refined entrance with spring-like bounce */
@keyframes toast-enter {
  0%   { opacity: 0; transform: translateX(100%) scale(0.9); }
  60%  { opacity: 1; transform: translateX(-4px) scale(1.02); }
  80%  { transform: translateX(2px) scale(0.99); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.toast.toast-visible {
  animation: toast-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* .modal.open .modal-shell — scale from 0.95 to 1 + opacity */
.modal.open .modal-shell {
  animation: modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* .drawer.open — smoother slide with cubic-bezier easing */
.drawer {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Hero section — subtle parallax-ready background-size animation */
.hero-media {
  animation: hero-parallax-bg 30s ease-in-out infinite alternate;
}
@keyframes hero-parallax-bg {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

/* Topbar — enhanced glass blur on scroll */
.topbar.scrolled .topbar-inner {
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow);
}

/* .reveal.visible — refined entrance: fadeInUp with subtle scale */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ───────────── 7-C.6  PREMIUM LOADING STATES ───────────── */

/* Improved shimmer animation — gradient sweep, more refined */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.menu-card-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-strong);
  border: 1px solid var(--surface-glass-border);
  padding: 16px;
}
.menu-card-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
  pointer-events: none;
}
.menu-card-skeleton .skeleton-image {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  margin-bottom: 12px;
}
.menu-card-skeleton .skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: var(--bg-soft);
  margin-bottom: 8px;
}
.menu-card-skeleton .skeleton-line:last-child {
  width: 60%;
  margin-bottom: 0;
}
.menu-card-skeleton .skeleton-line.short {
  width: 40%;
}
.menu-card-skeleton .skeleton-price {
  height: 20px;
  width: 30%;
  border-radius: 10px;
  background: var(--bg-soft);
  margin-top: 8px;
}

/* Softer, more organic skeleton pulse */
.skeleton-pulse {
  animation: skeleton-organic-pulse 2.5s ease-in-out infinite;
}
@keyframes skeleton-organic-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* ───────────── 7-C.7  ENHANCED FOCUS & ACCESSIBILITY STYLES ───────────── */

/* :focus-visible — subtle glow ring animation (pulse glow) */
@keyframes focus-glow-ring {
  0%, 100% { box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.15); }
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  animation: focus-glow-ring 1.5s ease-in-out infinite;
}

/* .sr-only utility (already in base — extended with explicit class for new components) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* aria-live regions — positioning contexts */
[aria-live="polite"],
[aria-live="assertive"] {
  position: relative;
  isolation: isolate;
}

/* ───────────── 7-C.8  RESPONSIVE ENHANCEMENTS ───────────── */

/* Mobile: reorder strip → 2-row grid */
@media (max-width: 640px) {
  .reorder-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 10px;
  }
  .reorder-card {
    flex: none;
    width: auto;
  }

  /* Mobile: shortcuts popover full width with rounded corners */
  .shortcuts-popover {
    left: 12px;
    right: 12px;
    transform: translateY(-12px);
    min-width: auto;
    max-width: none;
    width: auto;
    border-radius: var(--radius-lg);
  }
  .shortcuts-popover.open {
    transform: translateY(0);
  }

  /* Mobile: coins section compact layout */
  .coins-row {
    gap: 8px;
  }
  .coins-slider {
    height: 4px;
  }
  .coins-toggle {
    font-size: 0.78rem;
  }
  .coins-toggle-switch {
    width: 38px;
    height: 20px;
  }
  .coins-toggle-switch::after {
    width: 14px;
    height: 14px;
  }
  .coins-toggle-switch.active::after {
    transform: translateX(16px);
  }

  /* Mobile: delivery map scales down */
  #delivery-map {
    max-width: 100%;
  }
  .map-legend {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Tablet (768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .shortcuts-popover {
    min-width: 280px;
    max-width: 380px;
  }
  .reorder-card {
    flex: 0 0 110px;
    width: 110px;
  }
  .coins-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  #delivery-map {
    max-width: 500px;
  }
}

/* ───────────── 7-C.9  DARK MODE ENHANCEMENTS ───────────── */

[data-theme="dark"] .shortcuts-popover {
  background: rgba(20, 18, 28, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .shortcut-key {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text);
}

[data-theme="dark"] .reorder-strip {
  background: rgba(20, 18, 28, 0.7);
}
[data-theme="dark"] .reorder-card {
  background: rgba(28, 26, 34, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Midnight Deals: enhanced glow in dark mode (purple pulsing border) */
[data-theme="dark"] #midnight-deals {
  border-color: rgba(120, 100, 255, 0.5);
  animation: midnight-border-pulse 4s ease-in-out infinite;
}
@keyframes midnight-border-pulse {
  0%, 100% { border-color: rgba(120, 100, 255, 0.3); box-shadow: 0 0 40px rgba(120, 100, 255, 0.15), inset 0 0 60px rgba(120, 100, 255, 0.05); }
  50%      { border-color: rgba(120, 100, 255, 0.65); box-shadow: 0 0 60px rgba(120, 100, 255, 0.3), inset 0 0 80px rgba(120, 100, 255, 0.08); }
}

/* Coins UI: golden glow accent in dark mode */
[data-theme="dark"] .coins-slider::-webkit-slider-thumb {
  box-shadow: 0 2px 14px rgba(244, 162, 97, 0.6), 0 0 8px rgba(233, 196, 104, 0.3);
}
[data-theme="dark"] .coins-toggle-switch.active {
  box-shadow: 0 0 12px rgba(244, 162, 97, 0.4);
}
[data-theme="dark"] .coins-balance .coin-value {
  text-shadow: 0 0 10px rgba(244, 162, 97, 0.4);
}

/* Delivery map: dark surface background for the SVG */
[data-theme="dark"] #delivery-map {
  background: rgba(20, 18, 28, 0.5);
  border-radius: var(--radius-lg);
  padding: 16px;
}
[data-theme="dark"] .map-tooltip {
  background: rgba(28, 26, 34, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Dark mode glass shimmer adjustments */
[data-theme="dark"] .glass::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 100%;
}

/* Dark mode menu-card border glow */
[data-theme="dark"] .menu-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(230, 57, 70, 0.3), 0 0 20px rgba(230, 57, 70, 0.1);
}

/* Dark mode skeleton */
[data-theme="dark"] .menu-card-skeleton::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 30%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.02) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
}

/* ───────────── 7-C.10  GRADIENT THEME ENHANCEMENTS ───────────── */

[data-theme="gradient"] .shortcuts-popover {
  background: rgba(40, 30, 60, 0.75);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(230, 57, 70, 0.1);
}
[data-theme="gradient"] .shortcut-key {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="gradient"] .reorder-strip {
  background: rgba(40, 30, 60, 0.65);
}
[data-theme="gradient"] .reorder-card {
  background: rgba(34, 28, 50, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="gradient"] .coins-slider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #ffd166, #ffb703);
  box-shadow: 0 2px 14px rgba(255, 209, 102, 0.5);
}
[data-theme="gradient"] .coins-toggle-switch.active {
  background: linear-gradient(135deg, #ffb703, #ffd166);
  box-shadow: 0 0 14px rgba(255, 183, 3, 0.4);
}
[data-theme="gradient"] .coins-balance .coin-value {
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.4);
}

[data-theme="gradient"] #delivery-map {
  background: rgba(40, 30, 60, 0.5);
  border-radius: var(--radius-lg);
  padding: 16px;
}
[data-theme="gradient"] .map-tooltip {
  background: rgba(34, 28, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(230, 57, 70, 0.15);
}

/* Gradient theme glass shimmer */
[data-theme="gradient"] .glass::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 100%;
}

/* Gradient theme menu-card glow */
[data-theme="gradient"] .menu-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(230, 57, 70, 0.25), 0 0 30px rgba(230, 57, 70, 0.15);
}

/* Gradient theme skeleton */
[data-theme="gradient"] .menu-card-skeleton::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 30%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.02) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
}

/* Gradient theme deal card glow */
[data-theme="gradient"] .deal-card:hover {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(230, 57, 70, 0.2), 0 0 60px rgba(247, 127, 0, 0.1);
}

/* ───────────── 7-C.11  REDUCED MOTION (new animations) ───────────── */

@media (prefers-reduced-motion: reduce) {
  /* Shortcuts popover */
  .shortcuts-popover { transition-duration: 0.01ms !important; }

  /* Reorder cards */
  .reorder-card { transition-duration: 0.01ms !important; }
  .reorder-btn { transition-duration: 0.01ms !important; }

  /* Coins slider/toggle */
  .coins-slider::-webkit-slider-thumb { transition-duration: 0.01ms !important; }
  .coins-toggle-switch,
  .coins-toggle-switch::after { transition-duration: 0.01ms !important; }

  /* Map zones */
  .map-zone { transition-duration: 0.01ms !important; }

  /* Glass shimmer */
  .glass::after { display: none; }

  /* Menu card / deal card hover */
  .menu-card { transition-duration: 0.01ms !important; }
  .menu-card:hover { animation: none !important; transform: none; }
  .deal-card:hover { animation: none !important; transform: none; }

  /* Category pill */
  .category-pill.active { animation: none !important; }

  /* Cart item slide-in */
  .cart-item { animation: none !important; }

  /* Toast bounce */
  .toast.toast-visible { animation: none !important; }

  /* Modal scale-in */
  .modal.open .modal-shell { animation: none !important; }

  /* Hero parallax */
  .hero-media { animation: none !important; }

  /* Reveal entrance */
  .reveal { transform: none; transition-duration: 0.01ms !important; }
  .reveal.visible { transform: none; }

  /* Skeleton shimmer */
  .menu-card-skeleton::before { animation: none !important; }
  .skeleton-pulse { animation: none !important; }

  /* Focus glow ring */
  :focus-visible { animation: none !important; }

  /* Midnight border pulse */
  [data-theme="dark"] #midnight-deals { animation: none !important; }

  /* Deal glow pulse */
  .deal-card:hover { animation: none !important; }

  /* Drawer smooth slide */
  .drawer { transition-duration: 0.01ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   7-B ADDITIONS — Keyboard Shortcuts · Quick Reorder · Coins · Delivery Map
   Styles for the JS modules created in task 7-b.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── 7-B.1  KEYBOARD SHORTCUTS HELP POPOVER (#shortcuts-help) ─── */

.shortcuts-btn {
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shortcuts-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

#shortcuts-help {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 350;
  min-width: 300px;
  max-width: 420px;
  padding: 20px 24px;
  background: var(--surface-glass, rgba(255,255,255,0.92));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--surface-glass-border, rgba(0,0,0,0.1));
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#shortcuts-help.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.shortcuts-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.shortcuts-help-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #1f2937);
}
.shortcuts-help-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-mute, #9ca3af);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.shortcuts-help-close:hover {
  background: var(--bg-soft, #f3f4f6);
  color: var(--text, #1f2937);
}

.shortcuts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shortcut-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-glass-border, rgba(0,0,0,0.06));
}
.shortcut-item:last-child {
  border-bottom: none;
}

.kbd-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg-soft, #f3f4f6);
  border: 1px solid var(--surface-glass-border, rgba(0,0,0,0.12));
  box-shadow: 0 2px 0 var(--surface-glass-border, rgba(0,0,0,0.1)), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text, #1f2937);
  line-height: 1;
  flex-shrink: 0;
}
.kbd-plus {
  font-size: 0.7rem;
  color: var(--text-mute, #9ca3af);
  margin: 0 2px;
}
.shortcut-desc {
  font-size: 0.88rem;
  color: var(--text-soft, #6b7280);
}

.shortcuts-help-hint {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-mute, #9ca3af);
  font-style: italic;
}

/* ───────────── 7-B.2  QUICK REORDER STRIP (#quick-reorder) ─── */

.quick-reorder {
  padding: 16px 0;
  margin-top: -1px;
  background: var(--surface-glass, rgba(255,255,255,0.92));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--surface-glass-border, rgba(0,0,0,0.06));
  overflow: hidden;
}
.quick-reorder.hidden { display: none; }

.reorder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  margin-bottom: 10px;
}
.reorder-icon {
  font-size: 1.15rem;
  line-height: 1;
}
.reorder-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #1f2937);
}

.quick-reorder .reorder-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #e63946) transparent;
}
.quick-reorder .reorder-track::-webkit-scrollbar { height: 4px; }
.quick-reorder .reorder-track::-webkit-scrollbar-track { background: transparent; }
.quick-reorder .reorder-track::-webkit-scrollbar-thumb { background: var(--accent, #e63946); border-radius: 2px; }

.quick-reorder .reorder-card {
  flex: 0 0 120px;
  width: 120px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--surface-strong, #fff);
  border: 1px solid var(--surface-glass-border, rgba(0,0,0,0.08));
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quick-reorder .reorder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.reorder-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-soft, #f3f4f6);
}
.reorder-img.img-fallback {
  background: linear-gradient(135deg, var(--accent, #e63946), var(--gold, #f4a261));
}

.reorder-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.reorder-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text, #1f2937);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.reorder-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, #e63946);
}

.quick-reorder .reorder-btn {
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent, #e63946), var(--accent-2, #f4a261));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  min-height: 26px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.quick-reorder .reorder-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
}
.quick-reorder .reorder-btn:active {
  transform: scale(0.96);
}

/* ───────────── 7-B.3  COINS REDEMPTION ROW IN CART ─── */

#coins-row {
  padding: 10px 0;
  border-top: 1px solid var(--surface-glass-border, rgba(0,0,0,0.06));
}
#coins-row.hidden { display: none; }

.coins-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.coins-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}
.coins-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.coins-balance {
  font-size: 0.82rem;
  color: var(--text-soft, #6b7280);
}
.coins-balance-value {
  font-weight: 700;
  color: var(--gold, #f4a261);
}

.coins-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coins-slider-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}
.coins-value {
  font-weight: 700;
  color: var(--gold, #f4a261);
  min-width: 20px;
  text-align: right;
}
.coins-of {
  color: var(--text-mute, #9ca3af);
}
.coins-discount {
  color: var(--success, #16a34a);
  font-weight: 600;
  margin-left: auto;
}
.coins-max-info {
  font-size: 0.72rem;
  color: var(--text-mute, #9ca3af);
}

.coin-discount-line {
  color: var(--success, #16a34a);
}
.coin-discount-value {
  font-weight: 600;
}

/* ───────────── 7-B.4  DELIVERY MAP TOOLTIP ─── */

#map-tooltip {
  position: fixed;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface-strong, #fff);
  border: 1px solid var(--surface-glass-border, rgba(0,0,0,0.1));
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  font-size: 0.82rem;
  color: var(--text, #1f2937);
  pointer-events: none;
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.2s ease;
}
#map-tooltip.hidden {
  opacity: 0;
}
.map-tooltip-name {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}
.map-tooltip-charge {
  display: block;
  font-size: 0.78rem;
  color: var(--accent, #e63946);
  font-weight: 600;
}

/* Map zone selected state */
.map-zone.selected {
  stroke-width: 3;
  filter: brightness(1.3) drop-shadow(0 0 12px rgba(230, 57, 70, 0.5));
}

/* Map legend items */
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.map-legend-item:hover {
  opacity: 0.7;
}
.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-legend-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}
.map-legend-charge {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #e63946);
  margin-left: auto;
}

/* ───────────── 7-B.5  RESPONSIVE ─── */

@media (max-width: 640px) {
  #shortcuts-help {
    left: 12px;
    right: 12px;
    min-width: auto;
    max-width: none;
    width: auto;
    transform: translateY(-12px);
  }
  #shortcuts-help.visible {
    transform: translateY(0);
  }

  .quick-reorder .reorder-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .quick-reorder .reorder-card {
    flex: none;
    width: auto;
  }

  #coins-row {
    padding: 8px 0;
  }
}

/* ───────────── 7-B.6  DARK / GRADIENT THEME ─── */

[data-theme="dark"] #shortcuts-help {
  background: rgba(20, 18, 28, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .kbd-key {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e5e7eb;
}
[data-theme="dark"] .quick-reorder {
  background: rgba(20, 18, 28, 0.75);
}
[data-theme="dark"] .quick-reorder .reorder-card {
  background: rgba(28, 26, 34, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] #map-tooltip {
  background: rgba(28, 26, 34, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="gradient"] #shortcuts-help {
  background: rgba(40, 30, 60, 0.8);
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="gradient"] .kbd-key {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="gradient"] .quick-reorder {
  background: rgba(40, 30, 60, 0.7);
}
[data-theme="gradient"] .quick-reorder .reorder-card {
  background: rgba(34, 28, 50, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="gradient"] #map-tooltip {
  background: rgba(34, 28, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ───────────── 7-B.7  REDUCED MOTION ─── */

@media (prefers-reduced-motion: reduce) {
  #shortcuts-help { transition-duration: 0.01ms !important; }
  .quick-reorder .reorder-card { transition-duration: 0.01ms !important; }
  .quick-reorder .reorder-btn { transition-duration: 0.01ms !important; }
  .map-zone { transition-duration: 0.01ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 9-B — Major CSS Polish + Extended i18n
   Order Tracking Pill · Touch Gestures · Progressive Images
   Topbar Scroll · Hero Parallax · Footer Polish
   Checkout Flow · Micro-interactions · Dark/Gradient/Reduced Motion
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── 9-B.1  ORDER TRACKING PILL ───────────── */

.order-poll-pill {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow), 0 0 20px rgba(230, 57, 70, 0.12);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.4s ease;
  white-space: nowrap;
  max-width: 90vw;
}
.order-poll-pill:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(230, 57, 70, 0.2);
}
.order-poll-pill:active {
  transform: translateX(-50%) translateY(0) scale(0.98);
}
.order-poll-pill.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.order-poll-bar {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.order-poll-bar::after {
  content: '';
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  width: var(--poll-progress, 0%);
  transition: width 0.4s ease;
}

.order-poll-steps {
  display: flex;
  align-items: center;
  gap: 4px;
}
.order-poll-step {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1.5px solid var(--text-mute);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.order-poll-step.reached {
  background: var(--accent);
  border-color: var(--accent);
}
.order-poll-step.reached + .order-poll-step-line {
  background: var(--accent);
}
.order-poll-step-line {
  width: 12px;
  height: 2px;
  background: var(--text-mute);
  border-radius: 1px;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.order-poll-eta {
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}

.order-poll-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.order-poll-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-mute);
  animation: poll-dot-bounce 1.4s ease-in-out infinite;
}
.order-poll-dots span:nth-child(2) { animation-delay: 0.2s; }
.order-poll-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes poll-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.order-poll-pill.pulse {
  animation: poll-pill-pulse 0.5s ease;
}
@keyframes poll-pill-pulse {
  0%   { box-shadow: var(--shadow), 0 0 20px rgba(230, 57, 70, 0.12); }
  50%  { box-shadow: var(--shadow-lg), 0 0 40px rgba(230, 57, 70, 0.35); }
  100% { box-shadow: var(--shadow), 0 0 20px rgba(230, 57, 70, 0.12); }
}

/* ───────────── 9-B.2  TOUCH GESTURE INDICATORS ───────────── */

.swipe-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent), rgba(230, 57, 70, 0));
  z-index: 5;
  pointer-events: none;
  transition: width 0.15s ease;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.swipe-indicator.active {
  width: 60px;
}

.pull-refresh-indicator {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  color: var(--text-soft);
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  pointer-events: none;
}
.pull-refresh-indicator.visible {
  top: 80px;
}
.pull-refresh-indicator .pull-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--surface-glass-border);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

.cart-item-swipe-remove {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--error);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-item-swipe-remove:hover {
  background: #b91c1c;
}

/* ───────────── 9-B.3  PROGRESSIVE IMAGE LOADING ───────────── */

.img-loading {
  opacity: 0.6;
  filter: blur(6px) saturate(0.6);
  transform: scale(1.03);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.img-loaded {
  opacity: 1;
  filter: none;
  transform: scale(1);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.img-fade-in {
  animation: img-fade-in-keyframes 0.4s ease forwards;
}
@keyframes img-fade-in-keyframes {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.img-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--bg-soft);
  color: var(--text-mute);
  font-size: 2rem;
  border-radius: var(--radius-sm);
  position: relative;
}
.img-error::before {
  content: '🖼';
  font-size: 2.2rem;
  opacity: 0.5;
}

/* ───────────── 9-B.4  ENHANCED TOPBAR SCROLL EFFECT ───────────── */

.topbar {
  transition: padding 0.3s ease;
}
.topbar.scrolled {
  padding: 2px 0;
}
.topbar.scrolled .topbar-inner {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow);
  border-bottom: 1px solid var(--surface-glass-border);
  transition: backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease;
}
.topbar.scrolled .brand-name {
  font-size: 0.92rem;
  transition: font-size 0.25s ease;
}
.topbar.scrolled .search-box {
  padding: 4px 12px;
  transition: padding 0.25s ease;
}

/* ───────────── 9-B.5  HERO PARALLAX-READY EFFECT ───────────── */

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: hero-zoom 25s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes hero-zoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero.parallax .hero-content {
  animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ───────────── 9-B.6  FOOTER POLISH ───────────── */

.footer {
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--surface-glass-border);
  padding: clamp(32px, 5vw, 56px) 0 24px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
    align-items: flex-start;
    gap: 32px;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-tag {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.footer-links a {
  font-size: 0.88rem;
  color: var(--text-soft);
  position: relative;
  transition: color 0.2s ease;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.footer-links a:hover {
  color: var(--text);
}
.footer-links a:hover::after {
  width: 100%;
}

.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a,
.footer-social button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: 1rem;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover,
.footer-social button:hover {
  transform: scale(1.12);
  background: var(--accent);
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 0.78rem;
  color: var(--text-mute);
}
.footer-copy {
  font-size: 0.78rem;
  color: var(--text-mute);
  text-align: center;
  width: 100%;
}
.footer-powered {
  color: var(--text-mute);
  opacity: 0.7;
}

/* ───────────── 9-B.7  CHECKOUT FLOW ENHANCEMENT ───────────── */

.checkout-step.active {
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.12), var(--shadow-sm);
  animation: checkout-step-pulse 2s ease-in-out infinite;
}
@keyframes checkout-step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.12), var(--shadow-sm); }
  50%      { box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.2), var(--shadow); }
}

.checkout-step.completed {
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: var(--radius-sm);
  opacity: 0.7;
}
.checkout-step.completed::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}

.checkout-progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 16px;
}
.checkout-progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent-2));
  background-size: 200% 100%;
  width: var(--checkout-progress, 0%);
  animation: checkout-progress-shimmer 3s ease infinite;
  transition: width 0.4s ease;
}
@keyframes checkout-progress-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.checkout-step {
  transition: opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}

/* ───────────── 9-B.8  MORE MICRO-INTERACTIONS ───────────── */

.btn-secondary:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(230, 57, 70, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-pill:hover {
  background-color: rgba(230, 57, 70, 0.08);
  transform: scale(1.03);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.deal-card:hover .deal-badge {
  animation: deal-badge-bounce 0.4s ease;
}
@keyframes deal-badge-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.menu-card:hover .menu-card-name {
  color: var(--accent);
  transition: color 0.2s ease;
}

.toast:hover {
  transform: translateX(0) translateY(-2px);
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scroll-top-btn {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  right: 28px;
  z-index: 190;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: var(--shadow-lg);
}
.scroll-top-btn:active {
  transform: translateY(0) scale(0.95);
}

/* ───────────── 9-B.9  DARK MODE VARIANTS ───────────── */

[data-theme="dark"] .order-poll-pill {
  background: rgba(20, 18, 28, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(230, 57, 70, 0.15);
}
[data-theme="dark"] .order-poll-pill:hover {
  box-shadow: var(--shadow-lg), 0 0 40px rgba(230, 57, 70, 0.25);
}

[data-theme="dark"] .pull-refresh-indicator {
  background: rgba(20, 18, 28, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .img-error {
  background: rgba(20, 18, 28, 0.6);
}

[data-theme="dark"] .topbar.scrolled .topbar-inner {
  box-shadow: var(--shadow-lg);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .footer {
  background: rgba(14, 13, 16, 0.85);
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .checkout-step.active {
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.2), var(--shadow);
}
[data-theme="dark"] .checkout-step.completed {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.25);
}

[data-theme="dark"] .scroll-top-btn {
  box-shadow: var(--shadow-lg), 0 0 20px rgba(230, 57, 70, 0.2);
}

[data-theme="dark"] .toast:hover {
  box-shadow: var(--shadow-lg), 0 0 12px rgba(230, 57, 70, 0.1);
}

/* ───────────── 9-B.10  GRADIENT THEME VARIANTS ───────────── */

[data-theme="gradient"] .order-poll-pill {
  background: rgba(40, 30, 60, 0.75);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(230, 57, 70, 0.18);
}

[data-theme="gradient"] .pull-refresh-indicator {
  background: rgba(40, 30, 60, 0.75);
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="gradient"] .img-error {
  background: rgba(40, 30, 60, 0.5);
}

[data-theme="gradient"] .topbar.scrolled .topbar-inner {
  box-shadow: var(--shadow-lg), 0 0 20px rgba(230, 57, 70, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="gradient"] .footer {
  background: rgba(13, 11, 20, 0.8);
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="gradient"] .footer-name {
  background: linear-gradient(135deg, #ff5868, #ffd166);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="gradient"] .checkout-step.active {
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.25), var(--shadow-lg);
}

[data-theme="gradient"] .checkout-step.completed {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.3);
}

[data-theme="gradient"] .scroll-top-btn {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(230, 57, 70, 0.25);
}

[data-theme="gradient"] .toast:hover {
  box-shadow: var(--shadow-lg), 0 0 20px rgba(230, 57, 70, 0.15);
}

/* ───────────── 9-B.11  REDUCED MOTION (disable ALL new animations) ───────────── */

@media (prefers-reduced-motion: reduce) {
  /* Order tracking pill */
  .order-poll-pill { transition-duration: 0.01ms !important; }
  .order-poll-pill.pulse { animation: none !important; }
  .order-poll-dots span { animation: none !important; }
  .order-poll-bar::after { transition-duration: 0.01ms !important; }
  .order-poll-pill.fade-out { transition-duration: 0.01ms !important; }

  /* Touch gestures */
  .swipe-indicator { transition-duration: 0.01ms !important; }
  .pull-refresh-indicator { transition-duration: 0.01ms !important; }
  .pull-refresh-indicator .pull-spinner { animation: none !important; }

  /* Progressive images */
  .img-loading { transition-duration: 0.01ms !important; filter: none; transform: none; }
  .img-loaded { transition-duration: 0.01ms !important; }
  .img-fade-in { animation: none !important; }

  /* Topbar scroll */
  .topbar { transition-duration: 0.01ms !important; }
  .topbar.scrolled .topbar-inner { transition-duration: 0.01ms !important; }
  .topbar.scrolled .brand-name { transition-duration: 0.01ms !important; }
  .topbar.scrolled .search-box { transition-duration: 0.01ms !important; }

  /* Hero parallax */
  .hero-bg { animation: none !important; }
  .hero.parallax .hero-content { animation: none !important; }
  @keyframes hero-zoom { 0%, 100% { transform: none; } }
  @keyframes hero-float { 0%, 100% { transform: none; } }

  /* Footer */
  .footer-links a::after { transition-duration: 0.01ms !important; }
  .footer-social a, .footer-social button { transition-duration: 0.01ms !important; }

  /* Checkout flow */
  .checkout-step { transition-duration: 0.01ms !important; }
  .checkout-step.active { animation: none !important; }
  .checkout-progress-bar::after { animation: none !important; transition-duration: 0.01ms !important; }

  /* Micro-interactions */
  .btn-secondary:not(:disabled):hover { transform: none; transition-duration: 0.01ms !important; }
  .category-pill:hover { transform: none; transition-duration: 0.01ms !important; }
  .deal-card:hover .deal-badge { animation: none !important; }
  .menu-card:hover .menu-card-name { transition-duration: 0.01ms !important; }
  .toast:hover { transform: none; transition-duration: 0.01ms !important; }

  /* Scroll-to-top */
  .scroll-top-btn { transition-duration: 0.01ms !important; }
  .scroll-top-btn:hover { transform: none; }

  /* Poll dot bounce */
  @keyframes poll-dot-bounce { 0%, 100% { transform: none; opacity: 1; } }

  /* Checkout step pulse */
  @keyframes checkout-step-pulse { 0%, 100% { box-shadow: var(--shadow-sm); } }

  /* Checkout progress shimmer */
  @keyframes checkout-progress-shimmer { 0%, 100% { background-position: 0% 50%; } }

  /* Deal badge bounce */
  @keyframes deal-badge-bounce { 0%, 100% { transform: none; } }
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 11 — CSS POLISH ROUND 3 + URDU WEB FONT (Task 11-a)
   Append-only enhancement layer. Existing rules are NOT modified.
   All rules below layer on top of / extend prior styles.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── 11.1  URDU WEB FONT (@font-face self-hosted via gstatic) ───────────── */

@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/notonastaliqurdu/v51/LhWlMVjOatLergRt7YY3qKA4LwV6uSzy2vv-7u4.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D, U+25CC;
}

/* Apply Urdu font when html is set to Urdu / RTL — defensive even though i18n.js
   sets an inline font stack, this ensures the font loads via @font-face. */
html[lang="ur"],
html[dir="rtl"] body {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaliq', serif;
  line-height: 2.0;
}

/* Headings & key brand elements use Nastaliq in RTL mode */
html[dir="rtl"] .brand-name,
html[dir="rtl"] .topbar-brand-name,
html[dir="rtl"] .menu-card-name,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .deal-name,
html[dir="rtl"] .info-title {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaliq', serif;
  line-height: 1.9;
  font-weight: 600;
}

html[lang="ur"] .btn,
html[lang="ur"] input,
html[lang="ur"] textarea,
html[lang="ur"] select,
html[lang="ur"] .cart-item-name,
html[lang="ur"] .toast-message,
html[lang="ur"] .menu-card-desc,
html[lang="ur"] .deal-desc {
  line-height: 1.8;
}

/* Urdu descenders need more vertical breathing room */
html[lang="ur"] .menu-card-body,
html[lang="ur"] .cart-item-info,
html[lang="ur"] .hero-content,
html[lang="ur"] .info-card,
html[lang="ur"] .deal-card {
  gap: 6px;
}

html[lang="ur"] .section-title { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
html[lang="ur"] .hero-title    { font-size: clamp(2.2rem, 6.5vw, 4.4rem); line-height: 1.7; }
html[lang="ur"] .menu-card-name { font-size: 1.1rem; }

/* RTL directional corrections for icons/arrows */
html[dir="rtl"] .menu-card-add .menu-card-add-icon { transform: scaleX(-1); }
html[dir="rtl"] .hero .hero-scroll-cue { right: 50%; left: auto; transform: translateX(50%); }

/* ───────────── 11.2  HERO POLISH (round 2) ───────────── */

/* Animated gradient mesh background behind hero content */
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(600px 400px at 20% 30%, rgba(230, 57, 70, 0.35), transparent 60%),
    radial-gradient(500px 350px at 80% 60%, rgba(247, 127, 0, 0.30), transparent 60%),
    radial-gradient(450px 300px at 50% 90%, rgba(244, 162, 97, 0.25), transparent 60%);
  filter: blur(40px);
  opacity: 0.55;
  animation: hero-mesh-shift 18s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes hero-mesh-shift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.55; }
  33%      { transform: translate3d(-4%, 2%, 0) scale(1.06); opacity: 0.7; }
  66%      { transform: translate3d(3%, -2%, 0) scale(1.04); opacity: 0.6; }
}

/* Hero eyebrow — border + glow on entrance */
.hero .hero-eyebrow {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
  animation: hero-eyebrow-glow 1.4s ease-out 0.2s both;
}

@keyframes hero-eyebrow-glow {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
  60%  { opacity: 1; transform: translateY(0) scale(1);      box-shadow: 0 0 30px 6px rgba(230, 57, 70, 0.45); }
  100% { opacity: 1; transform: none;                       box-shadow: 0 0 12px 0 rgba(230, 57, 70, 0.18); }
}

/* Hero title — shimmering text gradient */
.hero .hero-title {
  background: linear-gradient(110deg,
    #ffffff 0%, var(--amber) 25%, #ffffff 50%, var(--accent) 75%, #ffffff 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: hero-title-shimmer 6s linear infinite;
}

@keyframes hero-title-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 250% 0; }
}

/* Fallback for browsers without background-clip:text */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero .hero-title {
    color: #ffffff;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    background: none;
  }
}

/* Hero CTA buttons — sweeping highlight effect on hover */
.hero .btn { position: relative; overflow: hidden; }
.hero .btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero .btn:hover::after { left: 120%; }

/* Hero stats badges — lift + glow on hover, stagger entrance */
.hero .hero-meta > * {
  animation: hero-meta-in 0.6s ease-out both;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero .hero-meta > *:nth-child(1) { animation-delay: 0.5s; }
.hero .hero-meta > *:nth-child(2) { animation-delay: 0.65s; }
.hero .hero-meta > *:nth-child(3) { animation-delay: 0.8s; }

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

.hero .hero-meta > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.25), 0 0 18px rgba(247, 127, 0, 0.18);
}

/* Hero scroll cue — bouncing chevron (enhance existing) */
.hero .hero-scroll-cue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: bob 2s ease-in-out infinite, hero-cue-pulse 3s ease-in-out infinite;
}
@keyframes hero-cue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

/* ───────────── 11.3  MENU CARD POLISH (round 2) ───────────── */

/* Image: zoom-in + subtle rotate on card hover */
.menu-card .menu-image {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
  will-change: transform;
}
.menu-card:hover .menu-image,
.menu-card:focus-visible .menu-image {
  transform: scale(1.08) rotate(1deg);
  filter: saturate(1.1) brightness(1.04);
}

/* Card hover: deeper shadow + slight tilt + accent border glow (pseudo) */
.menu-card { position: relative; isolation: isolate; }
.menu-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
  pointer-events: none;
  transition: box-shadow 0.3s ease;
  z-index: -1;
}
.menu-card:hover::after,
.menu-card:focus-visible::after {
  box-shadow:
    0 18px 50px rgba(40, 25, 10, 0.22),
    0 0 0 2px rgba(230, 57, 70, 0.45),
    0 0 30px rgba(230, 57, 70, 0.18);
}

/* "Choose" / "Add" button — morph into pill on hover + arrow slide */
.menu-card-add {
  position: relative; overflow: hidden;
  padding-right: 38px;
  transition: padding 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease, border-radius 0.25s ease;
}
.menu-card-add::before {
  content: '→';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%) translateX(20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  font-size: 1.05rem; line-height: 1;
}
.menu-card-add:hover {
  padding-right: 44px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow), var(--shadow-glow);
}
.menu-card-add:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.menu-card-add .menu-card-add-icon { transition: transform 0.25s ease; }
.menu-card-add:hover .menu-card-add-icon { transform: rotate(90deg) scale(1.1); }

/* Card entrance — staggered fade-up when revealed */
.menu-grid-row .menu-card.reveal {
  animation: menu-card-stagger 0.6s ease-out both;
}
.menu-grid-row .menu-card.reveal:nth-child(1)  { animation-delay: 0ms; }
.menu-grid-row .menu-card.reveal:nth-child(2)  { animation-delay: 80ms; }
.menu-grid-row .menu-card.reveal:nth-child(3)  { animation-delay: 160ms; }
.menu-grid-row .menu-card.reveal:nth-child(4)  { animation-delay: 240ms; }
.menu-grid-row .menu-card.reveal:nth-child(5)  { animation-delay: 320ms; }
.menu-grid-row .menu-card.reveal:nth-child(6)  { animation-delay: 400ms; }
.menu-grid-row .menu-card.reveal:nth-child(7)  { animation-delay: 480ms; }
.menu-grid-row .menu-card.reveal:nth-child(8)  { animation-delay: 560ms; }

@keyframes menu-card-stagger {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Diagonal ribbon corner badges — Popular / New / Spicy (CSS only) */
.menu-card.ribbon-popular::before,
.menu-card.ribbon-new::before,
.menu-card.ribbon-spicy::before {
  content: attr(data-ribbon-text);
  position: absolute;
  top: 14px; right: -38px;
  z-index: 4;
  padding: 5px 44px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.menu-card.ribbon-popular::before { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.menu-card.ribbon-new::before      { background: linear-gradient(135deg, var(--success), var(--accent-2)); }
.menu-card.ribbon-spicy::before    { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }

/* Default text fallbacks if data-ribbon-text attribute not set */
.menu-card.ribbon-popular:not([data-ribbon-text])::before { content: 'Popular'; }
.menu-card.ribbon-new:not([data-ribbon-text])::before      { content: 'New'; }
.menu-card.ribbon-spicy:not([data-ribbon-text])::before    { content: 'Spicy'; }

/* Gradient overlay on image bottom for price legibility */
.menu-card .menu-card-price {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.menu-card .menu-card-price::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -100%;
  height: 80px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}

/* ───────────── 11.4  DEAL CARD POLISH (round 2) ───────────── */

/* HOT DEAL pulsing badge */
.deal-card .deal-badge {
  animation: hot-deal-pulse 2s ease-in-out infinite;
}
@keyframes hot-deal-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(230, 57, 70, 0),   0 6px 18px rgba(0, 0, 0, 0.25); }
}

/* Gradient border on hover (pseudo-element technique) */
.deal-card { isolation: isolate; }
.deal-card .deal-gradient-border {
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--gold), var(--accent-2), var(--accent));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
  animation: deal-border-flow 4s linear infinite;
}
.deal-card:hover .deal-gradient-border { opacity: 1; }
@keyframes deal-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Deal price — countdown-style digit reveal */
.deal-card .deal-discount-price {
  display: inline-block;
  animation: deal-price-reveal 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes deal-price-reveal {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.85); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(0) scale(1.05);  filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* Card hover: lift + 3D rotateX tilt */
.deal-card:hover {
  transform: translateY(-8px) perspective(900px) rotateX(2deg);
  box-shadow: var(--shadow-lg);
}

/* Background pattern — subtle dot grid */
.deal-card {
  background-image: radial-gradient(rgba(230, 57, 70, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0;
}

/* ───────────── 11.5  TOPBAR POLISH (round 2) ───────────── */

/* Hide-on-scroll (CSS only — JS toggles class) */
.topbar.hide-on-scroll {
  transform: translateY(-110%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.topbar:not(.hide-on-scroll) {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), padding 0.25s ease;
}

/* Search input expand animation on focus */
.search-box {
  transition: max-width 0.3s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.search-box:focus-within {
  max-width: 540px;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15), var(--shadow-sm);
  background: var(--surface-strong);
}
@media (max-width: 768px) {
  .search-box:focus-within { max-width: none; }
}

/* Brand logo — rotate 5deg on hover */
.brand .brand-mark {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover .brand-mark { transform: rotate(5deg) scale(1.08); }

/* Cart button badge bounce when count changes */
.cart-btn.bump .cart-count { animation: cart-badge-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cart-badge-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35) rotate(-8deg); }
  60%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Subtle gradient shimmer line under topbar */
.topbar { position: sticky; }
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(230, 57, 70, 0.4) 25%,
    rgba(247, 127, 0, 0.5) 50%,
    rgba(230, 57, 70, 0.4) 75%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: topbar-shimmer 6s linear infinite;
}
.topbar.scrolled::after { opacity: 0.7; }
@keyframes topbar-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ───────────── 11.6  CART DRAWER POLISH (round 2) ───────────── */

/* Item add — slide-in from right with fade */
.cart-item.cart-item-enter {
  animation: cart-item-slide-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cart-item-slide-in {
  from { opacity: 0; transform: translateX(40px) scale(0.96); max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; transform: translateX(0) scale(1);     max-height: 240px; }
}

/* Item remove — slide-out + collapse */
.cart-item.cart-item-leave {
  animation: cart-item-slide-out 0.35s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
  pointer-events: none;
}
@keyframes cart-item-slide-out {
  from { opacity: 1; transform: translateX(0);   max-height: 240px; margin-top: 0; }
  to   { opacity: 0; transform: translateX(80px); max-height: 0;    margin-top: -12px; padding-top: 0; padding-bottom: 0; }
}

/* Quantity stepper — circular buttons with hover lift */
.cart-item-qty .qty-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-strong);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.cart-item-qty .qty-btn:hover {
  transform: translateY(-2px) scale(1.08);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  box-shadow: var(--shadow), 0 0 12px rgba(230, 57, 70, 0.3);
}
.cart-item-qty .qty-btn:active { transform: scale(0.94); }

/* Sticky checkout button with gradient sweep */
.drawer-foot .btn-primary {
  position: relative; overflow: hidden;
}
.drawer-foot .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: checkout-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes checkout-sweep {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}

/* Empty state — larger spacing, dashed border, animated sad emoji */
.cart-empty {
  padding: 48px 16px;
  border: 2px dashed var(--surface-glass-border);
  border-radius: var(--radius);
  margin: 12px;
}
.cart-empty .cart-empty-icon {
  font-size: 3rem;
  display: inline-block;
  animation: cart-empty-sad 3s ease-in-out infinite;
}
@keyframes cart-empty-sad {
  0%, 100% { transform: rotate(0) translateY(0); }
  25%      { transform: rotate(-6deg) translateY(-3px); }
  75%      { transform: rotate(6deg) translateY(3px); }
}

/* Coins redemption slider — custom styled range input */
.coins-slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--accent));
  outline: none;
  cursor: pointer;
}
.coins-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--accent);
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.5), var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.coins-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 18px rgba(230, 57, 70, 0.7), var(--shadow);
}
.coins-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--accent);
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.5), var(--shadow-sm);
  cursor: pointer;
}

/* ───────────── 11.7  CHECKOUT MODAL POLISH (round 2) ───────────── */

/* Animated progress bar at top — gradient fill + shimmer */
.checkout-modal .modal-shell { position: relative; }
.checkout-modal .checkout-progress-bar {
  position: relative;
  height: 4px;
  background: var(--bg-soft);
  overflow: hidden;
  border-radius: 2px;
}
.checkout-modal .checkout-progress-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--gold));
  background-size: 200% 100%;
  width: var(--progress, 33%);
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: gradient-shift 3s linear infinite;
}
@keyframes checkout-progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Step indicator — pulsing dot on active */
.checkout-step.active .checkout-step-dot,
.checkout-step.active::before {
  animation: checkout-step-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes checkout-step-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(230, 57, 70, 0); }
}

/* Floating label effect (uses :has() — graceful fallback otherwise) */
.checkout-modal .field-label {
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease, font-weight 0.2s ease;
}
.checkout-modal .field-label:has(+ .field:focus),
.checkout-modal .field-label:has(+ .field:not(:placeholder-shown)) {
  color: var(--accent);
  font-weight: 700;
  transform: translateY(-2px);
}

/* Validation error styling — red border + shake on invalid submit */
.checkout-modal .field.invalid,
.checkout-modal .field[aria-invalid="true"],
.checkout-modal .field.invalid-input {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  animation: input-shake 0.4s ease;
}
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

/* Success state — green checkmark scale-in with confetti dots */
.checkout-success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), var(--success));
  color: #ffffff; font-size: 2rem; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.18), var(--shadow);
  animation: success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes success-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { transform: scale(1); }
}

.checkout-confetti { position: relative; display: inline-block; }
.checkout-confetti::before, .checkout-confetti::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: confetti-burst 1s ease-out 0.3s both;
}
.checkout-confetti::before { background: var(--accent); left: -20px; top: 10px; }
.checkout-confetti::after  { background: var(--gold);  right: -20px; top: 20px; }
@keyframes confetti-burst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-30px, 40px) scale(0.5); }
}

/* ───────────── 11.8  TOAST POLISH (round 2) ───────────── */

/* Slide-in from bottom-right (layered on top of existing transition) */
.toast.toast-visible {
  animation: toast-slide-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(120%) translateY(8px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Progress bar showing auto-dismiss countdown */
.toast { position: relative; overflow: hidden; }
.toast::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  animation: toast-progress var(--toast-duration, 4s) linear forwards;
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Close button on hover */
.toast .toast-close {
  border-radius: 50%;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.toast .toast-close:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: rotate(90deg);
  color: var(--text);
}

/* Distinct gradient + icons (emoji) per variant */
.toast.toast-success {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), var(--surface-strong));
  border-left: 4px solid var(--success);
}
.toast.toast-success .toast-icon::before { content: '✓'; }
.toast.toast-error {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), var(--surface-strong));
  border-left: 4px solid var(--error);
}
.toast.toast-error .toast-icon::before { content: '✕'; }
.toast.toast-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), var(--surface-strong));
  border-left: 4px solid var(--warning);
}
.toast.toast-warning .toast-icon::before { content: '!'; }
.toast.toast-info {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), var(--surface-strong));
  border-left: 4px solid var(--info);
}
.toast.toast-info .toast-icon::before { content: 'i'; }

/* Stacking — multiple toasts cascade with gap */
.toast-container { gap: 12px; }
.toast-container .toast + .toast { margin-top: 4px; }

/* Important variant — top-center */
.toast-container.toast-center {
  left: 50%; right: auto; transform: translateX(-50%);
  align-items: center;
}
.toast-container.toast-center .toast { transform: translateY(-120%); }
.toast-container.toast-center .toast.toast-visible { transform: translateY(0); }

/* ───────────── 11.9  BUTTON SYSTEM POLISH (round 2) ───────────── */

/* .btn-primary ripple effect on click */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: btn-ripple 0.6s ease-out;
  pointer-events: none;
}
@keyframes btn-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* .btn-secondary — ghost border → fill on hover with text color invert */
.btn-secondary {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  z-index: 0;
}
.btn-secondary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
}
.btn-secondary:not(:disabled):hover {
  color: #ffffff;
  border-color: transparent;
}
.btn-secondary:not(:disabled):hover::before { transform: scaleX(1); }

/* .btn-ghost — subtle background tint on hover */
.btn-ghost:not(:disabled):hover {
  background: rgba(230, 57, 70, 0.08);
  color: var(--accent);
}

/* .btn-lg — larger padding + shadow */
.btn.btn-lg {
  padding: 16px 34px;
  font-size: 1.08rem;
  min-height: 56px;
  box-shadow: var(--shadow);
}
.btn.btn-lg:hover { box-shadow: var(--shadow-lg); }

/* .btn-sm — compact padding */
.btn.btn-sm {
  padding: 6px 14px;
  font-size: 0.82rem;
  min-height: 32px;
}

/* Loading state — spinner overlay */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Disabled state — opacity + cursor-not-allowed + no hover */
.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* ───────────── 11.10  FORM INPUT POLISH (round 2) ───────────── */

/* Focus glow ring (use :focus-visible + box-shadow) */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Placeholder fade-in */
input::placeholder, textarea::placeholder {
  color: var(--text-mute);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
input:focus::placeholder, textarea:focus::placeholder { opacity: 0.4; }

/* Invalid state — red border + aria-invalid styling */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"],
input.invalid, textarea.invalid, select.invalid {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  background-image: linear-gradient(135deg, rgba(220, 38, 38, 0.04), transparent);
}

/* Valid state — green checkmark icon (SVG, no external file) */
input.is-valid, textarea.is-valid, select.is-valid {
  border-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 38px;
}

/* Search input — magnifier icon + clear button */
.search-box .search-clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%) scale(0);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-mute);
  font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.search-box.has-value .search-clear { transform: translateY(-50%) scale(1); }
.search-box .search-clear:hover { background: var(--accent); color: #ffffff; }

/* ───────────── 11.11  SKELETON LOADER POLISH ───────────── */

.skeleton, .skeleton-img, .skeleton-line, .skeleton-stars, .skeleton-btn,
.skeleton-text, .skeleton-card, .skeleton-image, .skeleton-avatar {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.skeleton::after,
.skeleton-img::after,
.skeleton-line::after,
.skeleton-card::after,
.skeleton-image::after,
.skeleton-avatar::after,
.skeleton-text::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

.skeleton-text { height: 12px; border-radius: 6px; margin-bottom: 8px; }
.skeleton-text.short  { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long   { width: 90%; }

.skeleton-card {
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  height: 200px;
}
.skeleton-image { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* ───────────── 11.12  FOCUS-VISIBLE ACCESSIBILITY ───────────── */

/* Global focus-visible outline — 3px accent + offset 2px + glow shadow */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.25);
  transition: box-shadow 0.15s ease;
}

/* Mouse-click should NOT show focus ring (only keyboard) */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Skip-to-content link visible on focus */
.skip-link {
  position: fixed;
  top: -100px; left: 12px;
  z-index: 999;
  padding: 10px 18px;
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow);
}
.skip-link:focus {
  top: 12px;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255, 255, 255, 0.35);
}

/* ───────────── 11.13  GLASSMORPHISM REFINEMENT ───────────── */

.glass-strong {
  background: var(--surface-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.glass-light {
  background: var(--surface-glass);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--surface-glass-border);
}

/* Gradient border with mask technique */
.glass-gradient-border {
  position: relative;
  background: var(--surface-strong);
  border-radius: var(--radius);
}
.glass-gradient-border::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--accent), var(--gold), var(--accent-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Inner highlight — subtle inset shadow on top edge */
.glass-highlight {
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* ───────────── 11.14  MICRO-INTERACTIONS (NEW) ───────────── */

/* 3D tilt on hover (CSS sets transform; JS will pass --rx/--ry) */
.tilt-hover {
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-hover:hover {
  transform: perspective(800px) rotateX(var(--rx, 4deg)) rotateY(var(--ry, -4deg)) scale(1.02);
}

/* Magnetic button — slightly follows cursor within bounds */
.magnetic-btn {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.magnetic-btn:hover {
  transform: translate(var(--mx, 0), var(--my, 0));
}

/* Press down — active state translateY(2px) */
.press-down {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.press-down:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-sm);
}

/* Glow pulse — keyframe pulse with box-shadow glow */
.glow-pulse {
  animation: glow-pulse 2.5s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.3), var(--shadow-sm); }
  50%      { box-shadow: 0 0 20px 4px rgba(230, 57, 70, 0.4), var(--shadow); }
}

/* Shimmer text — animated gradient text */
.shimmer-text {
  background: linear-gradient(110deg,
    var(--text) 0%, var(--text) 35%, var(--accent) 50%, var(--text) 65%, var(--text) 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-text-flow 4s linear infinite;
}
@keyframes shimmer-text-flow {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

/* Animated gradient border using mask */
.gradient-border {
  position: relative;
  border: none;
  background-clip: padding-box;
}
.gradient-border::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--gold), var(--accent));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: gradient-border-flow 4s linear infinite;
}
@keyframes gradient-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ───────────── 11.15  DARK MODE VARIANTS for new components ───────────── */

[data-theme="dark"] .hero::before { opacity: 0.4; }
[data-theme="dark"] .hero .hero-title {
  background: linear-gradient(110deg, #ffffff 0%, var(--amber) 25%, #ffffff 50%, var(--accent-strong) 75%, #ffffff 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

[data-theme="dark"] .menu-card:hover::after,
[data-theme="dark"] .menu-card:focus-visible::after {
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(230, 57, 70, 0.55),
    0 0 30px rgba(230, 57, 70, 0.25);
}

[data-theme="dark"] .deal-card {
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

[data-theme="dark"] .toast { box-shadow: var(--shadow-lg); }
[data-theme="dark"] .toast.toast-success { background: linear-gradient(135deg, rgba(74, 222, 128, 0.10), var(--surface-strong)); }
[data-theme="dark"] .toast.toast-error   { background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), var(--surface-strong)); }
[data-theme="dark"] .toast.toast-warning { background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), var(--surface-strong)); }
[data-theme="dark"] .toast.toast-info    { background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), var(--surface-strong)); }

[data-theme="dark"] .glass-strong {
  background: rgba(28, 26, 34, 0.85);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .glass-highlight {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-img,
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .skeleton-image,
[data-theme="dark"] .skeleton-avatar,
[data-theme="dark"] .skeleton-text {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .skeleton::after,
[data-theme="dark"] .skeleton-img::after,
[data-theme="dark"] .skeleton-line::after,
[data-theme="dark"] .skeleton-card::after,
[data-theme="dark"] .skeleton-image::after,
[data-theme="dark"] .skeleton-avatar::after,
[data-theme="dark"] .skeleton-text::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

[data-theme="dark"] .topbar::after { opacity: 0.5; }
[data-theme="dark"] .topbar.scrolled::after { opacity: 0.8; }

[data-theme="dark"] .btn-secondary {
  background: transparent;
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}

[data-theme="dark"] .cart-empty {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .glow-pulse {
  animation: glow-pulse-dark 2.5s ease-in-out infinite;
}
@keyframes glow-pulse-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4), var(--shadow); }
  50%      { box-shadow: 0 0 28px 6px rgba(230, 57, 70, 0.5), var(--shadow-lg); }
}

/* ───────────── 11.15b  GRADIENT MODE VARIANTS for new components ───────────── */

[data-theme="gradient"] .hero::before {
  background:
    radial-gradient(600px 400px at 20% 30%, rgba(255, 88, 104, 0.4), transparent 60%),
    radial-gradient(500px 350px at 80% 60%, rgba(247, 127, 0, 0.35), transparent 60%),
    radial-gradient(450px 300px at 50% 90%, rgba(255, 209, 102, 0.3), transparent 60%);
  opacity: 0.5;
}

[data-theme="gradient"] .hero .hero-title {
  background: linear-gradient(110deg, var(--amber) 0%, var(--accent-strong) 35%, #ffffff 50%, var(--accent-strong) 65%, var(--amber) 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

[data-theme="gradient"] .menu-card:hover::after,
[data-theme="gradient"] .menu-card:focus-visible::after {
  box-shadow:
    0 20px 60px rgba(40, 10, 50, 0.6),
    0 0 0 2px rgba(255, 88, 104, 0.6),
    0 0 40px rgba(230, 57, 70, 0.3);
}

[data-theme="gradient"] .deal-card {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

[data-theme="gradient"] .toast { box-shadow: var(--shadow-lg); }
[data-theme="gradient"] .toast.toast-success { background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), var(--surface-strong)); }
[data-theme="gradient"] .toast.toast-error   { background: linear-gradient(135deg, rgba(248, 113, 113, 0.16), var(--surface-strong)); }
[data-theme="gradient"] .toast.toast-warning { background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), var(--surface-strong)); }
[data-theme="gradient"] .toast.toast-info    { background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), var(--surface-strong)); }

[data-theme="gradient"] .glass-strong {
  background: rgba(34, 28, 50, 0.82);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(230, 57, 70, 0.08);
}

[data-theme="gradient"] .skeleton,
[data-theme="gradient"] .skeleton-img,
[data-theme="gradient"] .skeleton-line,
[data-theme="gradient"] .skeleton-card,
[data-theme="gradient"] .skeleton-image,
[data-theme="gradient"] .skeleton-avatar,
[data-theme="gradient"] .skeleton-text {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="gradient"] .skeleton::after,
[data-theme="gradient"] .skeleton-img::after,
[data-theme="gradient"] .skeleton-line::after,
[data-theme="gradient"] .skeleton-card::after,
[data-theme="gradient"] .skeleton-image::after,
[data-theme="gradient"] .skeleton-avatar::after,
[data-theme="gradient"] .skeleton-text::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="gradient"] .topbar::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 88, 104, 0.5) 25%,
    rgba(255, 209, 102, 0.6) 50%,
    rgba(255, 88, 104, 0.5) 75%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.6;
}
[data-theme="gradient"] .topbar.scrolled::after { opacity: 0.85; }

[data-theme="gradient"] .glow-pulse {
  animation: glow-pulse-gradient 2.5s ease-in-out infinite;
}
@keyframes glow-pulse-gradient {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 88, 104, 0.4), var(--shadow-lg); }
  50%      { box-shadow: 0 0 32px 8px rgba(255, 88, 104, 0.55), var(--shadow-lg); }
}

[data-theme="gradient"] .shimmer-text {
  background: linear-gradient(110deg, var(--text) 0%, var(--text) 35%, var(--amber) 50%, var(--text) 65%, var(--text) 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

[data-theme="gradient"] .btn-secondary {
  background: transparent;
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}
[data-theme="gradient"] .btn-secondary::before {
  background: linear-gradient(135deg, var(--accent-strong), var(--amber));
}

[data-theme="gradient"] .cart-empty {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

/* ───────────── 11.16  REDUCED MOTION — comprehensive override ───────────── */

@media (prefers-reduced-motion: reduce) {

  /* Hero */
  .hero::before { animation: none !important; }
  .hero .hero-eyebrow { animation: none !important; }
  .hero .hero-title { animation: none !important; }
  .hero .btn::after { display: none; }
  .hero .hero-meta > * { animation: none !important; }
  .hero .hero-scroll-cue { animation: none !important; }

  @keyframes hero-mesh-shift    { 0%, 100% { transform: none; opacity: 0.55; } }
  @keyframes hero-eyebrow-glow  { 0%, 100% { opacity: 1; transform: none; box-shadow: none; } }
  @keyframes hero-title-shimmer { 0%, 100% { background-position: 0 0; } }
  @keyframes hero-meta-in       { 0%, 100% { opacity: 1; transform: none; } }
  @keyframes hero-cue-pulse     { 0%, 100% { box-shadow: none; } }

  /* Menu cards */
  .menu-card .menu-image { transition: none !important; }
  .menu-card:hover .menu-image,
  .menu-card:focus-visible .menu-image { transform: none; filter: none; }
  .menu-card::after { transition: none !important; }
  .menu-card:hover::after,
  .menu-card:focus-visible::after { box-shadow: var(--shadow); }
  .menu-card-add { transition: none !important; }
  .menu-card-add::before { display: none; }
  .menu-grid-row .menu-card.reveal { animation: none !important; }

  @keyframes menu-card-stagger { 0%, 100% { opacity: 1; transform: none; } }

  /* Deal cards */
  .deal-card .deal-badge { animation: none !important; }
  .deal-card .deal-gradient-border { animation: none !important; }
  .deal-card .deal-discount-price { animation: none !important; }
  .deal-card:hover { transform: translateY(-8px); }

  @keyframes hot-deal-pulse      { 0%, 100% { transform: none; } }
  @keyframes deal-border-flow    { 0%, 100% { background-position: 0% 50%; } }
  @keyframes deal-price-reveal   { 0%, 100% { opacity: 1; transform: none; filter: none; } }

  /* Topbar */
  .topbar { transition: transform 0.01ms !important; }
  .topbar::after { animation: none !important; }
  .brand .brand-mark { transition: none !important; }
  .brand:hover .brand-mark { transform: none; }
  .cart-btn.bump .cart-count { animation: none !important; }

  @keyframes cart-badge-bounce { 0%, 100% { transform: none; } }
  @keyframes topbar-shimmer    { 0%, 100% { background-position: 0 0; } }

  /* Cart drawer */
  .cart-item.cart-item-enter { animation: none !important; }
  .cart-item.cart-item-leave { animation: none !important; opacity: 0; max-height: 0; }
  .cart-item-qty .qty-btn { transition: none !important; }
  .drawer-foot .btn-primary::after { animation: none !important; display: none; }
  .cart-empty .cart-empty-icon { animation: none !important; }
  .coins-slider::-webkit-slider-thumb { transition: none !important; }

  @keyframes cart-item-slide-in  { 0%, 100% { opacity: 1; transform: none; max-height: 240px; } }
  @keyframes cart-item-slide-out { 0%, 100% { opacity: 0; max-height: 0; } }
  @keyframes checkout-sweep      { 0%, 100% { left: 0; } }
  @keyframes cart-empty-sad      { 0%, 100% { transform: none; } }

  /* Checkout modal */
  .checkout-modal .checkout-progress-bar::before { animation: none !important; transition: width 0.01ms !important; }
  .checkout-step.active .checkout-step-dot,
  .checkout-step.active::before { animation: none !important; }
  .checkout-modal .field.invalid,
  .checkout-modal .field[aria-invalid="true"],
  .checkout-modal .field.invalid-input { animation: none !important; }
  .checkout-success-icon { animation: none !important; }
  .checkout-confetti::before, .checkout-confetti::after { animation: none !important; display: none; }

  @keyframes checkout-step-dot-pulse { 0%, 100% { box-shadow: none; } }
  @keyframes input-shake             { 0%, 100% { transform: none; } }
  @keyframes success-pop             { 0%, 100% { opacity: 1; transform: none; } }
  @keyframes confetti-burst          { 0%, 100% { opacity: 0; transform: none; } }

  /* Toasts */
  .toast.toast-visible { animation: none !important; }
  .toast::after { animation: none !important; }
  .toast .toast-close { transition: none !important; }
  .toast .toast-close:hover { transform: none; }

  @keyframes toast-slide-in { 0%, 100% { opacity: 1; transform: none; } }
  @keyframes toast-progress { 0%, 100% { transform: scaleX(1); } }

  /* Buttons */
  .btn-primary .ripple { display: none; }
  .btn-secondary::before { transition: none !important; }
  .btn.is-loading::after { animation: none !important; }

  @keyframes btn-ripple { 0%, 100% { transform: scale(0); opacity: 0; } }

  /* Skeletons */
  .skeleton, .skeleton-img, .skeleton-line, .skeleton-card,
  .skeleton-image, .skeleton-avatar, .skeleton-text {
    animation: none !important;
    opacity: 1;
  }
  .skeleton::after, .skeleton-img::after, .skeleton-line::after,
  .skeleton-card::after, .skeleton-image::after,
  .skeleton-avatar::after, .skeleton-text::after {
    animation: none !important;
    display: none;
  }

  @keyframes skeleton-pulse   { 0%, 100% { opacity: 1; } }
  @keyframes skeleton-shimmer { 0%, 100% { transform: translateX(-100%); } }

  /* Micro-interactions */
  .tilt-hover { transition: none !important; }
  .tilt-hover:hover { transform: none; }
  .magnetic-btn { transition: none !important; }
  .magnetic-btn:hover { transform: none; }
  .glow-pulse { animation: none !important; }
  .shimmer-text { animation: none !important; }
  .gradient-border::before { animation: none !important; }

  @keyframes glow-pulse            { 0%, 100% { box-shadow: var(--shadow-sm); } }
  @keyframes glow-pulse-dark       { 0%, 100% { box-shadow: var(--shadow); } }
  @keyframes glow-pulse-gradient   { 0%, 100% { box-shadow: var(--shadow-lg); } }
  @keyframes shimmer-text-flow     { 0%, 100% { background-position: 0 0; } }
  @keyframes gradient-border-flow  { 0%, 100% { background-position: 0% 50%; } }
}

/* ───────────── 11.17  RESPONSIVE POLISH ───────────── */

/* Mobile (max-width: 640px) — simplify hero, reduce card padding, full-width buttons */
@media (max-width: 640px) {
  .hero { padding: calc(var(--header-h) + 24px) 16px 60px; min-height: 88vh; min-height: 88svh; }
  .hero .hero-title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.15; }
  .hero .hero-eyebrow { font-size: 0.7rem; padding: 5px 12px; }
  .hero .hero-tagline { font-size: 1rem; }
  .hero .hero-actions { flex-direction: column; width: 100%; }
  .hero .hero-actions .btn { width: 100%; }
  .hero .hero-meta { flex-direction: column; gap: 8px; }
  .hero .hero-meta > * { width: 100%; justify-content: center; }

  .menu-card-body { padding: 12px 14px 8px; }
  .menu-card-add { margin: 0 12px 12px; padding: 9px 12px; width: calc(100% - 24px); }
  .menu-card-add:hover { padding-right: 38px; }
  .menu-card-add::before { display: none; }

  .deal-card { width: 100%; max-width: none; padding: 18px; }

  .btn.btn-lg { padding: 14px 22px; font-size: 1rem; min-height: 50px; }
  .btn.btn-sm { padding: 5px 10px; font-size: 0.78rem; min-height: 30px; }

  .toast-container { left: 8px; right: 8px; max-width: none; }
  .toast { max-width: none; padding: 10px 12px; font-size: 0.85rem; }

  .skip-link { left: 8px; right: 8px; width: fit-content; }

  .glass-strong {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }

  /* Compact ribbon badges on mobile */
  .menu-card.ribbon-popular::before,
  .menu-card.ribbon-new::before,
  .menu-card.ribbon-spicy::before {
    top: 10px; right: -42px;
    padding: 4px 40px;
    font-size: 0.65rem;
  }
}

/* Tablet (max-width: 1024px) — 2-column menu grid */
@media (max-width: 1024px) {
  .menu-grid-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop (min-width: 1025px) — 3-4 column menu grid */
@media (min-width: 1025px) {
  .menu-grid-row {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (min-width: 1280px) {
  .menu-grid-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Touch device fallback — disable hover-only effects */
@media (hover: none) {
  .menu-card:hover .menu-image,
  .menu-card:focus-visible .menu-image { transform: none; filter: none; }
  .deal-card:hover { transform: translateY(-4px); }
  .hero .btn::after { display: none; }
  .menu-card-add:hover { padding-right: 38px; border-radius: var(--radius-pill); }
  .menu-card-add::before { display: none; }
  .btn-secondary::before { display: none; }
  .btn-secondary:not(:disabled):hover { color: var(--accent); border-color: var(--accent); }
  .tilt-hover:hover, .magnetic-btn:hover { transform: none; }
  .menu-card:hover::after { box-shadow: var(--shadow); }
}

/* END SECTION 11 — CSS polish round 3 + Urdu web font (Task 11-a) */


/* ════════════════════════════════════════════════════════════════════════
   SECTION 12 — Enhanced CSS Styling & Polish (Task 4)
   Glassmorphism · Micro-interactions · Cards · Hero · Typography
   Dark/Gradient · Footer · Mobile · Animation System · Scrollbar
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── 12.1  KEYFRAMES — animation primitives ───────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 230, 57, 70), 0.4), var(--shadow); }
  50%      { box-shadow: 0 0 20px 6px rgba(var(--accent-rgb, 230, 57, 70), 0.35), var(--shadow); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes typewriter-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes scale-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes glass-shimmer-sweep {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

@keyframes deal-glow {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(var(--accent-rgb, 230, 57, 70), 0); }
  50%      { box-shadow: var(--shadow), 0 0 24px 4px rgba(var(--accent-rgb, 230, 57, 70), 0.25); }
}

@keyframes parallax-shift {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.06); }
}

@keyframes particle-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.4; }
  100% { transform: translate(var(--particle-dx, 30px), var(--particle-dy, -50px)); opacity: 0; }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes footer-wave-flow {
  0%   { background-position-x: 0; }
  100% { background-position-x: 200px; }
}

@keyframes hero-gradient-text {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes press-feedback {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes bottom-sheet-enter {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}


/* ───────────── 12.2  ENHANCED GLASSMORPHISM ───────────── */

/* Improved .glass with better backdrop-filter and glass-border */
.glass {
  backdrop-filter: blur(var(--topbar-glass-blur)) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(var(--topbar-glass-blur)) saturate(160%) brightness(1.02);
  border: 1px solid var(--surface-glass-border);
  position: relative;
  overflow: hidden;
}

/* Animated shimmer/shine sweep on hover for glass cards */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 60%
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: none;
  pointer-events: none;
  z-index: 2;
}

.glass:hover::after {
  animation: glass-shimmer-sweep 0.8s ease forwards;
}

/* Glass gradient border effect */
.glass-border {
  position: relative;
  border: none !important;
  background-clip: padding-box;
}

.glass-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb, 230, 57, 70), 0.4),
    rgba(255, 255, 255, 0.1),
    rgba(var(--accent-rgb, 230, 57, 70), 0.2)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
  opacity: 0.5;
}

.glass-border:hover::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb, 230, 57, 70), 0.7),
    rgba(255, 255, 255, 0.2),
    rgba(var(--accent-rgb, 230, 57, 70), 0.5)
  );
}

[data-theme="dark"] .glass::after {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 60%
  );
}

[data-theme="gradient"] .glass::after {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 183, 3, 0.06) 45%,
    rgba(255, 183, 3, 0.12) 50%,
    rgba(255, 183, 3, 0.06) 55%,
    transparent 60%
  );
}

/* Enhanced glass-strong and glass-light */
.glass-strong {
  backdrop-filter: blur(24px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.04);
}

.glass-light {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}


/* ───────────── 12.3  MICRO-INTERACTIONS POLISH ───────────── */

/* Ripple effect on button clicks */
.btn {
  position: relative;
  overflow: hidden;
}

.btn .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

[data-theme="dark"] .btn .ripple-effect {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="gradient"] .btn .ripple-effect {
  background: rgba(255, 183, 3, 0.25);
}

/* Scale bounce on menu card hover */
.menu-card:hover {
  animation: scale-bounce 0.4s ease forwards;
}

/* Floating animation for chat FAB */
.chat-fab.visible {
  animation: float 3s ease-in-out infinite;
}

.chat-fab.visible:hover {
  animation: none;
  transform: scale(1.08) rotate(5deg);
}

/* Shimmer loading effect for skeleton loaders */
.skeleton,
.skeleton-img,
.skeleton-line,
.skeleton-card,
.skeleton-image,
.skeleton-avatar,
.skeleton-text {
  background: linear-gradient(
    90deg,
    var(--bg-soft) 25%,
    var(--surface-glass) 37%,
    var(--bg-soft) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.8s ease infinite;
}

/* Typewriter cursor blink for hero title */
.hero-title .cursor-blink {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: baseline;
  animation: typewriter-cursor 0.8s step-end infinite;
  border-radius: 2px;
}

/* Smooth morphing transitions for theme changes */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    backdrop-filter 0.4s ease !important;
}


/* ───────────── 12.4  IMPROVED CARD DESIGN ───────────── */

/* Better .menu-card with hover lift, shadow transition, image zoom */
.menu-card {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

.menu-card:hover,
.menu-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.menu-card .menu-image {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.menu-card:hover .menu-image,
.menu-card:focus-visible .menu-image {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* Better .deal-card with glow effect on hover */
.deal-card {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

.deal-card:hover {
  animation: deal-glow 2s ease-in-out infinite;
  transform: translateY(-8px);
}

/* Better .popular-card with parallax-like image shift on hover */
.popular-card {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
  overflow: hidden;
}

.popular-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.popular-card .menu-image {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.popular-card:hover .menu-image {
  animation: parallax-shift 0.5s ease forwards;
}

/* Staggered animation delays for cards entering view */
.menu-grid-row .menu-card.reveal {
  animation: stagger-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.menu-grid-row .menu-card.reveal:nth-child(1)  { animation-delay: 0.00s; }
.menu-grid-row .menu-card.reveal:nth-child(2)  { animation-delay: 0.06s; }
.menu-grid-row .menu-card.reveal:nth-child(3)  { animation-delay: 0.12s; }
.menu-grid-row .menu-card.reveal:nth-child(4)  { animation-delay: 0.18s; }
.menu-grid-row .menu-card.reveal:nth-child(5)  { animation-delay: 0.24s; }
.menu-grid-row .menu-card.reveal:nth-child(6)  { animation-delay: 0.30s; }
.menu-grid-row .menu-card.reveal:nth-child(7)  { animation-delay: 0.36s; }
.menu-grid-row .menu-card.reveal:nth-child(8)  { animation-delay: 0.42s; }
.menu-grid-row .menu-card.reveal:nth-child(9)  { animation-delay: 0.48s; }
.menu-grid-row .menu-card.reveal:nth-child(10) { animation-delay: 0.54s; }
.menu-grid-row .menu-card.reveal:nth-child(n+11) { animation-delay: 0.60s; }


/* ───────────── 12.5  ENHANCED HERO SECTION ───────────── */

/* Particle/dot pattern overlay for hero background */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-particles .particle {
  position: absolute;
  width: var(--particle-size, 3px);
  height: var(--particle-size, 3px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: particle-drift var(--particle-duration, 8s) ease-in-out infinite;
  animation-delay: var(--particle-delay, 0s);
}

/* Gradient text effect for hero heading */
.hero-title-gradient {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--accent) 25%,
    var(--gold) 50%,
    var(--accent) 75%,
    #ffffff 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hero-gradient-text 6s ease infinite;
}

[data-theme="dark"] .hero-title-gradient {
  background: linear-gradient(
    135deg,
    #f5f0e6 0%,
    var(--accent-strong) 25%,
    var(--amber) 50%,
    var(--accent-strong) 75%,
    #f5f0e6 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="gradient"] .hero-title-gradient {
  background: linear-gradient(
    135deg,
    #f7e9d7 0%,
    var(--accent-strong) 20%,
    var(--amber) 40%,
    var(--gold) 60%,
    var(--accent-strong) 80%,
    #f7e9d7 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pulsing glow effect on "Order Now" CTA button */
.hero .btn-primary.hero-cta {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

.hero .btn-primary.hero-cta:hover {
  animation: none;
  box-shadow: var(--shadow-lg), 0 0 30px 8px rgba(var(--accent-rgb, 230, 57, 70), 0.4);
}


/* ───────────── 12.6  BETTER TYPOGRAPHY & SPACING ───────────── */

/* Letter-spacing for headings — premium feel */
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.01em; }
h4 { letter-spacing: 0em; }

.section-title {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Text-shadow for headings in dark/gradient mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] .section-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="gradient"] h1,
[data-theme="gradient"] h2,
[data-theme="gradient"] .section-title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), 0 0 40px rgba(230, 57, 70, 0.15);
}

/* Section title decorations — animated underline accent bar */
.section-head {
  position: relative;
}

.section-head::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  margin: 16px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  animation: underline-grow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}

.section-head.visible::after {
  transform: scaleX(1);
}


/* ───────────── 12.7  DARK / GRADIENT MODE ENHANCEMENTS ───────────── */

/* More vivid gradient mode with better color transitions */
[data-theme="gradient"] body {
  background:
    radial-gradient(1400px 900px at 10% -10%, rgba(247, 127, 0, 0.22), transparent 55%),
    radial-gradient(1200px 800px at 90% 0%, rgba(230, 57, 70, 0.22), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, rgba(244, 162, 97, 0.18), transparent 55%),
    radial-gradient(800px 600px at 70% 50%, rgba(255, 183, 3, 0.08), transparent 60%),
    linear-gradient(180deg, #0d0b14 0%, #16131f 50%, #0d0b14 100%);
  background-attachment: fixed;
}

/* Subtle star/sparkle effect in gradient mode background */
[data-theme="gradient"] .gradient-sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

[data-theme="gradient"] .gradient-sparkles .sparkle {
  position: absolute;
  width: var(--sparkle-size, 2px);
  height: var(--sparkle-size, 2px);
  border-radius: 50%;
  background: rgba(255, 209, 102, 0.6);
  animation: sparkle var(--sparkle-duration, 4s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
}

/* Better contrast ratios in dark mode */
[data-theme="dark"] .menu-card-desc {
  color: var(--text-soft);
  opacity: 0.92;
}

[data-theme="dark"] .section-sub {
  color: var(--text-soft);
  opacity: 0.95;
}

[data-theme="dark"] .footer-links a {
  color: var(--text-soft);
}

[data-theme="dark"] .info-text {
  color: var(--text-soft);
  opacity: 0.95;
}

/* Gradient mode card surface improvements */
[data-theme="gradient"] .menu-card {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="gradient"] .deal-card {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="gradient"] .popular-card {
  border-color: rgba(255, 255, 255, 0.1);
}


/* ───────────── 12.8  FOOTER POLISH ───────────── */

/* Wavy top border to footer using SVG */
.footer {
  position: relative;
  border-top: none;
}

.footer::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 25px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 25' preserveAspectRatio='none'%3E%3Cpath d='M0 25V12c50-8 100 8 150 0s100-8 150 0 100 8 150 0 100-8 150 0 100 8 150 0 100-8 150 0 100 8 150 0V25z' fill='%23faf6f1'/%3E%3C/svg%3E") center / cover no-repeat;
  pointer-events: none;
  z-index: 1;
}

[data-theme="dark"] .footer::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 25' preserveAspectRatio='none'%3E%3Cpath d='M0 25V12c50-8 100 8 150 0s100-8 150 0 100 8 150 0 100-8 150 0 100 8 150 0 100-8 150 0 100 8 150 0V25z' fill='%230e0d10'/%3E%3C/svg%3E") center / cover no-repeat;
}

[data-theme="gradient"] .footer::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 25' preserveAspectRatio='none'%3E%3Cpath d='M0 25V12c50-8 100 8 150 0s100-8 150 0 100 8 150 0 100-8 150 0 100 8 150 0 100-8 150 0 100 8 150 0V25z' fill='%230d0b14'/%3E%3C/svg%3E") center / cover no-repeat;
}

/* Better footer link hover effects */
.footer-links a {
  position: relative;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-links a:hover {
  color: var(--accent);
  transform: translateY(-1px);
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

/* Footer social link hover */
.footer-social a:hover,
.footer-social button:hover {
  transform: translateY(-2px) scale(1.1);
  color: var(--accent);
  filter: drop-shadow(0 2px 4px rgba(var(--accent-rgb, 230, 57, 70), 0.3));
}


/* ───────────── 12.9  MOBILE ENHANCEMENTS ───────────── */

/* Better bottom sheet style for cart drawer on mobile */
@media (max-width: 640px) {
  .drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none;
    border-top: 1px solid var(--surface-glass-border);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .drawer.open {
    transform: translateY(0);
  }

  .drawer-head {
    border-bottom: 1px solid var(--surface-glass-border);
    position: relative;
  }

  .drawer-head::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-glass-border);
    opacity: 0.5;
  }
}

/* Haptic-like press feedback on touch */
@media (hover: none) {
  .btn:active {
    animation: press-feedback 0.15s ease;
  }

  .menu-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  .deal-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  .popular-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
}

/* Better safe area handling */
.drawer-foot {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.footer {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.hero {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px);
}


/* ───────────── 12.10  SCROLLBAR & SELECTION ───────────── */

/* Better custom scrollbar with hover state */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 230, 57, 70), 0.4);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb, 230, 57, 70), 0.65);
  border: 2px solid transparent;
  background-clip: padding-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb, 230, 57, 70), 0.4) transparent;
}

/* Styled text selection with brand color */
::selection {
  background: rgba(var(--accent-rgb, 230, 57, 70), 0.25);
  color: var(--text);
}

::-moz-selection {
  background: rgba(var(--accent-rgb, 230, 57, 70), 0.25);
  color: var(--text);
}

[data-theme="dark"] ::selection {
  background: rgba(var(--accent-rgb, 230, 57, 70), 0.35);
  color: #fff;
}

[data-theme="gradient"] ::selection {
  background: rgba(255, 183, 3, 0.3);
  color: #fff;
}


/* ───────────── 12.11  REDUCED MOTION — comprehensive override ───────────── */

@media (prefers-reduced-motion: reduce) {
  /* Disable all new animations */
  .glass::after { animation: none !important; }
  .glass:hover::after { animation: none !important; }
  .glass-border::before { transition: none !important; }

  .btn .ripple-effect { display: none !important; }

  .menu-card:hover { animation: none !important; }
  .menu-card .menu-image { transition: none !important; }
  .menu-card:hover .menu-image { transform: none !important; filter: none !important; }

  .deal-card:hover { animation: none !important; }
  .popular-card .menu-image { transition: none !important; }
  .popular-card:hover .menu-image { animation: none !important; }

  .chat-fab.visible { animation: none !important; }
  .hero-title .cursor-blink { animation: none !important; opacity: 1; }

  .hero .btn-primary.hero-cta { animation: none !important; }

  .section-head::after { animation: none !important; transform: scaleX(1); }

  .footer-links a { transition: color 0.01ms !important; }
  .footer-links a::after { transition: none !important; transform: scaleX(0); }
  .footer-links a:hover::after { transform: scaleX(0); }
  .footer-links a:hover { transform: none; }

  .hero-title-gradient {
    animation: none !important;
    -webkit-text-fill-color: initial;
    background: none;
  }

  .menu-grid-row .menu-card.reveal {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hero-particles .particle { animation: none !important; display: none; }
  [data-theme="gradient"] .gradient-sparkles .sparkle { animation: none !important; display: none; }

  /* Override keyframes for reduced motion */
  @keyframes shimmer               { 0%, 100% { background-position: 0 0; } }
  @keyframes float                 { 0%, 100% { transform: none; } }
  @keyframes pulse-glow            { 0%, 100% { box-shadow: var(--shadow); } }
  @keyframes ripple                { 0%, 100% { transform: scale(0); opacity: 0; } }
  @keyframes stagger-in            { 0%, 100% { opacity: 1; transform: none; } }
  @keyframes typewriter-cursor     { 0%, 100% { opacity: 1; } }
  @keyframes gradient-shift        { 0%, 100% { background-position: 0% 50%; } }
  @keyframes scale-bounce          { 0%, 100% { transform: none; } }
  @keyframes glass-shimmer-sweep   { 0%, 100% { transform: none; } }
  @keyframes deal-glow             { 0%, 100% { box-shadow: var(--shadow-sm); } }
  @keyframes parallax-shift        { 0%, 100% { transform: none; } }
  @keyframes particle-drift        { 0%, 100% { transform: none; opacity: 0; } }
  @keyframes sparkle               { 0%, 100% { opacity: 0; transform: none; } }
  @keyframes underline-grow        { 0%, 100% { transform: scaleX(1); } }
  @keyframes hero-gradient-text    { 0%, 100% { background-position: 0% 50%; } }
  @keyframes press-feedback        { 0%, 100% { transform: none; } }
  @keyframes bottom-sheet-enter    { 0%, 100% { transform: none; } }
}


/* ───────────── 12.12  ADDITIONAL THEME-SPECIFIC REFINEMENTS ───────────── */

/* Dark mode: improved glass card borders */
[data-theme="dark"] .glass {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .glass-border::before {
  background: linear-gradient(
    135deg,
    rgba(255, 88, 104, 0.35),
    rgba(255, 255, 255, 0.05),
    rgba(255, 88, 104, 0.2)
  );
}

/* Gradient mode: enhanced glass with amber tint */
[data-theme="gradient"] .glass {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="gradient"] .glass-border::before {
  background: linear-gradient(
    135deg,
    rgba(255, 88, 104, 0.4),
    rgba(255, 183, 3, 0.2),
    rgba(255, 88, 104, 0.25)
  );
}

/* Gradient mode deal card glow with amber */
[data-theme="gradient"] .deal-card:hover {
  box-shadow: var(--shadow), 0 0 24px 4px rgba(255, 183, 3, 0.2);
}

/* Light mode specific refinements */
[data-theme="light"] .menu-card:hover,
[data-theme="light"] .menu-card:focus-visible {
  box-shadow: 0 12px 32px rgba(40, 25, 10, 0.14), 0 0 0 1px rgba(230, 57, 70, 0.06);
}

/* Accent RGB custom properties for theme-aware rgba usage */
:root, [data-theme="light"] {
  --accent-rgb: 230, 57, 70;
  --gold-rgb: 244, 162, 97;
}

[data-theme="dark"] {
  --accent-rgb: 230, 57, 70;
  --gold-rgb: 244, 162, 97;
}

[data-theme="gradient"] {
  --accent-rgb: 255, 88, 104;
  --gold-rgb: 255, 183, 3;
}


/* END SECTION 12 — Enhanced CSS Styling & Polish (Task 4) */

/* ───────────────────────── NEW FEATURES STYLES (Task 5b) ───────────────────────── */

/* Order Tracker */
.order-tracker-section { padding: var(--sp-12) 0; }
.order-tracker-card { max-width: 600px; margin: 0 auto; padding: var(--sp-6); }
.order-tracker-input-row { display: flex; gap: var(--sp-3); }
.order-tracker-input { flex: 1; }
.order-tracker-result { margin-top: var(--sp-6); }
.order-tracker-timeline { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: var(--sp-4) 0; }
.tracker-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.tracker-step .step-icon { font-size: 1.5rem; margin-bottom: var(--sp-2); opacity: 0.3; transition: all 0.3s; }
.tracker-step .step-label { font-size: 0.75rem; text-align: center; opacity: 0.5; transition: all 0.3s; }
.tracker-step.completed .step-icon, .tracker-step.active .step-icon { opacity: 1; }
.tracker-step.completed .step-label, .tracker-step.active .step-label { opacity: 1; font-weight: 600; }
.tracker-step.active .step-icon { animation: pulse-glow 2s infinite; }
.step-connector { position: absolute; top: 0.75rem; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: -1; }
.tracker-step.completed .step-connector { background: var(--accent); }
.tracker-loading { text-align: center; padding: var(--sp-4); color: var(--text-muted); }
.order-tracker-eta { text-align: center; font-size: 1.1rem; font-weight: 600; margin: var(--sp-3) 0; color: var(--accent); }
.order-tracker-details { text-align: center; font-size: 0.9rem; color: var(--text-muted); }

/* Print Receipt */
.print-receipt-btn { margin-top: var(--sp-2); width: 100%; }

/* Social Proof */
.social-proof { position: fixed; bottom: 80px; left: 20px; z-index: 90; background: var(--surface-strong); backdrop-filter: blur(12px); border-radius: 12px; padding: var(--sp-3) var(--sp-4); box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; transform: translateY(20px); opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
.social-proof-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.social-proof-icon { font-size: 1.1rem; }

/* Allergen Filter */
.allergen-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) 0; margin-bottom: var(--sp-4); }
.allergen-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.allergen-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.allergen-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.menu-card.allergen-hidden { display: none; }

/* Nutrition */
.item-detail-nutrition { padding: var(--sp-3) 0; border-top: 1px solid var(--border); margin-top: var(--sp-3); }
.nutrition-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: var(--sp-2); }
.nutrition-badges { display: flex; gap: var(--sp-3); }
.nutrition-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 0.8rem; padding: var(--sp-1) var(--sp-2); background: var(--surface); border-radius: 8px; }
.nutrition-icon { font-size: 1rem; }

/* ───────────────────────── ENHANCED FEATURE STYLES (Task 5b+) ───────────────────────── */

/* Order Tracker - Enhanced Timeline */
.order-tracker-timeline {
  padding: var(--sp-6) var(--sp-2);
  position: relative;
}
.tracker-step {
  position: relative;
  z-index: 1;
}
.tracker-step .step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border: 2px solid var(--border);
  margin-bottom: var(--sp-2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tracker-step.completed .step-icon {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.tracker-step.active .step-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5);
  animation: pulse-glow 2s ease-in-out infinite;
}
.tracker-step .step-label {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.tracker-step.completed .step-label { color: var(--accent); }
.tracker-step.active .step-label { color: var(--accent); font-weight: 700; }
.step-connector {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 2px;
  background: var(--border);
  z-index: 0;
  transition: background 0.4s;
}
.tracker-step.completed .step-connector {
  background: var(--accent);
}
.order-tracker-eta {
  font-size: 1.25rem;
  padding: var(--sp-3);
  background: var(--accent-soft);
  border-radius: 12px;
  margin-top: var(--sp-4);
}
.order-tracker-details {
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-top: var(--sp-3);
  font-size: 0.85rem;
}

/* Social Proof - Enhanced */
.social-proof {
  max-width: 320px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.social-proof-icon {
  animation: float 3s ease-in-out infinite;
}

/* Allergen Filter - Enhanced */
.allergen-filter {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.allergen-filter::-webkit-scrollbar { display: none; }
.allergen-chip {
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.allergen-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
}
.allergen-chip.active {
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3);
}

/* Nutrition - Enhanced */
.nutrition-badge {
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.nutrition-badge:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Print Receipt Button - Enhanced */
.print-receipt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.print-receipt-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Order Tracker Section - Glass Card */
.order-tracker-card.glass {
  position: relative;
  overflow: hidden;
}
.order-tracker-card.glass::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Tracker input styling */
.order-tracker-input {
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  font-family: 'Courier New', monospace;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .order-tracker-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .tracker-step {
    flex-direction: row;
    gap: var(--sp-3);
  }
  .tracker-step .step-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: 0;
  }
  .step-connector { display: none; }
  .social-proof { left: 10px; right: 10px; bottom: 70px; max-width: none; }
  .allergen-filter { justify-content: flex-start; }
}

/* Dark mode adjustments for new features */
[data-theme="dark"] .tracker-step .step-icon { background: var(--bg-elev); }
[data-theme="dark"] .order-tracker-eta { background: rgba(var(--accent-rgb), 0.15); }
[data-theme="dark"] .nutrition-badge { background: var(--bg-elev); }

/* Gradient mode adjustments for new features */
[data-theme="gradient"] .tracker-step .step-icon { background: rgba(255,255,255,0.1); }
[data-theme="gradient"] .order-tracker-eta { background: rgba(255,255,255,0.15); }

/* pulse-glow animation for active tracker step */
@keyframes pulse-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ───────────────────────── ROUND 13 ENHANCEMENTS ───────────────────────── */

/* Favorites feature */
.fav-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.fav-btn:hover {
  transform: scale(1.15);
  color: #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.fav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fav-btn.active {
  color: #ef4444;
  animation: heart-pop 0.4s ease;
}
@keyframes heart-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
.fav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nav heart button (sits next to cart icon) */
.nav-fav-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text);
  transition: all 0.2s;
}
.nav-fav-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #ef4444;
}
.nav-fav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Table booking modal */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.booking-modal.open { display: flex; }
.booking-modal-content {
  background: var(--bg-elev);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sp-6);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative;
  animation: booking-modal-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes booking-modal-enter {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.booking-modal-content h2 {
  margin-bottom: var(--sp-4);
  font-size: 1.5rem;
}
.booking-form-group {
  margin-bottom: var(--sp-4);
}
.booking-form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
}
.booking-form-group input,
.booking-form-group select,
.booking-form-group textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.booking-form-group input:focus,
.booking-form-group select:focus,
.booking-form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.booking-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* Spice level selector */
.item-detail-spice {
  margin-top: var(--sp-3);
}
.spice-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.spice-selector {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  flex-wrap: wrap;
}
.spice-option {
  flex: 1 1 calc(25% - var(--sp-2));
  min-width: 80px;
  padding: var(--sp-2) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
}
.spice-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.spice-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.spice-option.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.spice-emoji { font-size: 1.2rem; display: block; line-height: 1.2; }

/* Gift card */
.gift-card-section {
  padding: var(--sp-12) 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.04) 0%, rgba(var(--gold-rgb, 218,165,32), 0.04) 100%);
}
.gift-card-visual {
  background: linear-gradient(135deg, var(--accent) 0%, #c1121f 100%);
  color: #fff;
  border-radius: 16px;
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto var(--sp-6);
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.3);
}
.gift-card-visual::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.gift-card-visual::after {
  content: '🍕';
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 8rem;
  opacity: 0.15;
  pointer-events: none;
}
.gift-card-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: var(--sp-2);
  position: relative;
  z-index: 1;
}
.gift-card-amount {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--sp-3);
  position: relative;
  z-index: 1;
}
.gift-card-tagline {
  font-size: 0.85rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}
.gift-card-denominations {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}
.gift-card-denomination {
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s;
  min-width: 100px;
}
.gift-card-denomination:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2);
}
.gift-card-denomination:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Book-a-table CTA button — sits in the order CTA / hero */
.btn-secondary {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .booking-form-row { grid-template-columns: 1fr; }
  .gift-card-amount { font-size: 2rem; }
  .gift-card-denomination { min-width: 80px; padding: var(--sp-2) var(--sp-3); font-size: 0.85rem; }
  .spice-option { flex: 1 1 calc(50% - var(--sp-2)); }
}

/* Dark/Gradient mode adjustments */
[data-theme="dark"] .fav-btn { background: rgba(30,30,30,0.92); color: #9ca3af; }
[data-theme="gradient"] .fav-btn { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
[data-theme="gradient"] .booking-modal-content { background: rgba(20,20,40,0.95); backdrop-filter: blur(20px); }
[data-theme="dark"] .booking-modal-content { background: var(--bg-elev); }
[data-theme="gradient"] .gift-card-visual { background: linear-gradient(135deg, var(--accent) 0%, #7c2d12 100%); }
[data-theme="dark"] .gift-card-denomination,
[data-theme="gradient"] .gift-card-denomination { background: rgba(255,255,255,0.05); }

/* ───────────────────────── ROUND 14 ENHANCEMENTS ───────────────────────── */

/* Deals Countdown */
.deals-countdown-header {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 20px;
  animation: pulse-glow 3s ease-in-out infinite;
}
.deals-countdown-header.urgent {
  background: #fef2f2;
  color: #dc2626;
  animation: countdown-urgent 1s ease-in-out infinite;
}
@keyframes countdown-urgent {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Coins Redemption Panel */
.coins-panel {
  max-width: 320px;
  margin: var(--sp-4) auto;
  padding: var(--sp-4);
  text-align: center;
  border-radius: 12px;
}
.coins-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.coins-icon { font-size: 1.5rem; }
.coins-count {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.coins-label { font-size: 0.85rem; color: var(--text-muted); }
.coins-value {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.coins-redeem-btn {
  width: 100%;
  margin-bottom: var(--sp-2);
}
.coins-rate {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Delivery ETA Widget */
.delivery-eta-widget {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 16px;
  margin: var(--sp-4) auto;
  max-width: 380px;
}
.eta-time {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.eta-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.eta-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}
.eta-status {
  font-size: 0.9rem;
  font-weight: 600;
}
.eta-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Enhanced Card Hover States - More Premium */
.menu-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.menu-card:hover .menu-card-name {
  color: var(--accent);
  transition: color 0.2s;
}
.menu-card-name {
  transition: color 0.2s;
}

/* Enhanced Deal Cards - Progress Bar */
.deal-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: var(--deal-progress, 75%);
  background: linear-gradient(90deg, var(--accent), var(--gold, #f4a261));
  border-radius: 0 3px 0 0;
  transition: width 0.5s ease;
}

/* Chat FAB - More Engaging */
.chat-fab {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.chat-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.5);
}

/* Section Title Accent Bar - Animated */
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-top: var(--sp-2);
  border-radius: 2px;
  animation: accent-bar-expand 0.6s ease-out forwards;
}
@keyframes accent-bar-expand {
  from { width: 0; opacity: 0; }
  to { width: 60px; opacity: 1; }
}

/* Hero CTA Buttons - More Premium */
.hero-cta .btn-primary {
  position: relative;
  overflow: hidden;
}
.hero-cta .btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.hero-cta .btn-primary:hover::after {
  width: 300px;
  height: 300px;
}

/* Toast Notification - More Premium */
.toast {
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Responsive */
@media (max-width: 640px) {
  .delivery-eta-widget {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }
  .eta-number { font-size: 1.8rem; }
  .coins-panel { margin: var(--sp-3) 0; }
}

/* Dark Mode */
[data-theme="dark"] .deals-countdown-header { background: rgba(var(--accent-rgb), 0.15); }
[data-theme="dark"] .coins-panel { background: var(--bg-elev); }
[data-theme="dark"] .delivery-eta-widget { background: var(--bg-elev); }

/* Gradient Mode */
[data-theme="gradient"] .deals-countdown-header { background: rgba(255,255,255,0.15); }
[data-theme="gradient"] .coins-panel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }
[data-theme="gradient"] .delivery-eta-widget { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 15 — Premium Styling Enhancements + New Feature Styles
   ════════════════════════════════════════════════════════════════════════════
   Includes:
   1. Animated hero gradient mesh background
   2. 3D card tilt on hover (perspective)
   3. Magnetic button effect for primary CTAs
   4. Premium loading skeletons with shimmer
   5. Live Stats Bar
   6. Store Hours / Weekly Hours card
   7. Daily Specials carousel
   8. Nutrition Calculator in cart drawer
   9. Floating Quick Actions side dock
   10. Glassmorphism enhancements + micro-interactions
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Animated hero gradient mesh background ─────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(var(--accent-rgb), 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(244, 162, 97, 0.15), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: hero-mesh-drift 18s ease-in-out infinite;
  filter: blur(20px);
}
[data-theme="gradient"] .hero::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 100, 100, 0.25), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(100, 200, 255, 0.20), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 200, 100, 0.15), transparent 60%);
}
[data-theme="dark"] .hero::before { opacity: 0.5; }
@keyframes hero-mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-2%, 1%) scale(1.04); }
  66%      { transform: translate(2%, -1%) scale(1.02); }
}
.hero-content { position: relative; z-index: 2; }
.hero-media { z-index: 1; }

/* ── 2. 3D Card Tilt on hover ─────────────────────────────────────────── */
.menu-card, .deal-card, .info-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.menu-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.menu-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    0 4px 12px rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.menu-card:hover .menu-card-image {
  transform: scale(1.06) translateZ(20px);
}
.menu-card-image {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(0);
}
.menu-card:hover .menu-card-price {
  background: var(--accent);
  color: #fff;
  transform: translateZ(30px) scale(1.05);
}
.menu-card-price {
  transition: all 0.3s ease;
}

/* ── 3. Magnetic Button Effect (subtle attraction to cursor) ──────────── */
.btn-primary {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
  will-change: transform;
}
.btn-primary.magnetic-active {
  transition: transform 0.05s linear;
}
.btn-primary:hover {
  box-shadow:
    0 8px 24px rgba(var(--accent-rgb), 0.35),
    0 0 0 4px rgba(var(--accent-rgb), 0.10);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.btn-primary:hover::before {
  animation: btn-shine 0.7s ease-out;
}
@keyframes btn-shine {
  to { transform: translateX(100%); }
}

/* ── 4. Premium Loading Skeletons with Shimmer ────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.06) 25%,
    rgba(0,0,0,0.12) 50%,
    rgba(0,0,0,0.06) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius, 12px);
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
}
[data-theme="gradient"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 75%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 5. Live Stats Bar ────────────────────────────────────────────────── */
.live-stats-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  background: rgba(255,255,255,0.65);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  flex-wrap: wrap;
  justify-content: space-between;
}
[data-theme="dark"] .live-stats-bar {
  background: rgba(30,30,30,0.65);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="gradient"] .live-stats-bar {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.live-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 90px;
  flex: 1;
}
.live-stat-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.live-stat-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.live-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent), #f4a261);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-stat-suffix {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.live-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.live-stat-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), 0.3), transparent);
}
.live-stats-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(22, 163, 74, 0.12);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: 0.1em;
}
.live-stats-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (max-width: 768px) {
  .live-stats-bar {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .live-stat-card { min-width: 80px; flex: 1 1 40%; }
  .live-stat-divider { display: none; }
  .live-stat-value { font-size: 1.3rem; }
  .live-stat-label { font-size: 0.7rem; }
}

/* ── 6. Store Hours / Weekly Hours Card ───────────────────────────────── */
.store-hours-card {
  padding: var(--sp-4);
  border-radius: 18px;
  margin-top: var(--sp-2);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  grid-column: span 2;
}
[data-theme="dark"] .store-hours-card {
  background: rgba(30,30,30,0.7);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="gradient"] .store-hours-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.store-hours-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--sp-3);
  color: var(--text);
}
.store-hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.store-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.store-hours-row:hover { background: rgba(var(--accent-rgb), 0.05); }
.store-hours-row.today {
  background: rgba(var(--accent-rgb), 0.10);
  font-weight: 600;
  border-left: 3px solid var(--accent);
}
.store-hours-day {
  color: var(--text);
  font-weight: 500;
}
.store-hours-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.store-hours-today-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.1em;
}
.store-hours-note {
  margin-top: var(--sp-2);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 768px) {
  .store-hours-card { grid-column: span 1; }
}

/* Smart shop-status enhanced */
.shop-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}
.shop-status.closed {
  background: rgba(230, 57, 70, 0.12);
  color: #e63946;
}
.shop-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: shop-status-pulse 2s infinite;
}
@keyframes shop-status-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 8px transparent; opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ── 7. Daily Specials Carousel ───────────────────────────────────────── */
.daily-specials {
  padding: var(--sp-6) 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent 80%);
}
.daily-specials-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(22, 163, 74, 0.10);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #16a34a;
  margin-left: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.daily-specials-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  animation: live-pulse 2s infinite;
}
.specials-carousel {
  position: relative;
  margin-top: var(--sp-5);
}
.specials-viewport {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.specials-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.special-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  min-height: 360px;
}
[data-theme="dark"] .special-slide {
  background: linear-gradient(135deg, rgba(40,40,40,0.95), rgba(30,30,30,0.85));
}
[data-theme="gradient"] .special-slide {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
  backdrop-filter: blur(20px);
}
.special-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.15), transparent 70%);
  overflow: hidden;
}
.special-emoji {
  font-size: 9rem;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
  animation: special-bob 4s ease-in-out infinite;
}
@keyframes special-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
.special-today-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--accent), #f4a261);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 20px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}
.special-discount-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  background: #16a34a;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
  transform: rotate(8deg);
}
.special-body {
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
}
.special-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.special-tag {
  padding: 3px 10px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.special-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: var(--sp-1) 0;
  line-height: 1.15;
}
.special-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.special-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.special-original-price {
  font-size: 1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}
.special-discounted-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
}
.special-savings {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
}
.special-add-btn {
  align-self: flex-start;
  margin-top: var(--sp-2);
}
.special-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--sp-4);
}
.special-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.special-dot.active {
  width: 32px;
  border-radius: 4px;
  background: var(--accent);
}
.specials-hint {
  text-align: center;
  margin-top: var(--sp-2);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 768px) {
  .special-slide {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .special-visual {
    padding: var(--sp-4);
    min-height: 180px;
  }
  .special-emoji { font-size: 5rem; }
  .special-body { padding: var(--sp-4); }
  .special-name { font-size: 1.4rem; }
  .special-discounted-price { font-size: 1.5rem; }
}

/* ── 8. Nutrition Calculator (cart drawer) ────────────────────────────── */
.nutrition-calc-slot {
  padding: 0 var(--sp-3);
  margin-top: var(--sp-2);
}
.nutrition-calc {
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.10);
  border-radius: 14px;
  padding: var(--sp-3);
  margin-top: var(--sp-2);
}
.nutrition-calc.nutrition-empty {
  opacity: 0.5;
  filter: grayscale(0.5);
}
.nutrition-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.nutrition-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 2px 0 var(--sp-2);
}
.nutrition-kcal-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-2);
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.2);
}
.nutrition-kcal-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #e63946, #f77f00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.nutrition-kcal-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}
.nutrition-kcal-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.nutrition-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nutrition-bar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.nutrition-bar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nutrition-bar {
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
[data-theme="dark"] .nutrition-bar { background: rgba(255,255,255,0.08); }
[data-theme="gradient"] .nutrition-bar { background: rgba(255,255,255,0.08); }
.nutrition-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.nutrition-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  background-size: 200% 100%;
  animation: bar-shimmer 2s linear infinite;
}
@keyframes bar-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
.nutrition-bar-pct {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}
.nutrition-disclaimer {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-style: italic;
  margin: var(--sp-2) 0 0;
  text-align: center;
  opacity: 0.8;
}

/* ── 9. Floating Quick Actions Side Dock ──────────────────────────────── */
.quick-dock {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(120%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08);
  z-index: 80;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .quick-dock {
  background: rgba(30,30,30,0.85);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="gradient"] .quick-dock {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.quick-dock.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.quick-dock-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--text);
}
.quick-dock-btn:hover,
.quick-dock-btn.hovered {
  background: rgba(var(--accent-rgb), 0.12);
  transform: scale(1.06);
}
.quick-dock-btn:hover .quick-dock-icon {
  transform: scale(1.15);
}
.quick-dock-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.25s;
}
.quick-dock-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  background: var(--text, #1a1a1a);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.quick-dock-btn:hover .quick-dock-label {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}
.quick-dock-btn[data-action-id="top"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.quick-dock-btn[data-action-id="top"].dock-show {
  opacity: 1;
  pointer-events: auto;
}
.quick-dock-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-dock-badge.visible {
  opacity: 1;
  transform: scale(1);
}
.quick-dock-badge.pulse {
  animation: dock-badge-pulse 0.6s ease-out;
}
@keyframes dock-badge-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  50%  { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (max-width: 1024px) {
  .quick-dock { display: none; }
}

/* ── 10. Premium Glass Card Enhancement (refined) ─────────────────────── */
.glass {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.glass:hover::before {
  opacity: 1;
}

/* Premium focus-visible styles for keyboard users */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Premium scrollbar styling */
.scroll-area, .cart-items, .menu-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}
.scroll-area::-webkit-scrollbar,
.cart-items::-webkit-scrollbar,
.menu-grid::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scroll-area::-webkit-scrollbar-thumb,
.cart-items::-webkit-scrollbar-thumb,
.menu-grid::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.4);
  border-radius: 3px;
}
.scroll-area::-webkit-scrollbar-thumb:hover,
.cart-items::-webkit-scrollbar-thumb:hover,
.menu-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.6);
}

/* Wavy SVG divider between hero and restaurant-info (premium touch) */
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z' fill='%23ffffff' opacity='0.5'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}
[data-theme="dark"] .hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z' fill='%231a1a1a' opacity='0.85'/></svg>");
}
[data-theme="gradient"] .hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z' fill='%23ffffff' opacity='0.10'/></svg>");
}
@media (max-width: 768px) {
  .hero::after { height: 30px; }
}

/* Menu card highlight enhancement (used when search-select) */
.menu-card--highlight {
  animation: card-highlight-pulse 0.8s ease-out;
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.5),
    0 12px 32px rgba(var(--accent-rgb), 0.25) !important;
  z-index: 5;
}
@keyframes card-highlight-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Premium shop-status text style */
.shop-status-text {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Dark mode overrides for new Round 15 elements */
[data-theme="dark"] .nutrition-calc {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.18);
}
[data-theme="dark"] .nutrition-bar { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .special-tag {
  background: rgba(var(--accent-rgb), 0.20);
  color: var(--accent);
}
[data-theme="dark"] .quick-dock-btn { color: var(--text); }
[data-theme="dark"] .quick-dock-btn:hover { background: rgba(var(--accent-rgb), 0.20); }
[data-theme="dark"] .specials-hint { color: rgba(255,255,255,0.5); }

/* Gradient mode overrides */
[data-theme="gradient"] .nutrition-calc {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="gradient"] .live-stats-bar {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
[data-theme="gradient"] .live-stat-value {
  background: linear-gradient(135deg, #ffd166, #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="gradient"] .special-slide {
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
}
[data-theme="gradient"] .special-tag {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
[data-theme="gradient"] .special-name,
[data-theme="gradient"] .special-desc { color: #fff; }
[data-theme="gradient"] .specials-hint { color: rgba(255,255,255,0.7); }

/* Reduced motion overrides for new features */
@media (prefers-reduced-motion: reduce) {
  .live-stats-pulse-dot,
  .special-emoji,
  .hero::before,
  .nutrition-bar-fill::after,
  .skeleton,
  .shop-status-dot {
    animation: none !important;
  }
  .menu-card:hover {
    transform: translateY(-4px);
  }
  .specials-track {
    transition: none;
  }
  .quick-dock {
    transition: opacity 0.2s;
  }
}

/* ── Round 15: Shop-status detail enhancement ──────────────────────────── */
.shop-status-detail {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
  margin-left: 4px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   ROUND 16 — Chef Profiles, Combo Builder, Calorie Goal, Gallery,
   Loyalty Tiers, Coupon Strip, Cursor Glow
   ══════════════════════════════════════════════════════════════════════ */

/* ── Coupon Strip Marquee ───────────────────────────────────────────── */
.coupon-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent-700, #b91c1c), var(--accent-500, #ef4444), var(--accent-700, #b91c1c));
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 12px 0;
  transition: opacity 0.4s ease, max-height 0.4s ease;
  min-height: 76px;
  display: flex;
  align-items: center;
}
.coupon-strip.hidden { max-height: 0; min-height: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.coupon-strip.faded { opacity: 0.55; }
.coupon-strip:hover .coupon-track { animation-play-state: paused; }
.coupon-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: coupon-marquee 36s linear infinite;
}
@keyframes coupon-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.coupon-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.12);
  border: 1px dashed rgba(255,255,255,0.55);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s;
  backdrop-filter: blur(6px);
}
.coupon-card:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  border-style: solid;
  border-color: rgba(255,255,255,0.9);
}
.coupon-card.accent-amber { border-color: #fde68a; }
.coupon-card.accent-emerald { border-color: #a7f3d0; }
.coupon-card.accent-rose { border-color: #fecdd3; }
.coupon-card.accent-violet { border-color: #ddd6fe; }
.coupon-emoji { font-size: 18px; }
.coupon-body { display: flex; flex-direction: column; line-height: 1.2; }
.coupon-label { font-size: 11px; opacity: 0.92; }
.coupon-code { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.coupon-cta {
  font-size: 10px;
  background: rgba(255,255,255,0.9);
  color: var(--accent-700, #b91c1c);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 700;
  text-transform: uppercase;
}
.coupon-strip-dismiss {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.coupon-strip-dismiss:hover { background: rgba(0,0,0,0.32); }

/* ── Chef Profiles Carousel ───────────────────────────────────────── */
.chef-profiles { padding: 70px 0; }
.chef-stage-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.chef-nav {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s, background 0.2s, box-shadow 0.25s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.chef-nav:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.chef-stage {
  flex: 1;
  padding: 32px;
  border-radius: 24px;
  min-height: 280px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
.chef-stage[data-accent="amber"]    { background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.04)); }
.chef-stage[data-accent="rose"]     { background: linear-gradient(135deg, rgba(244,114,182,0.12), rgba(236,72,150,0.04)); }
.chef-stage[data-accent="emerald"]  { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.04)); }
.chef-stage[data-accent="violet"]   { background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(124,58,237,0.04)); }
.chef-avatar {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface, #fff);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  overflow: hidden;
}
.chef-emoji { font-size: 64px; animation: chef-bob 4s ease-in-out infinite; }
@keyframes chef-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.chef-initials {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--accent-500, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.05em;
}
.chef-ring {
  position: absolute;
  inset: -6px;
  border: 2px dashed rgba(239,68,68,0.4);
  border-radius: 50%;
  animation: chef-ring-rotate 16s linear infinite;
}
@keyframes chef-ring-rotate { to { transform: rotate(360deg); } }
.chef-body { display: flex; flex-direction: column; gap: 10px; }
.chef-role-chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-500, #ef4444);
  color: #fff;
}
.chef-name { font-size: 26px; font-weight: 700; color: var(--text, #1f2937); margin: 0; }
.chef-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.chef-stat { display: flex; align-items: center; gap: 6px; }
.chef-stat-icon { font-size: 18px; }
.chef-stat-value { font-weight: 700; color: var(--text, #1f2937); }
.chef-stat-label { font-size: 12px; opacity: 0.65; }
.chef-bio { font-size: 15px; line-height: 1.55; color: var(--muted, #6b7280); max-width: 60ch; }
.chef-signature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(239,68,68,0.08);
  border-radius: 10px;
}
.chef-signature-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.chef-signature-value { font-weight: 600; color: var(--accent-700, #b91c1c); }
.chef-specialties { display: flex; flex-direction: column; gap: 6px; }
.chef-spec-label { font-size: 12px; opacity: 0.7; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.spec-chip {
  font-size: 11px;
  padding: 3px 9px;
  background: var(--surface-2, #f3f4f6);
  color: var(--text, #1f2937);
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
}
.chef-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.chef-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong, #d1d5db);
  border: none;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
  padding: 0;
}
.chef-dot.active {
  width: 32px;
  border-radius: 6px;
  background: var(--accent-500, #ef4444);
}

/* ── Combo Builder ────────────────────────────────────────────────── */
.combo-builder { padding: 70px 0; background: var(--surface-2, #f9fafb); }
.combo-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-top: 28px;
}
.combo-configurator {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.combo-fieldset { border: none; padding: 0; margin: 0; }
.combo-legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-700, #b91c1c);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.combo-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.combo-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 2px solid var(--border, #e5e7eb);
  background: var(--surface-2, #f9fafb);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font: inherit;
  color: inherit;
}
.combo-option:hover {
  transform: translateY(-2px);
  border-color: var(--accent-500, #ef4444);
}
.combo-option.active {
  border-color: var(--accent-500, #ef4444);
  background: rgba(239,68,68,0.08);
  box-shadow: 0 4px 12px rgba(239,68,68,0.18);
}
.combo-option .option-label { font-weight: 600; font-size: 13px; }
.combo-option .option-price { font-size: 12px; opacity: 0.7; }
.sauce-option { flex-direction: row; align-items: center; gap: 8px; }
.sauce-emoji { font-size: 18px; }
.combo-toppings { display: flex; flex-direction: column; gap: 12px; }
.topping-group { display: flex; flex-direction: column; gap: 6px; }
.topping-group-label { font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.topping-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.topping-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}
.topping-chip:hover { border-color: var(--accent-500, #ef4444); transform: translateY(-1px); }
.topping-chip.active {
  background: var(--accent-500, #ef4444);
  color: #fff;
  border-color: var(--accent-500, #ef4444);
}
.topping-chip .chip-emoji { font-size: 14px; }
.topping-chip .chip-price { font-size: 10px; opacity: 0.8; }
.combo-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.combo-actions button { flex: 1; }

.combo-preview { position: sticky; top: 90px; align-self: start; }
.combo-preview-card {
  padding: 22px;
  border-radius: 18px;
  text-align: center;
}
.combo-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  margin-bottom: 12px;
  min-height: 32px;
}
.combo-pizza-visual {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fef3c7 0%, #fde68a 70%, #f59e0b 100%);
  box-shadow: 0 12px 28px rgba(245,158,11,0.3);
}
.pizza-base {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff7ed 0%, #fef3c7 100%);
}
.pizza-sauce {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(220,38,38,0.4) 0%, rgba(220,38,38,0.15) 100%);
}
.pizza-sauce[data-sauce="tikka"] { background: radial-gradient(circle at 50% 50%, rgba(180,83,9,0.55), rgba(180,83,9,0.2)); }
.pizza-sauce[data-sauce="white"] { background: radial-gradient(circle at 50% 50%, rgba(251,191,36,0.45), rgba(251,191,36,0.2)); }
.pizza-sauce[data-sauce="pesto"] { background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.5), rgba(16,185,129,0.2)); }
.pizza-topping {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pizza-crust {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 12px solid #b45309;
  box-sizing: border-box;
}
.pizza-crust.crust-thin { border-width: 6px; border-color: #d97706; }
.pizza-crust.crust-stuffed { border-color: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,0.5) inset; }
.pizza-crust.crust-garlic { border-color: #a3e635; box-shadow: 0 0 0 4px rgba(163,230,53,0.4) inset; }

.combo-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.combo-summary-block {
  background: var(--surface-2, #f3f4f6);
  padding: 10px;
  border-radius: 8px;
}
.combo-summary-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.combo-price { font-size: 20px; font-weight: 700; color: var(--accent-700, #b91c1c); }
.combo-kcal { font-size: 18px; font-weight: 700; color: var(--text, #1f2937); }
.combo-protein { font-size: 16px; font-weight: 600; color: var(--text, #1f2937); }
.combo-topping-count { font-size: 14px; font-weight: 600; color: var(--text, #1f2937); }

/* ── Calorie Goal Picker ───────────────────────────────────────────── */
.calorie-goal-section { padding: 70px 0; }
.calorie-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  margin-top: 28px;
}
.calorie-control {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.calorie-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.calorie-preset {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 2px solid var(--border, #e5e7eb);
  background: var(--surface-2, #f9fafb);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font: inherit;
  color: inherit;
}
.calorie-preset:hover { transform: translateY(-2px); border-color: var(--accent-500, #ef4444); }
.calorie-preset.active {
  border-color: var(--accent-500, #ef4444);
  background: rgba(239,68,68,0.08);
}
.preset-emoji { font-size: 18px; }
.preset-label { font-weight: 600; font-size: 13px; }
.preset-kcal { font-size: 11px; opacity: 0.7; }

.calorie-slider-wrap { display: flex; flex-direction: column; gap: 6px; }
.calorie-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  outline: none;
  cursor: pointer;
}
.calorie-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-500, #ef4444);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.calorie-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-500, #ef4444);
  cursor: pointer;
}
.calorie-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  opacity: 0.6;
  padding: 0 8px;
}

.calorie-progress { display: flex; flex-direction: column; gap: 6px; }
.calorie-progress-top { display: flex; justify-content: space-between; align-items: center; }
.calorie-progress-label { font-size: 12px; opacity: 0.7; }
.calorie-status-chip {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.calorie-status-chip.under  { background: rgba(16,185,129,0.15); color: #047857; }
.calorie-status-chip.near   { background: rgba(245,158,11,0.15); color: #b45309; }
.calorie-status-chip.over   { background: rgba(239,68,68,0.15);  color: #b91c1c; }
.calorie-progress-track {
  height: 12px;
  border-radius: 6px;
  background: var(--surface-2, #f3f4f6);
  overflow: hidden;
  position: relative;
}
.calorie-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.calorie-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2.5s infinite;
}
.calorie-progress-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.calorie-progress-foot strong { color: var(--text, #1f2937); }
#calorie-remaining.over { color: #b91c1c; font-weight: 600; }
.calorie-goal-display {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(245,158,11,0.05));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calorie-goal-eyebrow { font-size: 10px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.06em; }
.calorie-goal-value { font-size: 18px; font-weight: 700; color: var(--accent-700, #b91c1c); }

.calorie-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-content: start;
}
.calorie-sug-card {
  padding: 16px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.calorie-sug-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); border-color: var(--accent-500, #ef4444); }
.sug-emoji { font-size: 28px; }
.sug-name { font-weight: 600; font-size: 14px; margin: 0; }
.sug-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}
.sug-meta span { padding: 2px 6px; border-radius: 4px; background: var(--surface-2, #f3f4f6); }
.sug-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2, #f3f4f6);
  overflow: hidden;
}
.sug-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  transition: width 0.4s ease;
}
.sug-add-btn {
  margin-top: auto;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: var(--accent-500, #ef4444);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.2s, transform 0.2s;
}
.sug-add-btn:hover { background: var(--accent-700, #b91c1c); transform: scale(1.04); }
.calorie-empty { padding: 20px; text-align: center; opacity: 0.6; font-size: 14px; }

/* ── Photo Gallery + Lightbox ──────────────────────────────────────── */
.gallery-section { padding: 70px 0; background: var(--surface-2, #f9fafb); }
.gallery-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px 0 28px;
}
.gallery-tag {
  padding: 6px 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
  color: inherit;
  font-family: inherit;
}
.gallery-tag:hover { transform: translateY(-1px); border-color: var(--accent-500, #ef4444); }
.gallery-tag.active {
  background: var(--accent-500, #ef4444);
  color: #fff;
  border-color: var(--accent-500, #ef4444);
}
.gallery-grid {
  column-count: 4;
  column-gap: 14px;
}
@media (max-width: 1024px) { .gallery-grid { column-count: 3; } }
@media (max-width: 768px)  { .gallery-grid { column-count: 2; } }
@media (max-width: 480px)  { .gallery-grid { column-count: 1; } }

.gallery-item {
  break-inside: avoid;
  margin-bottom: 14px;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #fff);
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); }
.gallery-tile {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, var(--card-color, #ef4444) 0%, transparent 70%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.05) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.gallery-emoji {
  font-size: 80px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gallery-item:hover .gallery-emoji { transform: scale(1.15) rotate(-4deg); }
.gallery-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent, var(--card-color, #ef4444), transparent, var(--card-color, #ef4444), transparent);
  opacity: 0.18;
  border-radius: 50%;
  animation: gallery-spin 14s linear infinite;
}
@keyframes gallery-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gallery-tag-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.85);
  color: var(--card-color, #ef4444);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.gallery-caption {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  backdrop-filter: blur(10px);
}
.gallery-lightbox.open { display: flex; animation: gallery-lb-in 0.35s ease; }
@keyframes gallery-lb-in { from { opacity: 0; } to { opacity: 1; } }
.gallery-lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.gallery-lb-close:hover { background: rgba(255,255,255,0.25); }
.gallery-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  transition: background 0.2s;
}
.gallery-lb-nav:hover { background: rgba(255,255,255,0.25); }
.gallery-lb-prev { left: 24px; }
.gallery-lb-next { right: 24px; }
.gallery-lb-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 600px;
}
.lb-emoji { font-size: 220px; line-height: 1; filter: drop-shadow(0 8px 30px rgba(255,255,255,0.2)); animation: gallery-lb-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes gallery-lb-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-caption { color: #fff; font-size: 18px; }
.lb-counter { color: rgba(255,255,255,0.6); font-size: 13px; }

/* ── Loyalty Tiers ────────────────────────────────────────────────── */
.loyalty-tiers { padding: 70px 0; }
.loyalty-current {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  margin-top: 24px;
}
.loyalty-current-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(205,127,50,0.12);
  color: #92400e;
  font-weight: 700;
  align-self: flex-start;
  border: 1px solid rgba(205,127,50,0.3);
}
.loyalty-current-chip[data-tier="silver"]   { background: rgba(156,163,175,0.15); color: #4b5563; border-color: rgba(156,163,175,0.4); }
.loyalty-current-chip[data-tier="gold"]     { background: rgba(251,191,36,0.15);   color: #92400e; border-color: rgba(251,191,36,0.4); }
.loyalty-current-chip[data-tier="platinum"] { background: rgba(167,139,250,0.15); color: #5b21b6; border-color: rgba(167,139,250,0.4); }
.tier-emoji { font-size: 16px; }
.loyalty-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
.loyalty-progress-track {
  height: 16px;
  border-radius: 8px;
  background: var(--surface-2, #f3f4f6);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.loyalty-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.loyalty-fill.animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 2s infinite;
}
.loyalty-progress-label {
  position: absolute;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}
.loyalty-progress-pct {
  position: absolute;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}

.loyalty-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.tier-node {
  position: relative;
  padding: 18px 12px;
  border-radius: 14px;
  background: var(--surface-2, #f9fafb);
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.tier-node.unlocked { background: color-mix(in srgb, var(--tier-color) 12%, white); border-color: color-mix(in srgb, var(--tier-color) 30%, transparent); }
.tier-node.active { background: color-mix(in srgb, var(--tier-color) 18%, white); border-color: var(--tier-color); box-shadow: 0 8px 20px color-mix(in srgb, var(--tier-color) 30%, transparent); transform: translateY(-4px); }
.tier-node-emoji { font-size: 32px; display: block; }
.tier-node-name { font-weight: 700; font-size: 14px; margin: 4px 0; color: var(--text, #1f2937); }
.tier-node-threshold { font-size: 11px; opacity: 0.7; }
.tier-active-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tier-color);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.7);
  animation: tier-pulse 2s infinite;
}
@keyframes tier-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.loyalty-perks {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.loyalty-perks-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #6b7280); margin: 0 0 4px; }
.perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  transition: transform 0.2s;
}
.perk-item:hover { transform: translateX(4px); }
.perk-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16,185,129,0.15);
  color: #047857;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.perk-text { font-size: 14px; }

.loyalty-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* ── Cursor Glow ──────────────────────────────────────────────────── */
.cursor-glow {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(239,68,68,0.18), transparent 70%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  top: 0;
  left: 0;
  transition: opacity 0.3s;
  will-change: transform;
}
.cursor-halo {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.08), transparent 60%);
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
  top: 0;
  left: 0;
  will-change: transform;
  transition: opacity 0.3s;
}
.cursor-halo.pulse {
  background: radial-gradient(circle at 50% 50%, rgba(239,68,68,0.16), transparent 60%);
}

/* ── Reduced motion overrides ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .coupon-track { animation: none; }
  .chef-emoji { animation: none; }
  .chef-ring { animation: none; }
  .gallery-burst { animation: none; }
  .tier-active-dot { animation: none; }
  .loyalty-fill.animated::after { animation: none; }
  .calorie-progress-fill::after { animation: none; }
  .cursor-glow, .cursor-halo { display: none; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .combo-grid { grid-template-columns: 1fr; }
  .combo-preview { position: static; }
  .calorie-grid { grid-template-columns: 1fr; }
  .loyalty-ladder { grid-template-columns: repeat(2, 1fr); }
  .chef-stage { grid-template-columns: 1fr; text-align: center; }
  .chef-avatar { margin: 0 auto; }
  .chef-body { align-items: center; }
}
@media (max-width: 600px) {
  .chef-stage { padding: 20px; }
  .chef-stats { justify-content: center; }
  .combo-configurator, .calorie-control, .loyalty-current { padding: 16px; }
  .gallery-grid { column-count: 1; }
  .loyalty-ladder { grid-template-columns: 1fr 1fr; }
}

/* ── Dark mode overrides for Round 16 ──────────────────────────────── */
[data-theme="dark"] .chef-stage,
[data-theme="dark"] .combo-configurator,
[data-theme="dark"] .calorie-control,
[data-theme="dark"] .loyalty-current,
[data-theme="dark"] .perk-item,
[data-theme="dark"] .gallery-item,
[data-theme="dark"] .calorie-sug-card {
  background: rgba(255,255,255,0.04);
  color: var(--text, #e5e7eb);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .chef-stage[data-accent="amber"]    { background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.06)); }
[data-theme="dark"] .chef-stage[data-accent="rose"]     { background: linear-gradient(135deg, rgba(244,114,182,0.18), rgba(236,72,150,0.06)); }
[data-theme="dark"] .chef-stage[data-accent="emerald"]  { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.06)); }
[data-theme="dark"] .chef-stage[data-accent="violet"]   { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(124,58,237,0.06)); }
[data-theme="dark"] .combo-preview-card,
[data-theme="dark"] .chef-avatar { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .preset-emoji,
[data-theme="dark"] .chef-emoji,
[data-theme="dark"] .gallery-emoji { filter: brightness(1.1); }
[data-theme="dark"] .cursor-glow,
[data-theme="dark"] .cursor-halo { mix-blend-mode: screen; }

[data-theme="gradient"] .chef-stage,
[data-theme="gradient"] .combo-configurator,
[data-theme="gradient"] .calorie-control,
[data-theme="gradient"] .loyalty-current,
[data-theme="gradient"] .perk-item,
[data-theme="gradient"] .gallery-item,
[data-theme="gradient"] .calorie-sug-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
}
[data-theme="gradient"] .combo-preview-card,
[data-theme="gradient"] .chef-avatar { background: rgba(255,255,255,0.1); }