/* ============================================================
   PLAYORA LOUNGE & GAME CENTER — Brend dizayn tokenləri və özəl stillər
   ============================================================ */

:root{
  --ink-950:#050509;
  --ink-900:#0a0a12;
  --ink-800:#13131f;
  --ink-700:#1c1c2e;
  --blue-400:#60a5fa;
  --blue-300:#93c5fd;
  --blue-500:#3b82f6;
  --blue-glow:rgba(59,130,246,.35);
  --violet-400:#a78bfa;
  --violet-500:#8b5cf6;
  --violet-600:#7c3aed;
  --cyan-400:#22d3ee;
  --pink-500:#ec4899;
  --cream-50:#fbfaf6;
  --dark-900:#0b0c14;

  --font-display:'Rajdhani', ui-sans-serif, system-ui, sans-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(3,4,10,.65);
  --shadow-violet:0 10px 30px -10px rgba(139,92,246,.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(--ink-900);
  color:#eef1f9;
  overflow-x:hidden;
}

h1,h2,h3,.font-display{ font-family:var(--font-display); font-weight:700; letter-spacing:.01em; }

/* ---------- 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(59,130,246,.14), transparent 40%),
                    radial-gradient(circle at 80% 0%, rgba(139,92,246,.14), transparent 45%),
                    radial-gradient(circle at 50% 100%, rgba(236,72,153,.08), transparent 50%);
}

.hero-grid{ position:relative; }
.hero-grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(139,92,246,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.08) 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%);
}

/* Real Playora kabinet photos, blended low behind the hero content —
   gives the hero real texture instead of a flat gradient, while the dark
   overlay + grid layer above keep text at full contrast. */
.hero-photo-bg{
  position:absolute; inset:0;
  z-index:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  overflow:hidden;
}
.hero-photo-bg span{
  background-size:cover;
  background-position:center;
  opacity:.32;
  filter:saturate(1.3) blur(3px);
  transform:scale(1.06);
}
.hero-photo-bg span:nth-child(1){ background-image:url('../images/venue/room-barcelona.jpg'); }
.hero-photo-bg span:nth-child(2){ background-image:url('../images/venue/room-vip-red.jpg'); }
.hero-photo-bg span:nth-child(3){ background-image:url('../images/venue/room-fenerbahce.jpg'); }
.hero-photo-bg span:nth-child(4){ background-image:url('../images/venue/room-blur.jpg'); }
.hero-photo-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,9,.82) 0%, rgba(5,5,9,.7) 40%, rgba(5,5,9,.88) 75%, var(--ink-900) 100%),
    linear-gradient(90deg, var(--ink-900), transparent 20%, transparent 80%, var(--ink-900));
}

/* Receding neon grid floor — echoes Playora's own Instagram menu graphics */
.neon-floor{ position:relative; overflow:hidden; }
.neon-floor::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:55%;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(167,139,250,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.35) 1px, transparent 1px);
  background-size:38px 38px;
  transform:perspective(220px) rotateX(58deg);
  transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, black 10%, transparent 92%);
  mask-image:linear-gradient(to top, black 10%, transparent 92%);
  opacity:.7;
}

/* ---------- Buttons ---------- */
.btn-violet{
  background:linear-gradient(135deg, var(--violet-400), var(--violet-600));
  color:#fff;
  box-shadow:var(--shadow-violet);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-violet:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-violet: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-hero-primary{
  background:linear-gradient(135deg, var(--blue-400), var(--blue-500));
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(59,130,246,.6);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-hero-primary:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.05); }
.btn-hero-primary:active{ transform:translateY(0) scale(1); }

.btn-hero-violet{
  background:linear-gradient(135deg, var(--violet-400), var(--violet-600));
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(124,58,237,.55);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-hero-violet:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.08); }
.btn-hero-violet:active{ transform:translateY(0) scale(1); }

.btn-hero-outline{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(34,211,238,.4);
  color:#fff;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-hero-outline:hover{ transform:translateY(-2px) scale(1.02); background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.7); box-shadow:0 12px 28px -14px rgba(34,211,238,.5); }
.btn-hero-outline:active{ transform:translateY(0) scale(1); }

.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(--blue-300), var(--blue-500) 70%);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.15), 0 8px 18px -8px rgba(59,130,246,.55);
}

