/**
 * 📱 MOBILE HEADER FIX - CENTERED & PROPERLY SPACED
 * Layout: Logo center, 2 buttons side-by-side with clear spacing
 * Fixed: logo centering, button spacing, no overlap
 */

@media (max-width: 849px) {

    /* ===================================
       1. HIDE DUPLICATE BUTTONS FIRST
       =================================== */
    
    /* Hide duplicate buttons in mobile nav bottom */
    #wide-nav .header-bottom-nav.mobile-nav li.header-button-1,
    #wide-nav .header-bottom-nav.mobile-nav li.header-button-2,
    .header-bottom .mobile-nav li.header-button-1,
    .header-bottom .mobile-nav li.header-button-2,
    .show-for-medium li.header-button-1,
    .show-for-medium li.header-button-2 {
        display: none !important;
    }
    
    /* Hide duplicate buttons in sidebar */
    .off-canvas .nav-sidebar li.header-button-1,
    .off-canvas .nav-sidebar li.header-button-2,
    .mobile-sidebar li.header-button-1,
    .mobile-sidebar li.header-button-2 {
        display: none !important;
    }
    
    /* Hide dark nav bar */
    #wide-nav.header-bottom {
        display: none !important;
    }
    
    /* Hide desktop nav menu */
    .header-nav.nav-left,
    .header-bottom-nav.nav-center {
        display: none !important;
    }
    
    /* Hide trust badges */
    .header-live-users,
    .header-trust-badge {
        display: none !important;
    }

    /* ===================================
       2. CLEAN HEADER WRAPPER
       =================================== */
    
    .header-wrapper,
    .header-inner {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    .header-inner > .flex-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ===================================
       3. LOGO SECTION - CENTERED
       =================================== */
    
    .header-inner .flex-left,
    .header-wrapper .flex-left {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 10px 15px 8px 15px !important;
        margin: 0 auto !important;
        order: 1 !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #F1F3F5 !important;
    }
    
    .header-logo,
    .header_logo {
        display: inline-block !important;
        text-align: center !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
    }
    
    .header-logo img,
    .header_logo img,
    .header-logo a,
    .header_logo a {
        max-width: 160px !important;
        height: auto !important;
        display: inline-block !important;
        margin: 0 auto !important;
        vertical-align: middle !important;
    }

    /* ===================================
       4. CTA BUTTONS - PROPERLY SPACED
       =================================== */
    
    /* Flex-right wrapper - full width centered */
    .header-inner .flex-right {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 6px 15px 8px 15px !important;
        margin: 0 !important;
        order: 2 !important;
        background: #FFFFFF !important;
    }
    
    /* Container - compact with clear gap */
    .header-inner .flex-right ul.header-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 5px !important;
        background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%) !important;
        border-radius: 8px !important;
        border: 1px solid #E5E7EB !important;
        list-style: none !important;
    }
    
    /* Button list items - compact fixed width */
    li.html.header-button-1,
    li.html.header-button-2 {
        display: inline-block !important;
        width: 135px !important;
        max-width: 135px !important;
        min-width: 135px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        vertical-align: middle !important;
        flex: 0 0 135px !important;
        flex-shrink: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }
    
    .header-button-1,
    .header-button-2 {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Buttons - proper sizing */
    .header-button-1 a,
    .header-button-2 a {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 7px 6px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        border-radius: 6px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-width: 1px !important;
        line-height: 1.3 !important;
        min-height: 28px !important;
        max-height: 30px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    
    /* Shadows */
    .header-button-1 a {
        box-shadow:
            0 2px 6px rgba(220, 38, 38, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    
    .header-button-2 a {
        box-shadow:
            0 2px 6px rgba(16, 185, 129, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
    
    /* Badges - compact */
    .header-button-1::after,
    .header-button-2::after {
        top: -6px !important;
        right: -4px !important;
        padding: 1px 3px !important;
        font-size: 7px !important;
        border-radius: 3px !important;
        font-weight: 700 !important;
        border-width: 1px !important;
        line-height: 1.1 !important;
        min-height: 11px !important;
    }
    
    /* Hamburger menu */
    .show-for-medium .mobile-nav,
    .mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }
    
    .nav .mobile-nav-icon,
    .mobile-nav-icon {
        font-size: 24px !important;
        color: #0F172A !important;
        padding: 8px !important;
        cursor: pointer !important;
    }
}

/* SMALL MOBILE */
@media (max-width: 550px) {
    .header-logo img,
    .header_logo img,
    .header-logo a,
    .header_logo a {
        max-width: 140px !important;
    }
    
    .header-inner .flex-right ul.header-nav {
        gap: 10px !important;
        padding: 4px !important;
    }
    
    li.html.header-button-1,
    li.html.header-button-2 {
        width: 125px !important;
        max-width: 125px !important;
        min-width: 125px !important;
        flex: 0 0 125px !important;
    }
    
    .header-button-1 a,
    .header-button-2 a {
        padding: 6px 5px !important;
        font-size: 9px !important;
        min-height: 26px !important;
        max-height: 28px !important;
    }
    
    .header-button-1::after,
    .header-button-2::after {
        font-size: 6px !important;
        padding: 1px 2px !important;
    }
}

/* Final mobile CTA layout: use the buttons rendered in the mobile nav. */
@media (max-width: 849px) {
    /* The mobile header renders its CTAs in the wide-nav mobile menu. */
    #wide-nav.header-bottom {
        display: block !important;
    }

    #wide-nav .header-bottom-nav.mobile-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        margin: 0 !important;
    }

    #wide-nav .header-bottom-nav.mobile-nav li.html.header-button-1,
    #wide-nav .header-bottom-nav.mobile-nav li.html.header-button-2 {
        display: block !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        order: initial !important;
    }

    #wide-nav .header-bottom-nav.mobile-nav .header-button {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #wide-nav .header-bottom-nav.mobile-nav li.header-button-1 a,
    #wide-nav .header-bottom-nav.mobile-nav li.header-button-2 a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 30px !important;
        max-height: 34px !important;
        box-sizing: border-box !important;
        padding: 7px 4px !important;
        margin: 0 !important;
        border-width: 1px !important;
        border-radius: 5px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Source order is signup first, so it remains on the left. */
    #wide-nav .header-bottom-nav.mobile-nav li.header-button-1 {
        order: 1 !important;
    }

    #wide-nav .header-bottom-nav.mobile-nav li.header-button-2 {
        order: 2 !important;
    }
}

/* EXTRA SMALL */
@media (max-width: 400px) {
    .header-logo img,
    .header_logo img,
    .header-logo a,
    .header_logo a {
        max-width: 120px !important;
    }
    
    .header-inner .flex-right ul.header-nav {
        gap: 8px !important;
        padding: 3px !important;
    }
    
    li.html.header-button-1,
    li.html.header-button-2 {
        width: 115px !important;
        max-width: 115px !important;
        min-width: 115px !important;
        flex: 0 0 115px !important;
    }
    
    .header-button-1 a,
    .header-button-2 a {
        padding: 6px 4px !important;
        font-size: 9px !important;
        min-height: 24px !important;
        max-height: 26px !important;
    }
}