/* ============================================================
   ESCAPE ROOM BAKU — Brend dizayn tokenləri və özəl stillər
   ============================================================ */

:root{
  --navy-950:#070c17;
  --navy-900:#0b1220;
  --navy-800:#111a2e;
  --navy-700:#182543;
  --teal-400:#2dd4bf;
  --teal-300:#5eead4;
  --teal-500:#14b8a6;
  --teal-glow:rgba(45,212,191,.35);
  --gold-400:#f5c451;
  --gold-500:#f0b429;
  --gold-600:#d99a1b;
  --cream-50:#fbfaf6;
  --ink-900:#0c1220;

  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --radius-lg:1.5rem;
  --radius-md:1rem;
  --shadow-soft:0 20px 45px -20px rgba(6,12,24,.55);
  --shadow-gold:0 10px 30px -10px rgba(240,180,41,.5);
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:150px; }
@media (min-width:1024px){ section[id]{ scroll-margin-top:90px; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  font-family:var(--font-body);
  background:var(--navy-900);
  color:#eef2f9;
  overflow-x:hidden;
}

h1,h2,h3,.font-display{ font-family:var(--font-display); }

/* ---------- Scrollbar (category tabs) ---------- */
.scrollbar-none::-webkit-scrollbar{ display:none; }
.scrollbar-none{ -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- Background textures ---------- */
.bg-noise{
  background-image:radial-gradient(circle at 20% 20%, rgba(45,212,191,.10), transparent 40%),
                    radial-gradient(circle at 80% 0%, rgba(240,180,41,.10), transparent 45%),
                    radial-gradient(circle at 50% 100%, rgba(45,212,191,.08), transparent 50%);
}

.hero-grid{ position:relative; }
.hero-grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(45,212,191,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.06) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
}

/* ---------- Buttons ---------- */
.btn-gold{
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color:var(--ink-900);
  box-shadow:var(--shadow-gold);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-gold:active{ transform:translateY(0); }

.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); border-color:rgba(255,255,255,.32); }

.btn-whatsapp{
  background:#25D366;
  color:#06301c;
  transition:transform .25s ease, filter .25s ease;
}
.btn-whatsapp:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* Minimum touch target */
.tap-target{ min-height:44px; min-width:44px; }

/* ---------- Cards ---------- */
.card-elevated{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}

.menu-icon-circle{
  background:radial-gradient(circle at 35% 30%, var(--teal-300), var(--teal-500) 70%);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.15), 0 8px 18px -8px rgba(20,184,166,.55);
}

.room-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-soft);
}
.room-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,12,23,.15) 0%, rgba(7,12,23,.55) 55%, rgba(7,12,23,.92) 100%);
  z-index:1;
}
.room-card-bg{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--navy-700), var(--navy-950));
  display:flex; align-items:center; justify-content:center;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.room-card:hover .room-card-bg{ transform:scale(1.06); }

/* Category tab pill */
.tab-pill{
  border:1px solid rgba(255,255,255,.14);
  color:#dbe4f3;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  white-space:nowrap;
}
.tab-pill:hover{ transform:translateY(-1px); }
.tab-pill.active{
  background:linear-gradient(135deg, var(--teal-400), var(--teal-500));
  color:var(--ink-900);
  border-color:transparent;
  font-weight:600;
}

/* ---------- Menu (Hollywood-style) ---------- */
.bg-menu-cream{ background:var(--cream-50); }

