/* ========================================
   HEADER ENHANCEMENTS - MODERN COURSERA/UDEMY STYLE
   Professional polish for desktop header
   ======================================== */

/* CSS Variables - Enhanced Palette */
:root {
    /* Enhanced Colors - LinkedIn Learning Blue + Udemy Purple */
    --primary-purple: #6C3CE1;
    --primary-blue: #0a66c2;
    --primary-hover-purple: #8710d8;
    --primary-hover-blue: #004182;
    --text-dark: #1c1d1f;
    --text-medium: #6b7280;
    --border-subtle: #e5e7eb;
    --bg-overlay: rgba(255, 255, 255, 0.98);
    --shadow-subtle: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.12);
    --shadow-strong: rgba(0, 0, 0, 0.18);

    /* Timing */
    --transition-quick: 150ms ease-out;
    --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ENHANCED SHADOW ON SCROLL ===== */
/* Stronger shadow like Coursera when scrolling */
.main-header.scrolled {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.99) !important;
}

/* ===== SEARCH BAR MODERN STYLE ===== */
/* Coursera/Udemy rounded search with smooth focus */
.search-input {
    border-radius: 24px !important;
    border: 2px solid var(--border-subtle) !important;
    padding: 0 60px 0 20px !important;
    height: 44px !important;
    background-color: #f7f9fa !important;
    transition: all var(--transition-smooth) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.search-input:hover {
    background-color: #ffffff !important;
    border-color: var(--text-medium) !important;
}

.search-input:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background-color: #ffffff !important;
}

/* Search icon SVG - better visibility */
.search-input {
    background-position: calc(100% - 14px) center !important;
    background-size: 22px 22px !important;
}

/* ===== NAVIGATION LINKS HOVER EFFECTS ===== */
/* Smooth transitions like LinkedIn Learning */
.nav-link {
    position: relative;
    color: var(--text-dark);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    transition: all var(--transition-quick);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--primary-blue);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-smooth);
    z-index: -1;
}

.nav-link:hover {
    color: var(--primary-blue);
    background-color: rgba(10, 102, 194, 0.08);
}

.nav-link:hover::before {
    transform: scaleX(1);
}

.nav-link i {
    font-size: 18px;
    opacity: 0.8;
    transition: opacity var(--transition-quick);
}

.nav-link:hover i {
    opacity: 1;
}

/* ===== CATEGORIES DROPDOWN HOVER DELAY ===== */
/* Prevent accidental opens - Udemy style */
.categories-dropdown {
    position: relative;
}

.dropdown-trigger {
    transition: all var(--transition-quick);
}

/* Fix 3.14.23: rimossa regola generica .dropdown-trigger:hover.
   Conflittava con .dropdown-trigger:not(.categories-trigger):hover (header-v2-fixed.css)
   e .dropdown-trigger.categories-trigger:hover (header-professional.css), causando hover blu
   LinkedIn (#0a66c2) anziche' viola brand (#6C3CE1). Le 2 regole specifiche coprono tutti i casi. */

