/* ============================================================
   KAPI CAFE – Premium QR Table Menu
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brown-dark:  #1A0A00;
  --brown-mid:   #2C1A0E;
  --brown-rich:  #3D2010;
  --brown-warm:  #5C3317;
  --gold:        #C9A84C;
  --gold-light:  #E8C96A;
  --gold-pale:   #F5E0A0;
  --gold-muted:  #8B6914;
  --beige:       #FDF6E3;
  --beige-warm:  #F5E6C8;
  --beige-mid:   #EAD9B8;
  --green-deep:  #0D2818;
  --green-mid:   #1B4332;
  --green-light: #52B788;
  --chalk:       #F0EAD6;
  --text-main:   #1A0A00;
  --text-mid:    #4A2C17;
  --text-soft:   #7B5A3A;
  --red-dot:     #D32F2F;
  --green-dot:   #2E7D32;
  --radius:      14px;
  --shadow-card: 0 4px 20px rgba(44,26,14,0.12);
  --shadow-hover:0 8px 32px rgba(44,26,14,0.22);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--beige);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── APP WRAPPER ─────────────────────────────────────────────── */
.app { opacity: 1; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;        /* fallback for all browsers */
  min-height: 100svh;       /* modern: accounts for mobile chrome bar */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #3D1F0A 0%, #1A0A00 65%, #0D0500 100%);
  overflow: hidden; padding: 40px 20px 80px;
}

#particleCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.6;
}

/* Bokeh lights */
.hero-bokeh { position: absolute; inset: 0; pointer-events: none; }

/* ── COCONUT TREES ───────────────────────────────────────────── */
.coconut-tree {
  position: absolute;
  bottom: 0;
  width: 140px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(27,67,50,0.4));
}
.tree-left {
  left: -10px;
  transform-origin: bottom center;
  animation: treeSway 8s ease-in-out infinite;
}
.tree-right {
  right: -10px;
  transform-origin: bottom center;
  animation: treeSway 8s ease-in-out infinite reverse;
  animation-delay: -3s;
}
@keyframes treeSway {
  0%,100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@media (min-width: 600px) {
  .coconut-tree { width: 180px; opacity: 0.6; }
  .tree-left    { left: 0; }
  .tree-right   { right: 0; }
}
@media (min-width: 1024px) {
  .coconut-tree { width: 260px; opacity: 0.65; }
  .tree-left    { left: 20px; }
  .tree-right   { right: 20px; }
}
@media (max-width: 359px) {
  .coconut-tree { display: none; }
}
.bokeh {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.25) 0%, transparent 70%);
  animation: bokehFloat 6s ease-in-out infinite;
}
.b1 { width:200px;height:200px; top:10%;left:15%; animation-delay:0s; }
.b2 { width:140px;height:140px; top:60%;left:70%; animation-delay:1.5s; }
.b3 { width:100px;height:100px; top:30%;left:80%; animation-delay:3s; }
.b4 { width:180px;height:180px; top:70%;left:10%; animation-delay:2s; }
.b5 { width:120px;height:120px; top:20%;left:50%; animation-delay:4s; }

@keyframes bokehFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50%      { transform: translateY(-20px) scale(1.1); opacity: 1; }
}

.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 500px; }

.hero-lamp-wrap {
  position: relative; display: inline-block; margin-bottom: 16px;
}
.lamp-glow-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.35) 0%, transparent 70%);
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; }
  50%      { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
}
.lamp-svg { font-size: 3.5rem; position: relative; z-index: 1; }

.hero-welcome {
  font-family: 'Dancing Script', cursive;
  color: var(--gold); font-size: 1.2rem;
  letter-spacing: 3px; opacity: 0.85; margin-bottom: 8px;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.2rem, 14vw, 5.5rem);
  font-weight: 700; color: var(--gold-light);
  letter-spacing: 4px; line-height: 1;
  text-shadow: 0 0 40px rgba(201,168,76,0.4), 0 4px 12px rgba(0,0,0,0.7);
}
.hero-title-ml {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem; color: var(--gold);
  opacity: 0.75; margin-top: 4px;
}
.hero-orn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 16px auto; width: 220px;
}
.hero-orn span:first-child, .hero-orn span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
}
.hero-orn span:nth-child(2) { color: var(--gold); font-size: 0.8rem; }

