/* ============================================
   FLIPKART-STYLE MOBILE HEADER
   Mobile-only header layout matching Flipkart
   Desktop view is NOT affected
   
   CRITICAL: This file MUST load AFTER mobile-header-consistent.css
   to override conflicting styles
   ============================================ */

/* Mobile - 768px and below */
@media (max-width: 768px) {

    /* CRITICAL OVERRIDE: Force column layout for header-container */
    /* This must override mobile-header-consistent.css which sets row layout */
    html body header .header-container,
    html body .header-container,
    body header .header-container,
    body .header-container,
    header .header-container,
    .header-container {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* CRITICAL: Override mobile-responsive.css flex-wrap */
    html body header .header-container,
    html body .header-container {
        flex-wrap: nowrap !important;
    }

    /* ============================================
       HEADER STRUCTURE - Flipkart Style
       ============================================ */

    /* Header - Fixed, with proper height for two rows */
    html body .header,
    body .header,
    html body header,
    body header,
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 10000 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(0) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    /* Header hidden state - when scrolling down */
    html body .header.header-hidden,
    body .header.header-hidden,
    .header.header-hidden {
        transform: translateY(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    /* Header container - Two row layout using flexbox */
    /* CRITICAL: Override all conflicting styles */
    html body .header-container,
    body .header-container,
    html body header .header-container,
    body header .header-container,
    .header-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* ============================================
       ROW 1: Hamburger, Logo, Action Buttons
       ============================================ */

    /* Top row wrapper - group hamburger, logo, and buttons */
    html body .header-top-row,
    body .header-top-row,
    html body .header-container .header-top-row,
    body .header-container .header-top-row,
    .header-top-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Changed from space-between to shift buttons left */
        padding: 16px 12px 12px 12px !important;
        /* Increased top padding to 16px to prevent hiding behind menu */
        gap: 8px !important;
        /* Increased gap for better spacing */
        width: 100% !important;
        max-width: 100% !important;
        /* Prevent overflow */
        box-sizing: border-box !important;
        min-height: 64px !important;
        /* Increased from 56px to accommodate buttons better with extra top space */
        height: auto !important;
        order: 1 !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        overflow-x: hidden !important;
        /* Prevent horizontal overflow */
        overflow-y: visible !important;
        /* Allow vertical overflow if needed */
        margin-bottom: 0 !important;
        /* Ensure no margin below */
        margin-top: 0 !important;
        /* Ensure no margin above */
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    }

    /* Top row hidden state - when scrolling down */
    html body .header-top-row.header-top-row-hidden,
    body .header-top-row.header-top-row-hidden,
    .header-top-row.header-top-row-hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* If top row doesn't exist, ensure logo and header-right are in first row */
    html body .header-container>.logo:not(.header-top-row .logo),
    body .header-container>.logo:not(.header-top-row .logo),
    html body .header-container>.header-right:not(.header-top-row .header-right),
    body .header-container>.header-right:not(.header-top-row .header-right),
    html body .header-container>.mobile-menu-toggle:not(.header-top-row .mobile-menu-toggle),
    body .header-container>.mobile-menu-toggle:not(.header-top-row .mobile-menu-toggle) {
        order: 1 !important;
    }

    /* Hamburger Menu Toggle - Left side */
    html body .mobile-menu-toggle,
    body .mobile-menu-toggle,
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        color: #212121 !important;
        font-size: 18px !important;
        /* Reduced from 20px */
        cursor: pointer !important;
        padding: 6px !important;
        /* Reduced from 8px */
        margin: 0 !important;
        width: 36px !important;
        /* Reduced from 40px */
        height: 36px !important;
        /* Reduced from 40px */
        min-width: 36px !important;
        min-height: 36px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        z-index: 10002 !important;
        /* Higher than header to stay visible */
        position: relative !important;
    }

    /* When header is hidden, make hamburger toggle float */
    html body .header.header-hidden .mobile-menu-toggle,
    body .header.header-hidden .mobile-menu-toggle,
    .header.header-hidden .mobile-menu-toggle {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 10002 !important;
        background: white !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    html body .mobile-menu-toggle i,
    body .mobile-menu-toggle i,
    .mobile-menu-toggle i {
        font-size: 18px !important;
        /* Reduced from 20px */
        line-height: 1 !important;
    }

    /* Logo - Center/Left */
    html body .logo,
    body .logo,
    .logo {
        flex: 0 1 auto !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 35% !important;
        /* Further reduced to prevent button overflow */
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        order: 2 !important;
        margin: 0 !important;
        margin-right: 8px !important;
        padding: 0 !important;
    }

    html body .logo-image,
    body .logo-image,
    .logo-image {
        height: 28px !important;
        /* Reduced from 32px */
        max-height: 28px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Action buttons container - Right side */
    html body .header-right,
    body .header-right,
    .header-right {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        /* Prevent wrapping to next line */
        gap: 6px !important;
        /* Reduced gap to fit all buttons */
        flex-shrink: 0 !important;
        /* Don't shrink */
        order: 3 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        min-width: 0 !important;
        max-width: none !important;
        /* Remove width limit */
        width: auto !important;
        /* Allow natural width */
        box-sizing: border-box !important;
    }

    /* Header item - ensure no clipping */
    html body .header-right .header-item,
    body .header-right .header-item,
    .header-right .header-item {
        overflow: visible !important;
        min-width: auto !important;
        max-width: none !important;
    }

    /* Download App Button - Show on mobile */
    html body .download-app-btn,
    body .download-app-btn,
    .download-app-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        color: #212121 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        /* Ensure full visibility */
    }

    html body .download-app-btn i,
    body .download-app-btn i,
    .download-app-btn i {
        font-size: 16px !important;
        /* Reduced from 18px */
        line-height: 1 !important;
    }

    /* Login Button - Show on mobile, simplified - OVERRIDE mobile-responsive.css */
    html body .login-btn,
    body .login-btn,
    .login-btn,
    html body .login-dropdown-wrapper,
    body .login-dropdown-wrapper,
    .login-dropdown-wrapper {
        display: flex !important;
        /* CRITICAL: Override mobile-responsive.css display: none */
        visibility: visible !important;
        /* CRITICAL: Override mobile-responsive.css visibility: hidden */
        opacity: 1 !important;
        /* CRITICAL: Override mobile-responsive.css opacity: 0 */
        pointer-events: auto !important;
        /* CRITICAL: Override mobile-responsive.css pointer-events: none */
        width: auto !important;
        /* CRITICAL: Override mobile-responsive.css width: 0 */
        height: auto !important;
        /* CRITICAL: Override mobile-responsive.css height: 0 */
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        color: #212121 !important;
        font-size: 11px !important;
        /* Slightly reduced to fit better */
        font-weight: 500 !important;
        cursor: pointer !important;
        padding: 0 6px !important;
        /* Reduced padding slightly to prevent overflow */
        margin: 0 !important;
        margin-top: 0 !important;
        /* Ensure no top margin */
        text-decoration: none !important;
        flex-shrink: 0 !important;
        gap: 3px !important;
        /* Reduced gap slightly */
        white-space: nowrap !important;
        overflow: visible !important;
        min-width: auto !important;
        max-width: 65px !important;
        /* Limit width to prevent overflow */
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 10001 !important;
        /* Ensure it's above hamburger menu overlay */
    }

    /* Ensure login wrapper doesn't clip content */
    html body .login-dropdown-wrapper,
    body .login-dropdown-wrapper {
        overflow: visible !important;
        min-width: auto !important;
        max-width: none !important;
        width: auto !important;
    }

    html body .login-btn i,
    body .login-btn i,
    .login-btn i {
        font-size: 14px !important;
        /* Increased from 12px for better visibility */
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Hide login dropdown on mobile */
    html body .login-dropdown,
    body .login-dropdown,
    .login-dropdown {
        display: none !important;
    }

    /* Hide chevron on login button for mobile */
    html body .login-btn .fa-chevron-down,
    body .login-btn .fa-chevron-down,
    html body .login-btn i.fa-chevron-down,
    body .login-btn i.fa-chevron-down,
    .login-btn .fa-chevron-down,
    .login-btn i.fa-chevron-down {
        display: none !important;
    }

    /* Ensure login text is visible */
    html body .login-btn,
    body .login-btn {
        white-space: nowrap !important;
    }

    /* Add user icon before login text if missing */
    html body .login-btn:not(:has(.fa-user))::before,
    body .login-btn:not(:has(.fa-user))::before {
        content: '\f007' !important;
        /* FontAwesome user icon */
        font-family: 'Font Awesome 6 Free' !important;
        font-weight: 900 !important;
        margin-right: 4px !important;
        display: inline-block !important;
    }

    /* Cart Button - Show on mobile */
    html body .cart,
    body .cart,
    .cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        min-width: 28px !important;
        position: relative !important;
        text-decoration: none !important;
        color: #212121 !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        /* Ensure full visibility including badge */
    }

    html body .cart i,
    body .cart i,
    .cart i {
        font-size: 16px !important;
        /* Reduced from 18px */
        display: block !important;
    }

    html body .cart-text,
    body .cart-text,
    .cart-text {
        display: none !important;
    }

    html body .cart-count,
    body .cart-count,
    .cart-count {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 3px !important;
        background: #ff9f00 !important;
        color: white !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    /* Hide other header items on mobile */
    html body .become-seller,
    body .become-seller,
    .become-seller,
    html body .more-options,
    body .more-options,
    .more-options,
    html body .more-dropdown-wrapper,
    body .more-dropdown-wrapper,
    .more-dropdown-wrapper {
        display: none !important;
    }

    /* ============================================
       ROW 2: Search Bar (Below header)
       ============================================ */

    /* Search container - Full width below header */
    /* CRITICAL: Override all conflicting styles to ensure it's in second row */
    html body .search-container,
    body .search-container,
    html body .header-container .search-container,
    body .header-container .search-container,
    html body header .search-container,
    body header .search-container,
    .search-container {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        display: flex !important;
        align-items: center !important;
        padding: 4px 12px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        /* Ensure no margin-top that could overlap */
        box-sizing: border-box !important;
        background: white !important;
        border-top: 1px solid #f0f0f0 !important;
        position: relative !important;
        z-index: 1 !important;
        transition: margin-top 0.3s ease-in-out, padding-top 0.3s ease-in-out !important;
    }

    /* When top row is hidden, adjust search bar position */
    html body .header-top-row-hidden~.search-container,
    html body .header-container:has(.header-top-row-hidden) .search-container,
    body .header-top-row-hidden~.search-container,
    body .header-container:has(.header-top-row-hidden) .search-container {
        margin-top: 0 !important;
        padding-top: 4px !important;
        border-top: none !important;
    }

    html body .search-input,
    body .search-input,
    .search-input {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 2px 0 0 2px !important;
        background: white !important;
    }

    html body .search-btn,
    body .search-btn,
    .search-btn {
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
        min-width: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 2px 2px 0 !important;
        background: #2874f0 !important;
        color: white !important;
        border: 1px solid #2874f0 !important;
        font-size: 14px !important;
    }

    html body .search-btn i,
    body .search-btn i,
    .search-btn i {
        font-size: 16px !important;
        color: white !important;
    }

    /* Adjust main content padding for new header height */
    html body .main-content,
    body .main-content,
    .main-content,
    html body main,
    body main,
    main {
        padding-top: 30px !important;
        /* Mobile spacing */
    }

    /* Homepage main content - ensure categories menu is visible */
    html body.homepage .main-content,
    body.homepage .main-content,
    body.homepage main,
    html body.homepage main {
        padding-top: 30px !important;
        /* Mobile homepage spacing */
    }

    /* Homepage categories nav - ensure it's below header with proper spacing */
    html body.homepage .homepage-categories-nav,
    body.homepage .homepage-categories-nav {
        margin-top: 16px !important;
        /* Increased spacing below header to prevent hiding */
        padding-top: 12px !important;
        /* Increased padding */
        position: relative !important;
        z-index: 1 !important;
        /* Ensure it's above other content */
    }

    /* Homepage categories container - add gaps and shift left */
    html body.homepage .homepage-categories-container,
    body.homepage .homepage-categories-container {
        gap: 12px !important;
        /* Add gap between category items */
        padding-left: 16px !important;
        /* Shift categories to the left */
        padding-right: 12px !important;
        justify-content: flex-start !important;
    }

    /* Homepage category items - ensure proper spacing */
    html body.homepage .homepage-category-item,
    body.homepage .homepage-category-item {
        margin-right: 0 !important;
        /* Remove margin, use gap instead */
        padding: 8px 6px !important;
        /* Add horizontal padding */
    }

    /* Product main - adjust padding to account for header + nav-menu */
    html body:not(.homepage) .product-main,
    body:not(.homepage) .product-main,
    html body .product-main:not(.homepage),
    body .product-main:not(.homepage),
    html body:not(.homepage) .product-main {
        padding-top: 60px !important;
        /* Mobile product page spacing */
    }

    /* Homepage product main - only header */
    html body.homepage .product-main,
    body.homepage .product-main {
        padding-top: 60px !important;
        /* Mobile homepage product spacing */
    }

    /* Search main - adjust padding */
    html body .search-main,
    body .search-main,
    .search-main {
        padding-top: 30px !important;
        /* Mobile search spacing */
    }

    /* Navigation Menu - Ensure it's visible and positioned correctly below header */
    html body .nav-menu,
    body .nav-menu,
    .nav-menu,
    html body nav .nav-menu,
    body nav .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 120px !important;
        /* 64px (top row) + 48px (search row) + 8px (spacing) */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 10001 !important;
        /* HIGHER than header (10000) to ensure it's always visible */
        background: white !important;
        border-bottom: 1px solid #f0f0f0 !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        transform: translateY(0) !important;
        /* Ensure it's not hidden by transform */
        transition: top 0.3s ease-in-out !important;
        /* Smooth transition when position changes */
        pointer-events: auto !important;
        /* Ensure it's clickable */
    }

    /* Ensure nav-menu itself can scroll */
    html body .nav-menu::-webkit-scrollbar,
    body .nav-menu::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body .nav-menu::-webkit-scrollbar,
    body .nav-menu::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body .nav-container,
    body .nav-container,
    .nav-container,
    html body .nav-menu .nav-container,
    body .nav-menu .nav-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 12px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        overflow-x: visible !important;
        /* Let nav-menu handle scrolling */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: max-content !important;
        /* Allow container to expand beyond viewport */
        min-width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Hide scrollbar but keep scrolling functionality */
    html body .nav-container::-webkit-scrollbar,
    body .nav-container::-webkit-scrollbar,
    .nav-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body .nav-menu .nav-item,
    body .nav-menu .nav-item,
    .nav-menu .nav-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        min-width: auto !important;
        max-width: none !important;
        width: auto !important;
    }

    html body .nav-menu .nav-link,
    body .nav-menu .nav-link,
    .nav-menu .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        color: #212121 !important;
        text-decoration: none !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }

    /* Hide nav-menu only on homepage */
    html body.homepage .nav-menu,
    body.homepage .nav-menu {
        display: none !important;
    }

    /* CRITICAL: Force nav-menu to ALWAYS be visible on non-homepage pages, regardless of scroll state */
    html body:not(.homepage) .nav-menu,
    body:not(.homepage) .nav-menu,
    html body:not(.homepage) nav .nav-menu,
    body:not(.homepage) nav .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        position: fixed !important;
        pointer-events: auto !important;
        z-index: 10001 !important;
        /* HIGHER than header (10000) to ensure it's always visible */
    }

    /* When top row is hidden, nav-menu should be below search bar */
    html body:not(.homepage) .header-top-row-hidden~.nav-menu,
    html body:not(.homepage) .header-container:has(.header-top-row-hidden)~.nav-menu,
    body:not(.homepage) .header-top-row-hidden~.nav-menu,
    body:not(.homepage) .header-container:has(.header-top-row-hidden)~.nav-menu,
    html body:not(.homepage) .header-top-row-hidden+.search-container~.nav-menu,
    body:not(.homepage) .header-top-row-hidden+.search-container~.nav-menu {
        top: 56px !important;
        /* 48px (search bar height) + 8px (spacing) */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        z-index: 10001 !important;
        /* Higher than header */
        pointer-events: auto !important;
    }

    /* Adjust main content padding to account for nav-menu */
    html body:not(.homepage) .main-content,
    body:not(.homepage) .main-content,
    html body:not(.homepage) main,
    body:not(.homepage) main {
        padding-top: 120px !important;
        /* Mobile non-homepage spacing */
    }
}