/* Delay dropdown open by 100ms */
.categories-dropdown:hover .dropdown-menu {
    animation: fadeInDropdown 200ms ease-out 100ms backwards;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced dropdown shadow */
.dropdown-menu {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    border-radius: 12px !important;
}

/* Category items - smoother transitions */
.category-item {
    transition: all var(--transition-quick);
    border-radius: 8px;
    padding: 12px 16px;
}

.category-item:hover {
    transform: translateX(4px);
    background-color: rgba(10, 102, 194, 0.06);
}

.category-icon {
    transition: transform var(--transition-quick);
}

.category-item:hover .category-icon {
    transform: scale(1.1);
}

/* ===== SIGN UP BUTTON GRADIENT ===== */
/* Prominent CTA like Udemy/Coursera */
.btn-cta-signup {
    background: linear-gradient(135deg, var(--primary-purple) 0%, #8710d8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 12px rgba(164, 53, 240, 0.3) !important;
    transition: all var(--transition-smooth) !important;
    position: relative;
    overflow: hidden;
}

.btn-cta-signup::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-cta-signup:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(164, 53, 240, 0.4) !important;
    color: #ffffff !important;
}

.btn-cta-signup:hover::before {
    left: 100%;
}

.btn-cta-signup:active {
    transform: translateY(0) !important;
}

/* Login button - subtle outline */
.btn-outline {
    color: var(--text-dark) !important;
    border: 2px solid var(--border-subtle) !important;
    background: transparent !important;
    padding: 9px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all var(--transition-quick) !important;
}

.btn-outline:hover {
    background: var(--text-dark) !important;
    border-color: var(--text-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ===== AUTH BUTTONS CONTAINER ===== */
/* Enhanced spacing and styling */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(249, 250, 251, 0.6);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(229, 231, 235, 0.8);
    backdrop-filter: blur(8px);
}

/* ===== USER MENU ENHANCEMENTS ===== */
/* Smoother dropdown transitions */
.user-dropdown {
    animation: fadeInUser 200ms ease-out;
}

@keyframes fadeInUser {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.user-dropdown.show {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

/* Dropdown items - enhanced hover */
.dropdown-item {
    transition: all var(--transition-quick);
    border-radius: 6px;
    margin: 2px 8px;
    padding: 10px 12px;
}

.dropdown-item:hover {
    background-color: rgba(10, 102, 194, 0.08);
    color: var(--primary-blue);
    transform: translateX(4px);
}

/* Admin badges - smoother scaling */
.admin-item-badge {
    transition: all var(--transition-quick);
}

.dropdown-item:hover .admin-item-badge {
    transform: scale(1.15);
    filter: brightness(1.1);
}

/* ===== MOBILE MENU TOGGLE BUTTON ===== */
/* Modern hamburger icon */
.mobile-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid var(--border-subtle);
    background: transparent;
    color: var(--text-dark);
    cursor: pointer;
    transition: all var(--transition-quick);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle:hover {
    background-color: rgba(10, 102, 194, 0.08);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.mobile-menu-toggle i {
    font-size: 20px;
    transition: transform var(--transition-quick);
}

.mobile-menu-toggle:hover i {
    transform: scale(1.1);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {

    /* Simplify on mobile */
    .auth-buttons {
        background: transparent;
        padding: 0;
        border: none;
        gap: 8px;
    }

    .btn-outline,
    .btn-cta-signup {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
}

/* Desktop only - extra polish */
@media (min-width: 1024px) {

    /* Subtle logo hover effect */
    .logo-link {
        transition: transform var(--transition-quick);
    }

    .logo-link:hover {
        transform: scale(1.02);
    }

    /* Search bar expand on focus */
    .header-search-section {
        transition: max-width var(--transition-smooth);
    }

    .search-input:focus {
        /* Slight expansion effect */
        padding-left: 24px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-cta-signup {
        border: 2px solid #ffffff !important;
    }

    .nav-link::before {
        height: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .nav-link,
    .dropdown-trigger,
    .category-item,
    .btn-cta-signup,
    .btn-outline,
    .mobile-menu-toggle,
    .search-input {
        transition: none !important;
    }

    .nav-link::before,
    .btn-cta-signup::before {
        transition: none !important;
    }

    @keyframes fadeInDropdown,
    @keyframes fadeInUser {

        from,
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ========================================
   FIX v2.3.15-dev - 2025-12-26

   COMPLETE REWRITE for Mobile Header + Categories

   Issues Fixed:
   1. Categories dropdown - MOVE LEFT on desktop
   2. Mobile logo NOT visible - hamburger is inside .header-actions-section
   3. Mobile menu is EMPTY - content not showing

   Root Cause Analysis:
   - Grid-area approach DOESN'T WORK because hamburger is NOT a direct
     child of .main-header-container (it's inside .header-actions-section)
   - mobile-ux-fixes.css uses right: -100% approach for mobile panel
   - This file was using left: 0 + transform approach (CONFLICT!)

   Solution:
   1. Categories: Add left offset to position more to the left
   2. Mobile: Use FLEXBOX layout (not grid-areas)
   3. Mobile menu: Use SAME right-based approach as mobile-ux-fixes.css
   ======================================== */

/* ===== DESKTOP: Categories Dropdown - Position More to the LEFT ===== */
.dropdown-menu.categories-menu {
    /* Position dropdown more to the left on desktop */
    position: absolute !important;
    left: -100px !important;
    /* MOVE LEFT by 100px */
    right: auto !important;
    min-width: 560px !important;
    width: max-content !important;
    max-width: 640px !important;
    margin-top: 8px !important;
}

.categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px !important;
}

.category-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 12px !important;
}

.category-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    display: block !important;
    max-width: 140px !important;
}

/* ========================================
   MOBILE HEADER LAYOUT v2.3.15 - COMPLETE REWRITE
   Date: 2025-12-26

   HTML Structure Reality:
   <div class="main-header-container">
       <div class="header-logo-section">...</div>         <!-- Child 1 -->
       <div class="header-search-section desktop-only">   <!-- Child 2 - HIDDEN -->
       <div class="header-actions-section">               <!-- Child 3 -->
           <button class="mobile-menu-toggle">            <!-- INSIDE actions! -->
           <div class="categories-dropdown">              <!-- HIDDEN on mobile -->
           <div class="auth-buttons">                     <!-- LOGIN/SIGNUP -->
       </div>
   </div>

   Solution: Use FLEXBOX on .main-header-container with ORDER property
   to visually reorder elements even though hamburger is nested
   ======================================== */

@media (max-width: 768px) {

    /* ===== MAIN HEADER CONTAINER - FLEXBOX LAYOUT ===== */
    .main-header-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        width: 100% !important;
        min-height: 56px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* ===== LOGO SECTION - FIRST (order: 1) ===== */
    .header-logo-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        order: 1 !important;
        /* Second visual position */
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .header-logo-section .logo-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 4px !important;
        text-decoration: none !important;
    }

    /* CRITICAL: Logo image MUST be visible */
    .header-logo-section img.logo-image,
    .header-logo-section .logo-image,
    .logo-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 36px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
    }

    /* Hide logo text on mobile to save space */
    .header-logo-section .logo-text {
        display: none !important;
    }

    /* ===== SEARCH SECTION - HIDE ===== */
    .header-search-section,
    .desktop-only {
        display: none !important;
        visibility: hidden !important;
    }

    /* ===== ACTIONS SECTION - Contains hamburger + categories + auth ===== */
    .header-actions-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        order: 2 !important;
        /* Last visual position */
        flex: 1 1 auto !important;
        gap: 8px !important;
    }

    /* ===== HAMBURGER TOGGLE - First in actions ===== */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: -1 !important;
        /* Move to START of flex container */
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        background: #f7f9fa !important;
        border: 1px solid #e4e8eb !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        margin-right: auto !important;
        /* Push other items to the right */
    }

    .mobile-menu-toggle i {
        font-size: 16px !important;
        color: #1c1d1f !important;
        display: block !important;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background: #e4e8eb !important;
    }

    /* ===== CATEGORIES DROPDOWN - HIDE ON MOBILE ===== */
    .nav-dropdown.categories-dropdown,
    .categories-dropdown,
    .dropdown-trigger.categories-trigger {
        display: none !important;
        visibility: hidden !important;
    }

    /* ===== AUTH BUTTONS - Last in actions ===== */
    .auth-buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Individual auth buttons */
    .auth-buttons .btn,
    .auth-buttons .btn-outline,
    .auth-buttons .btn-primary,
    .auth-buttons .btn-cta-signup,
    .auth-buttons>a,
    .auth-buttons>button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        min-height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border-radius: 6px !important;
    }

    /* Login button - outline style */
    .auth-buttons .btn-outline {
        background: #ffffff !important;
        color: #1c1d1f !important;
        border: 1px solid #1c1d1f !important;
    }

    /* Sign up button - gradient */
    .auth-buttons .btn-primary,
    .auth-buttons .btn-cta-signup {
        background: linear-gradient(135deg, #6C3CE1 0%, #8710d8 100%) !important;
        color: #ffffff !important;
        border: none !important;
    }

    /* Hide icons on mobile buttons */
    .auth-buttons .btn i,
    .auth-buttons .btn .fa,
    .auth-buttons .btn .fas {
        display: none !important;
    }

    /* ===== Categories dropdown on mobile (if shown) ===== */
    .dropdown-menu.categories-menu {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 340px !important;
        top: 60px !important;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .category-label {
        font-size: 12px !important;
        max-width: 120px !important;
    }
}

/* ========================================
   MOBILE MENU PANEL - CONTENT VISIBILITY FIX

   CRITICAL: mobile-ux-fixes.css uses RIGHT-based positioning:
   - Base: right: -100%
   - Open: right: 0

   We OVERRIDE with higher specificity, using SAME approach
   ======================================== */

/* ===== MOBILE MENU PANEL - Override mobile-ux-fixes.css ===== */
nav.mobile-menu-panel.mobile-menu-panel,
.mobile-menu-panel.mobile-menu-panel {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    /* Same approach as mobile-ux-fixes.css */
    left: auto !important;
    /* Override any left positioning */
    width: 300px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-color: #ffffff !important;
    z-index: 100000 !important;
    /* Above everything */
    transform: none !important;
    /* Remove any transform */
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ===== MOBILE MENU PANEL - OPEN STATE ===== */
nav.mobile-menu-panel.mobile-menu-panel.open,
.mobile-menu-panel.mobile-menu-panel.open {
    right: 0 !important;
    visibility: visible !important;
}

/* ===== MOBILE MENU HEADER ===== */
nav.mobile-menu-panel .mobile-menu-header,
.mobile-menu-panel .mobile-menu-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e4e8eb !important;
    background: #f7f9fa !important;
    flex-shrink: 0 !important;
}

nav.mobile-menu-panel .mobile-menu-title,
.mobile-menu-panel .mobile-menu-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1c1d1f !important;
}

nav.mobile-menu-panel .mobile-menu-close,
.mobile-menu-panel .mobile-menu-close {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    color: #1c1d1f !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    font-size: 20px !important;
}

nav.mobile-menu-panel .mobile-menu-close:hover,
.mobile-menu-panel .mobile-menu-close:hover {
    background: #e4e8eb !important;
}

/* ===== MOBILE MENU CONTENT - MUST BE VISIBLE ===== */
nav.mobile-menu-panel .mobile-menu-content,
.mobile-menu-panel .mobile-menu-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
}

/* Force visibility when open */
nav.mobile-menu-panel.open .mobile-menu-content,
.mobile-menu-panel.open .mobile-menu-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== MOBILE SEARCH FORM ===== */
nav.mobile-menu-panel .mobile-search-form,
.mobile-menu-panel .mobile-search-form {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 16px !important;
    gap: 8px !important;
    border-bottom: 1px solid #e4e8eb !important;
    background: #ffffff !important;
}

nav.mobile-menu-panel .mobile-search-form input,
.mobile-menu-panel .mobile-search-form input,
nav.mobile-menu-panel .mobile-search-input,
.mobile-menu-panel .mobile-search-input {
    flex: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 12px 16px !important;
    border: 1px solid #d1d7dc !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background: #f7f9fa !important;
    color: #1c1d1f !important;
}

nav.mobile-menu-panel .mobile-search-form button,
.mobile-menu-panel .mobile-search-form button,
nav.mobile-menu-panel .mobile-search-btn,
.mobile-menu-panel .mobile-search-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 12px 16px !important;
    background: #6C3CE1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== MOBILE NAVIGATION SECTIONS - CRITICAL FIX ===== */
nav.mobile-menu-panel .mobile-nav-section,
.mobile-menu-panel .mobile-nav-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e4e8eb !important;
    background: #ffffff !important;
}

nav.mobile-menu-panel .mobile-nav-section:last-child,
.mobile-menu-panel .mobile-nav-section:last-child {
    border-bottom: none !important;
}

/* Force visibility when panel is open */
nav.mobile-menu-panel.open .mobile-nav-section,
.mobile-menu-panel.open .mobile-nav-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== SECTION TITLES ===== */
nav.mobile-menu-panel .mobile-nav-section-title,
.mobile-menu-panel .mobile-nav-section-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 12px 20px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6a6f73 !important;
    background: #ffffff !important;
}

/* ===== NAVIGATION LINKS - CRITICAL: MUST BE VISIBLE ===== */
nav.mobile-menu-panel .mobile-nav-link,
.mobile-menu-panel .mobile-nav-link,
.mobile-menu-panel a.mobile-nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    color: #1c1d1f !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    min-height: 48px !important;
    transition: background 0.15s ease !important;
}

/* Force visibility when open */
nav.mobile-menu-panel.open .mobile-nav-link,
.mobile-menu-panel.open .mobile-nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav.mobile-menu-panel .mobile-nav-link:hover,
.mobile-menu-panel .mobile-nav-link:hover {
    background: #f7f9fa !important;
    color: #6C3CE1 !important;
}

nav.mobile-menu-panel .mobile-nav-link i,
.mobile-menu-panel .mobile-nav-link i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    text-align: center !important;
    color: #6a6f73 !important;
    font-size: 14px !important;
}

