/**
 * Mobile Header Responsiveness Fix
 * Fixes header layout issues on mobile devices without affecting desktop
 */

/* ===== MOBILE HEADER FIXES ===== */
/* IMPORTANT: Only apply these fixes on mobile devices */

/* Mobile-specific header improvements */
@media (max-width: 991px) {
    /* Fix header height and spacing */
    #header #dor-header01 .header-top {
        min-height: auto !important;
        padding: 8px 0 !important;
    }
    
    /* Logo container fixes */
    .allani-logo-col {
        padding: 8px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .main-logo-inner {
        width: 100% !important;
        max-width: 180px !important;
    }
    
    .main-logo-inner img.logo {
        max-height: 45px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Search column fixes */
    .allani-search-col {
        padding: 8px 15px !important;
        order: 3 !important; /* Move search to bottom on mobile */
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Actions column fixes */
    .allani-actions-col {
        padding: 8px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    
    /* Header navigation fixes */
    .allani-header-nav {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .allani-right-nav {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .allani-right-nav > div {
        padding: 8px 6px !important;
        margin: 0 !important;
    }
    
    /* Cart and user icons */
    .allani-nav-cart {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Mobile menu button */
    #menu-icon {
        padding: 8px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #menu-icon i {
        font-size: 24px !important;
        color: #333 !important;
    }
    
    /* Header row layout */
    .allani-header-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin: 0 -15px !important;
    }
}

@media (max-width: 767px) {
    /* Extra small screens - more compact */
    #header #dor-header01 .header-top {
        padding: 6px 0 !important;
    }
    
    .main-logo-inner {
        max-width: 150px !important;
    }
    
    .main-logo-inner img.logo {
        max-height: 40px !important;
    }
    
    .allani-logo-col,
    .allani-actions-col {
        padding: 6px 15px !important;
    }
    
    .allani-search-col {
        padding: 10px 15px !important;
        margin-top: 8px !important;
    }
    
    /* Smaller icons on very small screens */
    .allani-right-nav > div {
        padding: 6px 4px !important;
    }
    
    .allani-right-nav i {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    /* Very small screens - ultra compact */
    .main-logo-inner {
        max-width: 130px !important;
    }
    
    .main-logo-inner img.logo {
        max-height: 35px !important;
    }
    
    .allani-right-nav > div {
        padding: 4px 3px !important;
    }
    
    .allani-right-nav i {
        font-size: 16px !important;
    }
}

/* ===== HEADER BOTTOM FIXES ===== */

@media (max-width: 991px) {
    /* Navigation strip mobile fixes */
    #allani-nav-row {
        padding: 0 !important;
    }
    
    #allani-nav-strip {
        padding: 6px 15px !important;
        gap: 2px !important;
    }
    
    .allani-nav-pill {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }
    
    /* Header bottom spacing */
    .allani-header-bottom {
        padding: 8px 0 !important;
    }
    
    .allani-header-bottom-row {
        margin: 0 -15px !important;
    }
    
    /* Vertical menu mobile adjustments */
    .allani-mainmenu-col {
        padding: 0 15px !important;
    }
}

@media (max-width: 767px) {
    #allani-nav-strip {
        padding: 4px 15px !important;
    }
    
    .allani-nav-pill {
        font-size: 0.7rem !important;
        padding: 5px 6px !important;
    }
}

/* ===== SEARCH BAR MOBILE FIXES ===== */

@media (max-width: 991px) {
    /* Search form improvements */
    .dor-search-categories-wrapper,
    .dorHeaderSearch-Wapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .dor-search-categories-wrapper input,
    .dorHeaderSearch-Wapper input {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }
    
    .dor-search-categories-wrapper button,
    .dorHeaderSearch-Wapper button {
        padding: 8px 12px !important;
        border-radius: 6px !important;
    }
}

/* ===== PREVENT HORIZONTAL SCROLL ===== */

@media (max-width: 991px) {
    .allani-header {
        overflow-x: hidden !important;
    }
    
    .allani-header-main {
        overflow-x: hidden !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
}

/* ===== MOBILE MENU IMPROVEMENTS ===== */

@media (max-width: 991px) {
    .allani-mobile-top-menu {
        background: #fff !important;
        border-top: 1px solid #e4d8c0 !important;
        padding: 10px 0 !important;
        margin-top: 8px !important;
    }
    
    .allani-mobile-top-menu .js-top-menu {
        padding: 0 15px !important;
    }
    
    .allani-mobile-top-menu .js-top-menu-bottom {
        padding: 10px 15px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: 10px !important;
    }
}

/* ===== DESKTOP PROTECTION - ENSURE DESKTOP STYLES ARE NOT AFFECTED ===== */

@media (min-width: 992px) {
    /* HIDE the old black navbar - we use our custom gold nav strip instead */
    .dor-mainmenu-inner,
    .head-dormenu,
    .dor-megamenu,
    #dor-top-menu,
    .navbar-nav.megamenu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* KEEP our custom navigation strip visible and functional */
    #allani-nav-row {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    #allani-nav-strip {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure desktop header layout is not affected */
    .allani-header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    .allani-search-col {
        order: initial !important;
        width: auto !important;
        flex: initial !important;
        max-width: none !important;
    }
    
    /* Ensure no mobile-specific overrides affect desktop */
    .container {
        max-width: 1200px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Ensure desktop header components are properly positioned */
    .allani-header,
    .allani-header-main,
    .allani-header-bottom {
        position: relative !important;
        overflow: visible !important;
        z-index: auto !important;
    }
}

/* ===== MOBILE MENU SUBMENU FIXES ===== */

@media (max-width: 991px) {
    /* Mobile menu container improvements */
    #mobile_top_menu_wrapper {
        background: #fff !important;
        border-top: 1px solid #e4d8c0 !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
        z-index: 9999 !important;
    }
    
    #_mobile_top_menu {
        padding: 10px 0 !important;
    }
    
    /* Mobile menu items */
    #_mobile_top_menu ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #_mobile_top_menu li {
        border-bottom: 1px solid #f0f0f0 !important;
        position: relative !important;
    }
    
    #_mobile_top_menu li:last-child {
        border-bottom: none !important;
    }
    
    #_mobile_top_menu a {
        display: block !important;
        padding: 12px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        position: relative !important;
    }
    
    #_mobile_top_menu a:hover {
        background: #f8f5f0 !important;
        color: #D4AF37 !important;
    }
    
    /* Submenu indicator styling */
    .submenu-indicator {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #999 !important;
        font-size: 12px !important;
    }
    
    .submenu-indicator i {
        transition: transform 0.3s ease !important;
    }
    
    /* Submenu styling */
    #_mobile_top_menu ul ul {
        background: #f8f5f0 !important;
        border-top: 1px solid #e4d8c0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #_mobile_top_menu ul ul li {
        border-bottom: 1px solid #ede7d6 !important;
    }
    
    #_mobile_top_menu ul ul a {
        padding: 10px 20px 10px 40px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #666 !important;
    }
    
    #_mobile_top_menu ul ul a:hover {
        background: #ede7d6 !important;
        color: #D4AF37 !important;
    }
    
    /* Open submenu state */
    .submenu-open > a {
        background: #f8f5f0 !important;
        color: #D4AF37 !important;
    }
    
    /* Menu icon active state */
    #menu-icon.active i {
        transform: rotate(90deg) !important;
        color: #D4AF37 !important;
    }
}

