@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="hero-video-container">
        <video autoplay muted loop playsinline class="hero-video">
            <source src="https://assets.mixkit.co/videos/preview/mixkit-elegant-dining-table-in-a-modern-restaurant-45842-large.mp4" type="video/mp4">
        </video>
        <div class="hero-overlay"></div>
        <div class="gold-particles"></div>
        
        <!-- Enhanced Animated Elements -->
        <div class="sparkle-container">
            <!-- Main sparkles - Ditambah dari 10 menjadi 15 -->
            <div class="sparkle s1"></div>
            <div class="sparkle s2"></div>
            <div class="sparkle s3"></div>
            <div class="sparkle s4"></div>
            <div class="sparkle s5"></div>
            <div class="sparkle s6"></div>
            <div class="sparkle s7"></div>
            <div class="sparkle s8"></div>
            <div class="sparkle s9"></div>
            <div class="sparkle s10"></div>
            <div class="sparkle s11"></div>
            <div class="sparkle s12"></div>
            <div class="sparkle s13"></div>
            <div class="sparkle s14"></div>
            <div class="sparkle s15"></div>
        </div>
        
        <!-- Multiple light rays for more dynamic effect - Diperhalus -->
        <div class="light-rays ray-1"></div>
        <div class="light-rays ray-2"></div>
        <div class="light-rays ray-3"></div>
        <div class="light-rays ray-4"></div>
        <div class="light-rays ray-5"></div>
        
        <!-- Glowing orbs - Ditambah 2 lagi -->
        <div class="glowing-orb orb-1"></div>
        <div class="glowing-orb orb-2"></div>
        <div class="glowing-orb orb-3"></div>
        <div class="glowing-orb orb-4"></div>
        <div class="glowing-orb orb-5"></div>
    </div>
    
    <div class="hero-content">
        <div class="restaurant-brand">
            <!-- LOGO SUTAN RAJA -->
            <div class="logo-container">
                <img src="{{ asset('logo.png') }}" alt="SUTAN RAJA Logo" class="restaurant-logo">
                <div class="logo-glow"></div>
            </div>
            <h1 class="restaurant-title">SUTAN RAJA</h1>
            <h1 class="restaurant-title">MENU</h1>
            <div class="title-underline"></div>
        </div>
        
        <div class="open-status">
            <span class="open-badge">
                <i class="fas fa-clock"></i>
                <span class="badge-text">OPEN 24 HOURS</span>
                <div class="badge-pulse"></div>
            </span>
            <p class="status-text">All price exclude subject to 21% government tax and service charge</p>
        </div>
        
        <div class="hero-actions">
            <a href="#menu-section" class="btn-view-menu">
                <i class="fas fa-utensils"></i>
                <span>VIEW OUR MENU</span>
                <div class="btn-glow"></div>
            </a>
            
            <!-- Additional CTA button -->
            <a href="#contact-section" class="btn-reservation">
                <i class="fas fa-calendar-alt"></i>
                <span>MAKE RESERVATION</span>
            </a>
        </div>
        
        <div class="scroll-indicator">
            <a href="#menu-section" class="scroll-down">
                <div class="scroll-icon">
                    <i class="fas fa-chevron-down"></i>
                    <div class="scroll-pulse"></div>
                </div>
                <span class="scroll-text">Scroll to explore</span>
            </a>
        </div>
    </div>
    
    <!-- Enhanced Floating Elements - Ditambah jadi 12 -->
    <div class="floating-elements">
        <div class="floating-element fe-1">
            <i class="fas fa-star"></i>
        </div>
        <div class="floating-element fe-2">
            <i class="fas fa-crown"></i>
        </div>
        <div class="floating-element fe-3">
            <i class="fas fa-gem"></i>
        </div>
        <div class="floating-element fe-4">
            <i class="fas fa-utensils"></i>
        </div>
        <div class="floating-element fe-5">
            <i class="fas fa-wine-glass-alt"></i>
        </div>
        <div class="floating-element fe-6">
            <i class="fas fa-fire"></i>
        </div>
        <div class="floating-element fe-7">
            <i class="fas fa-pepper-hot"></i>
        </div>
        <div class="floating-element fe-8">
            <i class="fas fa-leaf"></i>
        </div>
        <div class="floating-element fe-9">
            <i class="fas fa-award"></i>
        </div>
        <div class="floating-element fe-10">
            <i class="fas fa-diamond"></i>
        </div>
        <div class="floating-element fe-11">
            <i class="fas fa-trophy"></i>
        </div>
        <div class="floating-element fe-12">
            <i class="fas fa-medal"></i>
        </div>
    </div>
</section>

<!-- Floating Cart Icon -->
<div class="cart-floating" id="cartFloating">
    <button class="cart-icon" onclick="toggleCart()">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-count" id="cartCount">0</span>
        <div class="cart-pulse"></div>
    </button>
</div>

<!-- Cart Sidebar -->
<div class="cart-sidebar" id="cartSidebar">
    <div class="cart-header">
        <h3 class="cart-title">
            <i class="fas fa-shopping-cart"></i>
            Your Order
        </h3>
        <button class="cart-close" onclick="toggleCart()">
            <i class="fas fa-times"></i>
        </button>
    </div>
    
    <div class="cart-body">
        <div class="cart-empty" id="cartEmpty">
            <i class="fas fa-shopping-basket"></i>
            <p>Your cart is empty</p>
            <span>Add items from the menu</span>
        </div>
        
        <div class="cart-items" id="cartItems">
            <!-- Cart items will be loaded here via JavaScript -->
        </div>
    </div>
    
    <div class="cart-footer">
        <div class="cart-summary">
            <!-- Subtotal (Before Tax) -->
            <div class="cart-subtotal-line">
                <span>Subtotal:</span>
                <span class="cart-subtotal-amount" id="cartSubtotal">Rp 0</span>
            </div>
            
            <!-- Tax & Service (21%) -->
            <div class="cart-tax-line">
                <span>Tax & Service (21%):</span>
                <span class="cart-tax-amount" id="cartTax">Rp 0</span>
            </div>
            
            <div class="cart-divider"></div>
            
            <!-- Total (Include Tax) -->
            <div class="cart-total">
                <span>Total:</span>
                <span class="cart-total-amount" id="cartTotal">Rp 0</span>
            </div>
        </div>
        
        <button class="cart-checkout-btn" id="checkoutBtn" onclick="checkout()">
            <i class="fab fa-whatsapp"></i>
            Order via WhatsApp
            <span class="cart-checkout-total" id="checkoutTotal">Rp 0</span>
        </button>
    </div>
</div>

<!-- Cart Overlay -->
<div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>

<!-- ========== CUSTOMER INFO MODAL - NAMA & NO KAMAR ========== -->
<div class="customer-modal-overlay" id="customerModalOverlay" onclick="closeCustomerModal()"></div>
<div class="customer-modal" id="customerModal">
    <div class="customer-modal-content">
        <div class="customer-modal-header">
            <h3>
                <i class="fas fa-user"></i>
                Customer Information
            </h3>
            <button class="customer-modal-close" onclick="closeCustomerModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="customer-modal-body">
            <p class="customer-modal-subtitle">(Optional) Fill in your name and room number for easier confirmation</p>
            
            <div class="customer-form-group">
                <label for="customerName">
                    <i class="fas fa-user-circle"></i>
                    Customer Name
                </label>
                <input type="text" id="customerName" class="customer-input" 
                       placeholder="e.g. Paul Wanner" 
                       autocomplete="off">
                <small class="form-hint">Enter your full name</small>
            </div>
            
            <div class="customer-form-group">
                <label for="customerRoom">
                    <i class="fas fa-door-open"></i>
                    Room Number
                </label>
                <input type="text" id="customerRoom" class="customer-input" 
                       placeholder="e.g. 101" 
                       autocomplete="off">
                <small class="form-hint">Enter your room number (if staying at the hotel)</small>
            </div>
        </div>
        
        <div class="customer-modal-footer">
            <button class="btn-skip" onclick="skipCustomerInfo()">
                <i class="fas fa-forward"></i>
                Skip & Order
            </button>
            <button class="btn-confirm" onclick="confirmCustomerInfo()">
                <i class="fab fa-whatsapp"></i>
                Continue to WhatsApp
            </button>
        </div>
    </div>
</div>

