:root {
    --primary: #39FF14;
    /* Neon Green */
    --secondary: #FF00CC;
    /* Cyberpunk Pink (Complementary) */
    --dark: #121212;
    --light: #f4f4f4;
    --glass-bg: rgba(20, 20, 20, 0.5);
    /* 50% Opacity for consistent readability */
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #cccccc;
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Stylish Price Badge */
.price-tag {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(0, 0, 0, 0.5));
    border: 1px solid var(--primary);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
    transition: all 0.3s ease;
}

.price-tag:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.4);
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--secondary);
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(255, 0, 204, 0.4);
    pointer-events: none;
}

.price-old {
    text-decoration: line-through;
    color: #888;
    font-size: 0.85rem;
    margin-left: 8px;
    font-weight: 400;
}

.price-currency {
    color: var(--secondary);
    font-weight: 800;
    font-size: 0.9rem;
}

.price-amount {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
}

.price-label {
    font-size: 0.65rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 2px;
    opacity: 0.8;
}

.price-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align bottom to look grounded */
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.add-to-cart-btn {
    background: var(--primary);
    color: black;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-to-cart-btn:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(57, 255, 20, 0.3);
}

.add-to-cart-btn.neon-btn {
    background: #39ff14;
    /* Neon Green */
    color: #000;
    font-weight: 800;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.add-to-cart-btn.neon-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

.price-info {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 0.7rem;
    color: #39ff14;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
}

.p-final,
.p-org,
.p-disc {
    display: none !important;
}


/* Menu Quantity Counter Styles - Premium Redesign */
.menu-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

.c-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 800;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.c-btn.minus {
    color: #ff4444;
}

.c-btn.minus:hover {
    background: #ff4444;
    color: white;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.4);
}

.c-btn.plus {
    color: var(--primary);
}

.c-btn.plus:hover {
    background: var(--primary);
    color: black;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

.c-btn:active {
    transform: scale(0.9);
}

.counter-value {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
}

.food-img-container {
    height: 180px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: rgba(255, 255, 255, 0.02);
}

.food-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.food-card:hover .food-img {
    transform: scale(1.1);
}

.food-img-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
}

.food-img-placeholder i {
    font-size: 3rem;
    color: var(--secondary);
    opacity: 0.5;
}

.counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.counter-btn.minus {
    background: rgba(255, 0, 0, 0.1);
    color: #ff4444;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.counter-btn.minus:hover {
    background: #ff4444;
    color: white;
}

.counter-btn.plus {
    background: rgba(57, 255, 20, 0.1);
    color: var(--primary);
    border: 1px solid rgba(57, 255, 20, 0.2);
}

.counter-btn.plus:hover {
    background: var(--primary);
    color: black;
}

.counter-value {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    min-width: 25px;
    text-align: center;
}





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* --- BACKGROUND OPTIONS (Uncomment ONE to use) --- */

/* OPTION 1: Default Dark Premium (Active) */
body {
    background: url('images/Image.jpg') no-repeat center center fixed;
    background-size: cover;
    background-color: #000;
    /* Fallback to black for white screen fix */
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* OPTION 2: Dark Wood Texture 
body {
    background: url('https://images.unsplash.com/photo-1550989460-0adf9ea622e2?q=80&w=1920&auto=format&fit=crop') no-repeat center center fixed;
    background-size: cover;
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
}
*/

/* OPTION 3: Abstract Black Food Pattern 
body {
    background: url('https://img.freepik.com/free-photo/dark-textured-background_1258-254.jpg') no-repeat center center fixed;
    background-size: cover;
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
}
*/

/* ----------------------------------------------- */

/* Overlay for Readability */


/* Semi-transparent dark overlay for the whole page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.15);
    /* Extremely low opacity (15%) */
    z-index: -1;
    pointer-events: none;
}

/* Utility Class: Glassmorphism */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: 16px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-enter {
    animation: fadeInUp 0.8s ease-out forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: 0.3s;
}