/* Category tab pill */
.tab-pill{
  border:1px solid rgba(255,255,255,.14);
  color:#dbe0f3;
  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(--blue-400), var(--blue-500));
  color:#fff;
  border-color:transparent;
  font-weight:600;
}

/* ---------- Menu ---------- */
.bg-menu-dark{
  background:
    radial-gradient(circle at 8% 0%, rgba(59,130,246,.16), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(139,92,246,.14), transparent 40%),
    var(--ink-950);
}

#menu .text-ink-900{ color:#eef1f9; }
#menu .text-ink-900\/60{ color:rgba(238,241,249,.6); }
#menu-sticky-header .bg-white{ background:rgba(255,255,255,.08); }
#menu-sticky-header .border-black\/10{ border-color:rgba(255,255,255,.14); }

.menu-tab-pill{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:#dbe0f3;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.menu-tab-pill.active{
  background:linear-gradient(135deg, var(--blue-400), var(--blue-500));
  border-color:transparent;
  color:#fff;
  font-weight:600;
  box-shadow:0 6px 14px -6px rgba(59,130,246,.55);
}

#menu-sticky-header{ position:sticky; }
#menu-sticky-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:14px;
  transform:translateY(100%);
  background:linear-gradient(180deg, rgba(10,10,18,.06), transparent);
  pointer-events:none;
}

.menu-tabs-nav-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#dbe0f3;
  transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.menu-tabs-nav-btn:hover{ background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.4); }
.menu-tabs-nav-btn:disabled{ opacity:.35; pointer-events:none; }

.view-toggle-btn{ color:rgba(255,255,255,.5); transition:background .2s ease, color .2s ease; }
.view-toggle-btn.active{
  background:linear-gradient(135deg, var(--blue-400), var(--blue-500));
  color:#fff;
}

.menu-card-photo{
  background:rgba(255,255,255,.06);
  overflow:hidden;
  border-radius:1rem;
}

.menu-card-grid{
  background:var(--ink-800);
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.5);
  border:1px solid rgba(59,130,246,.18);
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.menu-card-grid .menu-card-photo{ border-radius:0; }

.menu-card-list{
  background:var(--ink-800);
  border-radius:1.25rem;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.5);
  border:1px solid rgba(59,130,246,.18);
  transition:box-shadow .25s ease, border-color .25s ease;
}

.menu-card-grid:hover, .menu-card-list:hover{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.6);
  transform:translateY(-2px);
}

.menu-price{ color:var(--blue-300); }

.menu-add-btn{
  background:linear-gradient(135deg, var(--blue-400), var(--blue-500));
  color:#fff;
  font-size:1rem;
  box-shadow:0 4px 10px -4px rgba(37,99,235,.5);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.menu-add-btn:hover{
  background:linear-gradient(135deg, var(--violet-400), var(--violet-600));
  transform:scale(1.08);
  box-shadow:0 4px 12px -4px rgba(139,92,246,.6);
}

.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(10,10,18,.6);
  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:var(--ink-900);
  color:#eef1f9;
  border-radius:1.75rem 1.75rem 0 0;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.65);
  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 .text-ink-900{ color:#eef1f9; }
.item-sheet .text-slate-500{ color:#94a3b8; }
.item-sheet .border-black\/10{ border-color:rgba(255,255,255,.16); }
.item-sheet .bg-slate-100{ background-color:rgba(255,255,255,.06); }

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

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

/* ---------- Cart bar ---------- */
.cart-bar-wrap{
  z-index:250;
  display:none;
}
body.modal-locked .cart-bar-wrap{ display:block; }

.cart-bar{
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  background:var(--dark-900);
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  padding:.9rem 1.25rem;
  border-radius:9999px;
  box-shadow:0 12px 30px -10px rgba(3,4,10,.6);
  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(--blue-400);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
}
.menu-add-btn.added{ background:var(--blue-500); }

/* Set card — echoes the neon grid-floor look of Playora's own promo graphics */
.set-card{
  position:relative;
  border:1px solid rgba(167,139,250,.28);
  background:
    linear-gradient(165deg, rgba(5,5,9,.55) 0%, rgba(5,5,9,.9) 55%, rgba(5,5,9,.98) 100%),
    radial-gradient(circle at 12% 0%, rgba(167,139,250,.18), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(59,130,246,.16), transparent 50%);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.75);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
}
.set-card::after{
  content:"";
  position:absolute; left:-10%; right:-10%; bottom:0; height:60%;
  pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(167,139,250,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.28) 1px, transparent 1px);
  background-size:30px 30px;
  transform:perspective(180px) rotateX(60deg);
  transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, black 5%, transparent 90%);
  mask-image:linear-gradient(to top, black 5%, transparent 90%);
  opacity:.55;
}
.set-card:hover{ transform:translateY(-3px); border-color:rgba(167,139,250,.6); box-shadow:0 18px 36px -16px rgba(139,92,246,.3); }