<!-- Menu Section -->
<section id="menu-section" class="menu-section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Our Exquisite Menu</h2>
            <p class="section-subtitle">Discover culinary masterpieces crafted with passion and premium ingredients</p>
            <div class="section-decoration">
                <div class="decor-line"></div>
                <div class="decor-diamond"></div>
                <div class="decor-line"></div>
            </div>
        </div>
        
        @if($categories->count() > 0)
            <!-- Category Tabs - FIXED: Tidak ikut scroll -->
            <div class="category-tabs-container">
                <div class="container">
                    <div class="category-tabs-wrapper">
                        <div class="category-tabs">
                            @foreach($categories as $category)
                                @if($category->items->count() > 0)
                                    <button class="category-tab" data-category="{{ $category->id }}">
                                        <div class="tab-icon">
                                            @if($category->icon)
                                                <i class="fas {{ $category->icon }}"></i>
                                            @else
                                                <i class="fas fa-utensils"></i>
                                            @endif
                                        </div>
                                        <span class="tab-name">{{ $category->name }}</span>
                                        <span class="tab-count">{{ $category->items->count() }}</span>
                                        <div class="tab-indicator"></div>
                                    </button>
                                @endif
                            @endforeach
                        </div>
                        <div class="tabs-scroll-indicator left">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="tabs-scroll-indicator right">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Menu Categories -->
            <div class="menu-categories-container">
                @foreach($categories as $index => $category)
                    @if($category->items->count() > 0)
                        <div class="category-container" id="category-{{ $category->id }}" data-category="{{ $category->id }}">
                            <!-- Category Header with Banner -->
                            <div class="category-header">
                                @if($category->image && $category->image_url)
                                    <div class="category-banner">
                                        <img src="{{ asset($category->image) }}" 
                                             alt="{{ $category->name }}"
                                             class="category-banner-image">
                                        <div class="category-banner-overlay"></div>
                                        <div class="category-banner-content">
                                            <div class="category-badge">
                                                <i class="fas fa-star"></i>
                                                <span>Premium Selection</span>
                                            </div>
                                            <h3 class="category-title">{{ $category->name }}</h3>
                                            @if($category->description)
                                                <p class="category-desc">{{ $category->description }}</p>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <div class="category-header-simple">
                                        <div class="category-icon-title">
                                            @if($category->icon)
                                                <div class="category-icon">
                                                    <i class="fas {{ $category->icon }}"></i>
                                                </div>
                                            @endif
                                            <h3 class="category-title">{{ $category->name }}</h3>
                                        </div>
                                        @if($category->description)
                                            <p class="category-desc">{{ $category->description }}</p>
                                        @endif
                                    </div>
                                @endif
                            </div>
                            
                            <!-- Menu Items -->
                            <div class="menu-items-container">
                                <div class="menu-items-grid">
                                    @foreach($category->items as $itemIndex => $item)
                                        <div class="menu-item-card {{ !$item->is_active ? 'unavailable-item' : '' }}" 
                                             data-delay="{{ $itemIndex % 4 }}">
                                            
                                            @if($item->image_url)
                                                <div class="item-image-container">
                                                    <img src="{{ $item->image_url }}" 
                                                         alt="{{ $item->name }}"
                                                         class="item-image {{ !$item->is_active ? 'grayscale' : '' }}">
                                                    <div class="item-image-overlay"></div>
                                                    <div class="item-image-hover">
                                                        <button class="view-image-btn" 
                                                                data-image="{{ $item->image_url }}" 
                                                                data-name="{{ $item->name }}">
                                                            <i class="fas fa-expand"></i>
                                                            <span>View Image</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endif
                                            
                                            <div class="menu-item-inner">
                                                <div class="item-top-section">
                                                    <div class="item-name-wrapper">
                                                        <h4 class="item-name {{ !$item->is_active ? 'text-gray-500' : '' }}">
                                                            {{ $item->name }}
                                                        </h4>
                                                        @if($item->is_spicy)
                                                            <span class="item-spicy-badge" title="Spicy">
                                                                <i class="fas fa-pepper-hot"></i>
                                                            </span>
                                                        @endif
                                                        @if($item->is_vegetarian)
                                                            <span class="item-veg-badge" title="Vegetarian">
                                                                <i class="fas fa-leaf"></i>
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <div class="item-price {{ !$item->is_active ? 'text-gray-400' : 'text-gold' }}">
                                                        {{ $item->formatted_price }}
                                                    </div>
                                                </div>
                                                
                                                @if($item->description)
                                                    <p class="item-description {{ !$item->is_active ? 'text-gray-400' : '' }}">
                                                        {{ $item->description }}
                                                    </p>
                                                @endif
                                                
                                                <div class="item-bottom-section">
                                                    <div class="item-status">
                                                        @if($item->is_active)
                                                            <span class="status-badge available">
                                                                <i class="fas fa-check-circle"></i>
                                                                <span>Available</span>
                                                            </span>
                                                        @else
                                                            <span class="status-badge unavailable">
                                                                <i class="fas fa-times-circle"></i>
                                                                <span>Unavailable</span>
                                                            </span>
                                                        @endif
                                                    </div>
                                                    
                                                    <div class="item-meta">
                                                        @if($item->created_at > now()->subDays(7))
                                                            <span class="new-badge">
                                                                <i class="fas fa-star"></i>
                                                                New
                                                            </span>
                                                        @endif
                                                        @if($item->is_popular)
                                                            <span class="popular-badge">
                                                                <i class="fas fa-fire"></i>
                                                                Popular
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                                
                                                <!-- ADD TO CART BUTTON - ONLY FOR ACTIVE ITEMS -->
                                                @if($item->is_active)
                                                    <div class="item-cart-section">
                                                        <button class="btn-add-to-cart" 
                                                                data-item-id="{{ $item->id }}"
                                                                data-item-name="{{ $item->name }}"
                                                                data-item-price="{{ $item->price }}"
                                                                data-item-formatted-price="{{ $item->formatted_price }}"
                                                                onclick="addToCart(this)">
                                                            <i class="fas fa-plus-circle"></i>
                                                            <span>Add to Cart</span>
                                                        </button>
                                                    </div>
                                                @else
                                                    <div class="mt-3 p-2 bg-red-50 border border-red-100 rounded-lg">
                                                        <p class="text-red-600 text-sm flex items-center">
                                                            <i class="fas fa-exclamation-triangle mr-2"></i>
                                                            Currently unavailable for order
                                                        </p>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
            
            <!-- Floating Order Button -->
            <div class="floating-action">
                <button class="fab fab-top" onclick="scrollToTop()" aria-label="Scroll to top">
                    <i class="fas fa-arrow-up"></i>
                    <span class="fab-label">Top</span>
                </button>
            </div>
        @else
            <!-- Empty State -->
            <div class="empty-state">
                <div class="empty-state-content">
                    <div class="empty-state-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <h3>Our Menu is Coming Soon</h3>
                    <p>We're preparing something special for you. Our chefs are crafting exquisite dishes that will delight your senses.</p>
                    <div class="coming-soon-timer">
                        <i class="fas fa-clock"></i>
                        <span>Opening Soon</span>
                    </div>
                </div>
            </div>
        @endif
    </div>
    
    <!-- Background Elements -->
    <div class="menu-background">
        <div class="bg-element bg-1"></div>
        <div class="bg-element bg-2"></div>
        <div class="bg-element bg-3"></div>
    </div>
</section>