.hero-sub {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--chalk); font-size: 0.95rem;
  opacity: 0.7; letter-spacing: 1px; margin-bottom: 24px;
}
.hero-badges {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.badge {
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold-pale); font-size: 0.78rem;
  padding: 5px 12px; border-radius: 20px;
  letter-spacing: 0.5px; backdrop-filter: blur(4px);
}

.hero-scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--gold); opacity: 0.5; font-size: 0.75rem;
  letter-spacing: 1px; animation: hintBounce 2s ease-in-out infinite;
}
.scroll-arrow {
  width: 12px; height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}
@keyframes hintBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ── SPECIAL BANNER ──────────────────────────────────────────── */
.special-banner {
  background: linear-gradient(90deg, #7B1A00, #C0392B, #7B1A00);
  padding: 10px 16px; text-align: center;
  border-bottom: 2px solid rgba(255,100,50,0.3);
}
.special-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.special-fire { font-size: 1rem; }
.special-text {
  color: #FFE0D0; font-size: 0.85rem; letter-spacing: 0.5px;
}
.special-text strong { color: #FFD0A0; }

/* ── CATEGORY PILL NAV ───────────────────────────────────────── */
.cat-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--brown-dark);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.cat-nav-inner {
  display: flex; gap: 6px; padding: 10px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }

.cat-pill {
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--chalk); font-size: 0.8rem;
  padding: 7px 14px; border-radius: 20px;
  cursor: pointer; white-space: nowrap;
  transition: all 0.25s ease; font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px;
}
.cat-pill:hover, .cat-pill.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown-dark);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(201,168,76,0.4);
}

/* ── MENU MAIN ───────────────────────────────────────────────── */
.menu-main {
  padding-bottom: 80px; /* space for bottom nav */
}

/* ── SECTION ─────────────────────────────────────────────────── */
.menu-section {
  padding: 36px 16px 20px;
  max-width: 700px; margin: 0 auto;
}

