/* Inherits from global theme.css */
        .header-container { text-align: center; background: linear-gradient(180deg, rgba(28, 25, 20, 0.75) 0%, rgba(18, 18, 18, 1) 100%); border: none; border-bottom: none; border-radius: 0; padding: 1.5rem 1.5rem 1.3rem; width: 100%; max-width: none; margin: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; }
        @media(min-width: 1024px) {
            .header-container { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.8rem 2rem 1.5rem; gap: 0.4rem; }
            .header-top { margin-bottom: 0; justify-content: center; gap: 0.9rem; }
            .restaurant-meta { text-align: center; max-width: 800px; margin: 0 auto; line-height: 1.45; }
            .restaurant-logo { width: 68px; height: 68px; border-width: 2.5px; }
            .restaurant-title { font-size: 2.1rem; }
        }
        .header-top { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 0; }
        .restaurant-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex-shrink: 0; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.12); }
        .restaurant-title { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: var(--text-primary); margin: 0; font-weight: 700; letter-spacing: 0.4px; }
        .restaurant-meta { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; text-align: center; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; }

        .category-nav { position: sticky; top: 0; z-index: 100; background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: none; }
        .category-nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent); }
        .category-nav-container::-webkit-scrollbar { display: none; }
        .category-nav ul { display: flex; gap: 0.5rem; list-style: none; padding: 0.75rem 0 0.25rem; white-space: nowrap; margin: 0; border-bottom: none; align-items: center; }
        .category-nav a { display: block; padding: 0.55rem 1.3rem; color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 0.94rem; border-radius: 50px; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); scroll-snap-align: center; }
        .category-nav a:hover { color: var(--text-primary); background-color: rgba(255, 255, 255, 0.1); transform: translateY(-1.5px); }
        .category-nav a.active { background: linear-gradient(135deg, #FFD700, #F59E0B); color: #000; font-weight: 700; border-color: #FFD700; box-shadow: 0 2px 5px rgba(255, 215, 0, 0.14); transform: translateY(-1px); }
        
        /* Clean Floating Category Pagination Dots Indicator (Zero Extra Space, Centered) */
        .category-scroll-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin: 0.15rem 0 0.25rem 0;
            width: 100%;
            height: 6px;
        }
        .category-dots-track {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0;
            background: transparent;
            border: none;
        }
        .category-dots-track::-webkit-scrollbar { display: none; }
        .category-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.24);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            flex-shrink: 0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .category-dot:hover {
            background: rgba(255, 255, 255, 0.65);
            transform: scale(1.3);
        }
        .category-dot.active {
            width: 16px;
            height: 5px;
            border-radius: 10px;
            background: linear-gradient(135deg, #FFD700, #F59E0B);
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
        }
        @media (min-width: 1024px) {
            .category-scroll-indicator { display: none; }
        }
        
        .tags-filter-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.25rem 1rem 0.45rem;
            display: flex;
            align-items: center;
            gap: 0.55rem;
            position: relative;
        }
        .tag-filter-btn {
            padding: 0.52rem 1.25rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 50px;
            color: var(--text-secondary);
            font-size: 0.92rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            cursor: pointer;
            transition: all 0.2s ease;
            scroll-snap-align: center;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: none !important;
            flex-shrink: 0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .tag-filter-btn.tag-filter-all {
            flex-shrink: 0;
            z-index: 5;
            position: relative;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.16);
        }
        .tag-filter-btn.tag-filter-all i {
            font-size: 0.9em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            line-height: 1;
        }
        .tag-filter-btn.tag-filter-all:not(.active) i {
            opacity: 0.85;
        }
        .tag-filter-btn:hover {
            background: color-mix(in srgb, var(--tag-color, rgba(255,255,255,0.4)) 18%, transparent);
            border-color: var(--tag-color, rgba(255,255,255,0.4));
            color: var(--text-primary);
            transform: translateY(-1.5px);
            box-shadow: none !important;
        }
        .tag-filter-btn[data-tag="all"].active {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 215, 0, 0.08));
            color: var(--gold);
            border: 1.5px solid var(--gold) !important;
            box-shadow: 0 2px 5px rgba(255, 215, 0, 0.12) !important;
            transform: translateY(-1px);
        }
        .tag-filter-btn:not([data-tag="all"]).active {
            background: linear-gradient(135deg, color-mix(in srgb, var(--tag-color) 22%, transparent), color-mix(in srgb, var(--tag-color) 8%, transparent));
            color: var(--tag-color);
            border: 1.5px solid var(--tag-color) !important;
            box-shadow: 0 2px 5px color-mix(in srgb, var(--tag-color) 14%, transparent) !important;
            transform: translateY(-1px);
        }
        .tag-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: none !important;
        }
        .tags-filter-scroll {
            display: flex;
            gap: 0.4rem;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            flex-grow: 1;
            padding: 2px 0;
        }
        .tags-filter-scroll::-webkit-scrollbar { display: none; }

        /* Locked Tags & Search Toggle Area */
        .tags-filter-locked {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
            z-index: 5;
        }

        .tag-search-toggle-btn {
            width: 36px;
            height: 36px;
            padding: 0 !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.16);
            color: var(--gold);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            flex-shrink: 0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .tag-search-toggle-btn:hover {
            background: rgba(255, 215, 0, 0.14);
            border-color: var(--gold);
            color: #FFFFFF;
            transform: translateY(-1px);
        }
        .tag-search-toggle-btn.active {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.1));
            border-color: var(--gold) !important;
            color: #FFFFFF;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
        }

        /* Inline Expanding Search Box */
        .menu-search-box {
            display: flex;
            align-items: center;
            flex-grow: 1;
            min-width: 0;
            height: 38px;
            background: #141417;
            border: 1.5px solid var(--gold);
            border-radius: 50px;
            padding: 0 0.8rem 0 0.9rem;
            gap: 0.5rem;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 0 8px rgba(212, 175, 55, 0.1);
            animation: searchBoxSlideIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @keyframes searchBoxSlideIn {
            from {
                opacity: 0;
                transform: scaleX(0.92);
            }
            to {
                opacity: 1;
                transform: scaleX(1);
            }
        }
        .menu-search-box .search-box-icon {
            color: var(--gold);
            font-size: 0.92rem;
            flex-shrink: 0;
        }
        .menu-search-input {
            flex-grow: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            font-size: 0.88rem;
            letter-spacing: 0.2px;
        }
        .menu-search-input::placeholder {
            color: #71717A;
            font-size: 0.82rem;
        }
        .menu-search-clear-btn {
            background: rgba(255, 255, 255, 0.08);
            border: none;
            color: #A1A1AA;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }
        .menu-search-clear-btn:hover {
            background: rgba(239, 68, 68, 0.25);
            color: #EF4444;
        }

        main { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem; }
        .category-section { margin-bottom: 2.2rem; scroll-margin-top: 110px; }
        .category-title { font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 800; color: var(--gold); margin-bottom: 1.2rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(255, 215, 0, 0.22); letter-spacing: 0.3px; }
        
        .menu-items-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        @media(min-width: 1024px) {
            .category-title { font-size: 1.85rem; padding-bottom: 0.55rem; margin-bottom: 1.4rem; }
            .menu-items-grid { grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
            .menu-item.double-wide-unified-card {
                grid-column: span 2;
                display: flex;
                flex-direction: row;
                align-items: stretch;
            }
            .menu-item.double-wide-unified-card .item-image-container {
                width: 38%;
                max-width: 270px;
                aspect-ratio: 16 / 9;
                height: auto;
                flex-shrink: 0;
                align-self: center;
                margin: auto 0 auto 1.25rem;
                border-radius: 10px;
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            }
            .menu-item.double-wide-unified-card .item-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .menu-item.double-wide-unified-card .item-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 1.25rem;
            }
            .menu-item.feedback-form-card {
                grid-column: span 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 1.5rem;
                text-align: center;
                background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), rgba(0, 0, 0, 0.3));
                border: 1px dashed rgba(255, 215, 0, 0.3);
                border-radius: 12px;
                min-height: 280px;
            }
            .popular-ad-link:hover {
                background: rgba(255, 215, 0, 0.12) !important;
                border-color: rgba(255, 215, 0, 0.35) !important;
                color: var(--gold) !important;
                transform: translateX(4px);
            }
        }
        .menu-item[id] { scroll-margin-top: 100px; }
        @media (max-width: 1023px) {
            .menu-item.double-wide-unified-card {
                grid-column: span 1 !important;
                flex-direction: column !important;
            }
            .menu-item.double-wide-unified-card .item-image-container {
                width: 100% !important;
                max-width: none !important;
                aspect-ratio: 16 / 9 !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                align-self: stretch !important;
            }
            .menu-item.feedback-form-card {
                display: none !important;
            }
        }
        .menu-item { background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; overflow: hidden; }
        .menu-item:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }

        /* --- Image Container --- */
        .item-image-container {
            width: 100%; aspect-ratio: 16 / 9; height: auto; overflow: hidden;
            position: relative;
            background-color: #333;
        }
        .promo-badges { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; z-index: 10; align-items: flex-start; }
        .promo-badges.no-image { position: relative; top: 0; left: 0; margin-bottom: 0.5rem; padding: 0.85rem 0.85rem 0 0.85rem; }
        .promo-badge { background: linear-gradient(135deg, var(--gold) 0%, #ff8c00 100%); color: var(--dark-bg); font-weight: 800; font-size: 0.65rem; padding: 0.25rem 0.5rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
        .promo-badge.popular { background: linear-gradient(135deg, #e83e8c 0%, #dc3545 100%); color: white; }
        .promo-badge.new { background: linear-gradient(135deg, #17a2b8 0%, #0dcaf0 100%); color: white; }
        .item-image { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.4s ease; }
        .item-image:hover { transform: scale(1.03); }

        /* --- Professional Placeholder for Items Without Images --- */
        .item-image-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #1e1e24 0%, #2a2a32 40%, #1e1e24 100%);
            position: relative;
        }
        .item-image-placeholder::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
            pointer-events: none;
        }
        .item-image-placeholder::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
        }
        .placeholder-icon {
            font-size: 2.2rem;
            color: rgba(255, 215, 0, 0.18);
            z-index: 1;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
        }

        .item-content { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
        .item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.35rem; }
        .item-name { font-family: 'Inter', sans-serif; font-size: 1.22rem; font-weight: 700; color: #F8FAFC; line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
        .item-price-display { white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 0; }
        .inline-prices { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; line-height: 1.2; }
        .price-value { font-size: 1.2rem; font-weight: 800; color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,0.5); letter-spacing: -0.02em; }
        .price-divider { color: var(--text-secondary); font-size: 0.95rem; font-weight: 300; margin: 0 0.1rem; }
        .price-subtitle { font-size: 0.65rem; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem; font-weight: 600; }
        .item-description { font-size: 0.9rem; color: #CBD5E1; margin-bottom: 0.35rem; flex-grow: 1; line-height: 1.58; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s ease; }
        .item-description.expanded { -webkit-line-clamp: unset; }
        .description-wrapper { flex-grow: 1; margin-bottom: 0.95rem; display: flex; flex-direction: column; align-items: flex-start; }
        .read-more-btn { background: transparent; border: none; color: #9CA3AF; font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; margin-top: 0.2rem; margin-bottom: 0; display: none; transition: color 0.2s ease; }
        .read-more-btn:hover { color: #F8FAFC; }
        
        .dietary-tags { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
        .item-actions-wrapper { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; margin-top: auto; padding-top: 0.6rem; gap: 0.75rem; }
        .item-actions-wrapper:not(.multi-variants-3plus) .cart-action-btn { flex: 1 1 0; min-width: 0; }

        /* --- 3+ Variants: Option A (Initial 1-Row, Expands to Full-Width Active Stepper) --- */
        .item-actions-wrapper.multi-variants-3plus {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.75rem;
            width: 100%;
        }
        .item-actions-wrapper.multi-variants-3plus .cart-action-btn {
            flex: 1 1 0;
            min-width: 0;
            font-size: 0.85rem;
            min-height: 2.65rem;
            padding: 0.45rem 0.35rem;
            order: 0;
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* When added: active button expands to full width on the top row */
        .item-actions-wrapper.multi-variants-3plus .cart-action-btn.is-added {
            flex: 1 0 100% !important;
            width: 100% !important;
            order: -1; /* pulls active stepper to the top */
            padding: 0.35rem 0.65rem;
            font-size: 0.94rem;
        }
        .item-actions-wrapper.multi-variants-3plus .cart-action-btn.is-added .qty-btn {
            width: 32px;
            height: 32px;
            font-size: 1.3rem;
        }
        .tag { font-size: 0.74rem; font-weight: 700; padding: 5px 13px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform 0.2s ease, border-color 0.2s ease; }
        .tag:hover { transform: translateY(-1.5px); }
        .tag.veg { color: #4ADE80; background: linear-gradient(135deg, rgba(74, 222, 128, 0.22), rgba(74, 222, 128, 0.08)); border-color: rgba(74, 222, 128, 0.45); }
        .tag.non-veg { color: #F87171; background: linear-gradient(135deg, rgba(248, 113, 113, 0.22), rgba(248, 113, 113, 0.08)); border-color: rgba(248, 113, 113, 0.45); }
        .tag.egg, .tag.contains-egg { color: #FBBF24; background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.08)); border-color: rgba(251, 191, 36, 0.45); }
        .tag.vegan, .tag.gluten-free { color: #34D399; background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(52, 211, 153, 0.08)); border-color: rgba(52, 211, 153, 0.45); }
        .tag.jain, .tag.popular { color: #C084FC; background: linear-gradient(135deg, rgba(192, 132, 252, 0.22), rgba(192, 132, 252, 0.08)); border-color: rgba(192, 132, 252, 0.45); }
        .tag.halal { color: #38BDF8; background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.08)); border-color: rgba(56, 189, 248, 0.45); }
        .tag.chefs-special, .tag.bestseller { color: #FBBF24; background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.08)); border-color: rgba(251, 191, 36, 0.45); }
        .tag.new { color: #60A5FA; background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.08)); border-color: rgba(96, 165, 250, 0.45); }
        .tag.sugar-free { color: #22D3EE; background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.08)); border-color: rgba(34, 211, 238, 0.45); }
        .tag.must-try { color: #FB923C; background: linear-gradient(135deg, rgba(251, 146, 60, 0.22), rgba(251, 146, 60, 0.08)); border-color: rgba(251, 146, 60, 0.45); }
        .tag.limited-time { color: #F472B6; background: linear-gradient(135deg, rgba(244, 114, 182, 0.22), rgba(244, 114, 182, 0.08)); border-color: rgba(244, 114, 182, 0.45); }

        /* --- Button UX Enhancements --- */
        .btn-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            line-height: 1;
            font-weight: 700;
        }
        .btn-plus-icon {
            font-size: 1.05em;
            font-weight: 900;
            -webkit-text-stroke: 0.5px currentColor;
        }
        .btn-variant-price {
            display: inline-flex;
            align-items: center;
            font-size: 0.92em;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1;
        }
        .btn-variant-price::before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 14px;
            background: rgba(0, 0, 0, 0.3);
            margin-right: 6px;
            vertical-align: middle;
        }

        /* --- Tactile 3D + Sparks + Stepper Button Styles --- */
        .cart-action-btn {
            background: linear-gradient(180deg, #FFE033 0%, var(--gold) 100%);
            color: var(--dark-bg); border: none; padding: 0.55rem 1rem;
            border-radius: 10px; font-weight: 800; cursor: pointer; margin-top: auto;
            width: 100%; font-size: 0.96rem; letter-spacing: 0.3px;
            box-shadow: 0 5px 0 #915100, 0 8px 18px rgba(212, 175, 55, 0.35);
            display: flex; align-items: center; justify-content: center;
            min-height: 2.75rem;
            position: relative;
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .cart-action-btn:not(.is-added):hover {
            background: linear-gradient(180deg, #FFF066 0%, #E2BD44 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 0 #915100, 0 10px 22px rgba(212, 175, 55, 0.45);
        }
        .cart-action-btn:not(.is-added):active {
            transform: translateY(3px);
            box-shadow: 0 2px 0 #915100, 0 4px 10px rgba(0, 0, 0, 0.4);
        }

        /* --- Unavailable / Out-of-Stock Button State --- */
        .cart-action-btn.is-unavailable {
            background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
            color: #888;
            box-shadow: 0 3px 0 #2a2a2a, 0 4px 10px rgba(0, 0, 0, 0.2);
            cursor: not-allowed;
            pointer-events: none;
        }
        .cart-action-btn.is-unavailable .btn-variant-price { color: #666; }
        .cart-action-btn.is-unavailable .btn-variant-price::before { background: rgba(255,255,255,0.15); }

        /* Added Stepper State */
        .cart-action-btn.is-added {
            background: #141417;
            color: var(--gold);
            border: 1.5px solid var(--gold);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(212, 175, 55, 0.12);
            padding: 0.35rem 0.5rem;
            transform: none;
        }
        .cart-action-btn.is-added .btn-text { display: none; }
        .cart-action-btn.is-added .btn-added-state {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
        }
        .cart-action-btn .btn-added-state { display: none; }
        .cart-action-btn .btn-quantity {
            display: inline-block;
            background: rgba(255, 215, 0, 0.15);
            color: #FFFFFF;
            font-size: 0.95rem;
            font-weight: 800;
            padding: 0.15rem 0.55rem;
            border-radius: 6px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            min-width: 2ch;
            text-align: center;
        }
        .cart-action-btn .qty-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 215, 0, 0.12);
            border: 1px solid rgba(255, 215, 0, 0.25);
            cursor: pointer;
            transition: all 0.15s ease;
            flex-shrink: 0;
            font-size: 1.3rem;
            font-weight: bold;
        }
        .cart-action-btn .qty-btn:hover {
            background: rgba(255, 215, 0, 0.25);
            color: #FFFFFF;
        }
        .cart-action-btn .qty-btn:active {
            transform: scale(0.9);
            background: var(--gold);
            color: #000;
        }

        /* 8-Particle Golden Spark Rays */
        .cart-action-btn span.sparks {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .cart-action-btn span.sparks span {
            content: "";
            position: absolute;
            height: 8px;
            width: 2.5px;
            background: #FFD700;
            border-radius: 2px;
            opacity: 0;
        }
        .cart-action-btn span.sparks span:nth-of-type(1) { top: -14px; left: 0; right: 0; margin: auto; }
        .cart-action-btn span.sparks span:nth-of-type(2) { bottom: -14px; left: 0; right: 0; margin: auto; }
        .cart-action-btn span.sparks span:nth-of-type(3) { top: 0; bottom: 0; left: -10px; margin: auto; }
        .cart-action-btn span.sparks span:nth-of-type(4) { top: 0; bottom: 0; right: -10px; margin: auto; }
        .cart-action-btn span.sparks span:nth-of-type(5) { top: -14px; left: -70%; right: 0; margin: auto; transform: rotate(-30deg); }
        .cart-action-btn span.sparks span:nth-of-type(6) { top: -14px; left: 0; right: -70%; margin: auto; transform: rotate(30deg); }
        .cart-action-btn span.sparks span:nth-of-type(7) { bottom: -14px; right: 0; left: -70%; margin: auto; transform: rotate(30deg); }
        .cart-action-btn span.sparks span:nth-of-type(8) { bottom: -14px; left: 0; right: -70%; margin: auto; transform: rotate(-30deg); }

        .cart-action-btn.burst {
            animation: cartBtnBounce 0.3s ease-out 1;
        }
        .cart-action-btn.burst span.sparks span:nth-of-type(1) { animation: anim1 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(2) { animation: anim2 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(3) { animation: anim3 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(4) { animation: anim4 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(5) { animation: anim5 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(6) { animation: anim6 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(7) { animation: anim7 0.4s ease-out 1; }
        .cart-action-btn.burst span.sparks span:nth-of-type(8) { animation: anim8 0.4s ease-out 1; }

        @keyframes cartBtnBounce {
            0% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }

        @keyframes anim1 {
            0% { transform: scaleY(0.5); opacity: 0; }
            50% { transform: translateY(-10px) scaleY(1.4); opacity: 1; }
            100% { transform: translateY(-20px) scaleY(0.5); opacity: 0; }
        }
        @keyframes anim2 {
            0% { transform: scaleY(0.5); opacity: 0; }
            50% { transform: translateY(10px) scaleY(1.4); opacity: 1; }
            100% { transform: translateY(20px) scaleY(0.5); opacity: 0; }
        }
        @keyframes anim3 {
            0% { transform: rotate(90deg) scaleX(0.5); opacity: 0; }
            50% { transform: rotate(90deg) translateY(10px) scaleX(1.4); opacity: 1; }
            100% { transform: rotate(90deg) translateY(20px) scaleX(0.5); opacity: 0; }
        }
        @keyframes anim4 {
            0% { transform: rotate(90deg) scaleX(0.5); opacity: 0; }
            50% { transform: rotate(90deg) translateY(-10px) scaleX(1.4); opacity: 1; }
            100% { transform: rotate(90deg) translateY(-20px) scaleX(0.5); opacity: 0; }
        }
        @keyframes anim5 {
            0% { transform: rotate(-30deg) scaleY(0.5); opacity: 0; }
            50% { transform: rotate(-30deg) translateY(-8px) scaleY(1.4); opacity: 1; }
            100% { transform: rotate(-30deg) translateY(-16px) scaleY(0.5); opacity: 0; }
        }
        @keyframes anim6 {
            0% { transform: rotate(30deg) scaleY(0.5); opacity: 0; }
            50% { transform: rotate(30deg) translateY(-8px) scaleY(1.4); opacity: 1; }
            100% { transform: rotate(30deg) translateY(-16px) scaleY(0.5); opacity: 0; }
        }
        @keyframes anim7 {
            0% { transform: rotate(30deg) scaleY(0.5); opacity: 0; }
            50% { transform: rotate(30deg) translateY(8px) scaleY(1.4); opacity: 1; }
            100% { transform: rotate(30deg) translateY(16px) scaleY(0.5); opacity: 0; }
        }
        @keyframes anim8 {
            0% { transform: rotate(-30deg) scaleY(0.5); opacity: 0; }
            50% { transform: rotate(-30deg) translateY(8px) scaleY(1.4); opacity: 1; }
            100% { transform: rotate(-30deg) translateY(16px) scaleY(0.5); opacity: 0; }
        }

        .empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-secondary); }
        .empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; }

        /* --- Cart Upsell Carousel --- */
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .upsell-card {
            flex: 0 0 auto; width: 110px;
            background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; padding: 0.55rem 0.5rem;
            display: flex; flex-direction: column; align-items: center;
            gap: 0.25rem; text-align: center;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative; overflow: hidden;
        }
        .upsell-card::before {
            content: ''; position: absolute; inset: 0; border-radius: 12px;
            background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, transparent 60%);
            opacity: 0; transition: opacity 0.3s ease;
        }
        .upsell-card:hover, .upsell-card:active {
            border-color: rgba(212,175,55,0.35);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(212,175,55,0.1);
        }
        .upsell-card:hover::before { opacity: 1; }
        .upsell-card-name {
            font-size: 0.7rem; font-weight: 600; color: var(--text-primary);
            line-height: 1.25; max-height: 2.5em; overflow: hidden;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            position: relative; z-index: 1;
        }
        .upsell-card-price {
            font-size: 0.75rem; font-weight: 700; color: var(--gold);
            position: relative; z-index: 1;
        }
        .upsell-add-btn {
            background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.08) 100%);
            color: var(--gold); border: 1px solid rgba(212,175,55,0.3); border-radius: 6px;
            font-size: 0.7rem; font-weight: 700; padding: 0.28rem 0.6rem;
            cursor: pointer; width: 100%; transition: all 0.2s ease;
            position: relative; z-index: 1; letter-spacing: 0.2px;
        }
        .upsell-add-btn:hover {
            background: linear-gradient(135deg, var(--gold) 0%, #e6c200 100%);
            color: var(--dark-bg); border-color: var(--gold);
        }
        .upsell-add-btn:active { transform: scale(0.95); }
        .upsell-add-btn.is-in-cart {
            background: transparent; border: 1px solid rgba(34,197,94,0.4);
            color: #22C55E; font-size: 0.65rem;
        }

        /* --- Floating Cart Button (Golden Sonar Radar) --- */
        .floating-button {
            position: fixed;
            bottom: 2rem;
            right: 1.5rem;
            width: 60px; height: 60px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            z-index: 995;
            text-decoration: none;
            background: var(--gold); color: var(--dark-bg);
            box-shadow: var(--shadow-lg);
            transition: all 0.3s ease;
            transform: scale(0);
            opacity: 0;
            user-select: none;
        }
        .floating-button i { font-size: 28px; line-height: 1; color: inherit; }
        .floating-button:hover { color: var(--dark-bg); transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
        .floating-button.visible { transform: scale(1); opacity: 1 !important; }
        .floating-button.visible:hover { transform: scale(1.08); }

        /* Golden Sonar Radar & Breathing Glow on #cart-button (Bottom Center Aligned) */
        #cart-button {
            left: 50%;
            right: auto;
            bottom: 2rem;
            z-index: 998;
            transform: translateX(-50%) scale(0);
            background: linear-gradient(135deg, #F5D77F, #C5A028);
        }

        #cart-button:hover {
            transform: translateX(-50%) scale(1.08);
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }

        #cart-button.visible {
            transform: translateX(-50%) scale(1);
            opacity: 1 !important;
            animation: cartRadarBreathe 3s ease-in-out infinite alternate !important;
        }

        #cart-button.visible:hover {
            transform: translateX(-50%) scale(1.08);
        }

        #cart-button::before,
        #cart-button::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            opacity: 0;
            pointer-events: none;
            z-index: -1;
        }

        #cart-button.visible::before {
            animation: cartSonarPulse 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        #cart-button.visible::after {
            animation: cartSonarPulse 2.4s 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        @keyframes cartSonarPulse {
            0% {
                transform: scale(1);
                opacity: 0.85;
                border-color: rgba(212, 175, 55, 0.9);
            }
            50% {
                opacity: 0.4;
            }
            100% {
                transform: scale(1.8);
                opacity: 0;
                border-color: rgba(212, 175, 55, 0);
            }
        }

        @keyframes cartRadarBreathe {
            0% {
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 175, 55, 0.25);
            }
            100% {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 28px rgba(212, 175, 55, 0.65);
            }
        }

        /* Punch bounce on add */
        #cart-button.just-added {
            animation: cartButtonPunch 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        }

        @keyframes cartButtonPunch {
            0% {
                transform: translateX(-50%) scale(1);
            }
            30% {
                transform: translateX(-50%) scale(1.28) rotate(-8deg);
                box-shadow: 0 0 35px rgba(212, 175, 55, 0.95);
            }
            60% {
                transform: translateX(-50%) scale(0.94) rotate(4deg);
            }
            80% {
                transform: translateX(-50%) scale(1.06) rotate(-2deg);
            }
            100% {
                transform: translateX(-50%) scale(1) rotate(0deg);
            }
        }

        .cart-counter {
            position: absolute;
            top: -6px;
            right: -6px;
            background: var(--non-veg-color);
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            font-size: 0.95rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--dark-bg);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .cart-counter.just-added {
            animation: cartBadgePop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
        }

        @keyframes cartBadgePop {
            0% {
                transform: scale(1);
            }
            45% {
                transform: scale(2.2);
                background: #FFFFFF;
                color: #EF4444;
                box-shadow: 0 0 25px rgba(239, 68, 68, 0.95);
            }
            75% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                background: var(--non-veg-color);
                color: #FFFFFF;
            }
        }

        /* Checkout Field Validation Error Shake & Red Glow */
        .field-error {
            border-color: #EF4444 !important;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45) !important;
            animation: fieldShakeError 0.45s ease-in-out !important;
        }

        @keyframes fieldShakeError {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }

        .area-pills-wrap.field-error {
            border: 1px dashed #EF4444 !important;
            border-radius: 10px;
            padding: 6px;
        }

        /* --- Modal Styles --- */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
        .modal-overlay.visible { opacity: 1; visibility: visible; }
        .modal-content { background: var(--card-bg); width: 100%; max-width: 400px; padding: 1.5rem; border-radius: 12px; transform: scale(0.95); transition: transform 0.3s ease; max-height: 90vh; display: flex; flex-direction: column; overflow-y: auto; }
        .modal-overlay.visible .modal-content { transform: scale(1); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem; }
        .modal-header h2 { font-family: 'Playfair Display', serif; color: var(--gold); margin: 0; font-size: 1.5rem; }
        /* Close button — uses global .btn-close from components.css */
        .modal-close { 
            background: rgba(255,255,255,0.06); 
            border: 1px solid rgba(255,255,255,0.1); 
            color: var(--text-secondary); 
            width: 36px; height: 36px; 
            border-radius: 50%; 
            display: inline-flex; align-items: center; justify-content: center; 
            font-size: 1rem; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            flex-shrink: 0;
            line-height: 1;
            padding: 0;
        }
        .modal-close:hover { 
            background: rgba(255,255,255,0.12); 
            border-color: rgba(255,255,255,0.2); 
            color: var(--text-primary); 
            transform: rotate(90deg); 
        }

        /* --- Options Modal --- */
        .options-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; overflow-y: auto; max-height: 50vh; }
        .option-label { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; }
        .option-label input { display: none; } /* Hide radio button */
        .option-label.selected { border-color: var(--gold); background: rgba(255, 215, 0, 0.1); }

        /* --- Cart Modal --- */
        .cart-items-list { list-style: none; flex-shrink: 0; margin: 0 -0.5rem 1rem -0.5rem; padding: 0 0.5rem; }
        .cart-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);}
        .cart-item:last-child { border-bottom: none; }
        .cart-item-info { flex-grow: 1; }
        .cart-item-name { font-weight: 600; }
        .cart-item-price { color: var(--text-secondary); font-size: 0.9rem; }
        .cart-item-controls { display: flex; align-items: center; gap: 0.5rem; background: var(--dark-bg); padding: 0.25rem; border-radius: 50px; }
        .control-btn { background: none; border: none; color: var(--gold); width: 28px; height: 28px; cursor: pointer; font-size: 1.2rem; }
        .cart-summary { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: auto; flex-shrink: 0; }
        .cart-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }

        /* --- WhatsApp Button --- */
        .whatsapp-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.75rem; background-color: #25D366; color: white; padding: 1rem; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 1.1rem; border: none; cursor: pointer; transition: background-color 0.3s ease; }

        /* --- Spinner Animation --- */
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff; animation: spin 1s ease-in-out infinite; }
        .whatsapp-button.is-loading .bi-whatsapp { display: none; }
        .whatsapp-button.is-loading .spinner { display: block; }
        .whatsapp-button:disabled { background-color: #1a9c4a; cursor: wait; }

        /* --- Customer Checkout & Form Controls (Unified across all Channels) --- */
        .customer-details, #cart-checkout-fields .form-group { margin-bottom: 1rem; flex-shrink: 0; width: 100%; display: block; }
        .customer-details label, #cart-checkout-fields .form-label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; width: 100%; text-align: left; }
        .customer-details input, .customer-details textarea, #cart-checkout-fields .form-control { width: 100%; display: block; box-sizing: border-box; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; font-size: 0.95rem; color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; font-family: inherit; }
        .customer-details input:focus, .customer-details textarea:focus, #cart-checkout-fields .form-control:focus, .cart-item-instructions:focus, input.cart-item-instructions:focus { outline: none !important; border-color: rgba(255, 255, 255, 0.35) !important; background: rgba(0, 0, 0, 0.35) !important; box-shadow: none !important; }
        .customer-details p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 0; }

        /* --- Image Preview Modal --- */
        #image-preview-modal .modal-content { background: transparent; padding: 0; width: auto; max-width: 90vw; max-height: 90vh; box-shadow: none; position: relative; display: block; }
        #preview-close { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 2rem; color: white; background: rgba(0,0,0,0.5); border-radius: 50%; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 10; cursor: pointer; border: none; }
        #preview-image { width: auto; height: auto; max-width: 90vw; max-height: 90vh; border-radius: 12px; display: block; }

        /* --- Footer Styles --- */
        .main-footer { background: var(--dark-bg); text-align: center; padding: 2.5rem 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border-color); }
        .footer-content { max-width: 500px; margin: 0 auto; }
        .footer-content h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--text-primary); margin-bottom: 0.6rem; }
        .footer-content p { color: var(--text-secondary); margin-bottom: 1rem; font-size: 0.88rem; }
        .footer-content .button { display: inline-block; width: auto; background: var(--gold); color: var(--dark-bg); padding: 10px 24px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; text-decoration: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; }
        .footer-content .button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
        .footer-subtext { margin-top: 1.25rem; font-size: 0.75rem; color: var(--text-secondary); opacity: 0.7; }
        .footer-subtext a { color: var(--text-secondary); text-decoration: none; }
        .footer-subtext a:hover { color: var(--gold); }

        /* --- Toast Notification (Disabled) --- */
        #toast-notification { display: none !important; }
        body:has(.modal-overlay.visible) #toast-notification,
        body:has(.modal-overlay.visible) .floating-button { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

        /* --- Skeleton Loader --- */
        #skeleton-loader .menu-items-grid { }
        .skeleton-card { background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; }
        .skeleton-img { width: 100%; aspect-ratio: 16 / 9; height: auto; background-color: #333; }
        .skeleton-content { padding: 1rem; }
        .skeleton-title { height: 20px; width: 70%; background-color: #333; border-radius: 4px; margin-bottom: 0.75rem; }
        .skeleton-text { height: 14px; width: 100%; background-color: #333; border-radius: 4px; margin-bottom: 0.5rem; }
        .skeleton-text-short { height: 14px; width: 80%; background-color: #333; border-radius: 4px; margin-bottom: 1.5rem; }
        .skeleton-button { height: 45px; width: 100%; background-color: #333; border-radius: 8px; }
        .shimmer-animation { position: relative; overflow: hidden; }
        .shimmer-animation::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: shimmer 1.5s infinite linear; }
        @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }

        /* ==============================
           MOBILE RESPONSIVE OVERRIDES
           ============================== */
        @media screen and (max-width: 640px) {
            .pwa-install-word { display: none !important; }
            #pwa-install-strip-btn { padding: 5px 12px !important; font-size: 0.74rem !important; }
            .header-container { padding: 1.1rem 1rem 1rem; gap: 0.35rem; }
            .header-top { gap: 0.7rem; }
            .restaurant-logo { width: 46px; height: 46px; }
            .restaurant-title { font-size: 1.45rem; }
            .restaurant-meta { font-size: 0.82rem; gap: 0.35rem; }
            
            .category-nav ul { gap: 0.35rem; }
            .category-nav a { padding: 0.35rem 0.8rem; font-size: 0.78rem; }

            main { padding: 1.25rem 0.75rem; }
            .category-section { margin-bottom: 2rem; }
            .category-title { font-size: 1.55rem; margin-bottom: 1rem; padding-bottom: 0.4rem; }
            .menu-items-grid { gap: 0.85rem; }

            .skeleton-img { max-height: 180px; aspect-ratio: auto; }
            .item-image-container { max-height: 180px; aspect-ratio: auto; }
            .item-image-placeholder { max-height: 120px; }
            .placeholder-icon { font-size: 1.6rem; }
            .item-content { padding: 0.95rem 1rem !important; }
            .item-header { margin-bottom: 0.25rem !important; }
            .item-name { font-size: 1.15rem !important; font-family: 'Inter', sans-serif !important; color: #F8FAFC !important; margin-bottom: 0.1rem !important; }
            .price-label { font-size: 0.72rem; }
            .price-value { font-size: 1.1rem !important; font-weight: 800 !important; }
            .item-description { font-size: 0.86rem; margin-bottom: 0.35rem; color: #CBD5E1; }
            .description-wrapper { margin-top: 0.25rem !important; margin-bottom: 0.65rem !important; }
            .dietary-tags { margin-top: 0.25rem !important; margin-bottom: 0.65rem !important; gap: 0.35rem !important; }
            .tag { font-size: 0.68rem !important; padding: 3px 9px !important; }
            .tag-filter-btn { padding: 0.35rem 0.8rem !important; font-size: 0.76rem !important; }
            .tag-search-toggle-btn { width: 31px !important; height: 31px !important; font-size: 0.82rem !important; }
            .menu-search-box { height: 32px !important; padding: 0 0.6rem 0 0.75rem !important; }
            .menu-search-input { font-size: 0.8rem !important; }
            .menu-search-input::placeholder { font-size: 0.76rem !important; }
            .tag-dot { width: 6px !important; height: 6px !important; }
            .promo-tags { gap: 0.3rem; margin-bottom: 0.7rem; }
            .promo-badge { font-size: 0.5rem; padding: 2px 6px; }
            .item-actions-wrapper { margin-top: 0.35rem !important; padding-top: 0 !important; }
            .cart-action-btn { padding: 0.5rem 0.6rem !important; font-size: 0.9rem !important; border-radius: 8px; }
            .cart-action-btn.is-added { padding: 0.3rem 0.35rem !important; }
            .item-actions-wrapper.multi-variants-3plus .cart-action-btn { padding: 0.42rem 0.2rem !important; font-size: 0.78rem !important; }
            .btn-variant-price { font-size: 0.78em !important; }
            .btn-plus-icon { font-size: 0.75em !important; }
            .btn-variant-price::before { height: 11px; }
            .item-actions-wrapper.multi-variants-3plus .cart-action-btn.is-added { padding: 0.3rem 0.55rem !important; font-size: 0.88rem !important; }

            /* Footer */
            .main-footer { padding: 2.5rem 1rem; margin-top: 1rem; }
            .footer-content h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
            .footer-content p { font-size: 0.85rem; margin-bottom: 1rem; }
            .footer-content .button { padding: 10px 24px; font-size: 0.9rem; }
            .footer-subtext { margin-top: 1.25rem; font-size: 0.7rem; }

            /* Cart Modal */
            .modal-content { padding: 1.25rem; border-radius: 10px; }
            .modal-header h2 { font-size: 1.2rem; }
            .cart-items-list { max-height: 35vh; overflow-y: auto; }

            /* Toast */
            #toast-notification { font-size: 0.78rem; padding: 0.6rem 1rem; }

            /* Floating Buttons on Mobile */
            .floating-button { width: 52px; height: 52px; bottom: 1.5rem; right: 1rem; }
            .floating-button i { font-size: 22px; }
            
            /* Large Prominent Golden Cart Button on Mobile */
            #cart-button {
                width: 68px !important;
                height: 68px !important;
                left: 50% !important;
                right: auto !important;
                bottom: 1.5rem !important;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(212, 175, 55, 0.45) !important;
            }
            #cart-button i {
                font-size: 30px !important;
            }
            
            /* Large Readable Cart Counter Badge on Mobile */
            .cart-counter {
                width: 26px !important;
                height: 26px !important;
                font-size: 0.9rem !important;
                font-weight: 800 !important;
                top: -5px !important;
                right: -5px !important;
            }

            /* Call Waiter & Track Order aligned at bottom: 6.5rem on Mobile */
            #track-order-button {
                bottom: 6.5rem !important;
                right: 1rem !important;
            }
            .ring-waiter-btn {
                width: 52px !important;
                height: 52px !important;
                bottom: 6.5rem !important;
                left: 1rem !important;
            }
            .ring-waiter-btn i {
                font-size: 22px !important;
            }
        }


        /* --- Order Tracking Modal --- */
        #order-tracking-modal .modal-content { display: block; text-align: center; padding: 1.5rem; max-height: 92vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
        #order-tracking-modal .modal-content::-webkit-scrollbar { display: none; }
        .tracking-icon { font-size: 2.8rem; margin-bottom: 0.5rem; animation: trackPopIn 0.5s ease; color: var(--gold); }
        @keyframes trackPopIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
        .tracking-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--gold); margin-bottom: 0.25rem; }
        .tracking-order-code { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
        .tracking-steps { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 320px; margin: 0 auto 1rem; text-align: left; }
        .tracking-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; position: relative; }
        .tracking-step .step-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--dark-bg); flex-shrink: 0; transition: all 0.4s ease; position: relative; z-index: 2; }
        .tracking-step .step-line { position: absolute; left: 6px; top: 22px; width: 2px; height: calc(100% - 6px); background: var(--border-color); z-index: 1; transition: background 0.4s ease; }
        .tracking-step:last-child .step-line { display: none; }
        .tracking-step .step-label { font-size: 0.85rem; color: var(--text-secondary); transition: all 0.3s ease; }
        .tracking-step.active .step-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
        .tracking-step.active .step-label { color: var(--text-primary); font-weight: 600; }
        .tracking-step.done .step-dot { background: var(--veg-color); border-color: var(--veg-color); }
        .tracking-step.done .step-line { background: var(--veg-color); }
        .tracking-step.done .step-label { color: var(--text-secondary); }
        .tracking-step.cancelled .step-dot { background: #EF4444; border-color: #EF4444; }
        .tracking-step.cancelled .step-line { background: #EF4444; }
        .tracking-step.cancelled .step-label { color: #EF4444; text-decoration: line-through; opacity: 0.8; }
        
        .tracking-payment-status { margin-bottom: 0.75rem; margin-top: -0.2rem; }
        .payment-badge { padding: 0.35rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }
        .payment-badge.paid { background-color: rgba(34, 197, 94, 0.15); color: #22C55E; border: 1px solid #22C55E; }
        .payment-badge.unpaid { background-color: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid #EF4444; }

        /* Back button */
        .tracking-back-arrow { position:absolute; top:1rem; left:1rem; background:none; border:1px solid rgba(255,255,255,0.1); color:#888; width:34px; height:34px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all 0.15s; z-index:2; }
        .tracking-back-arrow:hover { border-color:var(--gold); color:var(--gold); }

        .tracking-actions { width: 100%; max-width: 340px; margin: 1.25rem auto 1.5rem; display:flex; flex-direction:column; gap:0.5rem; }
        /* Pay */
        .tb-pay { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; padding:0.7rem 1rem; border-radius:8px; font-weight:600; font-size:0.82rem; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:#888; cursor:pointer; text-decoration:none; font-family:'Inter',sans-serif; transition:all 0.15s; }
        .tb-pay:hover { border-color:rgba(99,102,241,0.4); color:#818cf8; background:rgba(99,102,241,0.08); }
        .tb-pay:active { transform:scale(0.97); }
        /* WhatsApp */
        .tb-wa { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; padding:0.7rem 1rem; border-radius:8px; font-weight:600; font-size:0.82rem; cursor:pointer; text-decoration:none; font-family:'Inter',sans-serif; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:#888; transition:all 0.15s; }
        .tb-wa:active { transform:scale(0.97); }
        .tb-wa:hover { border-color:rgba(37,211,102,0.4); color:#4ade80; background:rgba(37,211,102,0.08); }
        /* Secondary row */
        .ta-secondary { display:flex; flex-direction:row; gap:0.5rem; }
        .tb-sec { flex:1; display:flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.55rem 0.75rem; border-radius:8px; font-weight:600; font-size:0.76rem; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:#888; cursor:pointer; text-decoration:none; font-family:'Inter',sans-serif; transition:all 0.15s; }
        .tb-sec:hover { border-color:rgba(255,215,0,0.3); color:var(--gold); background:rgba(255,215,0,0.05); }
        .tb-sec:active { transform:scale(0.97); }
        .tb-sec i { font-size:0.85rem; }
        /* Add more items button */
        .ta-back { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; padding:0.7rem 1rem; cursor:pointer; border:1px dashed rgba(255,215,0,0.35); background:rgba(255,215,0,0.06); color:rgba(255,215,0,0.8); font-size:0.85rem; font-weight:500; font-family:'Inter',sans-serif; border-radius:10px; transition:all 0.2s; letter-spacing:0.2px; margin-top:0.25rem; }
        .ta-back:hover { border-color:rgba(255,215,0,0.6); background:rgba(255,215,0,0.12); color:var(--gold); }
        .ta-back:active { transform:scale(0.97); }
        .ta-back i { font-size:0.9rem; }
        .ta-back.hidden { display:none !important; }
        /* Inline UPI Section */
        .upi-inline { display:none; background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.15); border-radius:10px; padding:1rem; margin-bottom:0.5rem; text-align:center; }
        .upi-inline.visible { display:block; }
        .upi-inline .upi-amt { font-size:1.5rem; font-weight:800; color:#f0f0f0; margin-bottom:0.1rem; }
        .upi-inline .upi-amt span { color:#818CF8; }
        .upi-inline .upi-note { font-size:0.7rem; color:#666; margin-bottom:0.75rem; }
        .upi-inline .upi-qr-box { background:#fff; border-radius:10px; padding:12px; display:inline-block; margin-bottom:0.5rem; }
        .upi-inline .upi-deep { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:0.7rem; background:linear-gradient(135deg,#6366F1,#4F46E5); color:#fff; border-radius:8px; font-size:0.82rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; transition:opacity 0.15s; box-shadow:0 2px 10px rgba(99,102,241,0.25); }
        .upi-inline .upi-deep:hover { opacity:0.9; }
        .upi-inline .upi-or { color:#555; font-size:0.65rem; margin:0.5rem 0; text-transform:uppercase; letter-spacing:1px; }
        .upi-inline .upi-id-row { font-size:0.7rem; color:#555; display:flex; align-items:center; justify-content:center; gap:0.4rem; margin-top:0.5rem; }
        .upi-inline .upi-id-row code { color:#aaa; font-family:'Courier New',monospace; font-size:0.72rem; }
        .upi-inline .upi-id-copy { background:none; border:1px solid rgba(255,255,255,0.08); color:#666; padding:2px 6px; border-radius:4px; cursor:pointer; font-size:0.62rem; font-weight:600; font-family:'Inter',sans-serif; }

        /* --- Announcement Banner --- */
        .announcement-banner {
            background: var(--card-bg);
            border-bottom: none;
            padding: 0.5rem 1rem;
            overflow: hidden;
        }
        .announcement-slider {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            min-height: 1.6em;
        }
        .announcement-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            position: absolute;
            width: 100%;
            top: 0; left: 0;
            opacity: 0;
            transform: translateY(8px);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }
        .announcement-slide.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            position: relative;
        }
        .announcement-icon {
            font-size: 1rem;
            flex-shrink: 0;
            width: 22px; height: 22px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }
        .announcement-icon.quote { color: #F59E0B; }
        .announcement-icon.notice { color: #3B82F6; }
        .announcement-icon.offer { color: #EF4444; }
        .announcement-icon.wishes { color: #06B6D4; }
        .announcement-icon.info { color: #22C55E; }
        .announcement-text {
            font-size: 0.82rem;
            color: var(--text-primary);
            line-height: 1.4;
            text-align: center;
        }
        .ann-highlight {
            color: var(--gold);
            font-weight: 700;
        }
        .ring-waiter-btn {
            position: fixed;
            bottom: 6.5rem;
            left: 1.5rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--card-bg);
            color: var(--gold);
            border: 2px solid var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
            z-index: 990;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        .ring-waiter-btn i {
            font-size: 26px;
            line-height: 1;
            color: inherit;
        }
        .ring-waiter-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
        }
        .ring-waiter-btn:active {
            transform: scale(0.95);
        }
        .ring-waiter-btn.sent {
            background: linear-gradient(135deg, #22C55E, #16A34A) !important;
            color: #FFFFFF !important;
            border-color: #22C55E !important;
            pointer-events: none;
            box-shadow: 0 4px 20px rgba(34, 197, 94, 0.55), 0 0 15px rgba(34, 197, 94, 0.4) !important;
            animation: waiterSentPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .ring-waiter-btn.sent i {
            color: #FFFFFF !important;
            font-size: 28px !important;
        }
        @keyframes waiterSentPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.18); }
            100% { transform: scale(1); }
        }
        .rv-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);z-index:10001;display:none;align-items:flex-end;justify-content:center}
        .rv-overlay.open{display:flex}
        .rv-sheet{background:var(--card-bg,#141414);border:1px solid rgba(255,255,255,0.07);border-radius:16px 16px 0 0;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;color:#f0f0f0;box-shadow:0 -10px 40px rgba(0,0,0,0.5)}
        .rv-handle{width:36px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:10px auto 0}
        .rv-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem 0.75rem;border-bottom:1px solid rgba(255,255,255,0.07)}
        .rv-head h3{margin:0;color:var(--gold);font-family:'Playfair Display',serif;font-size:1.1rem;display:flex;align-items:center;gap:0.4rem}
        .rv-close{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--text-secondary);font-size:1rem;cursor:pointer;padding:0;line-height:1;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;flex-shrink:0}
        .rv-close:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:var(--text-primary);transform:rotate(90deg)}
        .rv-body{padding:1rem 1.25rem 1.5rem}
        .rv-loading{text-align:center;padding:2.5rem 1rem;color:#777}
        .rv-loading .rv-spin{display:inline-block;width:28px;height:28px;border:3px solid rgba(255,215,0,0.15);border-top:3px solid var(--gold);border-radius:50%;animation:rvSpin 0.8s linear infinite;margin-bottom:0.75rem}
        @keyframes rvSpin{to{transform:rotate(360deg)}}
        /* Stepper */
        .rv-steps{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:1rem;padding:0.5rem 0}
        .rv-step{display:flex;align-items:center;gap:0.35rem;font-size:0.78rem;color:#555;transition:color 0.3s}
        .rv-step.active{color:var(--gold)}
        .rv-step-num{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.06);border:1.5px solid #555;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;transition:all 0.3s}
        .rv-step.active .rv-step-num{background:rgba(255,215,0,0.15);border-color:var(--gold);color:var(--gold)}
        .rv-step-line{width:32px;height:1.5px;background:#333;flex-shrink:0}
        .rv-subtitle{font-size:0.8rem;color:#888;margin-bottom:1rem;text-align:center;line-height:1.5}
        /* Selectable cards */
        .rv-card{background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:1.1rem;margin-bottom:0.75rem;transition:border-color 0.2s,box-shadow 0.2s,transform 0.15s}
        .rv-card-selectable{cursor:pointer;-webkit-tap-highlight-color:transparent}
        .rv-card-selectable:hover{border-color:rgba(255,215,0,0.4);transform:translateY(-1px)}
        .rv-card-selectable:active{transform:scale(0.985)}
        .rv-card.rv-selected{border-color:rgba(255,215,0,0.6);box-shadow:0 0 16px rgba(255,215,0,0.15)}
        .rv-text{font-size:0.85rem;line-height:1.6;color:#f0f0f0;margin-bottom:0.75rem;font-style:italic}
        .rv-text::before,.rv-text::after{content:'\201C';color:var(--gold);font-size:1.1rem;font-family:'Playfair Display',serif}
        .rv-text::after{content:'\201D'}
        .rv-card-action{display:flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:600;color:#777;transition:color 0.2s;font-family:'Inter',sans-serif}
        .rv-card-selectable:hover .rv-card-action{color:var(--gold)}
        .rv-selected .rv-card-action{color:var(--gold)}
        .rv-guide{background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.15);border-radius:8px;padding:0.85rem;margin-top:1rem}
        .rv-guide h4{font-size:0.82rem;color:var(--gold);margin-bottom:0.4rem;display:flex;align-items:center;gap:0.3rem;font-family:'Inter',sans-serif}
        .rv-guide ol{font-size:0.78rem;color:#777;padding-left:1.25rem;line-height:1.6}
        .rv-error{text-align:center;padding:2rem 1rem;color:#EF4444;font-size:0.88rem}
        @media(min-width:640px){.rv-overlay{align-items:center}.rv-sheet{border-radius:16px;margin:1rem}}

        /* --- Loading Dots Animation --- */
        .loading-dots span { animation: loadingBlink 1.4s infinite both; }
        .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
        .loading-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes loadingBlink {
            0% { opacity: 0.2; }
            20% { opacity: 1; }
            100% { opacity: 0.2; }
        }

        /* --- Hourglass Flip Animation --- */
        @keyframes hourglassFlip {
            0% { transform: rotate(0deg); }
            45% { transform: rotate(180deg); }
            100% { transform: rotate(180deg); }
        }
        .hourglass-spin {
            display: inline-block;
            animation: hourglassFlip 1.5s infinite ease-in-out;
        }

        /* --- Installed / Standalone PWA Mode (Hide Download Icon) --- */
        @media all and (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
            #pass-install-strip-btn,
            #pwa-install-strip-btn,
            #nav-install-app-btn,
            #category-nav-install-btn,
            .pass-action-pill .pill-divider-right,
            .public-action-pill {
                display: none !important;
            }
            .pass-action-pill {
                border-radius: 12px !important;
            }
        }

        html.is-pwa-standalone #pass-install-strip-btn,
        html.is-pwa-standalone #pwa-install-strip-btn,
        html.is-pwa-standalone #nav-install-app-btn,
        html.is-pwa-standalone #category-nav-install-btn,
        html.is-pwa-standalone .pass-action-pill .pill-divider-right,
        html.is-pwa-standalone .public-action-pill,
        body.is-pwa-standalone #pass-install-strip-btn,
        body.is-pwa-standalone #pwa-install-strip-btn,
        body.is-pwa-standalone #nav-install-app-btn,
        body.is-pwa-standalone #category-nav-install-btn,
        body.is-pwa-standalone .pass-action-pill .pill-divider-right,
        body.is-pwa-standalone .public-action-pill {
            display: none !important;
        }
        html.is-pwa-standalone .pass-action-pill,
        body.is-pwa-standalone .pass-action-pill {
            border-radius: 12px !important;
        }