/* ===== ENHANCEMENTS CSS ===== */

/* ── Hero text visibility fix ──
   styles.css sets opacity:0 on hero elements with fadeInUp animation,
   but premium.css overwrites animation with shimmer/stagger, losing the opacity fix.
   Force hero text visible and let premium animations handle entrance. */
.hero-tagline,
.hero-title,
.hero-subtitle,
.hero-ornament,
.hero-buttons {
    opacity: 1 !important;
}

/* ── Scroll to top on page load ── */
html { scroll-behavior: auto; }

/* ── Chef slideshow fix ──
   All chef images are position:absolute and stacked in DOM order.
   The last image (Bhavana) always covers the others visually.
   Fix: active slide gets z-index to appear on top. */
.chef-slide { z-index: 0; }
.chef-slide.active { z-index: 1; }

/* ── Critical Mobile Fixes ── */
/* Ensure hamburger menu button is always tappable on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        position: relative;
        z-index: 1100 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 160, 23, 0.2);
        min-width: 48px;
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Ensure header doesn't clip hamburger */
    header {
        overflow: visible !important;
        z-index: 1050 !important;
    }

    /* Prevent header slideshow from blocking hamburger */
    .header-slideshow {
        pointer-events: none;
    }

    /* Prevent parallax transforms on mobile (causes shakiness) */
    .hero-slideshow,
    .chef-content,
    .stats-grid {
        transform: none !important;
    }

    /* Disable magnetic cursor effects on mobile */
    .magnetic-image {
        transform: none !important;
    }

    /* Smoother scroll locking that doesn't shift the page */
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* Reduce animation shakiness — prefer GPU-composited transforms */
.chef-content,
.stats-grid,
.hero-slideshow {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Disable all parallax/tilt for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slideshow,
    .chef-content,
    .stats-grid,
    .tilt-card,
    .magnetic-image {
        transform: none !important;
        transition: none !important;
    }
}

/* ── Reveal Animation Fix ──
   The .reveal CSS transitions get stuck as Web Animations at progress:0,
   making all .reveal elements permanently invisible (opacity:0, translateY(40px)).
   Force revealed/visible/in-view elements to be visible. */
.reveal.visible,
.reveal.in-view,
.reveal.revealed,
.reveal-left.visible,
.reveal-left.in-view,
.reveal-right.visible,
.reveal-right.in-view,
.reveal-scale.visible,
.reveal-scale.in-view {
    opacity: 1 !important;
    transform: none !important;
}

/* Chef content uses parallax transform that gets stuck */
.chef-content {
    opacity: 1 !important;
}

/* Combo builder section hidden by default opacity */
.combo-builder-section {
    opacity: 1 !important;
}

/* Fallback: after page has been scrolled, ensure ALL reveal elements
   and known-stuck sections become visible.
   The .page-scrolled class is added by JS after first scroll. */
.page-scrolled .reveal,
.page-scrolled .reveal-left,
.page-scrolled .reveal-right,
.page-scrolled .reveal-scale,
.page-scrolled .chef-section,
.page-scrolled .chef-info,
.page-scrolled .special-card,
.page-scrolled .stat-item,
.page-scrolled .tilt-card,
.page-scrolled .newsletter-card,
.page-scrolled .badge-item,
.page-scrolled .faq-item,
.page-scrolled .contact-info-section,
.page-scrolled .combo-builder-section,
.page-scrolled .footer-section {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ── Gallery Image Visibility Fix ──
   Gallery images have loading="lazy" which starts at opacity:0.
   The .loaded class should bring them to opacity:1, but Web Animations
   override both CSS and inline styles. Force loaded images visible. */
#gallery .gallery-item img,
img[loading="lazy"].loaded,
img.magnetic-image.loaded {
    opacity: 1 !important;
}

/* ── Duplicate Review Form Fix ──
   worldclass2.js injects duplicate "Share Your Experience" review modals
   and "Write a Review" buttons. Hide the second instance of each. */
.photo-review-modal ~ .photo-review-modal {
    display: none !important;
}
.write-review-btn ~ .write-review-btn {
    display: none !important;
}

/* ── Open/Closed Status Badge ── */
.open-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .2);
    color: #4ade80;
    white-space: nowrap;
    transition: all .4s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

/* Nav layout */
header > nav { max-width: none; padding-left: 1.5rem; padding-right: 1.5rem; }
header > nav .logo { padding-left: 0; padding-right: 0.8rem; }
/* Allow streak dropdown to overflow out of sticky header */
header { overflow: visible !important; }

/* Status + Streak group next to logo */
.nav-status-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    position: relative;
}

/* Streak toggle button */
.streak-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    background: rgba(255, 107, 0, .08);
    border: 1px solid rgba(255, 107, 0, .2);
    color: #ff8c00;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.streak-toggle-btn:hover {
    background: rgba(255, 107, 0, .15);
    border-color: rgba(255, 107, 0, .35);
}
.open-status-badge.is-closed {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .2);
    color: #f87171;
}
.open-status-badge.closing-soon {
    background: rgba(251, 191, 36, .08);
    border-color: rgba(251, 191, 36, .2);
    color: #fbbf24;
}
.open-status-badge.closing-soon .status-dot {
    background: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, .5) !important;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, .5);
    animation: statusPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.85); }
}
.status-text {
    line-height: 1;
}