<!-- Contact Section -->
<section class="contact-section" id="contact-section">
    <div class="container">
        <div class="contact-header">
            <h2 class="contact-title">Visit Us Today</h2>
            <p class="contact-subtitle">Experience royal dining at its finest</p>
            <div class="section-decoration">
                <div class="decor-line"></div>
                <div class="decor-diamond"></div>
                <div class="decor-line"></div>
            </div>
        </div>
        
        <div class="contact-grid">
            {{--sutan--}}
            <div class="contact-card">
                <div class="contact-card-icon">
                <i class="fas fa-crown"></i>
                </div>
                <div class="contact-card-content">
                    <h3>SUTAN RAJA MENU</h3>
                    <div class="contact-details">
                        <div class="hours-item">
                            <span class="hours-label">Fine Dining Restaurant</span>
                            <div class="hours-divider"></div>
                        </div>
                       <i class="fas fa-quote-left"></i>
                        <span>Where every meal is a royal experience</span>
                        <i class="fas fa-quote-right"></i>
                    </div>
                </div>
            </div>
            
            <!-- Opening Hours -->
            <div class="contact-card">
                <div class="contact-card-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="contact-card-content">
                    <h3>Opening Hours</h3>
                    <div class="contact-details">
                        <div class="hours-item">
                            <span class="hours-label">24/7 Everyday</span>
                            <div class="hours-divider"></div>
                        </div>
                        <p class="hours-note">Dine-in • Takeaway</p>
                        <div class="status-indicator">
                            <div class="status-dot"></div>
                            <span class="status-text">Open Now</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact Info -->
            <div class="contact-card">
                <div class="contact-card-icon">
                    <i class="fas fa-phone"></i>
                </div>
                <div class="contact-card-content">
                    <h3>Contact Info</h3>
                    <div class="contact-details">
                        <div class="contact-info-item">
                            <i class="fas fa-phone-square-alt"></i>
                            <span>+62 812-1544-4144</span>
                        </div>
                        <div class="contact-info-item">
                            <i class="fas fa-phone-alt"></i>
                            <span>EXTENSION 1021</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="footer-bottom">
            <div class="footer-info">
                <p class="footer-copyright">
                    <i class="far fa-copyright"></i>
                    {{ date('Y') }} azzamsahl. All rights reserved.
                </p>
                <p class="footer-crafted">
                    <i class="fas fa-heart"></i>
                    Crafted with passion in Soreang, Bandung
                </p>
            </div>
        </div>
    </div>
</footer>

<!-- Image Modal -->
<div class="image-modal" id="imageModal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <img src="" alt="" class="modal-image" id="modalImage">
        <div class="modal-actions">
            <button class="modal-close" aria-label="Close modal">&times;</button>
        </div>
    </div>
</div>

<!-- Styles -->
<style>
/* ========== FIX MOBILE SPACE ISSUE - DIPERBAIKI ========== */
html, body {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Fix untuk mobile viewport - LOGO TIDAK KEPOTONG */
@media (max-width: 768px) {
    .hero-section {
        min-height: 100vh;
        height: auto;
        overflow: visible;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .hero-video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .hero-content {
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 0;
    }
    
    .logo-container {
        width: 180px;
        height: 140px;
        margin: 0 auto 15px;
    }
    
    .restaurant-title {
        font-size: 3.2rem;
        margin-bottom: 5px;
        line-height: 1.2;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .btn-view-menu, .btn-reservation {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ========== VARIABLES ========== */
:root {
    --gold: #D4AF37;
    --dark-gold: #B8860B;
    --light-gold: #FFD700;
    --black: #0A0A0A;
    --dark-gray: #1A1A1A;
    --medium-gray: #2D2D2D;
    --light-gray: #E5E5E5;
    --white: #FFFFFF;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    --font-cinzel: 'Cinzel', serif;
    --font-inter: 'Inter', sans-serif;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 25px 75px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.2);
    --shadow-gold-lg: 0 15px 40px rgba(212, 175, 55, 0.3);
    --border-radius-sm: 8px;
    --border-radius-md: 15px;
    --border-radius-lg: 25px;
    --border-radius-xl: 40px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========== BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-inter);
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
    font-weight: 400;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========== ADD TO CART STYLES ========== */
.item-cart-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.btn-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    color: var(--black);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-add-to-cart:active {
    transform: translateY(0);
}

.btn-add-to-cart i {
    font-size: 1rem;
}
.cart-subtotal-line,
.cart-tax-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--light-gray);
    font-size: 0.95rem;
}

.cart-tax-line {
    margin-bottom: 12px;
    color: rgba(229, 229, 229, 0.8);
    font-size: 0.9rem;
}

.cart-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.2);
    margin: 12px 0;
}

.cart-subtotal-amount,
.cart-tax-amount {
    font-weight: 500;
}

.cart-tax-amount {
    color: var(--gold);
    opacity: 0.9;
}
/* ========== CART FLOATING ICON ========== */
.cart-floating {
    position: fixed;
    top: 120px;
    right: 30px;
    z-index: 999;
    transition: all 0.3s ease;
}

.cart-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    position: relative;
    transition: all 0.3s ease;
    animation: cartFloat 3s ease-in-out infinite;
}

@keyframes cartFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.cart-icon:hover {
    transform: scale(1.1) rotate(-10deg);
    box-shadow: var(--shadow-gold-lg);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 24px;
    height: 24px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--black);
    animation: cartPulse 2s infinite;
}

@keyframes cartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.cart-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    animation: fabPulse 2s infinite;
}

/* ========== CART SIDEBAR ========== */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--dark-gray);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
    border-left: 2px solid var(--gold);
}

.cart-sidebar.open {
    right: 0;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-header {
    padding: 25px;
    background: rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-title {
    font-family: var(--font-cinzel);
    color: var(--gold);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-close {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cart-close:hover {
    background: var(--gold);
    color: var(--black);
    transform: rotate(90deg);
}

.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--light-gray);
    opacity: 0.7;
}

.cart-empty i {
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.3;
    margin-bottom: 20px;
}

.cart-empty p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.cart-empty span {
    font-size: 0.9rem;
    opacity: 0.6;
}

/* ========== CART ITEMS ========== */
.cart-items {
    display: none;
}

.cart-item {
    background: rgba(42, 42, 42, 0.8);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.2s ease;
}

.cart-item:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.cart-item-name {
    font-weight: 600;
    color: var(--white);
    font-size: 1rem;
    flex: 1;
}

.cart-item-price {
    color: var(--gold);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--gold);
    border-radius: 6px;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quantity-btn:hover {
    background: var(--gold);
    color: var(--black);
}

.quantity-value {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    color: var(--white);
}

.cart-item-remove {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cart-item-remove:hover {
    background: var(--danger);
    color: white;
    transform: scale(1.05);
}

/* ========== CART FOOTER ========== */
.cart-footer {
    padding: 25px;
    background: rgba(26, 26, 26, 0.95);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}

.cart-summary {
    margin-bottom: 20px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cart-total span:first-child {
    font-size: 1.1rem;
    color: var(--light-gray);
}

.cart-total-amount {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 700;
}

.cart-tax-note {
    text-align: right;
    color: var(--light-gray);
    opacity: 0.7;
    font-size: 0.8rem;
}

.cart-checkout-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.cart-checkout-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

.cart-checkout-btn:active {
    transform: translateY(0);
}

.cart-checkout-btn i {
    font-size: 1.4rem;
}

.cart-checkout-total {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-left: 10px;
}

/* ========== CUSTOMER INFO MODAL - RESPONSIF & RINGAN ========== */
.customer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.customer-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.customer-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 450px;
    background: var(--dark-gray);
    border: 2px solid var(--gold);
    border-radius: 20px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-xl);
}

.customer-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.customer-modal-content {
    width: 100%;
}

.customer-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 18px 18px 0 0;
}

.customer-modal-header h3 {
    font-family: var(--font-cinzel);
    color: var(--gold);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-modal-header h3 i {
    font-size: 1.3rem;
}

.customer-modal-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 2px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.customer-modal-close:hover {
    background: var(--gold);
    color: var(--black);
    transform: rotate(90deg);
}

.customer-modal-body {
    padding: 25px;
}

.customer-modal-subtitle {
    color: var(--light-gray);
    font-size: 0.9rem;
    margin-bottom: 25px;
    opacity: 0.8;
    font-style: italic;
}

.customer-form-group {
    margin-bottom: 20px;
}

.customer-form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.customer-form-group label i {
    font-size: 1rem;
}

.customer-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(42, 42, 42, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.customer-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}

.customer-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-hint {
    display: block;
    color: var(--light-gray);
    font-size: 0.8rem;
    margin-top: 6px;
    opacity: 0.6;
}

.customer-modal-footer {
    display: flex;
    gap: 15px;
    padding: 20px 25px;
    background: rgba(26, 26, 26, 0.95);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0 0 18px 18px;
}

.btn-skip, .btn-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-skip {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--light-gray);
}

.btn-skip:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
    color: var(--gold);
}

.btn-confirm {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

/* ========== ENHANCED HERO SECTION ========== */
.hero-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--black);
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: brightness(0.8);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(10, 10, 10, 0.7) 50%,
        rgba(10, 10, 10, 0.95) 100%
    );
    z-index: 2;
}

