/*
 * Sticky Navbar Full Transformation (Desktop Only)
 * Shows comprehensive navbar on scroll with all essential elements
 */

/* Mobile/tablet: hide sticky-user-actions (desktop-only icons) to avoid
   crowding the header and blocking the hamburger menu button */
@media (max-width: 991px) {
    .sticky-user-actions {
        display: none !important;
    }
}

/* Desktop only - hide on mobile/tablet */
@media (min-width: 992px) {
    
    /* Normal state - keep as-is */
    .sticky-bar {
        position: relative;
        transition: all 0.3s ease;
    }
    
    /* Hide user actions in normal state (on page load) */
    .sticky-bar:not(.stick) .sticky-user-actions {
        display: none !important;
    }
    
    /* Sticky state transformation */
    .sticky-bar.stick {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000 !important;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Hide sticky logo link completely */
    .sticky-bar.stick .sticky-logo-link {
        display: none !important;
    }
    
    /* Adjust header-wrap for sticky state - NO LOGO SPACE */
    .sticky-bar.stick .header-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 0;
        gap: 20px;
        padding-left: 0; /* No logo space */
    }
    
    /* Browse Categories in sticky state */
    .sticky-bar.stick .main-categori-wrap {
        flex: 0 0 auto;
        margin-right: 15px;
    }
    
    .sticky-bar.stick .categori-button-active {
        padding: 10px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    
    /* Main navigation in sticky state */
    .sticky-bar.stick .main-menu {
        flex: 1;
        min-width: 0;
    }
    
    .sticky-bar.stick .main-menu > nav > ul {
        display: flex;
        gap: 10px;
        padding-left: 0;
        margin: 0;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .sticky-bar.stick .main-menu > nav > ul > li > a {
        padding: 10px 14px;
        font-size: 14px;
        white-space: nowrap;
    }
    
    /* Show user actions in sticky bar */
    .sticky-bar.stick .sticky-user-actions {
        display: flex !important;
        align-items: center;
        gap: 18px;
        flex-shrink: 0;
        margin-left: auto;
        padding-left: 15px;
    }
    
    /* User action icons in sticky state */
    .sticky-bar.stick .sticky-user-actions .header-action-icon-2 {
        position: relative;
    }
    
    .sticky-bar.stick .sticky-user-actions .header-action-icon-2 > a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background 0.2s ease;
    }
    
    .sticky-bar.stick .sticky-user-actions .header-action-icon-2 > a:hover {
        background: #f5f5f5;
    }
    
    /* Account dropdown in sticky */
    .sticky-bar.stick .account-trigger-header {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
    }
    
    .sticky-bar.stick .account-trigger-header img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .sticky-bar.stick .account-name-header {
        font-size: 13px;
    }
    
    /* Wishlist and Cart icons in sticky */
    .sticky-bar.stick .sticky-user-actions img {
        width: 22px;
        height: 22px;
    }
    
    .sticky-bar.stick .sticky-user-actions .pro-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        line-height: 18px;
        padding: 0 5px;
    }
    
    /* Compact dropdown positioning in sticky */
    .sticky-bar.stick .account-dropdown-header,
    .sticky-bar.stick .cart-dropdown-wrap {
        top: calc(100% + 10px);
    }
    
    /* Hide mobile promotion in sticky */
    .sticky-bar.stick .mobile-promotion {
        display: none;
    }
    
    /* Responsive adjustments for sticky navbar */
    @media (min-width: 992px) and (max-width: 1200px) {
        .sticky-bar.stick .main-menu > nav > ul > li > a {
            padding: 10px 12px;
            font-size: 13px;
        }
        
        .sticky-bar.stick .categori-button-active {
            padding: 10px 14px;
        }
        
        .sticky-bar.stick .sticky-user-actions {
            gap: 15px;
        }
    }
    
    /* Ensure smooth transition */
    .sticky-bar,
    .sticky-bar .header-wrap,
    .sticky-bar .main-menu,
    .sticky-bar .categori-button-active {
        transition: all 0.3s ease;
    }
    
    /* Prevent layout shift when sticky activates */
    body.sticky-active .header-bottom.sticky-bar {
        margin-bottom: 0;
    }
    
    /* Add body padding to prevent content overlap */
    body.sticky-active {
        padding-top: 70px;
    }
    
    /* Smooth height transition */
    .sticky-bar {
        transition: padding 0.3s ease, box-shadow 0.3s ease;
    }
    
    .sticky-bar.stick .header-wrap {
        transition: padding 0.3s ease;
    }
    
    /* Z-index management */
    .sticky-bar.stick {
        z-index: 9999;
    }
    
    .sticky-bar.stick .categori-dropdown-wrap,
    .sticky-bar.stick .mega-menu,
    .sticky-bar.stick .sub-menu {
        z-index: 10000;
    }
}

/* Mobile - no sticky navbar transformation */
@media (max-width: 991px) {
    .sticky-user-actions {
        display: none !important;
    }
}