/* Variant: real photo of the set instead of the plain gradient.
   The photo URL is applied inline (style="background-image:...") from JS —
   a url() stored in a CSS custom property resolves relative to the
   stylesheet it's read in, not the page, so it can't live here. */
.set-card--photo{ background-size:cover; background-position:center 38%; background-blend-mode:normal; }
.set-card--photo::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(165deg, rgba(5,5,9,.35) 0%, rgba(5,5,9,.82) 60%, rgba(5,5,9,.97) 100%),
    radial-gradient(circle at 12% 0%, rgba(167,139,250,.16), transparent 45%);
}
.set-card--photo::after{ opacity:.28; }

.set-icon-circle{
  background:radial-gradient(circle at 35% 30%, var(--violet-400), var(--violet-600) 70%);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.15), 0 8px 18px -8px rgba(139,92,246,.5);
}

.set-card-n{ font-family:var(--font-display); letter-spacing:.03em; }

.set-items-list{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.set-more-hint{ color:var(--violet-400); }

.set-add-cart-btn{
  background:linear-gradient(135deg, var(--blue-400), var(--blue-500));
  color:#fff;
  transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 4px 10px -4px rgba(37,99,235,.5);
}
.set-add-cart-btn:hover{ transform:scale(1.06); }
.set-add-cart-btn.added{ background:var(--blue-500); }

/* ---------- Set detail sheet (poster-style hero) ---------- */
.set-sheet-hero{
  position:relative;
  padding:2.5rem 1.5rem;
  min-height:240px;
  background:
    linear-gradient(180deg, rgba(5,5,9,.35), rgba(5,5,9,.85) 70%, rgba(5,5,9,.97)),
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.25), transparent 50%),
    radial-gradient(circle at 85% 10%, rgba(236,72,153,.18), transparent 45%),
    var(--ink-950);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.set-sheet-hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 35%, rgba(167,139,250,.14), transparent 65%);
}
/* Photo URL applied inline from JS (style="background-image:...") — see
   .set-card--photo for why it can't be a CSS custom property. */
.set-sheet-hero--photo{ background-size:cover; background-position:center 35%; cursor:zoom-in; }
.set-sheet-hero--photo::before{
  background:linear-gradient(180deg, rgba(5,5,9,.25), rgba(5,5,9,.8) 70%, rgba(5,5,9,.96));
}
.set-sheet-hero-zoom-hint{
  position:absolute;
  top:.9rem; right:.9rem;
  z-index:2;
  width:36px; height:36px;
  border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,18,.55);
  color:#fff;
  font-size:1rem;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.set-sheet-hero:not(.set-sheet-hero--photo) .set-sheet-hero-zoom-hint{ display:none; }
.set-sheet-hero-card{
  position:relative;
  z-index:1;
  text-align:center;
  padding:1.75rem 1.5rem;
  border-radius:1.5rem;
  border:1px solid rgba(167,139,250,.5);
  background:rgba(10,10,18,.5);
  backdrop-filter:blur(6px);
  box-shadow:0 0 30px rgba(139,92,246,.15), inset 0 0 20px rgba(139,92,246,.08);
  max-width:340px;
}
.set-sheet-icon{
  width:48px; height:48px;
  margin:0 auto .75rem;
  border-radius:9999px;
  display:grid; place-items:center;
  font-size:1.4rem;
  background:radial-gradient(circle at 35% 30%, var(--violet-400), var(--violet-600) 70%);
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(139,92,246,.6);
}
.set-sheet-title{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--violet-400);
  letter-spacing:.04em;
}
.set-sheet-group{
  color:rgba(255,255,255,.55);
  font-size:.8rem;
  margin-top:.25rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.set-sheet-section-label{
  font-family:var(--font-display);
  font-size:1rem;
  color:#eef1f9;
  margin-bottom:.6rem;
}
.set-sheet-items{ display:flex; flex-direction:column; gap:.55rem; }
.set-sheet-items li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.9rem; line-height:1.4;
  color:#dbe0f3;
}
.set-sheet-items li i{ color:var(--blue-400); font-size:1rem; margin-top:.15rem; flex-shrink:0; }
.set-sheet-extra{
  margin-top:.9rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:600;
  color:var(--violet-400);
  background:rgba(167,139,250,.1);
  border:1px solid rgba(167,139,250,.28);
  padding:.4rem .8rem;
  border-radius:9999px;
}
.set-sheet-extra:empty{ display:none; }

