:root {
  --gold: #D4AF37; --orange: #FF8C00; --dark: #050505;
  --card: #121212; --card-2:#171717; --whatsapp: #25D366; --red: #e74c3c; --green: #2ecc71; --ai: #8E44AD;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { background: radial-gradient(circle at top right, rgba(212,175,55,.08), transparent 18%), var(--dark); color: white; overflow-x: hidden; }
html { scroll-padding-top: 90px; }
a{text-decoration:none}

nav {
  background: rgba(5,5,5,0.98); backdrop-filter: blur(20px);
  position: fixed; width: 100%; top: 0; z-index: 5000; border-bottom: 2px solid var(--orange);
}
.nav-inner{
  display:flex; justify-content:space-between; align-items:center; gap:18px; padding: .85rem 5%;
}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-badge{width:56px;height:56px;border-radius:50%;background:#f0e500;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,.25);line-height:1}
.logo-top{font-size:.58rem;color:#2a7fd1;font-weight:700;margin-top:4px}
.logo-main{font-family:'Martel',serif;font-size:.63rem;color:#d61f2c;text-align:center;font-weight:900}
.logo-bottom{font-size:.62rem;color:#000;margin-bottom:4px}
.logo-text{display:flex;flex-direction:column}
.logo { font-family: 'Martel', serif; color: var(--orange); font-size: 1.1rem; line-height:1; }
.logo span{color:var(--gold)}
.logo-text small{color:#9f9f9f;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.nav-links { display: flex; gap: 15px; flex-wrap:wrap; }
.nav-links a { color: #aaa; text-decoration: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; transition: 0.3s; }
.nav-links a:hover { color: var(--gold); }
.hud-actions { display: flex; gap: 12px; align-items: center; }
.ai-trigger,.mobile-nav-btn { border-radius: 50px; border: 1px solid var(--ai); color: var(--ai); background: transparent; padding: 8px 15px; cursor: pointer; }
.mobile-nav-btn{display:none;border-color:#444;color:#ddd}
.cart-trigger { position: relative; cursor: pointer; font-size: 1.6rem; color: var(--gold); }
#cart-count { position: absolute; top: -8px; right: -8px; background: var(--red); color: white; font-size: 0.6rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.mobile-nav{display:none;padding:0 5% 12px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:10px 0;border-top:1px solid rgba(255,255,255,.05);color:#ddd}

/* Hero */
#home {
  min-height: 96vh; display: flex; align-items: center; text-align: center;
  background: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.82)), url('special-thali.jpg');
  background-size: cover; background-position: center; background-attachment: fixed; padding: 110px 5% 40px;
}
.hero-overlay{max-width:900px;margin:auto}
.hero-pill{display:inline-block;border:1px solid rgba(212,175,55,.25);background:rgba(212,175,55,.08);color:var(--gold);padding:9px 16px;border-radius:999px;margin-bottom:18px;font-size:.85rem}
#home h1 { font-family: 'Martel'; font-size: clamp(2.2rem, 4.2vw, 4.8rem); margin-bottom: 10px; }
#home p{color:#e6ddcf;max-width:700px;margin:0 auto}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.cta-btn,.ghost-btn { padding: 15px 32px; border-radius: 50px; text-decoration: none; font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,0.3); display:inline-flex; align-items:center; justify-content:center }
.cta-btn{ background: var(--orange); color: white;}
.ghost-btn{background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.22);color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.hero-stats div{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.hero-stats strong{display:block;color:var(--gold);margin-bottom:4px}
.hero-stats span{font-size:.92rem;color:#bdbdbd}

section { padding: 70px 5%; background: #000; }
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;flex-wrap:wrap;margin-bottom:22px}
.section-head p{max-width:640px;color:#aaa}
.section-title { font-family: 'Martel'; color: var(--gold); font-size: 1.8rem; letter-spacing: 2px; }

/* About */
#about { background: var(--card); text-align: center; border-top: 1px solid #222; }
#about p { color: #aaa; line-height: 1.8; max-width: 900px; margin: 0 auto; font-size: 1.05rem; }

.menu-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.search-wrap input{width:260px;max-width:100%}

.tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tab-btn,.solid-btn { padding: 10px 22px; border-radius: 50px; border: 1px solid var(--gold); background: transparent; color: white; cursor: pointer; font-size: 0.85rem; display:inline-flex; justify-content:center; align-items:center; }
.tab-btn.active,.solid-btn { background: var(--orange); border-color: var(--orange); font-weight: bold; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.card { background: linear-gradient(180deg,#171717,#111); border-radius: 25px; overflow: hidden; border: 1px solid #333; position: relative; transition: 0.4s; display:flex; flex-direction:column; min-height:100%; }
.card:hover{transform:translateY(-3px)}
.card-media{padding:16px 16px 0}
.card-img-wrap{width:100%;height:220px;border-radius:18px;overflow:hidden;background:#0b0b0b}
.card-img { width: 100%; height: 100%; object-fit: cover; }
.card-content{padding:20px;display:flex;flex-direction:column;flex:1}
.card-content p{color:#9d9d9d;font-size:.92rem;min-height:40px}
.menu-cta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:14px}

.spice-meter { display: flex; background: #000; border-radius: 10px; margin: 15px 0; padding: 4px; border: 1px solid #333; }
.spice-lvl { flex: 1; text-align: center; font-size: 0.7rem; padding: 8px; cursor: pointer; border-radius: 6px; }
.spice-lvl.active { background: var(--orange); font-weight: bold; }
.sold-out { opacity: 0.2; filter: grayscale(1); pointer-events: none; }
.sold-out-tag { position: absolute; top: 15px; right: 15px; background: var(--red); color: white; padding: 5px 12px; border-radius: 8px; font-weight: bold; z-index: 10; font-size: 0.7rem; }

/* Menu cards/gallery */
#menu-cards,#gallery,#reels,#reviews,#booking,#contact{border-top:1px solid #1e1e1e}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-item{border-radius:22px;overflow:hidden;border:1px solid #2d2d2d;background:#111;box-shadow:0 16px 30px rgba(0,0,0,.28)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item.tall{grid-row:span 2}
.menu-card-grid{grid-template-columns:repeat(2,1fr)}

.reel-track { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
.reel-card { min-width: 270px; height: 460px; border-radius: 22px; border: 2px solid var(--gold); overflow: hidden; position: relative; flex-shrink: 0; cursor: pointer; background:#111 }
.reel-card video { width: 100%; height: 100%; object-fit: cover; }
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff;background:linear-gradient(transparent, rgba(0,0,0,.25))}
.reel-card.playing .play-overlay{display:none}

/* Reviews */
.reviews-layout{display:grid;grid-template-columns:2fr 1fr;gap:20px}
#reviews{background: var(--dark); text-align: center; }
.review-track { display: flex; gap: 20px; overflow-x: auto; padding: 6px 0; scrollbar-width: none; }
.review-card { min-width: 300px; padding: 26px; background: var(--card); border-radius: 20px; border: 1px solid #333; text-align: left; }
.review-card p{margin-top:10px;color:#ddd}
.review-actions-panel{padding:24px;background:linear-gradient(180deg,#171717,#111);border:1px solid #333;border-radius:22px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.rating-number{font-size:3rem;color:var(--gold);font-weight:800;line-height:1}
.review-actions-panel p{color:#aaa}

/* Booking */
.booking-card{max-width:900px;margin:0 auto;background:linear-gradient(180deg,#171717,#111);border:1px solid #333;border-radius:26px;padding:24px}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.booking-actions{margin-top:8px}

/* Footer/contact */
#contact { padding: 80px 5% 40px; background: #000; border-top: 3px solid var(--orange); }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 28px; }
.contact-panel{background:linear-gradient(180deg,#171717,#111);border:1px solid #333;border-radius:24px;padding:24px}
.contact-panel p{color:#ddd;margin-top:10px}
.map-box { min-height: 330px; border-radius: 20px; overflow: hidden; border: 1px solid var(--gold); }
.social-links { margin-top: 20px; display: flex; gap: 20px; font-size: 2rem; }
.admin-entry-btn { background: var(--gold); color: black; border: none; padding: 10px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }

/* Admin Panel */
#admin-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 8000; display: none; padding: 20px; overflow-y: auto; }
#admin-panel.active{display:block}
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.exit-btn { background: red; color: white; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; }
.admin-nav { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 25px; border-bottom: 1px solid #222; padding-bottom: 15px; position: sticky; top: 0; background: #000; z-index: 10; }
.admin-btn { padding: 12px 20px; border-radius: 10px; border: 1px solid var(--gold); background: transparent; color: white; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.admin-btn.active { background: var(--gold); color: black; font-weight: bold; }
.admin-section { background: #111; padding: 20px; border-radius: 20px; border: 1px solid #333; margin-bottom: 25px; }

/* Sidebar */
#cart-sidebar { position: fixed; right: -100%; top: 0; width: 420px; height: 100%; background: #080808; z-index: 6000; transition: 0.5s; padding: 30px; border-left: 2px solid var(--orange); display: flex; flex-direction: column; }
#cart-sidebar.active { right: 0; }
.cart-footer { background: #111; padding: 25px; border-radius: 25px; border: 1px solid var(--orange); }

/* AI Bot */
#ai-bot { position: fixed; bottom: -500px; right: 25px; width: 320px; background: #111; border: 2px solid var(--ai); border-radius: 20px; transition: 0.6s; z-index: 4000; overflow: hidden; }
.bot-header { background: var(--ai); padding: 10px; display: flex; justify-content: space-between; align-items: center; }

/* Utils */
.btn-wa { width: 100%; padding: 18px; background: var(--whatsapp); color: white; border: none; border-radius: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
input, select, textarea { width: 100%; padding: 12px; margin: 10px 0; background: #000; border: 1px solid #333; color: white; border-radius: 10px; outline: none; }
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--gold); color: black; padding: 12px 30px; border-radius: 50px; font-weight: 700; z-index: 9500; transition: 0.4s; opacity: 0; pointer-events: none; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); }
.modal-content { background: #111; padding: 40px; border-radius: 30px; border: 1px solid var(--orange); text-align: center; width: 100%; max-width: 450px; }
.star-input { font-size: 2rem; color: #333; cursor: pointer; margin: 0 5px; }
.receipt { background: white; color: black; width: 100%; max-width: 360px; padding: 30px; border-radius: 2px; font-family: 'Courier New', monospace; }
.done-btn { width: 100%; margin-top: 20px; padding: 12px; background: #000; color: #fff; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
#music-btn { position: fixed; bottom: 20px; left: 20px; z-index: 5500; background: var(--orange); width: 50px; height: 50px; border-radius: 50%; border: 2px solid white; color: white; cursor: pointer; }
.floating-wa{position:fixed;right:18px;bottom:18px;z-index:5600;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--whatsapp);color:#06240f;font-size:1.7rem;box-shadow:0 16px 26px rgba(0,0,0,.34)}

@media (max-width: 1024px) {
  .hero-stats,.gallery-grid,.reviews-layout,.footer-grid,.booking-grid {grid-template-columns:1fr 1fr;}
  .menu-card-grid{grid-template-columns:1fr}
  .reviews-layout{grid-template-columns:1fr}
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .mobile-nav-btn{display:inline-flex}
  .menu-grid,.gallery-grid,.footer-grid,.booking-grid,.hero-stats { grid-template-columns: 1fr; }
  .gallery-item.tall{grid-row:span 1}
}
@media (max-width: 600px) {
  #cart-sidebar { width: 100%; }
  .hero-actions,.menu-toolbar,.booking-grid,.footer-grid{grid-template-columns:1fr}
  .search-wrap input{width:100%}
  .hero-actions{flex-direction:column}
  .cta-btn,.ghost-btn{width:100%}
  .nav-inner{padding:.75rem 4%}
  .logo-text small{display:none}
  .reel-card{min-width:240px;height:400px}
  .review-card{min-width:260px}
}