nav.mobile-menu-panel .mobile-nav-link:hover i,
.mobile-menu-panel .mobile-nav-link:hover i {
    color: #6C3CE1 !important;
}

/* ===== MOBILE AUTH SECTION ===== */
nav.mobile-menu-panel .mobile-auth-section,
.mobile-menu-panel .mobile-auth-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 16px !important;
    background: #f7f9fa !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.mobile-auth-section .btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.mobile-auth-section .btn-outline {
    background: #ffffff !important;
    color: #1c1d1f !important;
    border: 2px solid #1c1d1f !important;
}

.mobile-auth-section .btn-primary {
    background: linear-gradient(135deg, #6C3CE1 0%, #8710d8 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

/* ===== MOBILE MENU OVERLAY ===== */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-menu-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== VERY SMALL SCREENS ===== */
@media (max-width: 360px) {
    .mobile-menu-panel {
        width: 260px !important;
    }

    .auth-buttons .btn {
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    nav.mobile-menu-panel .mobile-nav-link,
    .mobile-menu-panel .mobile-nav-link {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    nav.mobile-menu-panel .mobile-nav-section-title,
    .mobile-menu-panel .mobile-nav-section-title {
        padding: 8px 16px 6px !important;
        font-size: 10px !important;
    }
}

/* ===== ACCESSIBILITY: Focus States ===== */
.mobile-menu-close:focus,
.mobile-nav-link:focus,
.mobile-search-form input:focus,
.mobile-search-form button:focus,
.mobile-menu-toggle:focus {
    outline: 2px solid #6C3CE1 !important;
    outline-offset: 2px !important;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    nav.mobile-menu-panel.mobile-menu-panel,
    .mobile-menu-panel.mobile-menu-panel,
    .mobile-menu-overlay {
        transition: none !important;
    }
}

/* ============================================================
   v2.3.17 CRITICAL MOBILE FIXES - Based on Web Research
   Sources:
   - https://github.com/philipwalton/flexbugs (flex-shrink: 0)
   - https://ishadeed.com/article/website-headers-flexbox/ (flex-wrap)
   - https://allwebco-templates.com/support/S-responsive-mobile-hidden.htm (specificity)
   ============================================================ */

/* ===== FIX #1: MOBILE LOGO VISIBILITY ===== */
/* Problem: Logo disappears on mobile due to flex shrinking and display:none overrides */
/* Solution: Use flex-shrink: 0 to prevent shrinking, explicit dimensions, max specificity */

@media screen and (max-width: 768px) {

    /* Force logo section visibility with highest specificity */
    html body .main-header .main-header-container .header-logo-section,
    html body .header-logo-section,
    .main-header-container>.header-logo-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        min-width: 120px !important;
        height: auto !important;
        align-items: center !important;
        order: 2 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Force logo link visibility */
    html body .header-logo-section .logo-link,
    html body .logo-link,
    .header-logo-section>.logo-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
    }

    /* Force logo image visibility - Critical fix */
    html body .header-logo-section .logo-image,
    html body .logo-image,
    html body img.logo-image,
    .logo-link>img.logo-image,
    .header-logo-section img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 40px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
    }

    /* Logo text visible on mobile */
    html body .header-logo-section .logo-text,
    html body .logo-text {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
    }
}

/* ===== FIX #2: BUTTONS INSIDE HEADER BAR ===== */
/* Problem: Buttons escape header container on mobile */
/* Solution: Proper flexbox containment with flex-wrap and overflow control */

@media screen and (max-width: 768px) {

    /* Main header must contain all children */
    html body header.main-header,
    html body .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 56px !important;
        max-height: auto !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 99999 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Header container - flexbox row with proper alignment */
    html body .main-header-container,
    html body .main-header .main-header-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    /* Actions section (contains hamburger, categories, login buttons) */
    html body .header-actions-section,
    html body .main-header .header-actions-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        order: 3 !important;
        height: 100% !important;
        max-height: 56px !important;
    }

    /* Mobile hamburger toggle - first in visual order */
    html body .mobile-menu-toggle,
    html body button.mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 8px !important;
        background: #f5f5f5 !important;
        color: #333 !important;
        font-size: 18px !important;
        cursor: pointer !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Hide categories dropdown on mobile (it's in the mobile menu) */
    html body .categories-dropdown,
    html body .nav-dropdown.categories-dropdown {
        display: none !important;
    }

    /* Auth buttons container */
    html body .auth-buttons,
    html body .header-actions-section .auth-buttons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }

    /* Login/Sign Up buttons - compact on mobile */
    html body .auth-buttons .btn,
    html body .auth-buttons a.btn,
    html body .auth-buttons button.btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-height: 32px !important;
        max-height: 36px !important;
    }

    /* Login button - outline style */
    html body .auth-buttons .btn-outline,
    html body .auth-buttons .btn-login {
        background: transparent !important;
        border: 1px solid #6C3CE1 !important;
        color: #6C3CE1 !important;
    }

    /* Sign Up button - filled style */
    html body .auth-buttons .btn-primary,
    html body .auth-buttons .btn-signup {
        background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%) !important;
        border: none !important;
        color: #ffffff !important;
    }

    /* Hide search on mobile */
    html body .header-search-section,
    html body .desktop-only {
        display: none !important;
    }
}

