:root {
    --bg: #080808;
    --card-bg: rgba(20, 20, 22, 0.7);
    --accent: #00e5ff;
    --accent-glow: rgba(0, 229, 255, 0.3);
    --text-main: #ffffff;
    --text-dim: #94a3b8;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
    --veg: #4caf50;
    --nonveg: #ef5350;
}

body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg); 
    color: var(--text-main); 
    margin: 0; 
    overflow-x: hidden;
}

/* --- FIX: ADDED ANIMATIONS --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Background Ambiance */
.grain-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    opacity: 0.04; pointer-events: none; z-index: 10;
}

/* Nav & Logo */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 8%; position: fixed; width: 84%; top: 0; z-index: 1000;
    backdrop-filter: blur(20px); border-bottom: 1px solid var(--border);
    background: rgba(8, 8, 8, 0.8);
}
.logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; letter-spacing: 2px; }
.logo span { color: var(--accent); }

/* Hero */
.hero {
    height: 70vh; display: flex; align-items: center; padding: 0 10%;
    background: linear-gradient(to bottom, transparent, var(--bg)),
                url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1920&q=80') center/cover fixed;
}
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 8vw, 4.5rem); margin: 0; }

/* Search & Tabs */
.search-container { display: flex; justify-content: center; padding: 40px 10% 20px; }
.search-box-premium {
    background: var(--glass); border: 1px solid var(--border);
    padding: 15px 25px; border-radius: 20px; display: flex; align-items: center; width: 100%; max-width: 600px;
}
.search-box-premium input { background: transparent; border: none; color: #fff; outline: none; width: 100%; margin-left: 15px; }

.tabs-container { display: flex; justify-content: center; margin: 30px 0; position: sticky; top: 90px; z-index: 900; background: var(--bg); padding: 10px 0; }
.tab-pill { background: var(--glass); border: 1px solid var(--border); padding: 5px; border-radius: 50px; display: flex; position: relative; }
.tab { background: transparent; border: none; color: var(--text-dim); padding: 12px 25px; border-radius: 50px; cursor: pointer; font-weight: 600; z-index: 2; transition: 0.3s; }
.tab.active { color: #000; }
.tab-indicator { position: absolute; height: calc(100% - 10px); background: #fff; border-radius: 50px; top: 5px; left: 5px; transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); z-index: 1; }

/* Menu Grid & Cards */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; padding: 0 10% 100px; }
.item-card {
    background: var(--card-bg); border-radius: 24px; overflow: hidden;
    border: 1px solid var(--border); backdrop-filter: blur(10px);
    /* Animation applied here */
    animation: fadeInUp 0.6s ease forwards;
}
.img-box { height: 220px; position: relative; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }

.item-info { padding: 25px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.diet-dot { width: 10px; height: 10px; border-radius: 50%; }
.diet-dot.veg { background: var(--veg); box-shadow: 0 0 10px var(--veg); }
.diet-dot.nonveg { background: var(--nonveg); box-shadow: 0 0 10px var(--nonveg); }

/* Customization Buttons */
.custom-selector { display: flex; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 4px; margin: 15px 0; gap: 5px; }
.opt-btn { flex: 1; font-size: 0.7rem; text-align: center; padding: 8px 0; cursor: pointer; border-radius: 8px; color: var(--text-dim); transition: 0.2s; }
.opt-btn.active { background: var(--accent); color: #000; font-weight: 800; }

.price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.add-btn { background: #fff; color: #000; border: none; padding: 10px 20px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.3s; }
.add-btn:hover { background: var(--accent); transform: scale(1.05); }

/* Skeletons */
.skeleton { height: 400px; border-radius: 24px; background: linear-gradient(90deg, #121212 25%, #1a1a1a 50%, #121212 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* Status Badge */
.status-badge { font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; width: fit-content; margin-top: 5px; }
.status-open { color: var(--veg); border: 1px solid var(--veg); }
.status-closed { color: var(--nonveg); border: 1px solid var(--nonveg); }

/* Cart & Toasts remain same as previous */
#cart-panel { position: fixed; right: -450px; top: 0; width: 400px; height: 100vh; background: #0c0d0f; z-index: 2000; padding: 40px; box-sizing: border-box; transition: 0.5s; display: flex; flex-direction: column; }
#cart-panel.active { right: 0; }
.toast { position: fixed; top: 100px; right: 20px; background: #fff; color: #000; padding: 12px 24px; border-radius: 10px; font-weight: 700; z-index: 3000; animation: fadeInUp 0.3s ease; }