/* ---------- Interior gallery (real kabinet photos) ---------- */
.interior-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.interior-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.interior-card:hover img{ transform:scale(1.08); }
.interior-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,9,.05) 0%, rgba(5,5,9,.35) 55%, rgba(5,5,9,.92) 100%);
}
.interior-card-label{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:1rem 1.1rem;
}
.interior-card-label span{
  display:block;
  font-family:var(--font-display);
  font-size:1.05rem;
  color:#fff;
  letter-spacing:.02em;
}
.interior-card-label small{
  display:block;
  margin-top:.15rem;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.interior-card--red:hover{ border-color:rgba(239,68,68,.6); box-shadow:0 18px 36px -16px rgba(239,68,68,.3); }
.interior-card--red .interior-card-label small{ color:rgba(252,165,165,.85); }
.interior-card--gold:hover{ border-color:rgba(250,204,21,.6); box-shadow:0 18px 36px -16px rgba(250,204,21,.28); }
.interior-card--gold .interior-card-label small{ color:rgba(253,224,71,.85); }
.interior-card--teal:hover{ border-color:rgba(45,212,191,.6); box-shadow:0 18px 36px -16px rgba(45,212,191,.28); }
.interior-card--teal .interior-card-label small{ color:rgba(153,246,228,.85); }
.interior-card--violet:hover{ border-color:rgba(167,139,250,.6); box-shadow:0 18px 36px -16px rgba(167,139,250,.3); }
.interior-card--violet .interior-card-label small{ color:rgba(216,180,254,.85); }
.interior-card--emerald:hover{ border-color:rgba(16,185,129,.6); box-shadow:0 18px 36px -16px rgba(16,185,129,.3); }
.interior-card--emerald .interior-card-label small{ color:rgba(110,231,183,.85); }
.interior-card--amber:hover{ border-color:rgba(217,119,6,.6); box-shadow:0 18px 36px -16px rgba(217,119,6,.3); }
.interior-card--amber .interior-card-label small{ color:rgba(253,186,116,.85); }

/* ---------- Photo lightbox (Atmosfer gallery) ---------- */
.interior-card{ cursor:zoom-in; }
.lightbox-backdrop{
  position:fixed; inset:0;
  background:rgba(2,2,6,.88);
  z-index:400;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox-backdrop.open{ opacity:1; pointer-events:auto; }

.lightbox{
  position:fixed; inset:0;
  z-index:401;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4rem 1.25rem;
  opacity:0;
  pointer-events:none;
  transform:scale(.96);
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.lightbox.open{ opacity:1; pointer-events:auto; transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox-backdrop{ transition:none; }
}

.lightbox-figure{
  max-width:min(90vw, 1100px);
  max-height:88vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lightbox-figure img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  border-radius:1rem;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  object-fit:contain;
}
.lightbox-figure figcaption{
  margin-top:1rem;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.1rem;
  letter-spacing:.02em;
  text-align:center;
}

.lightbox-close{
  position:absolute;
  top:1.25rem; right:1.25rem;
  width:44px; height:44px;
  border-radius:9999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:1.25rem;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{ background:rgba(59,130,246,.35); transform:translateY(-1px); }

/* ---------- Nav ---------- */
#site-nav{
  background-color:rgba(5,5,9,.35);
  backdrop-filter:blur(8px);
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
#site-nav.scrolled{
  background-color:rgba(5,5,9,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.65);
}

#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;
}

/* ---------- Hero ambient motion (kept minimal — subtle blob drift only) ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-blob{ animation:heroBlobDrift 20s ease-in-out infinite; will-change:transform; }
  .hero-blob-a{ animation-duration:22s; }
  .hero-blob-b{ animation-duration:26s; animation-delay:-6s; }
  @keyframes heroBlobDrift{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(2%,-3%); }
  }
}
.hero-blob-c{ display:none; }
.hero-particles{ display:none; }

/* Thin glowing edge around the logo — stays in place, just sparkles/pulses */
.logo-mark-wrap{
  position:relative;
  border-radius:1.5rem;
  isolation:isolate;
}
.logo-mark-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2.5px;
  background:conic-gradient(from 0deg,
    var(--cyan-400), var(--blue-400), var(--violet-400), var(--pink-500), var(--cyan-400));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .logo-mark-wrap::before{ animation:logoEdgeSparkle 2.4s ease-in-out infinite; }
  @keyframes logoEdgeSparkle{
    0%,100%{ opacity:.55; filter:brightness(1); }
    50%{ opacity:1; filter:brightness(1.4); }
  }
}

/* Filmstrips either side of the logo — small kabinet photos slowly sliding through.
   z-index:0 so the logo (z-index:1) overlaps them at the seam, and its rounded
   corners show flowing photo underneath instead of a gap. */
.logo-filmstrip{
  width:8rem;
  overflow:hidden;
  position:relative;
  z-index:0;
}
@media (min-width:768px){ .logo-filmstrip{ width:11rem; } }
.logo-filmstrip--left{ border-radius:1.5rem 0 0 1.5rem; }
.logo-filmstrip--right{ border-radius:0 1.5rem 1.5rem 0; }
.logo-filmstrip-track{
  display:flex;
  height:100%;
}
.logo-filmstrip-track img{
  width:8rem;
  height:100%;
  object-fit:cover;
  flex-shrink:0;
  filter:saturate(1.1) brightness(.85);
}
@media (min-width:768px){ .logo-filmstrip-track img{ width:11rem; } }
@media (prefers-reduced-motion: no-preference){
  .logo-filmstrip-track--left{ animation:filmstripLeft 11s linear infinite; }
  .logo-filmstrip-track--right{ animation:filmstripRight 11s linear infinite; }
  @keyframes filmstripLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @keyframes filmstripRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
}
@media (prefers-reduced-motion: reduce){
  .logo-filmstrip-track{ transform:translateX(0) !important; }
}

/* ---------- Hero entrance (pure CSS, zero JS/CDN dependency) ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes heroFadeUp{
    from{ opacity:0; transform:translateY(22px); }
    to{ opacity:1; transform:translateY(0); }
  }
  #hero-eyebrow, #hero-title, #hero-sub, #hero-features li, #hero-ctas{
    animation:heroFadeUp .7s cubic-bezier(.22,1,.36,1) both;
  }
  #hero-eyebrow{ animation-delay:.05s; }
  #hero-title{ animation-delay:.15s; }
  #hero-sub{ animation-delay:.3s; }
  #hero-features li{ animation-delay:.4s; }
  #hero-features li:nth-child(2){ animation-delay:.48s; }
  #hero-features li:nth-child(3){ animation-delay:.56s; }
  #hero-ctas{ animation-delay:.42s; }
}

/* ---------- Logo mark ---------- */
.logo-mark{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 0 14px rgba(139,92,246,.45)) drop-shadow(0 0 6px rgba(59,130,246,.35));
}