/* ===== FIX #3: MOBILE MENU CONTENT VISIBILITY ===== */
/* Problem: Menu opens but content is invisible/hidden */
/* Solution: Maximum specificity CSS with explicit visibility on all child elements */

@media screen and (max-width: 768px) {

    /* Mobile menu panel - slide from right */
    html body nav.mobile-menu-panel,
    html body .mobile-menu-panel,
    nav.mobile-menu-panel.mobile-menu-panel.mobile-menu-panel {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 100001 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: right 0.3s ease-in-out !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Mobile menu panel OPEN state */
    html body nav.mobile-menu-panel.open,
    html body .mobile-menu-panel.open,
    nav.mobile-menu-panel.mobile-menu-panel.mobile-menu-panel.open {
        right: 0 !important;
    }

    /* Mobile menu header (logo + close button) */
    html body .mobile-menu-panel .mobile-menu-header,
    html body .mobile-menu-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px !important;
        border-bottom: 1px solid #e5e7eb !important;
        flex-shrink: 0 !important;
        min-height: 60px !important;
        background: #ffffff !important;
    }

    /* Mobile menu close button */
    html body .mobile-menu-panel .mobile-menu-close,
    html body .mobile-menu-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        border-radius: 50% !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        font-size: 16px !important;
        cursor: pointer !important;
    }

    /* CRITICAL: Mobile menu content container */
    html body .mobile-menu-panel .mobile-menu-content,
    html body .mobile-menu-content,
    .mobile-menu-panel.open>.mobile-menu-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 !important;
        background: #ffffff !important;
        width: 100% !important;
    }

    /* CRITICAL: Navigation sections */
    html body .mobile-menu-panel .mobile-nav-section,
    html body .mobile-nav-section,
    .mobile-menu-content>.mobile-nav-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        width: 100% !important;
    }

    /* Section titles */
    html body .mobile-menu-panel .mobile-nav-section-title,
    html body .mobile-nav-section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 16px 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #9ca3af !important;
    }

    /* CRITICAL: Navigation links - MUST BE VISIBLE */
    html body .mobile-menu-panel .mobile-nav-link,
    html body .mobile-nav-link,
    html body a.mobile-nav-link,
    .mobile-nav-section>a.mobile-nav-link,
    .mobile-menu-content a.mobile-nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        color: #374151 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: background 0.15s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
    }

    html body .mobile-menu-panel .mobile-nav-link:hover,
    html body .mobile-nav-link:hover {
        background: #f9fafb !important;
        color: #6C3CE1 !important;
    }

    /* Navigation link icons */
    html body .mobile-menu-panel .mobile-nav-link i,
    html body .mobile-nav-link i,
    html body .mobile-nav-link .fa,
    html body .mobile-nav-link .fas {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
    }

    /* Mobile menu overlay backdrop */
    html body .mobile-menu-overlay,
    .mobile-menu-overlay.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 100000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    html body .mobile-menu-overlay.active,
    .mobile-menu-panel.open~.mobile-menu-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile search form in menu */
    html body .mobile-menu-panel .mobile-search-form,
    html body .mobile-search-form {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    /* Search input wrapper */
    html body .mobile-search-form .search-input-wrapper,
    .mobile-search-form>.search-input-wrapper {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        background: #f9fafb !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        overflow: hidden !important;
    }

    /* Search input */
    html body .mobile-search-form input,
    .mobile-search-form input[type="search"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 !important;
        padding: 10px 12px !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        outline: none !important;
    }

    /* Search button */
    html body .mobile-search-form button,
    .mobile-search-form button[type="submit"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        padding: 10px !important;
        border: none !important;
        background: transparent !important;
        color: #6b7280 !important;
        cursor: pointer !important;
    }

    /* Mobile menu footer (if exists) */
    html body .mobile-menu-panel .mobile-menu-footer,
    html body .mobile-menu-footer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        padding: 16px !important;
        margin-top: auto !important;
        border-top: 1px solid #e5e7eb !important;
        background: #f9fafb !important;
    }
}