.menu-tab-pill{
  border:1px solid rgba(11,18,32,.12);
  background:#fff;
  color:var(--ink-900);
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-tab-pill.active{
  background:var(--ink-900);
  border-color:var(--ink-900);
  color:#fff;
}

.view-toggle-btn{ color:rgba(11,18,32,.4); transition:background .2s ease, color .2s ease; }
.view-toggle-btn.active{ background:var(--ink-900); color:#fff; }

.menu-card-photo{
  background:#efece6;
  overflow:hidden;
  border-radius:1rem;
}

.menu-card-grid{
  background:#fff;
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 6px 18px -12px rgba(11,18,32,.18);
  border:1px solid rgba(11,18,32,.05);
}
.menu-card-grid .menu-card-photo{ border-radius:0; }

.menu-card-list{
  background:#fff;
  border-radius:1.25rem;
  box-shadow:0 6px 18px -12px rgba(11,18,32,.18);
  border:1px solid rgba(11,18,32,.05);
}

.menu-add-btn{
  background:var(--ink-900);
  color:#fff;
  font-size:1rem;
  box-shadow:0 4px 10px -4px rgba(11,18,32,.5);
  transition:transform .15s ease, background .2s ease;
}
.menu-add-btn:hover{ background:var(--teal-600); transform:scale(1.08); }

.line-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.menu-card-grid, .menu-card-list{ cursor:pointer; }

/* ---------- Menu item detail bottom sheet ---------- */
.item-sheet-backdrop{
  position:fixed; inset:0;
  background:rgba(11,18,32,.55);
  z-index:300;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.item-sheet-backdrop.open{ opacity:1; pointer-events:auto; }

.item-sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:301;
  background:#fff;
  border-radius:1.75rem 1.75rem 0 0;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  max-width:640px;
  margin:0 auto;
}
.item-sheet.open{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .item-sheet{ transition:none; }
  .item-sheet-backdrop{ transition:none; }
}

.item-sheet-handle{
  width:44px; height:5px;
  border-radius:9999px;
  background:rgba(11,18,32,.15);
  margin:.75rem auto;
}

.item-sheet-photo{
  width:100%;
  aspect-ratio:16/10;
  background:#efece6 center/cover no-repeat;
}

/* ---------- Cart bar ---------- */
.cart-bar{
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  background:var(--ink-900);
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  padding:.9rem 1.25rem;
  border-radius:9999px;
  box-shadow:0 12px 30px -10px rgba(11,18,32,.55);
  transition:transform .2s ease, opacity .2s ease;
}
.cart-bar:hover{ transform:translateY(-2px); }
.cart-bar.hidden{ display:none; }
.cart-bar-count{
  display:grid;
  place-items:center;
  width:24px; height:24px;
  border-radius:9999px;
  background:var(--teal-400);
  color:var(--ink-900);
  font-size:.75rem;
  font-weight:700;
}
.menu-add-btn.added{ background:var(--teal-500); }

/* Set card */
.set-card{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition:transform .25s ease, border-color .25s ease;
}
.set-card:hover{ transform:translateY(-3px); border-color:rgba(45,212,191,.4); }

/* ---------- Nav ---------- */
#site-nav{
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
#site-nav.scrolled{
  background-color:rgba(7,12,23,.85);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}

#mobile-menu{
  transition:max-height .4s ease, opacity .3s ease;
  max-height:0;
  opacity:0;
  overflow:hidden;
}
#mobile-menu.open{
  max-height:600px;
  opacity:1;
}

/* ---------- GSAP reveal targets ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- Logo mark ---------- */
.logo-door{
  filter:drop-shadow(0 0 8px rgba(45,212,191,.55));
}

/* ---------- Misc ---------- */
.text-gradient-gold{
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.divider-glow{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--teal-400), transparent);
  opacity:.5;
}

::selection{ background:var(--teal-400); color:var(--ink-900); }

/* Hide the Netlify free-tier badge — it overlaps the mobile sticky CTA bar */
#nl-badge-frame{ display:none !important; }

/* Persistent nav strip: glowing pill frame around each link */
.nav-chip{
  display:inline-flex;
  align-items:center;
  padding:.4rem 1rem;
  border-radius:9999px;
  border:1px solid rgba(45,212,191,.35);
  box-shadow:0 0 10px rgba(45,212,191,.28), inset 0 0 8px rgba(45,212,191,.08);
  transition:box-shadow .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.nav-chip:hover{
  border-color:rgba(45,212,191,.75);
  box-shadow:0 0 18px rgba(45,212,191,.5), inset 0 0 10px rgba(45,212,191,.15);
  transform:translateY(-1px);
}

/* ---------- Menu / Sets "separate view" modal ---------- */
.modal-close-btn{
  display:none;
  position:sticky;
  top:1rem;
  margin-left:auto;
  margin-right:1rem;
  z-index:20;
}
#menu, #sets{ display:none; }
.section-modal{
  display:block !important;
  position:fixed !important;
  inset:0;
  z-index:200;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:modal-in .3s ease;
}
.section-modal .modal-close-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:9999px;
  background:rgba(11,18,32,.55);
  color:#fff;
  font-size:1.25rem;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
#menu.section-modal .modal-close-btn{ background:rgba(11,18,32,.7); }
body.modal-locked{ overflow:hidden; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .section-modal{ animation:none; } }