/* ---------- Misc ---------- */
.text-gradient{
  background:linear-gradient(100deg, var(--cyan-400), var(--blue-400) 35%, var(--violet-400) 65%, var(--pink-500));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

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

::selection{ background:var(--blue-400); color:#0a0a12; }

/* ---------- Theme toggle ---------- */
.theme-toggle-btn{
  width:40px; height:40px;
  border-radius:9999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  transition:background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle-btn:hover{ background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.4); transform:translateY(-1px); }

/* ============================================================
   LIGHT MODE — scoped override for the dark (default) page
   ============================================================ */
html[data-theme="light"]{
  --lt-bg:#f7f8fb;
  --lt-bg-alt:#eef0f8;
  --lt-text:#0a0a12;
  --lt-body:#33344a;
  --lt-muted:#5b5c78;
  --lt-blue:#2563eb;
  --lt-violet:#7c3aed;
  --lt-border:rgba(10,10,18,.10);
  --lt-border-soft:rgba(10,10,18,.06);
}

html[data-theme="light"] body{ background:var(--lt-bg) !important; color:var(--lt-body) !important; }

html[data-theme="light"] .hero-photo-bg span{ opacity:.22 !important; }
html[data-theme="light"] .hero-blob{ opacity:.7; }
html[data-theme="light"] .hero-particles span{ filter:saturate(1.3); }
html[data-theme="light"] .hero-photo-bg::after{
  background:
    linear-gradient(180deg, rgba(247,248,251,.88) 0%, rgba(247,248,251,.78) 40%, rgba(247,248,251,.92) 75%, var(--lt-bg) 100%),
    linear-gradient(90deg, var(--lt-bg), transparent 20%, transparent 80%, var(--lt-bg)) !important;
}

/* Section backgrounds */
html[data-theme="light"] .bg-ink-900{ background-color:var(--lt-bg) !important; }
html[data-theme="light"] .bg-ink-950{ background-color:var(--lt-bg-alt) !important; }
html[data-theme="light"] .bg-ink-900\/98{ background-color:rgba(247,248,251,.98) !important; }
html[data-theme="light"] .bg-ink-950\/95{ background-color:rgba(238,240,248,.95) !important; }
html[data-theme="light"] #site-nav{
  background-color:rgba(247,248,251,.75) !important;
}
html[data-theme="light"] #site-nav.scrolled{
  background-color:rgba(247,248,251,.9) !important;
  box-shadow:0 10px 30px -18px rgba(10,10,18,.18) !important;
}

