/* 
 * ==========================================================================
 * MOBILE PERFECTION OVERRIDE (ELITE EDITION)
 * ==========================================================================
 * This file is linked last to ensure it wins the cascade and fixes 
 * all mobile responsiveness issues reported by the user.
 */

@media (max-width: 991px) {

    /* 1. FORCE HEADER STRUCTURE */
    #header_main.header_1 {
        background-color: #ffffff !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 100000 !important;
        padding: 0 16px !important;
    }

    #site-header-inner,
    #site-header-inner .wrap-box {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }

    /* 2. DEFINITIVE SUPPRESSION OF DESKTOP ELEMENTS */
    /* This removes the persistent Home links and other artifacts causing overflow */
    #main-nav,
    .main-nav,
    #wallet-header,
    .header_1 .canvas,
    .header_1 .canvas-nav-wrap,
    .header-search-modern .show-search-modern+.top-search-dropdown:not(.active) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
    }

    /* 3. ELITE MOBILE TOGGLE (3-BAR) */
    .mobile-button {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4.5px !important;
        background: #111827 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        z-index: 100001 !important;
        margin-left: 8px !important;
        padding: 0 !important;
        border: none !important;
    }

    .mobile-button span,
    .mobile-button::before,
    .mobile-button::after {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        border-radius: 10px !important;
        position: static !important;
        transform: none !important;
        transition: all 0.3s ease !important;
    }

    /* 4. BALANCED MOBILE LOGO */
    #site-logo img,
    #logo_header,
    #mobile-logo_header {
        max-height: 28px !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
    }

    #site-logo {
        flex-shrink: 0 !important;
    }

    /* 5. SIDE MENU - GLASSMORPHIC MASTERPIECE */
    .mobile-nav-wrap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 999999 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: all 0.4s ease !important;
    }

    .mobile-nav-wrap.active {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-nav-wrap .overlay-mobile-nav {
        background: rgba(15, 23, 42, 0.4) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .mobile-nav-wrap .inner-mobile-nav {
        width: 85% !important;
        max-width: 310px !important;
        height: 100% !important;
        background: #ffffff !important;
        position: absolute !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
        padding: 80px 30px 40px !important;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mobile-nav-wrap.active .inner-mobile-nav {
        transform: translateX(0) !important;
    }

    /* 6. TYPOGRAPHY & INTERACTION */
    .mobile-nav-wrap .item-menu-mobile {
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
        font-size: 19px !important;
        color: #111827 !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-decoration: none !important;
        display: block !important;
    }

    /* 7. ICON GROUPING */
    .flat-wallet {
        gap: 10px !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-search-modern a.show-search-modern,
    .header-favorites a {
        width: 38px !important;
        height: 38px !important;
        background: #f8fafc !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #111827 !important;
        text-decoration: none !important;
    }

    .show-search-modern i,
    .header-favorites a i {
        font-size: 16px !important;
        color: #111827 !important;
    }
}