/**
 * ASL Global Mobile Header CSS
 * This file handles the mobile header display on ALL pages (except Shop/Category)
 * The Shop/Category pages use their own styling from shop-layout.css
 */

/* =========================================
   DEFAULTS - Hidden on Desktop
   ========================================= */
.asl-mobile-header-bar.asl-global-header,
.asl-nav-menu-panel,
.asl-mobile-logo-link,
.asl-hamburger-btn {
    display: none;
}

/* =========================================
   HIDE WOOSTIFY CART SIDEBAR ON ALL DEVICES
   ========================================= */
#shop-cart-sidebar,
.cart-sidebar,
.cart-sidebar-content,
.cart-sidebar-head,
#shop-cart-sidebar.open,
.cart-sidebar.open,
html.cart-sidebar-open #shop-cart-sidebar,
html.cart-sidebar-open .cart-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
}

/* Also hide the backdrop/overlay for cart sidebar */
html.cart-sidebar-open::before,
html.cart-sidebar-open::after,
body.cart-sidebar-open::before,
body.cart-sidebar-open::after {
    display: none !important;
}

/* Prevent body scroll lock from cart sidebar */
html.cart-sidebar-open,
html.cart-sidebar-open body {
    overflow: auto !important;
}

/* =========================================
   MOBILE/TABLET STYLES (max-width: 900px)
   ========================================= */