/* Text colors */
html[data-theme="light"] .text-white{ color:var(--lt-text) !important; }
html[data-theme="light"] .text-slate-100{ color:var(--lt-body) !important; }
html[data-theme="light"] .text-slate-200{ color:var(--lt-body) !important; }
html[data-theme="light"] .text-slate-300{ color:var(--lt-body) !important; }
html[data-theme="light"] .text-slate-400{ color:var(--lt-muted) !important; }
html[data-theme="light"] .text-slate-500{ color:var(--lt-muted) !important; }
html[data-theme="light"] .text-blue-300{ color:var(--lt-blue) !important; }
html[data-theme="light"] .text-blue-400{ color:var(--lt-blue) !important; }
html[data-theme="light"] .text-violet-400{ color:var(--lt-violet) !important; }
html[data-theme="light"] .hover\:text-blue-300:hover{ color:var(--lt-blue) !important; }

/* Borders / translucent fills */
html[data-theme="light"] .border-white\/5{ border-color:var(--lt-border-soft) !important; }
html[data-theme="light"] .border-white\/10{ border-color:var(--lt-border) !important; }
html[data-theme="light"] .bg-white\/5{ background-color:rgba(10,10,18,.05) !important; }

/* Custom components with dark-only styling */
html[data-theme="light"] .btn-ghost{
  background:rgba(10,10,18,.05) !important;
  border-color:rgba(10,10,18,.16) !important;
}
html[data-theme="light"] .btn-ghost:hover{ background:rgba(10,10,18,.09) !important; border-color:rgba(10,10,18,.28) !important; }

html[data-theme="light"] .btn-hero-outline{
  background:rgba(6,182,212,.08) !important;
  border-color:rgba(6,182,212,.4) !important;
  color:var(--lt-text) !important;
}
html[data-theme="light"] .btn-hero-outline:hover{ background:rgba(6,182,212,.16) !important; border-color:rgba(6,182,212,.6) !important; }

html[data-theme="light"] .card-elevated{
  background:linear-gradient(180deg, rgba(10,10,18,.04), rgba(10,10,18,.015)) !important;
  border-color:rgba(10,10,18,.10) !important;
  box-shadow:0 20px 40px -24px rgba(10,10,18,.18) !important;
}