/* ===== MOBILE MENU ANIMATION ===== */

@media (max-width: 991px) {
    #mobile_top_menu_wrapper {
        transition: all 0.3s ease !important;
        transform-origin: top !important;
    }
    
    #mobile_top_menu_wrapper[style*="display: flex"] {
        animation: slideDown 0.3s ease !important;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ===== FORCE OVERRIDE ANY CONFLICTING STYLES ===== */

@media (max-width: 991px) {
    /* Force mobile menu visibility when active */
    #mobile_top_menu_wrapper.active,
    #mobile_top_menu_wrapper[style*="display: flex"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure proper stacking */
    .allani-header {
        position: relative !important;
        z-index: 999 !important;
    }
    
    #mobile_top_menu_wrapper {
        position: relative !important;
        z-index: 1000 !important;
    }
}
/* ===== BANNER SECTION SCROLL FIX ===== */

/* Ensure banner section doesn't interfere with page scrolling */
#dor-homeslider,
.dor-banner-home,
.banner-section {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}

/* Ensure page can scroll normally */
body,
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Fix any potential issues with banner container */
.dor-banner-home-wrapper,
.dor-banner-home-inner {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure main content area is scrollable */
#wrapper,
main.dormain,
.allani-wrapper {
    overflow: visible !important;
    position: relative !important;
}

/* Desktop-specific fixes to ensure ONLY our custom nav is visible */
@media (min-width: 992px) {
    /* HIDE the old black navbar completely - we replaced it with our gold nav strip */
    .dor-mainmenu-inner,
    .head-dormenu,
    .dor-megamenu,
    #dor-top-menu,
    .navbar-nav.megamenu,
    .dor-mainmenu-inner *,
    .head-dormenu *,
    .dor-megamenu * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -1 !important;
    }
    
    /* ENSURE our custom navigation strip is always visible */
    #allani-nav-row {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 90 !important;
    }
    
    #allani-nav-strip {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .allani-nav-pill {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure desktop header is not affected by mobile styles */
    .allani-header-row {
        flex-wrap: nowrap !important;
    }
    
    .allani-search-col {
        order: initial !important;
        width: auto !important;
        flex: initial !important;
        max-width: none !important;
    }
    
    /* Ensure no mobile overflow restrictions affect desktop */
    .container {
        max-width: 1200px !important;
        overflow: visible !important;
    }
    
    /* Reset any mobile-specific positioning */
    .allani-header,
    .allani-header-main,
    .allani-header-bottom {
        position: relative !important;
        overflow: visible !important;
        z-index: auto !important;
    }
}