/* ===== TABLET ADJUSTMENTS ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    html body .main-header-container {
        padding: 0 16px !important;
    }

    html body .auth-buttons .btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    html body .mobile-menu-panel {
        max-width: 350px !important;
    }
}

/* ===== SMALL MOBILE (under 380px) ===== */
@media screen and (max-width: 380px) {
    html body .main-header-container {
        padding: 0 8px !important;
        gap: 4px !important;
    }

    html body .header-logo-section {
        min-width: 100px !important;
    }

    html body .logo-image {
        height: 28px !important;
    }

    html body .logo-text {
        font-size: 14px !important;
    }

    html body .auth-buttons .btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    html body .mobile-menu-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   v2.3.18 CRITICAL MOBILE FIXES - Research-Based Solutions

   Sources Used:
   - https://github.com/philipwalton/flexbugs (min-width: 0 pattern)
   - https://www.smashingmagazine.com/2021/04/css-overflow-issues/ (overflow fixes)
   - https://codyhouse.co/gem/css-slide-in-panel/ (visibility transition pattern)
   - https://apeatling.com/articles/building-smooth-sliding-mobile-menu/ (translate3d)
   - https://dev.to/martyhimmel/quick-tip-to-stop-flexbox-from-overflowing-peb

   Key Findings:
   1. CSS selector mismatch: HTML uses .mobile-menu-backdrop, not .mobile-menu-overlay
   2. Flexbox children need min-width: 0 to prevent overflow
   3. translate3d provides hardware acceleration for smooth animations
   4. Visibility needs proper transition timing pattern
   ============================================================ */

/* ===== v2.3.18 FIX #1: HEADER OVERFLOW CONTAINMENT ===== */
/* Problem: Header children escape the white bar on mobile */
/* Solution: Proper overflow control + min-width: 0 on all flex children */

@media screen and (max-width: 768px) {

    /* Main header - absolute containment */
    html body .main-header,
    html body header.main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-height: 56px !important;
        height: 56px !important;
        max-height: 56px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        z-index: 99999 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Header container - strict containment */
    html body .main-header-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 56px !important;
        max-height: 56px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        /* CRITICAL: Prevent children from overflowing */
        overflow: hidden !important;
        /* CRITICAL: Force children into single row */
        min-width: 0 !important;
    }

    /* ALL direct children must have min-width: 0 (flexbug fix) */
    html body .main-header-container>* {
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Logo section - left side */
    html body .header-logo-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        order: 2 !important;
        min-width: 0 !important;
        max-width: 150px !important;
        height: 100% !important;
    }

    /* Logo link */
    html body .header-logo-section .logo-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
        min-width: 0 !important;
    }

    /* Logo image */
    html body .header-logo-section .logo-image,
    html body .logo-link img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: 28px !important;
        max-height: 32px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
    }

    /* Logo text */
    html body .header-logo-section .logo-text {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Actions section - right side, contains hamburger + auth buttons */
    html body .header-actions-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        order: 3 !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 56px !important;
    }

    /* Hide search and desktop-only elements */
    html body .header-search-section,
    html body .desktop-only {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ===== v2.3.18 FIX #2: HAMBURGER BUTTON VISIBILITY ===== */
/* Problem: Hamburger button not visible or outside header */
/* Solution: Explicit flex properties + visibility enforcement */

@media screen and (max-width: 768px) {

    html body .mobile-menu-toggle,
    html body button.mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 8px !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        z-index: 10 !important;
        position: relative !important;
    }

    /* Hamburger icon */
    html body .mobile-menu-toggle i,
    html body .mobile-menu-toggle .fa,
    html body .mobile-menu-toggle .fas {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 18px !important;
        color: inherit !important;
        line-height: 1 !important;
    }

    /* Hide categories dropdown on mobile */
    html body .categories-dropdown,
    html body .nav-dropdown.categories-dropdown,
    html body .categories-backdrop {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ===== v2.3.18 FIX #3: AUTH BUTTONS INSIDE HEADER ===== */
/* Problem: Login/Sign Up buttons escape the header bar */
/* Solution: Strict size constraints + no-wrap */

@media screen and (max-width: 768px) {

    /* Auth buttons container */
    html body .auth-buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        order: 2 !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 40px !important;
    }

    /* Individual auth buttons */
    html body .auth-buttons .btn,
    html body .auth-buttons a.btn,
    html body .auth-buttons a.btn-outline,
    html body .auth-buttons a.btn-primary {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        min-height: 32px !important;
        max-height: 36px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* Hide button icons on mobile to save space */
    html body .auth-buttons .btn i,
    html body .auth-buttons .btn .fa,
    html body .auth-buttons .btn .fas {
        display: none !important;
    }

    /* Login button (outline) */
    html body .auth-buttons .btn-outline {
        background: transparent !important;
        border: 1.5px solid #6C3CE1 !important;
        color: #6C3CE1 !important;
    }

    /* Sign Up button (filled) */
    html body .auth-buttons .btn-primary,
    html body .auth-buttons .btn-cta-signup {
        background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%) !important;
        border: none !important;
        color: #ffffff !important;
    }
}

/* ===== v2.3.18 FIX #4: MOBILE MENU BACKDROP (CLASS NAME FIX!) ===== */
/* Problem: CSS targeted .mobile-menu-overlay but HTML uses .mobile-menu-backdrop */
/* Solution: Target CORRECT class name */

@media screen and (max-width: 768px) {

    /* CORRECT class name: mobile-menu-backdrop (from MainLayout.razor line 428) */
    html body .mobile-menu-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 100000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
    }
}

