/* =====================================================
   STICKY SECONDARY NAV WITH DARK MODE ON SCROLL
   ===================================================== */

/* =====================================================
   STICKY SECONDARY NAV WITH GLASS EFFECT
   ===================================================== */

/* Transparent by default */
.secondary-nav-section {
    position: sticky !important;
    top: 80px !important;
    z-index: 990 !important;
    
    background: transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Default text color (dark on transparent) */
.secondary-nav-section #secondary-menu a,
.secondary-nav-section .mega-menu-link {
    color: #374151 !important;
    transition: color 0.3s ease !important;
}

/* GLASS EFFECT when scrolled */
.secondary-nav-section.nav-scrolled {
    /* Frosted glass gradient */
    background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.60) 0%,   /* More transparent */
    rgba(30, 41, 59, 0.55) 50%,
    rgba(51, 65, 85, 0.50) 100%) !important;
    
    /* Glass blur effect */
    backdrop-filter: blur(40px) saturate(180%) brightness(105%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(105%) !important;
    
    /* Glass border and shadow */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* White text when scrolled */
.secondary-nav-section.nav-scrolled #secondary-menu a,
.secondary-nav-section.nav-scrolled .mega-menu-link {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Glass hover effect */
.secondary-nav-section.nav-scrolled #secondary-menu a:hover,
.secondary-nav-section.nav-scrolled .mega-menu-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: white !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 6px !important;
}

/* Keep dropdowns above everything */
#mega-menu-wrap-secondary .mega-sub-menu {
    z-index: 99999 !important;
}

/* Hero below dropdowns */
.hero-deals-carousel-section {
    z-index: auto !important;
}

/* Mobile optimization */
@media (max-width: 1024px) {
    .secondary-nav-section.nav-scrolled {
        backdrop-filter: blur(20px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    }
}