/* ── Loyalty Tier Perks ── */
.loyalty-tier-item .tier-header { display: flex; justify-content: space-between; width: 100%; font-weight: 600; }
.loyalty-tier-item .tier-perks { list-style: none; padding: 4px 0 0; margin: 0; font-size: .72rem; color: #aaa; text-align: left; width: 100%; }
.loyalty-tier-item .tier-perks li { padding: 2px 0; }
.loyalty-tier-item .tier-perks li::before { content: '✓ '; color: #22c55e; }
.loyalty-tier-item.locked { opacity: .5; }
.loyalty-tier-item.locked .tier-perks li::before { content: '🔒 '; color: #666; }

/* ── Allergen Filter Bar ── */
.allergen-filter-bar { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; align-items: center; flex-wrap: wrap; }
.filter-label { color: #aaa; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.allergen-filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(212,160,23,.2); background: rgba(212,160,23,.05); color: #d4a017; font-size: .8rem; cursor: pointer; white-space: nowrap; transition: all .2s; }
.allergen-filter-btn:hover { background: rgba(212,160,23,.12); border-color: rgba(212,160,23,.35); }
.allergen-filter-btn.active { background: rgba(212,160,23,.2); border-color: #d4a017; font-weight: 700; box-shadow: 0 0 8px rgba(212,160,23,.15); }
.clear-filters { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); color: #f87171; }
.clear-filters:hover { background: rgba(239,68,68,.15); }
.filter-count { font-size: .75rem; color: #aaa; padding: 4px 10px; background: rgba(255,255,255,.05); border-radius: 12px; white-space: nowrap; }

/* ── Social Proof Toast ── */
.social-proof-toast {
    position: fixed;
    bottom: 80px;
    left: 80px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(30, 20, 14, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 160, 23, .15);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .04);
    z-index: 9990;
    max-width: 340px;
    opacity: 0;
    transform: translateX(-20px) scale(.95);
    transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
.social-proof-toast.sp-show {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.social-proof-toast.sp-hide {
    opacity: 0;
    transform: translateX(-20px) scale(.95);
}
.sp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}
.sp-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-text {
    color: #f0e0c0;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.3;
}
.sp-time {
    color: rgba(212, 160, 23, .6);
    font-size: .65rem;
    font-weight: 500;
}

/* ── Cookie Consent ── */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    padding: 0;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cookie-consent.cc-visible {
    transform: translateY(0);
}
.cookie-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(30, 20, 14, .95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(212, 160, 23, .15);
    border-radius: 16px 16px 0 0;
}
.cookie-text {
    color: rgba(240, 224, 192, .8);
    font-size: .8rem;
    line-height: 1.5;
    flex: 1;
}
.cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-accept {
    padding: 8px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #1a0f08;
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
    transition: all .3s ease;
}
.cookie-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212, 160, 23, .3);
}
.cookie-decline {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(240, 224, 192, .2);
    background: transparent;
    color: rgba(240, 224, 192, .7);
    font-weight: 600;
    font-size: .78rem;
    cursor: pointer;
    transition: all .3s ease;
}
.cookie-decline:hover {
    border-color: rgba(240, 224, 192, .4);
    color: #f0e0c0;
}

/* ── Newsletter Section ── */
.newsletter-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(30, 20, 14, .03) 0%, rgba(212, 160, 23, .04) 100%);
}
.newsletter-card {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 3rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(30, 20, 14, .9), rgba(42, 28, 20, .95));
    border: 1px solid rgba(212, 160, 23, .12);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .15), 0 0 0 1px rgba(255, 255, 255, .02);
    position: relative;
    overflow: hidden;
}
.newsletter-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 160, 23, .08) 0%, transparent 70%);
    pointer-events: none;
}
.newsletter-content {
    flex: 1;
}
.newsletter-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: .5rem;
    font-weight: 600;
}
.newsletter-desc {
    color: rgba(240, 224, 192, .7);
    font-size: .9rem;
    line-height: 1.6;
}
.newsletter-form {
    flex: 1;
    max-width: 400px;
}
.newsletter-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.newsletter-input {
    flex: 1;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(212, 160, 23, .2);
    background: rgba(255, 255, 255, .05);
    color: #f0e0c0;
    font-size: .9rem;
    outline: none;
    transition: border-color .3s, box-shadow .3s;
}
.newsletter-input::placeholder {
    color: rgba(240, 224, 192, .4);
}
.newsletter-input:focus {
    border-color: rgba(212, 160, 23, .5);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .1);
}
.newsletter-btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #1a0f08;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s ease;
}
.newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(212, 160, 23, .35);
}
.newsletter-btn:disabled {
    opacity: .7;
    cursor: default;
    transform: none;
}
.newsletter-msg {
    font-size: .8rem;
    margin-top: 4px;
    min-height: 1.2em;
}
.newsletter-privacy {
    color: rgba(240, 224, 192, .35);
    font-size: .7rem;
    margin-top: 4px;
}