@media (max-width: 900px) {

    /* =========================================
       HIDE THEME HEADER ON MOBILE/TABLET
       ========================================= */
    body .site-header,
    body #masthead,
    body header#masthead,
    body header.site-header,
    body .header,
    body header:not(.asl-mobile-header-bar):not(.woocommerce-products-header) {
        display: none !important;
    }

    /* Remove any top spacing from theme header */
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body #page,
    body #content,
    body .site,
    body .site-content,
    body .main-content,
    body #primary,
    body #view {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body .content-top {
        display: none !important;
    }

    /* =========================================
       HIDE WOOSTIFY CART SIDEBAR ON MOBILE
       ========================================= */
    body #shop-cart-sidebar,
    body .cart-sidebar,
    body .cart-sidebar-content,
    body .cart-sidebar-head,
    body #shop-cart-sidebar.open,
    body .cart-sidebar.open,
    html.cart-sidebar-open #shop-cart-sidebar,
    html.cart-sidebar-open .cart-sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(100%) !important;
    }

    /* Also hide the backdrop/overlay for cart sidebar */
    html.cart-sidebar-open::before,
    html.cart-sidebar-open::after,
    body.cart-sidebar-open::before,
    body.cart-sidebar-open::after {
        display: none !important;
    }

    /* Prevent body scroll lock from cart sidebar */
    html.cart-sidebar-open,
    html.cart-sidebar-open body {
        overflow: auto !important;
    }

    /* =========================================
       MOBILE HEADER BAR
       ========================================= */
    .asl-mobile-header-bar.asl-global-header {
        display: flex !important;
        align-items: center;
        background: #232F3E !important;
        padding: 10px 12px;
        gap: 12px;
        border-bottom: 1px solid #3a4553;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 9999;
    }

    /* =========================================
       HAMBURGER BUTTON
       ========================================= */
    .asl-global-header .asl-hamburger-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        background: none !important;
        border: none !important;
        padding: 0;
        cursor: pointer;
        position: relative;
    }

    .asl-global-header .asl-hamburger-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 22px;
        height: 18px;
        gap: 4px;
    }

    .asl-global-header .asl-hamburger-line {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff !important;
        border-radius: 1px;
    }

    .asl-global-header .asl-back-icon {
        display: none;
        color: #fff;
    }

    .asl-global-header .asl-hamburger-btn.is-back-mode .asl-hamburger-icon {
        display: none;
    }

    .asl-global-header .asl-hamburger-btn.is-back-mode .asl-back-icon {
        display: flex;
    }

    /* =========================================
       MOBILE LOGO
       ========================================= */
    .asl-global-header .asl-mobile-logo-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        text-decoration: none;
        color: #fff;
    }

    .asl-global-header .asl-mobile-logo-img {
        width: 32px;
        height: 32px;
        object-fit: contain;
        border-radius: 4px;
    }

    /* =========================================
       MOBILE SEARCH
       ========================================= */
    .asl-global-header .asl-mobile-search-wrapper {
        flex: 3;
        min-width: 0;
    }

    .asl-global-header .asl-mobile-search-form {
        display: flex;
        align-items: center;
        background: #f5f6f8 !important;
        border: 0.7px solid #ddd !important;
        border-radius: 8px;
        padding: 4px 12px;
    }

    .asl-global-header .asl-mobile-search-input {
        flex: 1;
        border: none !important;
        background: transparent !important;
        font-size: 14px;
        color: #0F1111;
        outline: none;
        min-width: 0;
        width: 100%;
    }

    .asl-global-header .asl-mobile-search-input::placeholder {
        color: #888;
    }

    .asl-global-header .asl-search-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none !important;
        border: none !important;
        padding: 0;
        margin-left: 8px;
        cursor: pointer;
        color: #565959 !important;
        flex-shrink: 0;
    }

    .asl-global-header .asl-search-submit:hover {
        color: #007185 !important;
    }

    /* =========================================
       MOBILE ICONS (Cart, Account)
       ========================================= */
    .asl-global-header .asl-mobile-icons {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .asl-global-header .asl-mobile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        color: #fff !important;
        text-decoration: none;
        position: relative;
        transition: background 0.2s, color 0.2s;
    }

    .asl-global-header .asl-mobile-icon:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #FF9900 !important;
    }

    .asl-global-header .asl-cart-count {
        position: absolute;
        top: 0;
        right: 0;
        background: #CC0C39 !important;
        color: #fff !important;
        font-size: 10px;
        font-weight: 600;
        min-width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        box-sizing: border-box;
    }

    /* =========================================
       NAVIGATION MENU PANEL (Slide-in)
       ========================================= */
    .asl-nav-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: visibility 0.3s, opacity 0.3s;
    }

    .asl-nav-menu-panel.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .asl-nav-menu-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .asl-nav-menu-content {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 80%;
        background: #fff;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    }

    .asl-nav-menu-panel.active .asl-nav-menu-content {
        transform: translateX(0);
    }

    .asl-nav-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
        background: #f5f6f8;
    }

    .asl-nav-menu-title {
        font-size: 18px;
        font-weight: 600;
        color: #0F1111;
    }

    .asl-nav-menu-close {
        background: none !important;
        border: none !important;
        font-size: 28px;
        color: #565959 !important;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .asl-nav-menu-close:hover {
        color: #0F1111 !important;
    }

    .asl-nav-menu-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
    }

    .asl-nav-menu-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 14px 20px;
        color: #0F1111;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s, color 0.2s;
        cursor: pointer;
    }

    .asl-nav-menu-item:hover {
        background: #f5f6f8;
        color: #007185;
    }

    .asl-nav-menu-item svg {
        flex-shrink: 0;
        color: #565959;
    }

    .asl-nav-menu-item:hover svg {
        color: #007185;
    }

    .asl-nav-category-toggle {
        justify-content: space-between;
    }

    .asl-nav-menu-link-content {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .asl-menu-toggle-icon {
        font-size: 18px;
        color: #565959;
        font-weight: 400;
    }

    .asl-nav-category-list {
        background: #f9f9f9;
        padding: 0 20px 0 55px;
    }

    .asl-nav-sub-item {
        display: block;
        padding: 12px 0;
        color: #0F1111;
        text-decoration: none;
        font-size: 14px;
        border-bottom: 1px solid #eee;
    }

    .asl-nav-sub-item:last-child {
        border-bottom: none;
    }

    .asl-nav-sub-item:hover {
        color: #007185;
    }

    .asl-view-all-cats {
        font-weight: 600;
        color: #007185;
    }

    .asl-menu-divider {
        height: 8px;
        background: #f0f0f0;
        margin: 10px 0;
    }

    .asl-nav-section-header {
        padding: 12px 20px 8px;
        font-size: 12px;
        font-weight: 600;
        color: #565959;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    body.asl-modal-open {
        overflow: hidden;
    }
}