/* ===== v2.3.18 FIX #5: MOBILE MENU PANEL WITH translate3d ===== */
/* Problem: Menu opens but content not visible */
/* Solution: Use translate3d for hardware acceleration + proper visibility pattern */

@media screen and (max-width: 768px) {

    /* Mobile menu panel - slide from LEFT using translate3d */
    html body nav.mobile-menu-panel,
    html body .mobile-menu-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 100001 !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        /* Use translate3d for hardware acceleration (better performance) */
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        /* Visibility pattern from CodyHouse */
        visibility: hidden !important;
        /* Flex column for content layout */
        display: flex !important;
        flex-direction: column !important;
    }

    /* Menu panel OPEN state */
    html body nav.mobile-menu-panel.open,
    html body .mobile-menu-panel.open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
    }

    /* Menu header */
    html body .mobile-menu-panel .mobile-menu-header,
    html body .mobile-menu-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px !important;
        min-height: 60px !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }

    /* Menu title */
    html body .mobile-menu-header .mobile-menu-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
    }

    /* Close button */
    html body .mobile-menu-panel .mobile-menu-close,
    html body .mobile-menu-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        border-radius: 50% !important;
        background: #f3f4f6 !important;
        color: #374151 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
}

/* ===== v2.3.18 FIX #6: MOBILE MENU CONTENT VISIBILITY ===== */
/* Problem: Menu content sections not showing even when panel opens */
/* Solution: Force visibility on ALL content children with maximum specificity */

@media screen and (max-width: 768px) {

    /* Content container - MUST be visible and scrollable */
    html body .mobile-menu-panel .mobile-menu-content,
    html body .mobile-menu-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0 !important;
        background: #ffffff !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    /* Search form in menu */
    html body .mobile-menu-panel .mobile-search-form,
    html body .mobile-search-form {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #f3f4f6 !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }

    html body .mobile-search-form input,
    html body .mobile-search-input {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 !important;
        padding: 10px 12px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px 0 0 8px !important;
        background: #f9fafb !important;
        font-size: 14px !important;
        outline: none !important;
    }

    html body .mobile-search-form button,
    html body .mobile-search-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        padding: 10px !important;
        border: 1px solid #e5e7eb !important;
        border-left: none !important;
        border-radius: 0 8px 8px 0 !important;
        background: #f9fafb !important;
        color: #6b7280 !important;
        cursor: pointer !important;
    }

    /* Navigation sections - CRITICAL: Force visibility */
    html body .mobile-menu-panel .mobile-nav-section,
    html body .mobile-nav-section,
    html body .mobile-menu-content .mobile-nav-section,
    .mobile-menu-content>.mobile-nav-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    /* Section titles */
    html body .mobile-menu-panel .mobile-nav-section-title,
    html body .mobile-nav-section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 16px 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #9ca3af !important;
        background: #ffffff !important;
    }

    /* Navigation links - CRITICAL: Maximum visibility */
    html body .mobile-menu-panel .mobile-nav-link,
    html body .mobile-nav-link,
    html body a.mobile-nav-link,
    html body button.mobile-nav-link,
    .mobile-nav-section>a.mobile-nav-link,
    .mobile-nav-section>button.mobile-nav-link,
    .mobile-menu-content a.mobile-nav-link,
    .mobile-menu-content button.mobile-nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        color: #374151 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        width: 100% !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: none !important;
        cursor: pointer !important;
        text-align: left !important;
    }

    /* Link icons */
    html body .mobile-nav-link i,
    html body .mobile-nav-link .fa,
    html body .mobile-nav-link .fas,
    html body .mobile-nav-link .fab {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
    }

    /* Link text (span inside links) */
    html body .mobile-nav-link span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: inherit !important;
    }

    /* Mobile auth section */
    html body .mobile-auth-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        background: #f9fafb !important;
    }

    /* Mobile auth buttons */
    html body .mobile-auth-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }

    html body .mobile-login-btn {
        background: #ffffff !important;
        border: 2px solid #6C3CE1 !important;
        color: #6C3CE1 !important;
    }

    html body .mobile-signup-btn {
        background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%) !important;
        border: none !important;
        color: #ffffff !important;
    }

    /* User section in mobile menu */
    html body .mobile-user-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        background: #f9fafb !important;
    }

    html body .mobile-user-info {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 16px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    html body .mobile-user-avatar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #e5e7eb !important;
        font-size: 24px !important;
        color: #6b7280 !important;
    }

    html body .mobile-user-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }

    html body .mobile-logout-btn {
        color: #dc2626 !important;
    }
}

/* ===== v2.3.18 VERY SMALL SCREENS (< 360px) ===== */
@media screen and (max-width: 360px) {
    html body .main-header-container {
        padding: 0 6px !important;
        gap: 4px !important;
    }

    html body .header-logo-section {
        max-width: 120px !important;
    }

    html body .logo-image {
        height: 24px !important;
    }

    html body .logo-text {
        font-size: 13px !important;
    }

    html body .mobile-menu-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    html body .auth-buttons .btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    html body .mobile-menu-panel {
        width: 260px !important;
    }
}

/* ==============================================================================
   v2.3.19 CRITICAL FIXES - MOBILE MENU CONTENT + HEADER BUTTONS
   ==============================================================================
   Issues Fixed:
   1. Mobile menu opens but content is EMPTY (only header visible)
   2. Header buttons overflow on small screens (Sign Up cut off)

   Root Causes Identified (via web research):
   - overflow: hidden on .mobile-menu-panel (line 1824) CLIPS scrollable children
   - Flexbug #3: flex children need min-height: 0 for scroll to work
   - Buttons lack min-width: 0 and compact sizing for <400px screens

   Sources:
   - CSS-Tricks: https://css-tricks.com/preventing-a-grid-blowout/
   - Stack Overflow: flex child min-height: 0 pattern
   - Ahmad Shadeed: https://ishadeed.com/article/website-headers-flexbox/
   ============================================================================== */