/* ── Search Suggestions ── */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 20, 14, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 160, 23, .12);
    border-radius: 0 0 14px 14px;
    padding: 10px 12px;
    z-index: 50;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.search-suggestions-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212, 160, 23, .1);
}
.search-suggestion-item {
    display: inline-block;
    padding: 5px 12px;
    margin: 3px;
    border-radius: 20px;
    background: rgba(212, 160, 23, .08);
    border: 1px solid rgba(212, 160, 23, .15);
    color: #f0e0c0;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}
.search-suggestion-item:hover {
    background: rgba(212, 160, 23, .18);
    border-color: rgba(212, 160, 23, .35);
    color: var(--gold);
    transform: translateY(-1px);
}

/* ── Special card hover glow ── */
.special-card {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease !important;
    transform-style: preserve-3d;
}
.special-card:hover {
    box-shadow: 0 12px 40px rgba(212, 160, 23, .12), 0 0 0 1px rgba(212, 160, 23, .08) !important;
}

/* ── Dark mode adjustments for enhancements ── */
body[data-theme="dark"] .newsletter-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, .2), rgba(212, 160, 23, .02));
}
body[data-theme="dark"] .newsletter-card {
    background: linear-gradient(135deg, rgba(15, 10, 5, .95), rgba(25, 18, 10, .95));
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .open-status-badge {
        display: none;
    }
    .social-proof-toast {
        left: 10px;
        right: 10px;
        bottom: 80px;
        max-width: none;
    }
    .cookie-inner {
        flex-direction: column;
        text-align: center;
        padding: 14px 16px;
        gap: 12px;
    }
    .newsletter-card {
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap: 1.5rem;
        text-align: center;
    }
    .newsletter-form {
        max-width: 100%;
        width: 100%;
    }
    .newsletter-input-group {
        flex-direction: column;
    }
    .newsletter-title {
        font-size: 1.6rem;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .open-status-badge {
        font-size: .6rem;
        padding: 3px 8px;
    }
}

/* ── FAB Stack — Right Side (56px spacing) ── */
.whatsapp-float    { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 900 !important; }
.ai-chat-fab       { bottom: 76px !important; right: 20px !important; }
.voice-order-fab   { display: none !important; }
.gift-card-fab     { display: none !important; }
.back-to-top       { bottom: 132px !important; right: 20px !important; z-index: 1000 !important; pointer-events: auto !important; }
.referral-fab      { bottom: 192px !important; right: 20px !important; z-index: 950 !important; pointer-events: auto !important; }

/* ── FAB Stack — Left Side (56px spacing) ── */
.music-mini-player { display: none !important; }
.a11y-panel        { display: none !important; }
.voice-order-btn   { position: fixed !important; bottom: 20px !important; left: 20px !important; right: auto !important; z-index: 900 !important; }
.music-toggle      { position: fixed !important; bottom: 76px !important; left: 20px !important; right: auto !important; z-index: 900 !important; display: flex !important; }

/* Weather widget — don't overlap left FABs */
#weather-recommendations { padding-left: 70px; }

/* ===== PREMIUM UX IMPROVEMENTS ===== */

/* Delivery time estimate in checkout */
.co-delivery-eta {
    font-size: .82rem;
    color: var(--gold, #D4A017);
    padding: 6px 0 4px;
    opacity: .85;
    letter-spacing: .02em;
}

/* Loyalty widget improvements */
.loyalty-progress-hint,
.loyalty-redeem-hint {
    font-size: .7rem;
    opacity: .75;
    display: block;
    line-height: 1.2;
    margin-top: 1px;
}
.loyalty-redeem-hint {
    color: var(--gold, #D4A017);
    opacity: 1;
    font-weight: 500;
}

/* Empty cart CTA button */
.empty-cart-cta {
    display: inline-block;
    margin-top: 1rem;
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--gold, #D4A017), #b8860b);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-radius: 30px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.empty-cart-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212,160,23,.4);
}

/* Cart item quantity transition */
.qty-count {
    transition: transform .15s ease;
}
.qty-count.bump {
    transform: scale(1.3);
}

/* Allergen Filter Bar */
.allergen-filter-bar#allergenFilterBar { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; align-items: center; flex-wrap: wrap; }
.filter-label { color: #aaa; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.allergen-filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(212,160,23,.2); background: rgba(212,160,23,.05); color: #d4a017; font-size: .8rem; cursor: pointer; white-space: nowrap; transition: all .2s; }
.allergen-filter-btn:hover { background: rgba(212,160,23,.12); border-color: rgba(212,160,23,.35); }
.allergen-filter-btn.active { background: rgba(212,160,23,.2); border-color: #d4a017; font-weight: 700; box-shadow: 0 0 8px rgba(212,160,23,.15); }
.clear-filters { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); color: #f87171; }
.clear-filters:hover { background: rgba(239,68,68,.15); }
.filter-count { font-size: .75rem; color: #aaa; padding: 4px 10px; background: rgba(255,255,255,.05); border-radius: 12px; white-space: nowrap; }