.gold-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 20%, var(--light-gold) 0.5px, transparent 1px),
        radial-gradient(circle at 30% 40%, var(--gold) 0.5px, transparent 1px),
        radial-gradient(circle at 50% 60%, var(--light-gold) 0.5px, transparent 1px),
        radial-gradient(circle at 70% 80%, var(--gold) 0.5px, transparent 1px),
        radial-gradient(circle at 90% 30%, var(--light-gold) 0.5px, transparent 1px),
        radial-gradient(circle at 20% 70%, var(--gold) 0.5px, transparent 1px),
        radial-gradient(circle at 40% 10%, var(--light-gold) 0.5px, transparent 1px),
        radial-gradient(circle at 60% 90%, var(--gold) 0.5px, transparent 1px),
        radial-gradient(circle at 80% 50%, var(--light-gold) 0.5px, transparent 1px),
        radial-gradient(circle at 15% 85%, var(--gold) 0.5px, transparent 1px);
    background-size: 300px 300px, 250px 250px, 350px 350px, 280px 280px, 320px 320px,
                     270px 270px, 330px 330px, 290px 290px, 310px 310px, 260px 260px;
    opacity: 0.06;
    z-index: 3;
    animation: floatParticles 25s infinite linear;
}

@keyframes floatParticles {
    0% { 
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0,
                           0 0, 0 0, 0 0, 0 0, 0 0; 
    }
    100% { 
        background-position: 300px 300px, -250px -250px, 350px -350px, -280px 280px, 320px -320px,
                           -270px 270px, 330px 330px, -290px -290px, 310px -310px, -260px 260px; 
    }
}

.sparkle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    background: var(--light-gold);
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 5s infinite;
    box-shadow: 0 0 5px var(--light-gold);
}

.s1 { top: 15%; left: 10%; width: 2px; height: 2px; animation-delay: 0s; }
.s2 { top: 35%; right: 15%; width: 3px; height: 3px; animation-delay: 0.7s; }
.s3 { bottom: 25%; left: 20%; width: 2px; height: 2px; animation-delay: 1.5s; }
.s4 { top: 55%; right: 25%; width: 3px; height: 3px; animation-delay: 2.3s; }
.s5 { bottom: 35%; right: 10%; width: 2px; height: 2px; animation-delay: 3.1s; }
.s6 { top: 10%; right: 30%; width: 2px; height: 2px; animation-delay: 0.4s; }
.s7 { bottom: 45%; left: 35%; width: 3px; height: 3px; animation-delay: 1.8s; }
.s8 { top: 65%; left: 25%; width: 2px; height: 2px; animation-delay: 2.6s; }
.s9 { bottom: 15%; right: 35%; width: 3px; height: 3px; animation-delay: 3.4s; }
.s10 { top: 25%; left: 45%; width: 2px; height: 2px; animation-delay: 0.2s; }
.s11 { top: 75%; right: 40%; width: 2px; height: 2px; animation-delay: 1.2s; }
.s12 { bottom: 55%; left: 15%; width: 3px; height: 3px; animation-delay: 2.0s; }
.s13 { top: 40%; right: 5%; width: 2px; height: 2px; animation-delay: 2.8s; }
.s14 { bottom: 65%; left: 60%; width: 3px; height: 3px; animation-delay: 3.6s; }
.s15 { top: 85%; left: 40%; width: 2px; height: 2px; animation-delay: 4.0s; }

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2) rotate(180deg);
        box-shadow: 0 0 12px var(--light-gold), 0 0 20px rgba(255, 215, 0, 0.5);
    }
}

.light-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.ray-1 {
    background: linear-gradient(
        45deg,
        transparent 25%,
        rgba(255, 215, 0, 0.03) 45%,
        transparent 65%
    );
    animation: rayMove 18s infinite linear;
    opacity: 0.4;
}

.ray-2 {
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(212, 175, 55, 0.02) 45%,
        transparent 60%
    );
    animation: rayMove 22s infinite linear reverse;
    opacity: 0.3;
}

.ray-3 {
    background: linear-gradient(
        90deg,
        transparent 35%,
        rgba(255, 215, 0, 0.025) 48%,
        transparent 61%
    );
    animation: rayMove 26s infinite linear;
    opacity: 0.35;
}

.ray-4 {
    background: linear-gradient(
        120deg,
        transparent 28%,
        rgba(212, 175, 55, 0.015) 42%,
        transparent 56%
    );
    animation: rayMove 30s infinite linear reverse;
    opacity: 0.25;
}

.ray-5 {
    background: linear-gradient(
        60deg,
        transparent 32%,
        rgba(255, 215, 0, 0.02) 46%,
        transparent 60%
    );
    animation: rayMove 34s infinite linear;
    opacity: 0.3;
}

@keyframes rayMove {
    0% { 
        transform: translateX(-100%) translateY(0); 
    }
    100% { 
        transform: translateX(100%) translateY(0); 
    }
}

.glowing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(25px);
    z-index: 2;
    pointer-events: none;
}

.orb-1 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    top: 15%;
    right: 8%;
    animation: floatOrb 22s infinite ease-in-out;
}

.orb-2 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.06) 0%, transparent 70%);
    bottom: 25%;
    left: 12%;
    animation: floatOrb 28s infinite ease-in-out reverse;
}

.orb-3 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.05) 0%, transparent 70%);
    top: 55%;
    right: 20%;
    animation: floatOrb 32s infinite ease-in-out;
}

.orb-4 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.04) 0%, transparent 70%);
    bottom: 40%;
    left: 60%;
    animation: floatOrb 26s infinite ease-in-out reverse;
    opacity: 0.5;
}

.orb-5 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    top: 70%;
    left: 15%;
    animation: floatOrb 30s infinite ease-in-out;
    opacity: 0.6;
}

@keyframes floatOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate(40px, -25px) scale(1.08);
        opacity: 0.6;
    }
    50% {
        transform: translate(-25px, 35px) scale(0.95);
        opacity: 0.5;
    }
    75% {
        transform: translate(-35px, -15px) scale(1.04);
        opacity: 0.7;
    }
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
    margin-top: 40px;
}

.restaurant-brand {
    margin-bottom: 25px;
    animation: fadeInUp 1s ease-out;
}

.logo-container {
    width: 250px;
    height: 200px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: pulse 2s infinite;
    background: transparent;
}

.restaurant-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    border-radius: 0;
    padding: 0;
    background: transparent;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.logo-glow {
    position: absolute;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, var(--light-gold) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.15;
    animation: glowPulse 3s infinite;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.25;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.restaurant-title {
    font-family: var(--font-cinzel);
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    animation: glow 2s ease-in-out infinite alternate;
    line-height: 1.1;
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5),
                     0 0 20px rgba(212, 175, 55, 0.3),
                     0 0 30px rgba(212, 175, 55, 0.2);
    }
    to {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8),
                     0 0 30px rgba(212, 175, 55, 0.5),
                     0 0 40px rgba(212, 175, 55, 0.3),
                     0 0 50px rgba(212, 175, 55, 0.1);
    }
}

.unavailable-item {
    opacity: 0.85;
    border-left: 4px solid #fecaca;
    position: relative;
}

.unavailable-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.1) 0%, rgba(254, 202, 202, 0.05) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
}