html[data-theme="light"] .tab-pill{
  border-color:rgba(10,10,18,.14) !important;
  color:var(--lt-body) !important;
}
html[data-theme="light"] .tab-pill.active{ color:#fff !important; }

html[data-theme="light"] #mobile-menu{ background-color:rgba(247,248,251,.98) !important; }

/* Set cards keep their dark neon backdrop in both themes */
html[data-theme="light"] .set-card .text-slate-300{ color:#cbd5e1 !important; }
html[data-theme="light"] .set-card .text-white{ color:#fff !important; }
html[data-theme="light"] .set-card .text-blue-300{ color:#93c5fd !important; }
html[data-theme="light"] .set-card .text-violet-400{ color:#a78bfa !important; }
html[data-theme="light"] .set-sheet-section-label{ color:var(--lt-text) !important; }
html[data-theme="light"] .set-sheet-items li{ color:rgba(10,10,18,.75) !important; }
html[data-theme="light"] .set-sheet-qty-el{ color:var(--lt-text) !important; }

/* ---------- Menu / item-sheet / cart-sheet: restore bright look ---------- */
html[data-theme="light"] .bg-menu-dark{
  background:
    radial-gradient(circle at 8% 0%, rgba(59,130,246,.10), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(139,92,246,.08), transparent 40%),
    #f8f9fc !important;
}
html[data-theme="light"] .text-ink-900{ color:var(--lt-text) !important; }
html[data-theme="light"] .text-ink-900\/60{ color:rgba(10,10,18,.6) !important; }
html[data-theme="light"] .border-black\/10{ border-color:rgba(0,0,0,.1) !important; }
html[data-theme="light"] #menu-sticky-header .bg-white{ background:#fff !important; }

html[data-theme="light"] .menu-tabs-nav-btn{
  background:#fff !important;
  border-color:rgba(37,99,235,.2) !important;
  color:var(--lt-text) !important;
}
html[data-theme="light"] .menu-tab-pill{
  border-color:rgba(37,99,235,.2) !important;
  background:#fff !important;
  color:var(--lt-text) !important;
}
html[data-theme="light"] .view-toggle-btn{ color:rgba(10,10,18,.4) !important; }

html[data-theme="light"] .menu-card-photo{ background:#eef0f8 !important; }

html[data-theme="light"] .menu-card-grid,
html[data-theme="light"] .menu-card-list{
  background:#fff !important;
  border-color:rgba(37,99,235,.08) !important;
  box-shadow:0 6px 18px -12px rgba(10,10,18,.16) !important;
}
html[data-theme="light"] .menu-card-grid:hover,
html[data-theme="light"] .menu-card-list:hover{
  border-color:rgba(59,130,246,.35) !important;
  box-shadow:0 14px 28px -16px rgba(37,99,235,.3) !important;
}

html[data-theme="light"] .menu-price{ color:#1d4ed8 !important; }

html[data-theme="light"] .item-sheet{ background:#fff !important; color:inherit !important; }
html[data-theme="light"] .item-sheet .bg-slate-100{ background-color:#f1f5f9 !important; }
html[data-theme="light"] .item-sheet-handle{ background:rgba(10,10,18,.15) !important; }
html[data-theme="light"] .item-sheet-photo{ background-color:#eceaf6 !important; }

html[data-theme="light"] .theme-toggle-btn{
  background:rgba(10,10,18,.05) !important;
  border-color:rgba(10,10,18,.16) !important;
  color:var(--lt-text) !important;
}
html[data-theme="light"] .theme-toggle-btn:hover{ background:rgba(37,99,235,.12) !important; border-color:rgba(37,99,235,.4) !important; }

/* Persistent nav strip: glowing pill frame around each link */
.nav-chip{
  display:inline-flex;
  align-items:center;
  padding:.3rem .85rem;
  font-size:.75rem;
  border-radius:9999px;
  border:1px solid rgba(59,130,246,.35);
  box-shadow:0 0 10px rgba(59,130,246,.28), inset 0 0 8px rgba(59,130,246,.08);
  transition:box-shadow .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
  outline:none;
}
.nav-chip:hover{
  border-color:rgba(59,130,246,.75);
  box-shadow:0 0 18px rgba(59,130,246,.5), inset 0 0 10px rgba(59,130,246,.15);
  transform:translateY(-1px);
}
.nav-chip:focus{ outline:none; }
.nav-chip:focus-visible{
  outline:2px solid rgba(59,130,246,.7);
  outline-offset:2px;
}

/* ---------- Menu / Sets "separate view" modal ---------- */
.modal-header-controls{
  display:none;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  position:sticky;
  top:1rem;
  height:0;
  overflow:visible;
  padding-right:1rem;
  z-index:20;
}
.section-modal .modal-header-controls{ display:flex; }

.modal-close-btn{ display:none; }

.modal-theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:9999px;
  background:rgba(10,10,18,.55);
  color:#fff;
  font-size:1.25rem;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
  transition:background .2s ease, transform .2s ease;
}
.modal-theme-toggle:hover{ background:rgba(37,99,235,.6); transform:translateY(-1px); }

#menu, #sets, #atmosfer{ 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(10,10,18,.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(10,10,18,.7); }
#menu.section-modal .modal-theme-toggle{ background:rgba(10,10,18,.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; } }