/* ===== v2.3.19 FIX #1: MOBILE MENU PANEL OVERFLOW FIX ===== */
/* Problem: overflow: hidden clips the scrollable content area */
/* Solution: Change to overflow: visible and let content handle scroll */

@media screen and (max-width: 768px) {

    /* Override the overflow: hidden that clips content */
    html body nav.mobile-menu-panel,
    html body .mobile-menu-panel,
    html body div.mobile-menu-panel {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* When menu is OPEN, panel must be visible */
    html body nav.mobile-menu-panel.open,
    html body .mobile-menu-panel.open,
    html body div.mobile-menu-panel.open {
        overflow: visible !important;
    }
}

/* ===== v2.3.19 FIX #2: MOBILE MENU CONTENT SCROLL FIX (FLEXBUG #3) ===== */
/* Problem: Flex children can't scroll without min-height: 0 */
/* Solution: Apply min-height: 0 to all flex children in the menu */

@media screen and (max-width: 768px) {

    /* Content container - MUST have min-height: 0 for flex scroll */
    html body .mobile-menu-panel .mobile-menu-content,
    html body .mobile-menu-content,
    html body div.mobile-menu-content {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* CRITICAL: Flexbug #3 fix - allows shrinking for scroll */
        min-height: 0 !important;
        flex: 1 1 0 !important;
        /* Scroll within content, not panel */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Full dimensions */
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
        /* Ensure background is visible */
        background-color: #ffffff !important;
        padding: 0 !important;
    }

    /* Force all direct children to be visible */
    html body .mobile-menu-content>*,
    html body .mobile-menu-panel .mobile-menu-content>* {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
}

/* ===== v2.3.19 FIX #3: FORCE NAVIGATION SECTIONS VISIBLE ===== */
/* Maximum specificity to override any hidden rules */

@media screen and (max-width: 768px) {

    /* Navigation sections */
    html body .mobile-menu-panel.open .mobile-nav-section,
    html body .mobile-menu-content .mobile-nav-section,
    html body div.mobile-menu-content div.mobile-nav-section,
    html body .mobile-nav-section {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: auto !important;
        background-color: #ffffff !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    /* Section titles */
    html body .mobile-menu-panel.open .mobile-nav-section-title,
    html body .mobile-nav-section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 16px 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #9ca3af !important;
    }

    /* Navigation links - MOST CRITICAL */
    html body .mobile-menu-panel.open .mobile-nav-link,
    html body .mobile-menu-content .mobile-nav-link,
    html body a.mobile-nav-link,
    html body button.mobile-nav-link,
    html body div.mobile-nav-section a.mobile-nav-link,
    html body div.mobile-nav-section button.mobile-nav-link,
    html body .mobile-nav-link {
        display: flex !important;
        flex-direction: row !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 14px 16px !important;
        color: #374151 !important;
        text-decoration: none !important;
        background-color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Link icons */
    html body .mobile-nav-link i,
    html body .mobile-nav-link .fa,
    html body .mobile-nav-link svg {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 20px !important;
        height: 20px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
    }

    /* Link text */
    html body .mobile-nav-link span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hover state */
    html body .mobile-nav-link:hover {
        background-color: #f9fafb !important;
        color: #1a1a2e !important;
    }
}

/* ===== v2.3.19 FIX #4: USER SECTION IN MOBILE MENU ===== */
@media screen and (max-width: 768px) {

    html body .mobile-menu-panel.open .mobile-user-section,
    html body .mobile-user-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 16px !important;
        border-bottom: 1px solid #e5e7eb !important;
        background-color: #f9fafb !important;
    }

    html body .mobile-user-avatar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background-color: #e5e7eb !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
    }

    html body .mobile-user-info {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    html body .mobile-user-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }

    html body .mobile-user-email {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13px !important;
        color: #6b7280 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ===== v2.3.19 FIX #5: HEADER BUTTONS COMPACT SIZING ===== */
/* Problem: Login/Sign Up buttons overflow header on small screens */
/* Solution: More aggressive compact sizing with min-width: 0 */

@media screen and (max-width: 768px) {

    /* Auth buttons container */
    html body .auth-buttons,
    html body .header-auth-section {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        /* CRITICAL: Allow buttons to shrink */
        min-width: 0 !important;
    }

    /* All buttons - compact baseline */
    html body .auth-buttons .btn,
    html body .header-auth-section .btn,
    html body .auth-buttons a,
    html body .auth-buttons button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Compact dimensions */
        padding: 6px 12px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        /* Allow shrinking */
        min-width: 0 !important;
        flex-shrink: 1 !important;
        /* Remove any minimum widths */
        width: auto !important;
        /* Smaller border radius for compact look */
        border-radius: 6px !important;
        /* Single line */
        white-space: nowrap !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }

    /* Login button - outline style */
    html body .auth-buttons .btn-outline,
    html body .btn-login {
        background-color: transparent !important;
        border: 1px solid #d1d5db !important;
        color: #374151 !important;
    }

    /* Sign Up button - primary style */
    html body .auth-buttons .btn-primary,
    html body .btn-signup {
        background-color: #6C3CE1 !important;
        background: linear-gradient(135deg, #6C3CE1, #5a2dc7) !important;
        border: none !important;
        color: #ffffff !important;
    }
}

/* ===== v2.3.19 FIX #6: SMALL SCREENS (360px - 400px) ===== */
@media screen and (max-width: 400px) {
    html body .main-header-container {
        padding: 0 8px !important;
        gap: 6px !important;
    }

    /* More compact buttons */
    html body .auth-buttons .btn,
    html body .auth-buttons a,
    html body .auth-buttons button {
        padding: 5px 10px !important;
        font-size: 12px !important;
        gap: 4px !important;
    }

    /* Compact logo */
    html body .header-logo-section {
        max-width: 110px !important;
    }

    html body .logo-text {
        font-size: 14px !important;
    }

    html body .logo-image {
        height: 26px !important;
    }

    /* Smaller hamburger */
    html body .mobile-menu-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}

/* ===== v2.3.19 FIX #7: VERY SMALL SCREENS (320px - 360px) ===== */
@media screen and (max-width: 360px) {
    html body .main-header-container {
        padding: 0 6px !important;
        gap: 4px !important;
    }

    /* Ultra compact buttons */
    html body .auth-buttons {
        gap: 4px !important;
    }

    html body .auth-buttons .btn,
    html body .auth-buttons a,
    html body .auth-buttons button {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* Consider hiding text on very small screens */
    html body .auth-buttons .btn-text {
        display: none !important;
    }

    /* Ultra compact logo */
    html body .header-logo-section {
        max-width: 100px !important;
    }

    html body .logo-text {
        font-size: 13px !important;
    }

    html body .logo-image {
        height: 24px !important;
    }
}

/* ===== v2.3.19 FIX #8: ULTRA SMALL SCREENS (< 320px) ===== */
@media screen and (max-width: 320px) {
    html body .main-header-container {
        padding: 0 4px !important;
        gap: 2px !important;
    }

    /* Minimum viable buttons */
    html body .auth-buttons .btn,
    html body .auth-buttons a,
    html body .auth-buttons button {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }

    /* Hide secondary button text if needed */
    html body .auth-buttons .btn-outline .btn-text,
    html body .btn-login .btn-text {
        display: none !important;
    }

    /* Minimal logo */
    html body .header-logo-section {
        max-width: 80px !important;
    }

    html body .logo-text {
        font-size: 12px !important;
    }

    /* Smaller menu panel for tiny screens */
    html body .mobile-menu-panel {
        width: 240px !important;
        max-width: 90vw !important;
    }
}

/* ========================================
   v2.3.20 FIX - TABLET RESPONSIVE (768px - 1024px)
   Date: 2026-02-04
   
   Fixes overlapping header elements on tablet/small laptop screens
   where search box and Categories button were overlapping
   ======================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* Tablet header container - more compact */
    html body .main-header-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }

    /* Logo section - compact */
    html body .header-logo-section {
        flex: 0 0 auto !important;
        max-width: 150px !important;
    }

    html body .logo-text {
        font-size: 15px !important;
    }

    html body .logo-image {
        height: 32px !important;
    }

    /* Search section - flexible but limited */
    html body .header-search-section {
        flex: 1 1 auto !important;
        min-width: 180px !important;
        max-width: 300px !important;
    }

    html body .header-search-section .search-input {
        width: 100% !important;
        max-width: 280px !important;
        font-size: 13px !important;
        padding: 0 40px 0 14px !important;
        height: 38px !important;
    }

    /* Actions section - compact */
    html body .header-actions-section {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Categories dropdown - smaller trigger */
    html body .categories-dropdown .dropdown-trigger,
    html body .categories-trigger {
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    html body .categories-trigger .chevron-icon {
        margin-left: 4px !important;
    }

    /* Hide Categories text, show only icon on smaller tablets */
    @media screen and (max-width: 900px) {
        html body .categories-trigger .trigger-text {
            display: none !important;
        }

        html body .categories-trigger {
            padding: 8px 10px !important;
        }
    }

    /* Auth buttons - compact */
    html body .auth-buttons {
        gap: 6px !important;
        padding: 4px 8px !important;
    }

    html body .auth-buttons .btn,
    html body .auth-buttons a.btn,
    html body .auth-buttons button.btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Hide button icons on tablet to save space */
    html body .auth-buttons .btn i,
    html body .auth-buttons .btn .fa,
    html body .auth-buttons .btn .fas {
        display: none !important;
    }

    /* Categories menu - adjust for tablet */
    html body .dropdown-menu.categories-menu {
        left: -50px !important;
        min-width: 480px !important;
        max-width: 560px !important;
    }

    html body .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ===== v2.3.20 FIX #2: SMALL TABLET (768px - 850px) ===== */
/* CRITICAL: Uses highest specificity to override all other rules */
@media screen and (min-width: 769px) and (max-width: 850px) {

    /* FORCE hide search on small tablets */
    html body .main-header .header-search-section,
    html body .main-header-container .header-search-section,
    .main-header .header-search-section,
    .header-search-section.desktop-only,
    .header-search-section {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* FORCE hide categories dropdown on small tablets */
    html body .main-header .categories-dropdown,
    html body .main-header-container .categories-dropdown,
    html body .header-actions-section .categories-dropdown,
    .categories-dropdown,
    .nav-dropdown.categories-dropdown {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        opacity: 0 !important;
    }

    /* FORCE show mobile menu toggle */
    html body .main-header .mobile-menu-toggle,
    html body .header-actions-section .mobile-menu-toggle,
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: -1 !important;
        margin-right: auto !important;
    }

    /* Header container layout - simplified flexbox */
    html body .main-header-container,
    .main-header-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }

    /* Logo takes flexible space */
    html body .header-logo-section,
    .header-logo-section {
        flex: 1 1 auto !important;
        order: 1 !important;
    }

    /* Auth buttons stay compact */
    html body .auth-buttons,
    .auth-buttons {
        flex: 0 0 auto !important;
        order: 2 !important;
        display: flex !important;
        gap: 6px !important;
    }

    html body .auth-buttons .btn,
    .auth-buttons .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ===== v2.3.20 FIX #3: MEDIUM TABLET (851px - 1024px) ===== */
@media screen and (min-width: 851px) and (max-width: 1024px) {

    /* Search section - limit width to prevent overlap */
    html body .header-search-section,
    .header-search-section {
        flex: 0 1 220px !important;
        max-width: 220px !important;
        min-width: 160px !important;
    }

    html body .search-input,
    .search-input {
        max-width: 200px !important;
        padding-left: 12px !important;
        padding-right: 36px !important;
        font-size: 12px !important;
        height: 36px !important;
    }

    /* Categories trigger - compact */
    html body .categories-trigger,
    html body .dropdown-trigger.categories-trigger,
    .categories-trigger {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Hide Categories text, icon only */
    html body .categories-trigger .trigger-text,
    .categories-trigger .trigger-text {
        display: none !important;
    }

    /* Compact auth buttons */
    html body .auth-buttons,
    .auth-buttons {
        gap: 4px !important;
        padding: 0 !important;
    }

    html body .auth-buttons .btn,
    .auth-buttons .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Hide button icons */
    html body .auth-buttons .btn i,
    .auth-buttons .btn i {
        display: none !important;
    }

    /* Container - tighter layout */
    html body .main-header-container,
    .main-header-container {
        gap: 8px !important;
        padding: 0 12px !important;
    }
}