/* ============================================================
   Paradise of India — shared stylesheet
   Used by both index.html and menu.html (and 404.html reuses
   the color variables). Single source of truth: edit here once,
   it applies everywhere instead of being copy-pasted per page.
   ============================================================ */

:root {
  --bg: #fffaf3;
  --bg-alt: #fdf3e4;
  --card-bg: #fff;
  --border: #f0e2cc;
  --border-strong: #e8d3ae;
  --heading: #2b1a12;
  --text: #2b2b2b;
  --text-muted: #6a6a6a;
  --text-muted2: #7a7a7a;
  --text-soft: #4a4a4a;
  --accent: #7a2e1f;
  --accent-gold: #d98a3d;
  --nav-bg: #fffaf3f0;
  --btn-primary-text: #fff8ec;
  --btn-secondary-border: #d9c3a3;
  --pill-bg: #fbe9d0;
  --spice-bg: #fdece7;
  color-scheme: light;
}
html.dark {
  --bg: #1c140c;
  --bg-alt: #241a10;
  --card-bg: #2a1f15;
  --border: #4a3628;
  --border-strong: #5a4432;
  --heading: #f7e9d4;
  --text: #e8dcc8;
  --text-muted: #c9b9a0;
  --text-muted2: #b9a98f;
  --text-soft: #d9c9b0;
  --accent: #e2984c;
  --accent-gold: #e2984c;
  --nav-bg: #1c140cf0;
  --btn-primary-text: #241a10;
  --btn-secondary-border: #5a4432;
  --pill-bg: #4a3420;
  --spice-bg: #4a2420;
  color-scheme: dark;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; color: var(--text); background: var(--bg); transition: background .3s ease, color .3s ease; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

/* SCROLL REVEAL (home page) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ANNOUNCEMENT BANNER — off by default, controlled by
   src/_data/announcement.json. Not sticky: it scrolls away with the page,
   the nav below it is already sticky (top: 0) so it takes over the top
   of the viewport once you scroll past the banner. Two colour variants:
   --closure (red, urgent) and --promo (gold, friendly). */
.announcement-banner { position: sticky; top: 0; z-index: 25; color: #fff; text-align: center; padding: 12px 20px; }
.announcement-banner--closure { background: #c0392b; }
.announcement-banner--promo { background: #b9903f; }
.announcement-banner .container { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1320px; }
.announcement-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.announcement-banner span { font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px; line-height: 1.5; }

/* ANNOUNCEMENT MODAL — one-time-per-session blocking popup shown alongside
   the sticky banner above. Dismissed state is remembered in sessionStorage
   (js/main.js) and pre-applied via an inline head script so there's no
   flash of the modal for visitors who already closed it this session. */
html.announcement-dismissed .announcement-modal-overlay { display: none !important; }
.announcement-modal-overlay { position: fixed; inset: 0; background: rgba(20, 12, 6, 0.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.announcement-modal { position: relative; background: var(--card-bg); border-radius: 10px; max-width: 440px; width: 100%; padding: 44px 32px 34px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.announcement-modal-icon { width: 34px; height: 34px; margin: 0 auto 16px; }
.announcement-modal--closure .announcement-modal-icon { color: #c0392b; }
.announcement-modal--promo .announcement-modal-icon { color: #b9903f; }
.announcement-modal p { font-size: 15px; font-weight: 600; color: var(--heading); line-height: 1.6; }
.announcement-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-soft); }
.announcement-modal-close svg { width: 15px; height: 15px; }
.announcement-modal-close:hover { border-color: var(--accent-gold); color: var(--accent); }

/* NAV (shared) */
.nav { position: sticky; top: var(--banner-offset, 0px); background: var(--nav-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); z-index: 20; transition: background .3s ease, border-color .3s ease; }
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 84px; max-width: 1320px; }
.nav .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.nav .logo svg { width: 30px; height: 30px; stroke: var(--accent); flex-shrink: 0; }
.nav .logo span { font-weight: 600; font-size: 17px; letter-spacing: 3px; color: var(--accent); }
.nav ul { display: flex; align-items: center; gap: 26px; list-style: none; flex-shrink: 0; }
.nav ul li a { font-size: 13.5px; font-weight: 500; letter-spacing: 1px; color: var(--text-soft); white-space: nowrap; }
.nav ul li a:hover { color: var(--accent-gold); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lang-switch { display: flex; gap: 4px; border: 1px solid var(--border-strong); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.lang-switch button { border: none; background: transparent; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; color: #8a7358; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.lang-switch button.active { background: var(--accent); color: var(--btn-primary-text); }
.nav .cta { border: 1px solid var(--accent-gold); color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 1px; padding: 10px 22px; border-radius: 2px; flex-shrink: 0; white-space: nowrap; }

/* THEME TOGGLE */
.theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; cursor: pointer; color: var(--text-soft); flex-shrink: 0; }
.theme-toggle:hover { border-color: var(--accent-gold); color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: block; }

/* NAV ORDER ONLINE DROPDOWN */
.nav-order { position: relative; flex-shrink: 0; }
.nav-order > button { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 20px; color: var(--text-soft); background: transparent; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.nav-order > button svg.bag { width: 15px; height: 15px; flex-shrink: 0; }
.nav-order > button svg.chev { width: 9px; height: 9px; flex-shrink: 0; transition: transform .2s ease; }
.nav-order.open > button svg.chev { transform: rotate(180deg); }
.nav-order > button:hover, .nav-order.open > button { border-color: var(--accent-gold); color: var(--accent); }
.nav-order-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; width: max-content; min-width: 200px; box-shadow: 0 8px 24px rgba(30,20,10,0.12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-order.open .nav-order-menu { opacity: 1; visibility: visible; transform: none; }
.nav-order-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-soft); white-space: nowrap; }
.nav-order-menu a:hover { background: var(--bg-alt); color: var(--accent); }
.nav-order-menu a .platform-logo { height: 30px; width: 44px; object-fit: contain; object-position: left center; flex-shrink: 0; }
.nav-order-menu a .platform-label { margin-left: auto; text-align: right; }

/* HERO (home page) */
.hero { padding: 90px 0 70px; text-align: center; position: relative; }
.hero-meta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-meta .eyebrow { font-size: 12px; letter-spacing: 4px; color: var(--accent-gold); text-transform: uppercase; font-weight: 600; }
.hero-meta .sep { color: var(--border-strong); font-size: 12px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 6px 16px; font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
.status-badge .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-badge.is-open .dot { background: #3f8f5c; }
.status-badge.is-closed .dot { background: #c0392b; }
.hero h1 { font-family: 'Playfair Display', serif; font-size: 54px; font-weight: 700; color: var(--heading); line-height: 1.15; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--accent); display: block; }
.hero p.sub { font-size: 16px; color: var(--text-muted); max-width: 480px; margin: 0 auto 38px; line-height: 1.7; }
.hero .btns { display: flex; gap: 16px; justify-content: center; }
.btn-primary { background: var(--accent); color: var(--btn-primary-text); font-size: 13.5px; font-weight: 600; letter-spacing: 1px; padding: 15px 32px; border-radius: 2px; }
.btn-secondary { border: 1px solid var(--btn-secondary-border); color: var(--text-soft); font-size: 13.5px; font-weight: 500; letter-spacing: 1px; padding: 15px 32px; border-radius: 2px; }

.hero-rule { height: 2px; width: 60px; background: var(--accent-gold); margin: 46px auto 0; }

/* SECTION SHARED (home page) */
section { padding: 90px 0; scroll-margin-top: calc(84px + var(--banner-offset, 0px)); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .eyebrow { font-size: 12px; letter-spacing: 4px; color: var(--accent-gold); text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.section-head h2 { font-family: 'Playfair Display', serif; font-size: 34px; color: var(--heading); }
.section-head p { font-size: 14.5px; color: var(--text-muted2); max-width: 480px; margin: 14px auto 0; line-height: 1.7; }

/* ABOUT (home page) */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about .img-block { background: var(--border); border-radius: 6px; height: 340px; width: 100%; display: block; object-fit: cover; }
.about h2 { font-family: 'Playfair Display', serif; font-size: 30px; color: var(--heading); margin-bottom: 18px; }
.about p { font-size: 14.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
.amenities { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.amenity { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); background: var(--bg-alt); border-radius: 20px; padding: 8px 14px; }
.amenity svg { width: 15px; height: 15px; flex-shrink: 0; stroke: #b9903f; }

/* HALAL MARK — two sizes depending on context (small inline on the about
   section, larger inside the menu page's info chips). Scoped by parent so
   merging both pages' stylesheets doesn't collide on one shared class. */
.halal-mark { font-family: 'Noto Naskh Arabic', serif; font-size: 12px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border: 1.5px solid #b9903f; border-radius: 50%; line-height: 1; padding-bottom: 1px; }
.info-chip .halal-mark { font-size: 13px; width: 30px; height: 30px; padding-bottom: 2px; }

/* MENU HIGHLIGHTS (home page) */
.menu-highlights { background: var(--bg-alt); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.menu-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 30px 26px; }
.menu-card .thumb { height: 130px; background: var(--pill-bg); border-radius: 4px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: #d9a94f; font-size: 12px; letter-spacing: 1px; }
.menu-card .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.menu-card .top h3 { font-size: 16px; font-weight: 600; color: var(--heading); }
.menu-card .top span { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); background: var(--pill-bg); font-size: 12.5px; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.menu-card p { font-size: 12.5px; color: var(--text-muted2); line-height: 1.6; }
.menu-more { text-align: center; margin-top: 44px; }
.menu-more a { font-size: 13.5px; font-weight: 600; letter-spacing: 1.5px; color: var(--accent); border-bottom: 1px solid var(--accent-gold); padding-bottom: 4px; }

/* REVIEWS (home page) */
.rating-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 44px; }
.rating-card { display: flex; flex-direction: column; align-items: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 20px 12px; text-align: center; }
.rating-card:hover { border-color: var(--accent-gold); }
.rating-card .score { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.rating-card .score .out-of { font-size: 13px; font-weight: 500; color: #b9903f; margin-left: 2px; }
.rating-card .platform { font-weight: 600; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--heading); margin-top: 8px; }
.rating-card .meta { font-size: 11px; color: var(--text-muted2); margin-top: 4px; }

.testimonial-carousel { position: relative; }
.testimonial-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 30px; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card { flex: 0 0 min(600px, calc(100% - 60px)); scroll-snap-align: center; background: var(--bg-alt); border-radius: 6px; padding: 26px 24px; }
.testimonial-card .quote { font-size: 13.5px; font-style: italic; color: var(--text-soft); line-height: 1.7; margin-bottom: 16px; }
.testimonial-card .author { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.testimonial-card .source { font-size: 11px; color: #b9903f; margin-top: 2px; }
.testi-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--accent); z-index: 2; }
.testi-arrow:hover { border-color: var(--accent-gold); }
.testi-arrow.prev { left: -18px; }
.testi-arrow.next { right: -18px; }
.testi-arrow svg { width: 14px; height: 14px; }
.testi-dots { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.testi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); border: none; cursor: pointer; padding: 0; }
.testi-dot.active { background: var(--accent); }

/* SHARE ROW (home page) */
.share-row { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.share-label { font-size: 13px; color: var(--text-muted2); text-align: center; }
.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.share-buttons a, .share-buttons button { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 20px; padding: 8px 15px; font-size: 12px; font-weight: 500; color: var(--text-soft); background: transparent; font-family: 'Poppins', sans-serif; cursor: pointer; }
.share-buttons a:hover, .share-buttons button:hover { border-color: var(--accent-gold); color: var(--accent); }
.share-buttons svg { width: 15px; height: 15px; flex-shrink: 0; }

/* GALLERY (home page) */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-grid div { background: var(--border); border-radius: 6px; height: 160px; display: flex; align-items: center; justify-content: center; color: #b9903f; font-size: 11px; letter-spacing: 1px; }

/* RESERVE (home page) */
.reserve { background: var(--bg-alt); }
.reserve-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 24px; max-width: 640px; margin: 0 auto; text-align: center; }
.thefork-widget { width: 100%; border: none; overflow: scroll; display: block; border-radius: 6px; margin-bottom: 22px; }
@media only screen and (max-width: 320px) { .thefork-widget { min-height: 840px; } }
@media only screen and (min-width: 321px) and (max-width: 516px) { .thefork-widget { min-height: 650px; } }
@media only screen and (min-width: 517px) { .thefork-widget { min-height: 680px; } }
.reserve-note { font-size: 12.5px; color: var(--text-muted2); margin-bottom: 14px; line-height: 1.6; }
.reserve-contacts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.reserve-contacts a { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 20px; padding: 8px 15px; font-size: 12px; font-weight: 500; color: var(--text-soft); }
.reserve-contacts a:hover { border-color: var(--accent-gold); color: var(--accent); }
.reserve-contacts a svg { width: 14px; height: 14px; flex-shrink: 0; }

/* PRIVATE EVENTS / QUOTE FORM (home page) */
.quote-form { max-width: 720px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 36px 40px; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.quote-field { display: flex; flex-direction: column; gap: 6px; }
.quote-field .lbl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #b9903f; font-weight: 600; }
.quote-field input, .quote-field textarea { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px 12px; outline: none; resize: vertical; width: 100%; }
.quote-field input:focus, .quote-field textarea:focus { border-color: var(--accent-gold); }
.quote-message { margin-bottom: 26px; }
.quote-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.quote-actions button { font-family: 'Poppins', sans-serif; cursor: pointer; border: none; }
.quote-note { font-size: 11.5px; color: var(--text-muted2); margin-top: 16px; line-height: 1.6; }

/* HOURS + LOCATION (home page) */
.info { background: var(--bg-alt); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.info-col h3 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--heading); margin-bottom: 18px; }
.info-col p, .info-col .row { font-size: 13.5px; color: var(--text-muted); line-height: 1.9; }
.info-col .row { display: flex; justify-content: space-between; }
.info-col .row span:last-child { color: var(--heading); font-weight: 500; }
.info-col p a:hover { color: var(--accent); text-decoration: underline; }
.map-link { display: inline-flex; align-items: center; gap: 8px; }
.map-link .pin { width: 16px; height: 16px; flex-shrink: 0; }
.map-link:hover { color: var(--accent); text-decoration: underline; }
.map-embed { grid-column: 1 / -1; margin-top: 36px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--card-bg); }
.map-embed .map-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: var(--bg-alt); border-bottom: 1px solid var(--border-strong); }
.map-embed .map-head .addr { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.map-embed .map-head .addr svg { width: 15px; height: 15px; flex-shrink: 0; }
.map-embed .map-head a.directions { font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent-gold); border-radius: 20px; padding: 6px 15px; white-space: nowrap; }
.map-embed .map-head a.directions:hover { background: var(--accent-gold); color: var(--btn-primary-text); }
.map-embed iframe { width: 100%; height: 300px; border: 0; display: block; filter: grayscale(0.3) sepia(0.4) hue-rotate(-10deg) saturate(1.2) brightness(0.97) contrast(0.95); }
html.dark .map-embed iframe { filter: grayscale(0.3) sepia(0.4) hue-rotate(-10deg) saturate(1.1) brightness(0.8) contrast(1.05) invert(0.88) hue-rotate(180deg); }

/* PAGE HEAD (menu page) */
.page-head { padding: 60px 0 40px; text-align: center; }
.page-head .eyebrow { font-size: 12px; letter-spacing: 4px; color: var(--accent-gold); text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.page-head h1 { font-family: 'Playfair Display', serif; font-size: 40px; color: var(--heading); margin-bottom: 12px; }
.page-head p { font-size: 14px; color: var(--text-muted2); max-width: 460px; margin: 0 auto; }
.info-chips { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.info-chip { display: inline-flex; align-items: center; gap: 7px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-soft); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 20px; padding: 7px 15px; }
.info-chip-btn { cursor: pointer; }
.info-chip-btn:hover { border-color: var(--accent-gold); color: var(--accent); }
.info-chip svg { width: 18px; height: 18px; flex-shrink: 0; stroke: #b9903f; }
.spice-icons svg { stroke: none; }

/* MENU TOOLS: search + filters (menu page) */
.menu-tools { padding: 18px 0; background: var(--nav-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); position: sticky; top: 84px; z-index: 9; }
.menu-tools .container { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.search-box { position: relative; flex-shrink: 0; }
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted2); pointer-events: none; }
.search-box input { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--text); background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 20px; padding: 9px 16px 9px 36px; width: 240px; outline: none; }
.search-box input:focus { border-color: var(--accent-gold); }
.search-box input::placeholder { color: var(--text-muted2); }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.filter-chip { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-soft); background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 20px; padding: 8px 15px; cursor: pointer; white-space: nowrap; }
.filter-chip:hover { border-color: var(--accent-gold); color: var(--accent); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: var(--btn-primary-text); }
.popular-badge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--btn-primary-text); background: var(--accent-gold); padding: 2px 7px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.no-results { text-align: center; font-size: 13.5px; color: var(--text-muted2); padding: 50px 0; }
.category.filtered-out, .item-wrap.filtered-out, .drink-row.filtered-out { display: none !important; }

/* CATEGORY NAV (menu page) */
.cat-nav { position: sticky; top: calc(84px + var(--banner-offset, 0px)); background: var(--bg-alt); border-bottom: 1px solid var(--border); z-index: 9; }
.cat-nav::before, .cat-nav::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; z-index: 2; }
.cat-nav::before { left: 0; background: linear-gradient(to right, var(--bg-alt), transparent); }
.cat-nav::after { right: 0; background: linear-gradient(to left, var(--bg-alt), transparent); }
.cat-nav .container { display: flex; align-items: center; gap: 8px; overflow-x: auto; scroll-behavior: smooth; white-space: nowrap; padding: 13px 40px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.cat-nav .container::-webkit-scrollbar { height: 5px; }
.cat-nav .container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.cat-nav a { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--text-soft); background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 20px; padding: 7px 15px; white-space: nowrap; }
.cat-nav a:hover, .cat-nav a.active { color: var(--btn-primary-text); border-color: var(--accent); background: var(--accent); }

/* MENU CONTENT (menu page) */
main.container { padding-top: 80px; padding-bottom: 90px; }
.set-menus { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 70px; }
.set-menu-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 26px 28px; }
.set-menu-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.set-menu-card .top h3 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--heading); }
.set-menu-card .top span { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); background: var(--pill-bg); font-size: 13.5px; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.set-menu-card .part { display: flex; gap: 10px; font-size: 12.5px; margin-bottom: 8px; }
.set-menu-card .part .lbl { color: #b9903f; font-weight: 600; min-width: 92px; flex-shrink: 0; }
.set-menu-card .part .val { color: var(--text-soft); }

.category { margin-bottom: 64px; scroll-margin-top: 150px; }
.category-head { text-align: center; margin-bottom: 8px; }
.category-head h2 { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--heading); letter-spacing: 0.5px; }
.category-head .rule { height: 1px; width: 50px; background: var(--accent-gold); margin: 12px auto 0; }
.category-note { text-align: center; font-size: 12.5px; font-style: italic; color: var(--text-muted2); max-width: 560px; margin: 14px auto 26px; line-height: 1.6; }

.items { max-width: 720px; margin: 0 auto; }
.price-pill { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; color: var(--accent); background: var(--pill-bg); padding: 4px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.item-wrap { padding: 14px 0; border-bottom: 1px solid var(--border); }
.item-wrap .top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.item-wrap .name-block { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.item-wrap .num { color: var(--accent-gold); font-weight: 600; font-size: 12px; flex-shrink: 0; }
.item-wrap .name { font-weight: 500; font-size: 14.5px; color: var(--text); }
.spice-icons { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 2px 7px; background: var(--spice-bg); border-radius: 10px; vertical-align: middle; }
.spice-icons svg { width: 16px; height: 16px; overflow: visible; }
.spice-icons .body { fill: #c0392b; }
.item-wrap .desc { display: block; font-size: 11.5px; color: var(--text-muted2); margin-top: 4px; line-height: 1.5; padding-left: 20px; }

.drinks-sub { max-width: 720px; margin: 0 auto 34px; }
.drinks-sub h3 { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--accent); margin-bottom: 6px; }
.drink-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.drink-row .name { color: var(--text); }
.drink-row .note { color: var(--text-muted2); font-size: 11px; }

/* FOOTER — two variants. Scoped by class instead of the bare `footer`
   element so combining both pages' rules into one file can't make one
   page's footer clobber the other's layout. */
footer { background: #2b1a12; color: #d9c3a3; }
footer a { color: #d9c3a3; }

footer.footer-full { padding: 50px 0 30px; }
footer.footer-full .top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; }
footer.footer-full .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
footer.footer-full .logo svg { width: 24px; height: 24px; }
footer.footer-full .logo span { font-weight: 600; letter-spacing: 2px; font-size: 14px; color: #f1dfc0; }
footer.footer-full .links { display: flex; gap: 24px; font-size: 12.5px; }
footer.footer-full .order-online-footer { display: flex; align-items: center; gap: 18px; font-size: 12px; }
footer.footer-full .order-online-footer a { display: flex; align-items: center; gap: 7px; }
footer.footer-full .order-online-footer a:hover { color: #f1dfc0; text-decoration: underline; }
footer.footer-full .order-online-footer .platform-logo { height: 14px; width: auto; display: block; filter: brightness(0) invert(1) opacity(0.85); }
footer.footer-full .fine { text-align: center; font-size: 11px; color: #8a7358; margin-top: 30px; border-top: 1px solid #4a3628; padding-top: 20px; }

footer.footer-simple { padding: 40px 0 26px; text-align: center; font-size: 11px; }

/* WHATSAPP FAB (shared) */
.whatsapp-fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(20,20,10,0.28); z-index: 30; transition: transform .2s ease; }
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 27px; height: 27px; fill: #fff; }

/* BACK TO TOP (menu page only) */
.back-to-top { position: fixed; left: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(20,20,10,0.18); z-index: 30; cursor: pointer; color: var(--accent); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { border-color: var(--accent-gold); }
.back-to-top svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .nav ul { display: none; }
}
@media (max-width: 800px) {
  .whatsapp-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .back-to-top { left: 16px; bottom: 16px; width: 50px; height: 50px; }
  footer.footer-full .links { display: none; }
  .hero h1 { font-size: 34px; }
  .about, .info-grid { grid-template-columns: 1fr; }
  .menu-grid, .rating-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  footer.footer-full .top { flex-direction: column; }
  .nav-right { gap: 8px; }
  .reserve-card { padding: 16px; }
  .quote-form { padding: 28px 22px; }
  .quote-grid { grid-template-columns: 1fr; }
  .set-menus { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 30px; }
}
@media (max-width: 480px) {
  .nav-order > button span { display: none; }
  .nav-order > button { padding: 0 10px; }
}