/* ========================================================================
   MOBILE HEADER IMPROVEMENTS - Compact & Proportional Top Bar
   ======================================================================== */

/* Mobile Header - Fixed Position */
@media (max-width: 767px) {
    #header {
        position: fixed !important;
        /* top: 0 !important; */ /* Moved to mobile-topbar-fix.css - header now below top bar */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        /* z-index: 999 !important; */ /* Moved to mobile-topbar-fix.css */
        background-color: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    /* Add padding to body to prevent content from hiding under fixed header */
    body {
        /* padding-top: 104px !important; */ /* Moved to mobile-topbar-fix.css - now includes top bar height */
    }

    #header .main-header {
        padding: 0px 0 !important;
        min-height: 56px !important;
        background-color: #fff !important;
    }

    #header .main-header .container {
        padding: 0 !important;
    }

    #header .wrapper-header {
        padding: 0 12px !important;
        gap: 8px !important;
        margin: 0 !important;
    }


    /* Logo Section - Compact */
    #header .logo-header {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0 auto; /* Center logo */
    }

    #header .logo-header .logo {
        height: 30px !important;
        width: auto;
        max-width: 100px;
        object-fit: contain;
    }

    /* Hamburger Menu - Smaller & Better Positioned */
    #header .col-3:first-child {
        flex: 0 0 40px !important;
        max-width: 40px !important;
        padding: 0 !important;
    }

    #header .col-3:first-child a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
    }

    #header .col-3:first-child svg {
        width: 20px !important;
        height: 16px !important;
    }

    /* Logo Column - Centered and Flexible */
    #header .col-6 {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Right Icons Section - Compact */
    #header .col-3:last-child {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* Force proper row layout */
    #header .wrapper-header.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Mobile search row should be separate */
    #header .mobile-search-row {
        display: flex !important;
        width: 100% !important;
    }

    #header .nav-icon {
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    #header .nav-icon li {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    #header .nav-icon-item {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }

    #header .nav-icon-item:active {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

    #header .nav-icon-item i {
        font-size: 18px !important;
    }

    /* Hide text labels on mobile for compactness */
    #header .nav-icon-item .text,
    #header .nav-icon .text {
        display: none !important;
    }

    /* Hide gap-20 class effects */
    #header .gap-20 {
        gap: 4px !important;
    }

    /* Cart Icon Badge - Smaller */
    #header .nav-cart .count-box {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        top: -4px !important;
        right: -4px !important;
    }

    /* Wishlist Icon Badge - Same size as Cart */
    #header .nav-wishlist .count-box {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        min-width: 16px !important;
        right: -8px !important;
    }

    /* Search Icon - Special treatment */
    #header .nav-search .nav-icon-item {
        background-color: transparent !important;
    }

    /* User Account - Smaller Avatar */
    #header .nav-account .rounded-circle {
        width: 28px !important;
        height: 28px !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* Notification Badge - Repositioned */
    #header #notification-badge-container {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
    }

    #header #notification-badge-container .badge {
        padding: 2px 5px !important;
        font-size: 9px !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 12px !important;
    }

    /* Wishlist Icon */
    #header .nav-wishlist .nav-icon-item i {
        font-size: 18px !important;
    }

    /* Remove any margin/padding from container */
    #header .main-header .line {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure proper alignment */
    #header .align-items-center {
        align-items: center !important;
    }

    #header .justify-content-end {
        justify-content: flex-end !important;
    }

    /* Fix any overflow */
    #header .main-header {
        overflow-x: hidden !important;
    }

    #header .wrapper-header {
        overflow: visible !important;
    }
}

/* Extra Small Devices - Ultra Compact */
@media (max-width: 360px) {
    #header .main-header {
        padding: 6px 0;
        min-height: 52px;
    }

    #header .wrapper-header {
        padding: 0 8px;
        gap: 6px;
    }

    #header .logo-header .logo {
        height: 28px;
        max-width: 90px;
    }

    #header .col-3:first-child {
        flex: 0 0 36px;
        max-width: 36px;
    }

    #header .col-3:first-child a {
        width: 36px;
        height: 36px;
        padding: 6px;
    }

    #header .nav-icon {
        gap: 2px !important;
    }

    #header .nav-icon-item {
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    #header .nav-icon-item i {
        font-size: 16px;
    }
}

/* Larger Mobile Devices - Slightly More Spacious */
@media (min-width: 480px) and (max-width: 767px) {
    #header .main-header {
        padding: 10px 0;
        min-height: 60px;
    }

    #header .wrapper-header {
        padding: 0 16px;
        gap: 12px;
    }

    #header .logo-header .logo {
        height: 36px;
        max-width: 120px;
    }

    #header .col-3:first-child {
        flex: 0 0 44px;
        max-width: 44px;
    }

    #header .col-3:first-child a {
        width: 44px;
        height: 44px;
    }

    #header .nav-icon {
        gap: 8px !important;
    }

    #header .nav-icon-item {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    #header .nav-icon-item i {
        font-size: 20px;
    }
}

/* Mobile Search Overlay - Improved */
@media (max-width: 767px) {
    .mobile-search-overlay {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }

    .mobile-search-header {
        padding: 12px 16px;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-search-input-wrapper input {
        height: 40px;
        font-size: 14px;
        padding: 8px 40px 8px 40px;
    }

    .mobile-search-input-wrapper .search-icon {
        left: 12px;
        font-size: 16px;
    }

    .mobile-search-loading {
        right: 12px;
    }
}

/* Touch Optimization */
@media (max-width: 767px) {
    #header .nav-icon-item,
    #header .col-3:first-child a,
    #header .logo-header {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Increase touch target without increasing visual size */
    #header .nav-icon-item::before {
        content: '';
        position: absolute;
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
        z-index: -1;
    }
}