nav.scrolled {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    padding: 1rem 5%;
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.logo-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.logo-link:hover .logo {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.category-title {
    color: #ff00ff;
    /* Neon Pink as per image */
    text-align: center;
    font-size: 2.5rem;
    margin: 3rem 0 1.5rem;
    text-transform: capitalize;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

.category-description {
    text-align: center;
    color: #666;
    max-width: 800px;
    margin: 0 auto 3rem;
    font-size: 1rem;
    line-height: 1.6;
}

.nav-links a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--secondary);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 8px;
    top: 100%;
    left: 0;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background-color: var(--primary);
    color: black;
    font-weight: 700;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.btn-primary {
    background: var(--primary);
    color: black;
    /* Text is black for readability on Neon Green */
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 2px solid var(--primary);
    /* Added border for structure */
    display: inline-block;
    cursor: pointer;
    /* Ensure cursor is pointer */
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    /* Pulse effect */
    /* Pulse effect */
    box-shadow: 0 0 20px var(--primary);
    background: white;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.hero-content {
    max-width: 800px;
    padding: 3rem;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    /* Increased for title */
    background: linear-gradient(to right, #fff, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Featured Section */
.featured {
    padding: 5rem 5%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--secondary);
}

.food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.food-card {
    padding: 1.2rem;
    text-align: left;
    /* Changed to left for more professional look */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.food-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(57, 255, 20, 0.15);
}


.food-img-placeholder {
    width: 100%;
    height: 200px;
    background: #333;
    /* Placeholder color if image fails */
    border-radius: 12px;
    margin-bottom: 1rem;
    object-fit: cover;
}

.food-desc {
    font-size: 0.85rem !important;
    color: #bbb;
    margin-bottom: 1.2rem;
    line-height: 1.5;
    height: 3.2em;
    /* Ensure consistent height for 2-3 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Added for standard compatibility */
    -webkit-box-orient: vertical;
}


.food-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: white;
    letter-spacing: -0.5px;
}


.food-price {
    color: var(--secondary);
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Footer */
footer {
    padding: 3rem 5%;
    text-align: center;
    margin-top: 5rem;
    color: var(--text-muted);
}

/* Mobile Nav Styles */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Hide for now, JS will toggle */
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 20px;
        background: rgba(0, 0, 0, 0.85);
        padding: 2rem;
        border-radius: 10px;
        width: 200px;
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Reviews Section */
.testimonial-card {
    text-align: center;
    padding: 2rem;
    margin: 1rem;
    font-style: italic;
}

.stars {
    color: var(--secondary);
    margin-bottom: 1rem;
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1001;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #25d366;
}

/* Pulsating Badge Animation */
@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 69, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);
    }
}

.must-try {
    animation: pulse-red 2s infinite;
}

/* Heart Beat Animation for Developer Credit */
@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }
}

.heart-beat {
    display: inline-block;
    animation: heartbeat 1.5s ease-in-out infinite;
    color: #ff4444;
}

/* 1. Daily Specials Ticker */
.ticker-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--primary);
    color: black;
    /* Better contrast on neon green */
    font-size: 0.9rem;
    /* Reverted */
    font-weight: bold;
    overflow: hidden;
    height: 32px;
    /* Reverted almost to original */
    line-height: 32px;
    z-index: 2000;
}

.ticker {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker 25s linear infinite;
    /* Adjusted speed */
}


@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Adjust Nav for Ticker */
nav {
    top: 32px;
    /* Adjusted to match ticker */
}


/* 2. Google Map */
.map-container {
    width: 100%;
    max-width: 400px;
    /* Reduced width for "small box" feel */
    height: 250px;
    /* Reduced height */
    border-radius: 16px;
    overflow: hidden;
    margin: 2rem auto;
    /* Center the box */
    border: 2px solid var(--glass-border);
}

/* 3. Booking Form */
.booking-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    padding: 1rem;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
}

.form-input::placeholder {
    color: #aaa;
}

/* 4. Language Toggle */
.lang-btn,
.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
    font-weight: 500;
}

.lang-btn:hover,
.glass-btn:hover {
    background: white;
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}



/* Tab Buttons */
.custom-tabs {
    flex-wrap: wrap;
    justify-content: center;
}

.tab-btn {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--primary), #e74c3c);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
    font-weight: 700;
    transform: scale(1.05);
}

.tab-btn.active::after {
    content: '👑';
    font-size: 0.8rem;
}

/* --- RESPONSIVENESS --- */

/* 1. Mobile & Tablet (< 768px) */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        right: 0px;
        height: 100vh;
        top: 0;
        background: rgba(0, 0, 0, 0.85);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
    }

    .nav-links.active {
        transform: translateX(0%);
    }

    .hamburger {
        display: block;
        z-index: 2000;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .food-grid {
        grid-template-columns: 1fr;
        /* Stack cards */
    }

    .ticker {
        font-size: 0.9rem;
    }

    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    /* Mobile Friendly Background */
    body {
        background: url('images/Mobile.jpg') no-repeat center center fixed;
        background-size: cover;
    }

    /* Fallback if Mobile.jpg doesn't exist, it might show white or nothing if handled poorly by browser, 
       but usually it just ignores. To be safe, we can leave it or user ensures file exists. 
       Actually, standard CSS behavior: if image missing, it might show just color. 
       Better approach: We assume user WILL put the image. */
}

/* 2. TV & Large Screens (> 1920px) */
@media (min-width: 1920px) {
    body {
        font-size: 1.2rem;
        /* Scale up base text */
    }

    .hero h1 {
        font-size: 6rem;
    }

    .section-title {
        font-size: 4rem;
    }

    .food-card {
        padding: 3rem;
    }

    .container {
        max-width: 1600px;
        /* Constrain width on huge screens */
        margin: 0 auto;
    }
}

/* Side-by-Side Section Container */
.dual-container {
    display: flex;
    gap: 2rem;
    margin: 4rem 5%;
    flex-wrap: wrap;
    justify-content: center;
}

.dual-item {
    flex: 1;
    min-width: 300px;
    /* Stack on small screens */
    padding: 2rem;
    border-radius: 16px;
}