.sec-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
}
.sec-icon-wrap {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.veg-icon     { background: linear-gradient(135deg, #1B4332, #2D6A4F); }
.chicken-icon { background: linear-gradient(135deg, #7B1A00, #C0392B); }
.biriyani-icon{ background: linear-gradient(135deg, #5C3317, #8B5E3C); }
.porotta-icon { background: linear-gradient(135deg, #3D2010, #6B3D20); }
.chatti-icon  { background: linear-gradient(135deg, #0D2818, #1B4332); }
.arabic-icon  { background: linear-gradient(135deg, #1A0A00, #3D2010); }
.shawarma-icon{ background: linear-gradient(135deg, #4A1A00, #8B3A00); }
.seafood-icon { background: linear-gradient(135deg, #0A1A2C, #1A3A5C); }

.sec-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem; color: var(--brown-dark); letter-spacing: 1px;
}
.sec-ml {
  font-family: 'Dancing Script', cursive;
  font-size: 1rem; color: var(--text-soft); margin-top: 1px;
}
.sec-note {
  font-size: 0.8rem; color: var(--green-light);
  background: rgba(27,67,50,0.08);
  border: 1px solid rgba(82,183,136,0.2);
  border-radius: 8px; padding: 6px 12px;
  margin-bottom: 14px; display: inline-block;
}

/* ── ITEM CARDS ──────────────────────────────────────────────── */
.items-grid {
  display: flex; flex-direction: column; gap: 8px;
}

/* BUG FIX: cards visible by default; JS adds animation class */
.item-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(44,26,14,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
  /* opacity: 1 by default — JS will animate in */
}
/* JS adds .will-animate before observing, then .visible to reveal */
.item-card.will-animate {
  opacity: 0; transform: translateY(16px);
}
.item-card.visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease;
}
.item-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-hover);
}

/* Veg / Non-veg dot */
.veg-dot {
  width: 12px; height: 12px; border-radius: 2px;
  border: 1.5px solid; flex-shrink: 0; margin-top: 4px;
}
.veg-dot.green { border-color: var(--green-dot); background: transparent; position: relative; }
.veg-dot.green::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-dot);
}
.veg-dot.red { border-color: var(--red-dot); background: transparent; position: relative; }
.veg-dot.red::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red-dot);
}

.item-info { flex: 1; }
.item-name {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.95rem; color: var(--text-main);
  line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.item-desc {
  font-size: 0.78rem; color: var(--text-soft);
  margin-top: 3px; line-height: 1.4;
}

/* Special / popular cards */
.special-card {
  background: linear-gradient(135deg, #FFFBF0 0%, #FFF8E1 100%);
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 4px 20px rgba(201,168,76,0.12);
}

.hot-tag {
  font-size: 0.65rem; font-weight: 600;
  background: linear-gradient(90deg, var(--gold-muted), var(--gold));
  color: var(--brown-dark); padding: 2px 7px;
  border-radius: 10px; letter-spacing: 0.3px; white-space: nowrap;
}

/* ── LEAF SECTION ────────────────────────────────────────────── */
.section-leaf {
  background: linear-gradient(180deg, #0D2818 0%, #1B4332 100%);
  max-width: 100%; padding: 36px 16px 28px;
}
/* BUG FIX: cap inner content on ultrawide screens */
.section-leaf > *:not(.leaf-bg-deco) {
  max-width: min(700px, 100%);
  margin-left: auto; margin-right: auto;
}
.section-leaf .sec-title { color: #A8D5A2; }
.section-leaf .sec-ml { color: var(--green-light); }

.leaf-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(82,183,136,0.2);
  backdrop-filter: blur(4px);
}
.leaf-card .item-name { color: #D4F0D4; }
.leaf-card .item-desc { color: rgba(212,240,212,0.6); }
.leaf-card.special-card {
  background: rgba(82,183,136,0.12);
  border-color: rgba(82,183,136,0.35);
}

/* ── ARABIC SECTION ──────────────────────────────────────────── */
.section-arabic {
  background: linear-gradient(180deg, #1A0A00 0%, #2C1A0E 100%);
  max-width: 100%; padding: 36px 16px 28px;
  position: relative; overflow: hidden;
}
/* BUG FIX: cap inner content on ultrawide screens */
.section-arabic > *:not(.arabic-bg-deco) {
  max-width: min(700px, 100%);
  margin-left: auto; margin-right: auto;
}
.section-arabic .sec-title { color: var(--gold-light); }
.section-arabic .sec-ml { color: var(--gold); }

.arabic-bg-deco {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 30px,
    rgba(201,168,76,0.03) 30px, rgba(201,168,76,0.03) 32px
  );
}

.arabic-card {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.25);
  position: relative;
}
.arabic-card.special-card {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.4);
}
.arabic-card .item-name { color: #E8D5A0; }
.arabic-card .item-desc { color: rgba(232,213,160,0.6); }

.arabic-badge {
  font-size: 1.2rem; flex-shrink: 0; margin-top: 2px;
}

/* ── COFFEE SECTION ──────────────────────────────────────────── */
.coffee-section {
  position: relative;
  background: linear-gradient(135deg, #1A0A00 0%, #2C1A0E 50%, #1A0A00 100%);
  padding: 60px 20px; text-align: center; overflow: hidden;
}
.coffee-inner { position: relative; z-index: 1; }

.coffee-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--gold-light); letter-spacing: 2px;
}
.coffee-ml {
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem; color: var(--gold); opacity: 0.8; margin-top: 4px;
}
.coffee-sub {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--chalk); font-size: 0.9rem; opacity: 0.6;
  margin: 8px 0 36px;
}

.cups-row {
  display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
}

.cup-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.3s ease;
}
.cup-card:hover { transform: translateY(-10px); }

/* Steam */
.steam-box {
  display: flex; gap: 5px; height: 36px;
  align-items: flex-end; margin-bottom: 4px;
}
.stm {
  width: 3px; height: 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  border-radius: 50%; opacity: 0;
  animation: steamUp 2.2s ease-in-out infinite;
}
.stm:nth-child(1) { animation-delay: 0s; }
.stm:nth-child(2) { animation-delay: 0.35s; }
.stm:nth-child(3) { animation-delay: 0.7s; }

@keyframes steamUp {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  25%  { opacity: 0.7; }
  75%  { opacity: 0.3; transform: translateY(-18px) scaleX(1.8); }
  100% { opacity: 0; transform: translateY(-30px) scaleX(2.5); }
}

/* Cup shapes */
.cup-visual {
  width: 56px; height: 46px;
  border-radius: 4px 4px 14px 14px;
  position: relative;
}
.cup-visual::after {
  content: ''; position: absolute;
  right: -13px; top: 8px;
  width: 13px; height: 20px;
  border: 4px solid transparent;
  border-radius: 0 50% 50% 0;
}
.cup-visual.kapi {
  background: linear-gradient(180deg, #6B3D20, #3D1F0A);
}
.cup-visual.kapi::after { border-color: #C9A84C; }

.cup-visual.chai {
  background: linear-gradient(180deg, #C47A2A, #7B3D10);
}
.cup-visual.chai::after { border-color: #E8C96A; }

.cup-visual.black {
  background: linear-gradient(180deg, #2C1A0E, #0D0500);
  border: 1px solid rgba(201,168,76,0.3);
}
.cup-visual.black::after { border-color: #C9A84C; }

.saucer-visual {
  width: 72px; height: 8px;
  background: linear-gradient(90deg, #8B6914, #C9A84C, #8B6914);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cup-name {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem; color: var(--chalk); margin-top: 8px;
}
.cup-name-ml {
  font-family: 'Dancing Script', cursive;
  font-size: 0.8rem; color: var(--gold); opacity: 0.7;
}

/* ── BOTTOM NAV ──────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--brown-dark);
  border-top: 1px solid rgba(201,168,76,0.2);
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.bnav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  color: rgba(240,234,214,0.5); font-size: 1.3rem;
  padding: 4px 10px; border-radius: 10px;
  transition: all 0.2s ease; min-width: 52px;
}
.bnav-btn span {
  font-size: 0.62rem; font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px; line-height: 1;
}
.bnav-btn.active, .bnav-btn:hover {
  color: var(--gold-light);
  background: rgba(201,168,76,0.12);
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--brown-dark); text-align: center;
  padding: 48px 20px 100px; /* extra bottom for bottom nav */
}
.footer-orn {
  height: 2px; max-width: 300px; margin: 0 auto 32px;
  background: linear-gradient(90deg, transparent, var(--gold-muted), var(--gold-light), var(--gold-muted), transparent);
}
.footer-lamp {
  font-size: 2.2rem; display: block; margin-bottom: 10px;
  animation: glowPulse 3s ease-in-out infinite;
}
.footer-name {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; color: var(--gold-light); letter-spacing: 4px;
}
.footer-ml {
  font-family: 'Dancing Script', cursive;
  font-size: 1.1rem; color: var(--gold); opacity: 0.75; margin-top: 4px;
}
.footer-div {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 18px auto; width: 160px;
}
.footer-div span:first-child, .footer-div span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
}
.footer-div span:nth-child(2) { color: var(--gold); font-size: 0.75rem; }
.footer-tag {
  font-size: 0.78rem; color: var(--chalk); letter-spacing: 2px;
  text-transform: uppercase; opacity: 0.5;
}
.footer-note {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--chalk); font-size: 0.85rem; opacity: 0.4; margin-top: 12px;
}

/* ── SECTION DIVIDERS ────────────────────────────────────────── */
.menu-section + .menu-section {
  border-top: 1px solid rgba(44,26,14,0.07);
}

/* ── TABLE BANNER ────────────────────────────────────────────── */
.table-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 10px 20px;
  background: linear-gradient(90deg, var(--brown-dark), var(--brown-mid), var(--brown-dark));
  border-bottom: 1px solid rgba(201,168,76,0.25);
}
.table-icon { font-size: 1.1rem; }
.table-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; color: var(--gold-light);
  font-weight: 700; letter-spacing: 2px;
}
.table-sub {
  font-family: 'Dancing Script', cursive;
  font-size: 0.85rem; color: var(--gold);
  opacity: 0.7;
}

/* ── ALLERGEN LEGEND ─────────────────────────────────────────── */
.allergen-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--beige-warm);
  border-bottom: 1px solid rgba(44,26,14,0.08);
  font-size: 0.75rem; color: var(--text-soft);
}
.legend-title {
  font-weight: 600; color: var(--text-mid);
  letter-spacing: 0.5px; text-transform: uppercase;
  font-size: 0.7rem;
}
.allergen-legend span { white-space: nowrap; }

/* ── SECTION IMAGE ───────────────────────────────────────────── */
.sec-img {
  width: 80px; height: 60px;
  object-fit: cover; border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(44,26,14,0.15);
  border: 2px solid rgba(201,168,76,0.2);
}
.section-leaf .sec-img  { border-color: rgba(82,183,136,0.3); }
.section-arabic .sec-img { border-color: rgba(201,168,76,0.3); }

/* ── ITEM NAME ROW (name + price) ────────────────────────────── */
.item-name-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 8px;
  margin-bottom: 2px;
}
.item-name-row .item-name {
  flex: 1; margin-bottom: 0;
}
.item-price {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem; font-weight: 700;
  color: var(--gold-muted); white-space: nowrap;
  flex-shrink: 0; padding-top: 1px;
}
.arabic-price { color: var(--gold-light); }
.leaf-card .item-price { color: #A8D5A2; }

/* ── ITEM META (allergens + spice) ───────────────────────────── */
.item-meta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 5px; flex-wrap: wrap; min-height: 18px;
}
.allergen {
  font-size: 0.85rem; cursor: help;
  filter: saturate(0.8);
}
.spice {
  font-size: 0.75rem; letter-spacing: -1px;
  cursor: help;
}

/* ── SVG SECTION DIVIDER ─────────────────────────────────────── */
.section-divider {
  padding: 4px 16px;
  background: var(--beige-light, var(--beige));
}
.section-divider svg {
  width: 100%; height: 20px; display: block;
}

/* ── WOOD GRAIN TEXTURE on body ──────────────────────────────── */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE – Mobile-first, scales to laptop/desktop
   ══════════════════════════════════════════════════════════════ */

/* ── TINY PHONES (< 360px) ───────────────────────────────────── */
@media (max-width: 359px) {
  .hero-title        { font-size: 2.6rem; letter-spacing: 2px; }
  .hero-welcome      { font-size: 1rem; }
  .hero-sub          { font-size: 0.82rem; }
  .badge             { font-size: 0.7rem; padding: 4px 9px; }
  .cat-pill          { font-size: 0.7rem; padding: 5px 9px; }
  .sec-title         { font-size: 1.4rem; }
  .item-name         { font-size: 0.88rem; }
  .item-desc         { font-size: 0.72rem; }
  .splash-name       { font-size: 2.2rem; letter-spacing: 3px; }
}

/* ── SMALL PHONES (360–479px) ────────────────────────────────── */
@media (min-width: 360px) and (max-width: 479px) {
  .hero-title        { font-size: 3rem; }
  .items-grid        { gap: 8px; }
  .item-card         { padding: 12px 14px; }
  .menu-section      { padding: 28px 14px 16px; }
  .section-leaf,
  .section-arabic    { padding: 28px 14px 20px; }
}

/* ── LARGE PHONES / PHABLETS (480–767px) ─────────────────────── */
@media (min-width: 480px) {
  .items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .menu-section      { padding: 32px 20px 20px; }
  .section-leaf,
  .section-arabic    { padding: 32px 20px 24px; }
  .cups-row          { gap: 48px; }
}

/* ── TABLETS (768–1023px) ────────────────────────────────────── */
@media (min-width: 768px) {
  /* Wider content area */
  .menu-section      { max-width: 860px; padding: 40px 32px 28px; }
  .section-leaf > *,
  .section-arabic > * { max-width: 860px; }

  .items-grid        { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Pill nav — bigger pills */
  .cat-nav-inner     { padding: 12px 24px; gap: 8px; }
  .cat-pill          { font-size: 0.85rem; padding: 8px 18px; }

  /* Hero */
  .hero-title        { font-size: clamp(4rem, 10vw, 6rem); }
  .hero-inner        { max-width: 600px; }
  .hero-badges       { gap: 10px; }
  .badge             { font-size: 0.82rem; padding: 6px 14px; }

  /* Section headers */
  .sec-icon-wrap     { width: 54px; height: 54px; font-size: 1.7rem; }
  .sec-title         { font-size: 2rem; }

  /* Coffee cups */
  .cup-visual        { width: 68px; height: 56px; }
  .saucer-visual     { width: 88px; }

  /* Bottom nav stays visible on tablet */
  .bottom-nav        { display: flex; }
  .menu-main         { padding-bottom: 80px; }
  .footer            { padding-bottom: 100px; }
}

/* ── LAPTOP / DESKTOP (1024px+) ──────────────────────────────── */
@media (min-width: 1024px) {
  /* Hide mobile bottom nav, use pill nav only */
  .bottom-nav        { display: none; }
  .menu-main         { padding-bottom: 0; }
  .footer            { padding-bottom: 56px; }

  /* Wider pill nav — all pills visible without scroll */
  .cat-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 40px;
    justify-content: center;
    gap: 10px;
    overflow-x: visible;
  }
  .cat-pill          { font-size: 0.88rem; padding: 9px 20px; }

  /* Two-column layout handled by .page-layout wrapper */

  /* All sections fill the right column */
  .menu-section      { max-width: 100%; padding: 40px 40px 28px; }
  .section-leaf      { max-width: 100%; padding: 40px 40px 32px; }
  .section-arabic    { max-width: 100%; padding: 40px 40px 32px; }
  .section-leaf > *,
  .section-arabic > * { max-width: 100%; }

  /* 3-column item grid on desktop */
  .items-grid        { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Bigger cards on desktop */
  .item-card         { padding: 16px 18px; border-radius: 16px; }
  .item-name         { font-size: 1rem; }
  .item-desc         { font-size: 0.82rem; }

  /* Hero — full cinematic */
  .hero              { min-height: 100vh; padding: 60px 40px 100px; }
  .hero-inner        { max-width: 700px; }
  .hero-title        { font-size: clamp(5rem, 8vw, 7rem); }
  .hero-welcome      { font-size: 1.4rem; }
  .hero-title-ml     { font-size: 1.8rem; }
  .hero-sub          { font-size: 1.05rem; }
  .badge             { font-size: 0.85rem; padding: 7px 16px; }

  /* Section headers */
  .sec-icon-wrap     { width: 60px; height: 60px; font-size: 1.9rem; border-radius: 16px; }
  .sec-title         { font-size: 2.2rem; }
  .sec-ml            { font-size: 1.1rem; }

  /* Special banner */
  .special-text      { font-size: 0.95rem; }

  /* Coffee section */
  .coffee-section    { padding: 80px 40px; }
  .cups-row          { gap: 64px; }
  .cup-visual        { width: 76px; height: 64px; }
  .saucer-visual     { width: 96px; height: 10px; }
  .cup-name          { font-size: 1rem; }

  /* Footer */
  .footer-name       { font-size: 2.4rem; }

  /* Hover effects only on pointer devices */
  .item-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }
  .cup-card:hover    { transform: translateY(-12px); }
}

/* ── WIDE DESKTOP (1400px+) ──────────────────────────────────── */
@media (min-width: 1400px) {
  .menu-main         { max-width: 1400px; grid-template-columns: 260px 1fr; }
  .cat-nav-inner     { max-width: 1400px; }
  .items-grid        { grid-template-columns: repeat(4, 1fr); }
  .hero-title        { font-size: 8rem; }
}

/* ── TOUCH DEVICES – remove hover side effects ───────────────── */
@media (hover: none) {
  .item-card:hover   { transform: none; box-shadow: var(--shadow-card); }
  .cup-card:hover    { transform: none; }
}

/* ── NEW ELEMENTS RESPONSIVE ─────────────────────────────────── */
/* Allergen legend — compact on tiny screens */
@media (max-width: 479px) {
  .allergen-legend   { gap: 8px; font-size: 0.7rem; padding: 6px 12px; }
  .legend-title      { display: none; }
  .sec-img           { width: 60px; height: 46px; }
  .item-price        { font-size: 0.88rem; }
  .table-text        { font-size: 0.9rem; }
}

/* Section image — hide on very small screens to save space */
@media (max-width: 359px) {
  .sec-img           { display: none; }
}

/* Larger section images on desktop */
@media (min-width: 1024px) {
  .sec-img           { width: 100px; height: 72px; border-radius: 12px; }
  .item-price        { font-size: 1rem; }
  .allergen-legend   { padding: 8px 40px; font-size: 0.78rem; }
  .section-leaf > *:not(.leaf-bg-deco),
  .section-arabic > *:not(.arabic-bg-deco) { max-width: 100%; }
  .table-text        { font-size: 1.1rem; letter-spacing: 3px; }
}

/* ── UTILITY ─────────────────────────────────────────────────── */
.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;
}

/* ── PAGE LAYOUT (desktop two-column) ───────────────────────── */
.page-layout {
  display: block; /* mobile: single column */
}

/* ── SIDEBAR NAV (desktop only) ──────────────────────────────── */
.sidebar-nav {
  display: none; /* hidden on mobile/tablet */
}

@media (min-width: 1024px) {
  .page-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
    position: relative;
  }

  .sidebar-nav {
    display: block;
    position: sticky;
    top: var(--catnav-h, 57px); /* JS sets --catnav-h on :root */
    height: calc(100vh - var(--catnav-h, 57px));
    overflow-y: auto;
    background: var(--brown-dark);
    border-right: 1px solid rgba(201,168,76,0.15);
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }

  .sidebar-inner {
    display: flex; flex-direction: column;
    padding: 24px 0 32px;
    min-height: 100%;
  }

  .sidebar-logo {
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px 20px;
    font-family: 'Playfair Display', serif;
    font-size: 1rem; color: var(--gold-light);
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(201,168,76,0.12);
    margin-bottom: 12px;
  }

  .sidebar-links {
    list-style: none; flex: 1;
  }

  .sidebar-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 11px 20px;
    background: none; border: none; cursor: pointer;
    color: rgba(240,234,214,0.55);
    font-family: 'Inter', sans-serif; font-size: 0.88rem;
    text-align: left; transition: all 0.2s ease;
    border-left: 3px solid transparent;
  }
  .sidebar-btn:hover {
    color: var(--gold-light);
    background: rgba(201,168,76,0.07);
    border-left-color: rgba(201,168,76,0.4);
  }
  .sidebar-btn.active {
    color: var(--gold-light);
    background: rgba(201,168,76,0.12);
    border-left-color: var(--gold);
    font-weight: 600;
  }
  .sb-icon { font-size: 1.1rem; flex-shrink: 0; }
  .sb-label { line-height: 1; }

  .sidebar-footer {
    padding: 20px 20px 0;
    border-top: 1px solid rgba(201,168,76,0.12);
    margin-top: 16px;
    font-family: 'Dancing Script', cursive;
    font-size: 0.9rem; color: var(--gold);
    opacity: 0.5; line-height: 1.6; text-align: center;
  }

  /* Menu main fills right column */
  .menu-main {
    display: block;
    padding-bottom: 0;
    min-width: 0; /* prevent grid blowout */
  }

  /* Override the old grid rule that was on .menu-main */
  .menu-main .menu-section      { max-width: 100%; }
  .menu-main .section-leaf      { max-width: 100%; }
  .menu-main .section-arabic    { max-width: 100%; }
  .menu-main .section-leaf > *,
  .menu-main .section-arabic > * { max-width: 100%; }
}

@media (min-width: 1400px) {
  .page-layout {
    grid-template-columns: 260px 1fr;
    max-width: 1500px;
  }
  .sidebar-btn { font-size: 0.92rem; padding: 12px 24px; }
}