/* Smooth Transitions */
#header .nav-icon-item,
#header .col-3:first-child a {
    transition: all 0.2s ease;
}

/* Active State Visual Feedback */
@media (max-width: 767px) {
    #header .nav-icon-item:active,
    #header .col-3:first-child a:active {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

/* Hide unnecessary elements on mobile */
@media (max-width: 767px) {
    /* Hide desktop-only navigation */
    #header .header-bottom {
        display: none !important;
    }

    /* Hide gap classes that take too much space */
    #header .gap-20,
    #header .gap-30 {
        gap: 8px !important;
    }
}

/* Performance Optimizations */
#header * {
    will-change: auto;
}

#header .nav-icon-item {
    will-change: transform, opacity;
}

/* Accessibility - Ensure minimum touch target size */
@media (max-width: 767px) {
    #header button,
    #header a {
        min-width: 32px;
        min-height: 32px;
    }
}

/* RTL Support (if needed in future) */
[dir="rtl"] #header .nav-icon {
    flex-direction: row-reverse;
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    @media (max-width: 767px) {
        #header .nav-icon-item:active {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
}

/* Specific Icon Adjustments */
@media (max-width: 767px) {
    /* Cart icon - make badge more visible */
    #header .icon-bag {
        position: relative;
    }

    /* Search icon - slightly larger for visibility */
    #header .icon-search {
        font-size: 19px;
    }

    /* Heart/wishlist icon */
    #header .icon-heart {
        font-size: 18px;
    }

    /* User account icon */
    #header .icon-account {
        font-size: 19px;
    }
}

/* Loading States */
@media (max-width: 767px) {
    #header .nav-icon-item.loading {
        opacity: 0.5;
        pointer-events: none;
    }

    #header .nav-icon-item.loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-top-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
}

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

/* Fix for iOS Safari - Prevent zoom on input focus */
@media (max-width: 767px) {
    #header input,
    #header select,
    #header textarea {
        font-size: 16px !important;
    }
}

/* Landscape Mode Adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    #header .main-header {
        padding: 6px 0;
        min-height: 48px;
    }

    #header .logo-header .logo {
        height: 28px;
    }

    #header .nav-icon-item {
        width: 32px;
        height: 32px;
        padding: 6px;
    }
}

/* ========================================================================
   AGGRESSIVE OVERRIDES - Force Compact Layout
   ======================================================================== */
@media (max-width: 767px) {
    /* Override any conflicting Bootstrap/theme styles */
    #header .container-fluid,
    #header .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    #header .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Force remove all padding from columns */
    #header [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Override theme header styles */
    #header.header-default .wrapper-header,
    #header.header-style-2 .wrapper-header,
    #header.header-style-4 .wrapper-header {
        min-height: 56px !important;
        padding: 0 12px !important;
    }

    /* Force icon list compact */
    #header ul.nav-icon {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Override any link styling that adds padding */
    #header .nav-icon-item {
        text-decoration: none !important;
        color: inherit !important;
    }

    /* Ensure hamburger is properly positioned */
    #header .tf-lg-hidden {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Cart badge specific override */
    #header .nav-cart {
        position: relative !important;
    }

    /* Force center logo */
    #header .logo-header {
        width: 100% !important;
        text-align: center !important;
    }

    /* Remove any animation/transform on load */
    #header * {
        transform: none !important;
    }

    /* Fix for sticky/fixed headers */
    #header.header-bg,
    #header.is-fixed {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Ensure icons are always visible */
    #header .nav-icon li {
        display: block !important;
    }

    /* Override any display:none on mobile icons */
    #header .nav-search .d-md-none,
    #header .nav-icon .d-md-none {
        display: flex !important;
    }

    /* Hide desktop-only elements */
    #header .d-none.d-md-inline-flex,
    #header .d-none.d-md-flex,
    #header .d-none.d-md-block {
        display: none !important;
    }

    /* Clean spacing */
    #header br {
        display: none !important;
    }

    /* Ensure text doesn't wrap */
    #header .nav-icon-item {
        white-space: nowrap !important;
    }

    /* Force proper stacking context */
    #header {
        position: relative !important;
        z-index: 999 !important;
    }

    #header .main-header {
        position: relative !important;
        z-index: 1000 !important;
    }

    /* Remove any transitions that might cause issues */
    #header .wrapper-header,
    #header .nav-icon,
    #header .logo-header {
        transition: none !important;
    }
}

/* Extra specificity for stubborn elements */
@media (max-width: 767px) {
    /* Ensure header stays fixed */
    body #header {
        position: fixed !important;
        top: 0 !important;
        z-index: 999 !important;
    }

    body #header .main-header {
        padding: 0px 0 !important;
        background-color: #fff !important;
    }

    body #header .wrapper-header {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    body #header .nav-icon {
        gap: 4px !important;
    }

    body #header .logo-header .logo {
        height: 30px !important;
    }
}

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    @media (max-width: 767px) {
        #header .nav-icon-item {
            -webkit-appearance: none !important;
        }
    }
}

/* Smooth scroll behavior */
@media (max-width: 767px) {
    html {
        scroll-behavior: smooth !important;
    }

    /* Prevent content jump when header becomes fixed */
    html.header-fixed body {
        padding-top: 104px !important;
    }

    /* Ensure fixed header doesn't block anchor links */
    html {
        scroll-padding-top: 110px !important;
    }

    /* Hide bottom toolbar - not needed with fixed header */
    .tf-toolbar-bottom {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Make sure header has proper background and shadow when fixed */
@media (max-width: 767px) {
    #header.is-fixed,
    #header {
        background-color: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
}