.grayscale {
    filter: grayscale(70%);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.available {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge.unavailable {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge i {
    margin-right: 4px;
    font-size: 0.875rem;
}

.title-underline {
    width: 200px;
    height: 3px;
    background: linear-gradient(to right, 
        transparent, 
        var(--gold), 
        transparent);
    margin: 0 auto 15px;
    animation: underlineGrow 1s ease-out 0.5s both;
}

@keyframes underlineGrow {
    from { width: 0; opacity: 0; }
    to { width: 200px; opacity: 1; }
}

.open-status {
    margin-bottom: 35px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.open-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: rgba(212, 175, 55, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid var(--gold);
    border-radius: 50px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.badge-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 2px solid var(--gold);
    animation: badgePulse 2s infinite;
    opacity: 0;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.open-badge i {
    color: var(--gold);
    font-size: 1.2rem;
}

.badge-text {
    color: var(--gold);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.status-text {
    color: var(--light-gray);
    font-size: 1.1rem;
    font-weight: 300;
}

.hero-actions {
    margin-bottom: 45px;
    animation: fadeInUp 1s ease-out 0.6s both;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-view-menu, .btn-reservation {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    color: var(--black);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-gold);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

.btn-reservation {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
}

.btn-view-menu:hover, .btn-reservation:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}

.btn-reservation:hover {
    background: rgba(212, 175, 55, 0.1);
}

.btn-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    border-radius: 50px;
    opacity: 0;
    animation: btnGlow 2s infinite;
}

@keyframes btnGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.scroll-indicator {
    animation: fadeInUp 1s ease-out 0.9s both;
    margin-top: 20px;
}

.scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--light-gray);
}

.scroll-icon {
    width: 50px;
    height: 50px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.2rem;
    animation: bounce 2s infinite;
    transition: all 0.3s ease;
    position: relative;
}

.scroll-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--gold);
    animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.scroll-down:hover .scroll-icon {
    background: var(--gold);
    color: var(--black);
}

.scroll-text {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.8;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.floating-element {
    position: absolute;
    color: var(--gold);
    opacity: 0.08;
    font-size: 1.3rem;
    animation: floatElement 18s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
}

.fe-1 { top: 12%; left: 8%; animation-delay: 0s; animation-duration: 22s; }
.fe-2 { top: 55%; right: 10%; animation-delay: 3s; animation-duration: 28s; }
.fe-3 { bottom: 20%; left: 18%; animation-delay: 7s; animation-duration: 20s; }
.fe-4 { top: 32%; right: 6%; animation-delay: 5s; animation-duration: 25s; }
.fe-5 { bottom: 50%; left: 6%; animation-delay: 10s; animation-duration: 32s; }
.fe-6 { top: 42%; left: 65%; animation-delay: 2s; animation-duration: 30s; }
.fe-7 { bottom: 35%; right: 22%; animation-delay: 8s; animation-duration: 26s; }
.fe-8 { top: 65%; left: 45%; animation-delay: 12s; animation-duration: 28s; }
.fe-9 { top: 25%; right: 30%; animation-delay: 4s; animation-duration: 24s; }
.fe-10 { bottom: 15%; left: 75%; animation-delay: 9s; animation-duration: 34s; }
.fe-11 { top: 75%; right: 15%; animation-delay: 6s; animation-duration: 29s; }
.fe-12 { bottom: 70%; right: 60%; animation-delay: 11s; animation-duration: 31s; }

@keyframes floatElement {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.04;
    }
    25% {
        transform: translate(25px, -30px) rotate(90deg) scale(1.15);
        opacity: 0.12;
    }
    50% {
        transform: translate(-15px, 25px) rotate(180deg) scale(0.95);
        opacity: 0.08;
    }
    75% {
        transform: translate(-30px, -15px) rotate(270deg) scale(1.05);
        opacity: 0.12;
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
        opacity: 0.04;
    }
}

.category-tabs-container {
    margin-bottom: 50px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    z-index: 90;
}

.category-tabs-wrapper {
    position: relative;
    padding: 20px 0;
}

.category-tabs {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
    margin: 0 auto;
}

.category-tabs::-webkit-scrollbar {
    height: 0;
}

.category-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.category-tabs::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.category-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 25px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 15px;
    color: var(--light-gray);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    outline: none;
    flex-shrink: 0;
    position: relative;
}

.category-tab:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.category-tab.active {
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    color: var(--black);
    box-shadow: var(--shadow-gold);
    border-color: transparent;
}

.category-tab.active .tab-indicator {
    width: 100%;
}

.tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon i {
    font-size: 1.2rem;
}

.tab-name {
    font-size: 1.1rem;
    font-weight: 500;
}

.tab-count {
    background: rgba(0, 0, 0, 0.2);
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 10px;
    min-width: 30px;
    text-align: center;
}

.category-tab.active .tab-count {
    background: rgba(0, 0, 0, 0.3);
    color: var(--black);
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--dark-gold));
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs-scroll-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(212, 175, 55, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

.tabs-scroll-indicator.left {
    left: 10px;
}

.tabs-scroll-indicator.right {
    right: 10px;
}

.category-tabs-wrapper:hover .tabs-scroll-indicator {
    opacity: 1;
}

.tabs-scroll-indicator:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    transform: translateY(-50%) scale(1.1);
}

.category-container {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-container.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: categorySlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes categorySlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.menu-item-card {
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    opacity: 0;
    transform: translateY(20px);
}

.menu-item-card[data-delay="0"] { animation-delay: 0s; }
.menu-item-card[data-delay="1"] { animation-delay: 0.1s; }
.menu-item-card[data-delay="2"] { animation-delay: 0.2s; }
.menu-item-card[data-delay="3"] { animation-delay: 0.3s; }

.menu-item-card.visible {
    opacity: 1;
    transform: translateY(0);
    animation: itemCardAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes itemCardAppear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    70% {
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.menu-item-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--dark-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item-card:hover {
    border-color: var(--gold);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 
                0 15px 40px rgba(212, 175, 55, 0.2);
}

.menu-item-card:hover::before {
    transform: scaleX(1);
}

.item-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    background: rgba(42, 42, 42, 0.5);
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item-card:hover .item-image {
    transform: scale(1.1) rotate(1deg);
}

.floating-action {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: var(--shadow-md);
    animation: float 3s ease-in-out infinite;
    overflow: hidden;
}

.fab:nth-child(2) {
    animation-delay: 0.2s;
}

.fab-top {
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    color: var(--black);
}

.fab:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.fab-top:hover {
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.fab-label {
    position: absolute;
    right: 70px;
    background: var(--dark-gray);
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.fab:hover .fab-label {
    opacity: 1;
    transform: translateX(0);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-family: var(--font-cinzel);
    font-size: 3.5rem;
    color: var(--gold);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--light-gray);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.8;
}

.section-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.decor-line {
    width: 80px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
}

.decor-diamond {
    width: 12px;
    height: 12px;
    background: var(--gold);
    transform: rotate(45deg);
}

.category-header {
    margin-bottom: 50px;
}

.category-banner {
    position: relative;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.category-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-banner:hover .category-banner-image {
    transform: scale(1.05);
}

.category-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.category-banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 2;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid var(--gold);
    border-radius: 20px;
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.category-title {
    font-family: var(--font-cinzel);
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 15px;
}

.category-desc {
    font-size: 1.2rem;
    color: var(--light-gray);
    max-width: 600px;
    opacity: 0.9;
}

.category-header-simple {
    text-align: center;
    padding: 40px 20px;
    background: rgba(212, 175, 55, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.category-icon-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.category-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon i {
    font-size: 24px;
    color: var(--black);
}

.item-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 60%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.item-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.item-image-container:hover .item-image-hover {
    opacity: 1;
}

.view-image-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(212, 175, 55, 0.9);
    border: 2px solid var(--gold);
    border-radius: 25px;
    color: var(--black);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.view-image-btn:hover {
    background: var(--gold);
    transform: scale(1.05);
    box-shadow: var(--shadow-gold);
}

.menu-item-inner {
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.item-top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.item-name-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.item-name {
    font-size: 1.3rem;
    color: var(--white);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
}

.item-spicy-badge, .item-veg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.item-spicy-badge {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.item-veg-badge {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.item-price {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 700;
    white-space: nowrap;
}

.item-description {
    color: var(--light-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.8;
    flex: 1;
}

.item-bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.item-status {
    display: flex;
    align-items: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.status-badge.available {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.available:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
}

.status-badge.unavailable {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge i {
    font-size: 0.8rem;
}

.item-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.new-badge, .popular-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.new-badge {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.popular-badge {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.new-badge:hover, .popular-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.new-badge i, .popular-badge i {
    font-size: 0.8rem;
}

.empty-state {
    padding: 80px 20px;
    text-align: center;
}

.empty-state-content {
    max-width: 500px;
    margin: 0 auto;
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i {
    font-size: 3rem;
    color: var(--gold);
    opacity: 0.5;
}

.empty-state h3 {
    font-family: var(--font-cinzel);
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 20px;
}

.empty-state p {
    font-size: 1.2rem;
    color: var(--light-gray);
    margin-bottom: 30px;
    opacity: 0.8;
}

.coming-soon-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--gold);
    border-radius: 25px;
    color: var(--gold);
    font-weight: 500;
}

.coming-soon-timer i {
    font-size: 1.2rem;
}

.contact-section {
    padding: 100px 0;
    background: var(--black);
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(212, 175, 55, 0.03) 0%, 
        transparent 50%,
        rgba(212, 175, 55, 0.03) 100%);
}

.contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-title {
    font-family: var(--font-cinzel);
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 15px;
}

.contact-subtitle {
    font-size: 1.2rem;
    color: var(--light-gray);
    opacity: 0.8;
    margin-bottom: 20px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.contact-card {
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-card:hover {
    border-color: var(--gold);
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.contact-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--gold), var(--dark-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.contact-card-icon i {
    font-size: 32px;
    color: var(--black);
}

.contact-card-content h3 {
    font-family: var(--font-cinzel);
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 25px;
}

.contact-details {
    width: 100%;
}

.hours-item {
    margin-bottom: 15px;
}

.hours-label {
    display: block;
    font-size: 1.3rem;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 8px;
}

.hours-divider {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 0 auto 10px;
}

.hours-note {
    font-size: 0.95rem;
    color: var(--light-gray);
    opacity: 0.8;
    margin-bottom: 20px;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    color: var(--success);
    font-weight: 500;
}

.contact-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    text-align: left;
}

.contact-info-item i {
    color: var(--gold);
    font-size: 1.2rem;
    width: 24px;
}

.contact-info-item span {
    color: var(--light-gray);
    font-size: 1.05rem;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.social-icon {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.social-icon:hover {
    background: var(--gold);
    color: var(--black);
    transform: translateY(-3px);
}

.social-note {
    font-size: 0.95rem;
    color: var(--light-gray);
    opacity: 0.8;
    margin-top: 15px;
}

.footer {
    padding: 60px 0 30px;
    background: var(--dark-gray);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-brand {
    max-width: 400px;
}

.footer-title {
    font-family: var(--font-cinzel);
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 10px;
}

.footer-tagline {
    font-size: 1.1rem;
    color: var(--light-gray);
    margin-bottom: 15px;
    opacity: 0.8;
}

.footer-motto {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--light-gray);
    font-style: italic;
    opacity: 0.7;
    font-size: 0.95rem;
}

.footer-motto i {
    color: var(--gold);
    opacity: 0.5;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-column h4 {
    color: var(--gold);
    font-family: var(--font-cinzel);
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.footer-column a {
    color: var(--light-gray);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.footer-column a:hover {
    color: var(--gold);
    opacity: 1;
    transform: translateX(3px);
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.footer-copyright,
.footer-crafted {
    font-size: 0.9rem;
    color: var(--light-gray);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.footer-copyright i,
.footer-crafted i {
    color: var(--gold);
    opacity: 0.5;
}

.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.image-modal.active {
    display: flex;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-image {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-actions {
    position: absolute;
    top: -20px;
    right: -20px;
}

.modal-close {
    width: 45px;
    height: 45px;
    background: var(--gold);
    color: var(--black);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    transform: scale(1.05) rotate(90deg);
}

.menu-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.bg-element {
    position: absolute;
    border: 1px solid rgba(212, 175, 55, 0.05);
    border-radius: 50%;
}

.bg-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    right: -100px;
    animation: rotate 40s linear infinite;
}

.bg-2 {
    width: 300px;
    height: 300px;
    bottom: 10%;
    left: -50px;
    animation: rotate 60s linear infinite reverse;
}

.bg-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 10%;
    animation: rotate 80s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .menu-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }
    
    .item-image-container {
        height: 230px;
    }
    
    .category-banner {
        height: 300px;
    }
    
    .category-title {
        font-size: 2.5rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .restaurant-title {
        font-size: 4rem;
    }
    
    .logo-container {
        width: 200px;
        height: 160px;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .menu-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .item-image-container {
        height: 200px;
    }
    
    .category-banner {
        height: 250px;
    }
    
    .category-title {
        font-size: 2.2rem;
    }
    
    .category-desc {
        font-size: 1.1rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-card {
        padding: 35px 25px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-content {
        margin-top: 30px;
    }
    
    .restaurant-title {
        font-size: 3.2rem;
    }
    
    .logo-container {
        width: 180px;
        height: 140px;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
    
    .sparkle {
        width: 1px !important;
        height: 1px !important;
    }
    
    .glowing-orb {
        filter: blur(15px);
    }
    
    .orb-1, .orb-2, .orb-3, .orb-4, .orb-5 {
        width: 150px;
        height: 150px;
    }
    
    .category-tabs-wrapper {
        padding: 15px 0;
    }
    
    .category-tab {
        padding: 12px 20px;
    }
    
    .tab-name {
        font-size: 1rem;
    }
    
    .menu-items-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .item-image-container {
        height: 200px;
    }
    
    .menu-item-inner {
        padding: 20px;
    }
    
    .category-banner {
        height: 200px;
    }
    
    .category-banner-content {
        padding: 20px;
    }
    
    .category-title {
        font-size: 1.8rem;
    }
    
    .category-desc {
        font-size: 1rem;
    }
    
    .category-icon-title {
        flex-direction: column;
        gap: 15px;
    }
    
    .cart-floating {
        top: 100px;
        right: 20px;
    }
    
    .cart-icon {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
    
    .cart-sidebar {
        max-width: 100%;
        right: -100%;
    }
    
    .cart-sidebar.open {
        right: 0;
    }
    
    .floating-action {
        bottom: 20px;
        right: 20px;
    }
    
    .fab {
        width: 55px;
        height: 55px;
        font-size: 1.1rem;
    }
    
    .fab-label {
        display: none;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .customer-modal {
        width: 95%;
    }
}

@media (max-width: 576px) {
    .hero-content {
        padding: 0 15px;
        margin-top: 20px;
    }
    
    .restaurant-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .logo-container {
        width: 150px;
        height: 120px;
        margin: 0 auto 10px;
    }
    
    .btn-view-menu {
        padding: 15px 30px;
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .light-rays {
        opacity: 0.2 !important;
    }
    
    .floating-element {
        display: none;
    }
    
    .category-tabs {
        gap: 10px;
    }
    
    .category-tab {
        padding: 10px 15px;
        gap: 8px;
    }
    
    .tab-icon {
        width: 20px;
        height: 20px;
    }
    
    .tab-icon i {
        font-size: 1rem;
    }
    
    .tab-name {
        font-size: 0.9rem;
    }
    
    .tab-count {
        font-size: 0.8rem;
        padding: 2px 6px;
        min-width: 25px;
    }
    
    .menu-item-card {
        border-radius: 12px;
    }
    
    .menu-item-inner {
        padding: 18px;
    }
    
    .item-image-container {
        height: 180px;
    }
    
    .item-name {
        font-size: 1.1rem;
    }
    
    .item-price {
        font-size: 1.3rem;
    }
    
    .item-description {
        font-size: 0.9rem;
    }
    
    .category-banner {
        height: 180px;
    }
    
    .category-title {
        font-size: 1.6rem;
    }
    
    .contact-title {
        font-size: 2.2rem;
    }
    
    .footer-title {
        font-size: 2rem;
    }
    
    .contact-card {
        padding: 30px 20px;
    }
    
    .contact-card-icon {
        width: 70px;
        height: 70px;
    }
    
    .contact-card-icon i {
        font-size: 28px;
    }
    
    .cart-floating {
        top: 90px;
        right: 15px;
    }
    
    .cart-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .cart-count {
        min-width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    
    .cart-header {
        padding: 20px;
    }
    
    .cart-title {
        font-size: 1.5rem;
    }
    
    .cart-checkout-btn {
        padding: 15px;
        font-size: 1rem;
    }
    
    .customer-modal-header h3 {
        font-size: 1.3rem;
    }
    
    .customer-modal-body {
        padding: 20px;
    }
    
    .customer-modal-footer {
        flex-direction: column;
        padding: 20px;
    }
    
    .btn-skip, .btn-confirm {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 100vh;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .hero-content {
        padding: 0 15px;
        margin-top: 10px;
    }
    
    .restaurant-title {
        font-size: 2.2rem;
        letter-spacing: 1px;
        line-height: 1;
        margin-bottom: 5px;
    }
    
    .logo-container {
        width: 120px;
        height: 100px;
        margin: 0 auto 8px;
    }
    
    .open-badge {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .category-banner {
        height: 150px;
    }
    
    .category-banner-content {
        padding: 15px;
    }
    
    .category-title {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    
    .category-desc {
        font-size: 0.9rem;
    }
    
    .item-top-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .item-price {
        align-self: flex-start;
    }
    
    .item-bottom-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .cart-floating {
        top: 80px;
        right: 10px;
    }
    
    .cart-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .floating-action {
        bottom: 15px;
        right: 15px;
    }
    
    .fab {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .contact-section {
        padding: 80px 0;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
    }
    
    .btn-view-menu, .btn-reservation {
        width: 100%;
        max-width: 250px;
        padding: 14px 25px;
        font-size: 1rem;
    }
    
    .cart-item {
        padding: 12px;
    }
    
    .cart-item-name {
        font-size: 0.9rem;
    }
    
    .cart-item-price {
        font-size: 0.9rem;
    }
    
    .quantity-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .cart-item-remove {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}
</style>

<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('SUTAN RAJA Restaurant Website Loaded');
    
    // Initialize all components with improved performance
    initCategoryTabs();
    initImageZoom();
    initScrollAnimations();
    initTabScroll();
    initCart(); // FIXED: Cart akan load dari localStorage
    
    // Show first category by default
    showFirstCategory();
    
    // Initialize unavailable items hover effects
    initUnavailableItems();
    
    // Fix mobile space issue on resize
    window.addEventListener('resize', fixMobileLayout);
    window.addEventListener('orientationchange', fixMobileLayout);
    
    // Initial fix
    fixMobileLayout();
});

// Fix mobile layout issues
function fixMobileLayout() {
    if (window.innerWidth <= 768) {
        const heroContent = document.querySelector('.hero-content');
        if (heroContent) {
            // Reset margin untuk mobile
            heroContent.style.marginTop = '20px';
        }
    }
}

// ========== CART SYSTEM - FIXED: PERSISTEN SETELAH REFRESH ==========
let cart = [];
let cartTotal = 0;

function initCart() {
    // FIXED: Load cart dari localStorage saat halaman dimuat
    const savedCart = localStorage.getItem('sutanRajaCart');
    if (savedCart) {
        cart = JSON.parse(savedCart);
    } else {
        cart = [];
    }
    
    updateCart();
    
    // Load cart items jika tidak kosong
    if (cart.length > 0) {
        renderCartItems();
    }
}

function addToCart(button) {
    const itemId = button.getAttribute('data-item-id');
    const itemName = button.getAttribute('data-item-name');
    const itemPrice = parseInt(button.getAttribute('data-item-price'));
    const formattedPrice = button.getAttribute('data-item-formatted-price');
    
    // Check if item already exists in cart
    const existingItemIndex = cart.findIndex(item => item.id === itemId);
    
    if (existingItemIndex !== -1) {
        // Increment quantity
        cart[existingItemIndex].quantity += 1;
        cart[existingItemIndex].total = cart[existingItemIndex].quantity * itemPrice;
    } else {
        // Add new item
        cart.push({
            id: itemId,
            name: itemName,
            price: itemPrice,
            formattedPrice: formattedPrice,
            quantity: 1,
            total: itemPrice
        });
    }
    
    // Save to localStorage
    saveCart();
    
    // Update cart display
    updateCart();
    renderCartItems();
    
    // Show success animation
    showAddToCartAnimation(button);
}

function removeFromCart(itemId) {
    cart = cart.filter(item => item.id !== itemId);
    saveCart();
    updateCart();
    renderCartItems();
}

function updateQuantity(itemId, change) {
    const itemIndex = cart.findIndex(item => item.id === itemId);
    
    if (itemIndex !== -1) {
        const newQuantity = cart[itemIndex].quantity + change;
        
        if (newQuantity < 1) {
            removeFromCart(itemId);
            return;
        }
        
        cart[itemIndex].quantity = newQuantity;
        cart[itemIndex].total = newQuantity * cart[itemIndex].price;
        
        saveCart();
        updateCart();
        renderCartItems();
    }
}

function saveCart() {
    localStorage.setItem('sutanRajaCart', JSON.stringify(cart));
}

function clearCart() {
    // FIXED: Clear cart dari localStorage
    localStorage.removeItem('sutanRajaCart');
    cart = [];
    updateCart();
    renderCartItems();
}

function updateCart() {
    // Calculate subtotal (before tax)
    const subtotal = cart.reduce((total, item) => total + item.total, 0);
    
    // Calculate tax & service (21%)
    const taxAmount = Math.round(subtotal * 0.21);
    
    // Calculate total (include tax)
    const totalWithTax = subtotal + taxAmount;
    
    // Update cart count
    const cartCount = cart.reduce((count, item) => count + item.quantity, 0);
    document.getElementById('cartCount').textContent = cartCount;
    
    // Update amounts
    document.getElementById('cartSubtotal').textContent = `Rp ${formatPrice(subtotal)}`;
    document.getElementById('cartTax').textContent = `Rp ${formatPrice(taxAmount)}`;
    document.getElementById('cartTotal').textContent = `Rp ${formatPrice(totalWithTax)}`;
    document.getElementById('checkoutTotal').textContent = `Rp ${formatPrice(totalWithTax)}`;
    
    // Show/hide empty state
    const cartEmpty = document.getElementById('cartEmpty');
    const cartItems = document.getElementById('cartItems');
    const checkoutBtn = document.getElementById('checkoutBtn');
    
    if (cart.length === 0) {
        cartEmpty.style.display = 'block';
        cartItems.style.display = 'none';
        checkoutBtn.disabled = true;
        checkoutBtn.style.opacity = '0.5';
        checkoutBtn.style.cursor = 'not-allowed';
    } else {
        cartEmpty.style.display = 'none';
        cartItems.style.display = 'block';
        checkoutBtn.disabled = false;
        checkoutBtn.style.opacity = '1';
        checkoutBtn.style.cursor = 'pointer';
    }
}
function renderCartItems() {
    const cartItemsContainer = document.getElementById('cartItems');
    if (!cartItemsContainer) return;
    
    cartItemsContainer.innerHTML = '';
    
    cart.forEach(item => {
        const cartItem = document.createElement('div');
        cartItem.className = 'cart-item';
        cartItem.innerHTML = `
            <div class="cart-item-header">
                <div class="cart-item-name">${item.name}</div>
                <div class="cart-item-price">${item.formattedPrice}</div>
            </div>
            <div class="cart-item-controls">
                <div class="cart-item-quantity">
                    <button class="quantity-btn" onclick="updateQuantity('${item.id}', -1)">-</button>
                    <span class="quantity-value">${item.quantity}x</span>
                    <button class="quantity-btn" onclick="updateQuantity('${item.id}', 1)">+</button>
                </div>
                <button class="cart-item-remove" onclick="removeFromCart('${item.id}')">
                    <i class="fas fa-trash"></i>
                    Remove
                </button>
            </div>
        `;
        cartItemsContainer.appendChild(cartItem);
    });
}

function formatPrice(price) {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function showAddToCartAnimation(button) {
    // Create animation element
    const animation = document.createElement('div');
    animation.className = 'add-to-cart-animation';
    animation.innerHTML = '<i class="fas fa-check"></i> Added!';
    animation.style.cssText = `
        position: fixed;
        top: ${button.getBoundingClientRect().top}px;
        left: ${button.getBoundingClientRect().left}px;
        background: var(--gold);
        color: var(--black);
        padding: 8px 15px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.9rem;
        z-index: 9999;
        animation: addToCartAnim 1s ease-out forwards;
        pointer-events: none;
    `;
    
    document.body.appendChild(animation);
    
    // Remove animation after it completes
    setTimeout(() => {
        animation.remove();
    }, 1000);
}

// Add CSS for animation
const style = document.createElement('style');
style.textContent = `
    @keyframes addToCartAnim {
        0% {
            opacity: 0;
            transform: translateY(0) scale(0.5);
        }
        50% {
            opacity: 1;
            transform: translateY(-30px) scale(1.1);
        }
        100% {
            opacity: 0;
            transform: translateY(-60px) scale(0.5);
        }
    }
`;
document.head.appendChild(style);

function toggleCart() {
    const cartSidebar = document.getElementById('cartSidebar');
    const cartOverlay = document.getElementById('cartOverlay');
    
    cartSidebar.classList.toggle('open');
    cartOverlay.classList.toggle('active');
    
    // Prevent body scrolling when cart is open
    document.body.style.overflow = cartSidebar.classList.contains('open') ? 'hidden' : '';
}

// ========== CUSTOMER INFO MODAL - NAMA & NO KAMAR ==========
function checkout() {
    if (cart.length === 0) return;
    
    // Tampilkan modal customer info
    showCustomerModal();
}

function showCustomerModal() {
    const modalOverlay = document.getElementById('customerModalOverlay');
    const modal = document.getElementById('customerModal');
    
    // Reset input fields
    document.getElementById('customerName').value = '';
    document.getElementById('customerRoom').value = '';
    
    modalOverlay.classList.add('active');
    modal.classList.add('active');
}

function closeCustomerModal() {
    const modalOverlay = document.getElementById('customerModalOverlay');
    const modal = document.getElementById('customerModal');
    
    modalOverlay.classList.remove('active');
    modal.classList.remove('active');
}

function confirmCustomerInfo() {
    const name = document.getElementById('customerName').value.trim();
    const room = document.getElementById('customerRoom').value.trim();
    
    // Buat pesan WhatsApp dengan customer info
    processWhatsAppOrder(name, room);
    
    // Tutup modal
    closeCustomerModal();
    
    // FIXED: Clear cart setelah order
    clearCart();
    
    // Tutup sidebar cart
    const cartSidebar = document.getElementById('cartSidebar');
    const cartOverlay = document.getElementById('cartOverlay');
    cartSidebar.classList.remove('open');
    cartOverlay.classList.remove('active');
    document.body.style.overflow = '';
}

function skipCustomerInfo() {
    // Buat pesan WhatsApp tanpa customer info
    processWhatsAppOrder('', '');
    
    // Tutup modal
    closeCustomerModal();
    
    // FIXED: Clear cart setelah order
    clearCart();
    
    // Tutup sidebar cart
    const cartSidebar = document.getElementById('cartSidebar');
    const cartOverlay = document.getElementById('cartOverlay');
    cartSidebar.classList.remove('open');
    cartOverlay.classList.remove('active');
    document.body.style.overflow = '';
}

   // ========== FORMAT WHATSAPP SEDERHANA TAPI ELEGAN ==========
   
   function processWhatsAppOrder(customerName, customerRoom) {
    const phoneNumber = '6281215444144';
    
    // Calculate amounts
    const subtotal = cart.reduce((total, item) => total + item.total, 0);
    const taxAmount = Math.round(subtotal * 0.21);
    const totalWithTax = subtotal + taxAmount;
    
    let message = `🍽️ *SUTAN RAJA RESTAURANT* 🍽️\n`;
    message += `══════════════════════════\n\n`;
    
    // Customer Info
    message += `👤 *Pemesan:*\n`;
    if (customerName) message += `   Nama  : ${customerName}\n`;
    if (customerRoom) message += `   Kamar : ${customerRoom}\n`;
    message += `\n`;
    
    // Orders
    message += `📋 *Pesanan:*\n`;
    message += `────────────────────\n`;
    
    cart.forEach((item, index) => {
        message += `${index + 1}. ${item.name}\n`;
        message += `   ${item.quantity}x  @ ${item.formattedPrice}\n`;
        message += `   └ Total : Rp ${formatPrice(item.price * item.quantity)}\n`;
    });
    
    message += `\n💰 *Subtotal:* Rp ${formatPrice(subtotal)}\n`;
    message += `   Tax & Service (21%): Rp ${formatPrice(taxAmount)}\n`;
    message += `────────────────────\n`;
    message += `💵 *TOTAL:* Rp ${formatPrice(totalWithTax)}\n\n`;
    
    message += `✅ *Konfirmasi:*\n`;
    message += `Apakah pesanan ini bisa diproses?\n\n`;
    message += `Terima kasih 🙏\n`;
    message += `══════════════════════════\n`;
    
    const encodedMessage = encodeURIComponent(message);
    const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
    window.open(whatsappURL, '_blank');
}

// ========== EXISTING FUNCTIONS ==========
// Enhanced Category Tabs Functionality
function initCategoryTabs() {
    const categoryTabs = document.querySelectorAll('.category-tab');
    const categoryContainers = document.querySelectorAll('.category-container');
    
    if (!categoryTabs.length) return;
    
    // Tab click handler
    categoryTabs.forEach(tab => {
        tab.addEventListener('click', function(e) {
            e.preventDefault();
            const categoryId = this.getAttribute('data-category');
            
            // Check if already active
            if (this.classList.contains('active')) return;
            
            // Update active tab with smooth transition
            categoryTabs.forEach(t => {
                t.classList.remove('active');
                t.style.transform = '';
            });
            
            this.classList.add('active');
            
            // Show selected category with smooth transition
            categoryContainers.forEach(container => {
                container.classList.remove('active');
                
                if (container.getAttribute('data-category') === categoryId) {
                    // Add active class with delay for smooth transition
                    setTimeout(() => {
                        container.classList.add('active');
                    }, 50);
                    
                    // Smooth scroll to category
                    setTimeout(() => {
                        container.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }, 100);
                }
            });
            
            // Scroll tab into view if needed (for mobile)
            if (window.innerWidth < 768) {
                this.scrollIntoView({
                    behavior: 'smooth',
                    block: 'nearest',
                    inline: 'center'
                });
            }
        });
    });
}

// Image Zoom Modal
function initImageZoom() {
    const imageModal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    const viewImageBtns = document.querySelectorAll('.view-image-btn');
    
    // Open modal function
    function openImageModal(imageSrc, imageAlt) {
        modalImage.src = imageSrc;
        modalImage.alt = imageAlt;
        imageModal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    
    // Close modal function
    function closeImageModal() {
        imageModal.classList.remove('active');
        document.body.style.overflow = '';
    }
    
    // View image buttons
    viewImageBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const imageSrc = this.getAttribute('data-image');
            const imageName = this.getAttribute('data-name');
            openImageModal(imageSrc, imageName);
        });
    });
    
    // Modal close button
    const modalCloseBtn = imageModal.querySelector('.modal-close');
    if (modalCloseBtn) {
        modalCloseBtn.addEventListener('click', closeImageModal);
    }
    
    // Close modal on overlay click
    imageModal.addEventListener('click', function(e) {
        if (e.target === this) {
            closeImageModal();
        }
    });
    
    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && imageModal.classList.contains('active')) {
            closeImageModal();
        }
    });
}

// Enhanced Scroll Animations
function initScrollAnimations() {
    // Animate menu items on scroll with staggered delay
    const menuItems = document.querySelectorAll('.menu-item-card');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const delay = entry.target.getAttribute('data-delay') || 0;
                setTimeout(() => {
                    entry.target.classList.add('visible');
                }, delay * 100);
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    menuItems.forEach(item => {
        observer.observe(item);
    });
}

// Tab Scroll Functionality
function initTabScroll() {
    const categoryTabs = document.querySelector('.category-tabs');
    const scrollLeftBtn = document.querySelector('.tabs-scroll-indicator.left');
    const scrollRightBtn = document.querySelector('.tabs-scroll-indicator.right');
    
    if (!categoryTabs || !scrollLeftBtn || !scrollRightBtn) return;
    
    const scrollAmount = 200;
    
    scrollLeftBtn.addEventListener('click', () => {
        categoryTabs.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
    });
    
    scrollRightBtn.addEventListener('click', () => {
        categoryTabs.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    });
    
    // Show/hide scroll indicators based on scroll position
    categoryTabs.addEventListener('scroll', () => {
        const showLeft = categoryTabs.scrollLeft > 0;
        const showRight = categoryTabs.scrollLeft < (categoryTabs.scrollWidth - categoryTabs.clientWidth - 1);
        
        scrollLeftBtn.style.opacity = showLeft ? '1' : '0';
        scrollLeftBtn.style.pointerEvents = showLeft ? 'auto' : 'none';
        
        scrollRightBtn.style.opacity = showRight ? '1' : '0';
        scrollRightBtn.style.pointerEvents = showRight ? 'auto' : 'none';
    });
    
    // Initial check
    categoryTabs.dispatchEvent(new Event('scroll'));
}

// Show first category
function showFirstCategory() {
    const categoryContainers = document.querySelectorAll('.category-container');
    const categoryTabs = document.querySelectorAll('.category-tab');
    
    if (categoryContainers.length > 0) {
        categoryContainers[0].classList.add('active');
    }
    if (categoryTabs.length > 0) {
        categoryTabs[0].classList.add('active');
    }
}

// Initialize unavailable items hover effects
function initUnavailableItems() {
    const unavailableItems = document.querySelectorAll('.unavailable-item');
    
    unavailableItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 12px rgba(239, 68, 68, 0.1)';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '';
        });
    });
}

// Scroll to top
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
</script>
@endsection