/* UnlockAllGSM mobile Login / Register — scoped so desktop header is unchanged. */

.uag-mobile-login,
.uag-mobile-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFBF37 !important;
    color: #39146D !important;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 6px;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: 8px;
    text-decoration: none !important;
    border: 0;
    min-height: 36px;
}

.uag-mobile-login:hover,
.uag-mobile-login:focus,
.uag-mobile-account:hover,
.uag-mobile-account:focus {
    background: #ffd172 !important;
    color: #39146D !important;
}

@media (min-width: 992px) {
    .uag-mobile-topauth {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    /* Keep the drawer header from being flex-shrunk / clipped by the h-100 body. */
    .modal-menu .modal-content {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
    }

    .modal-menu .modal-header {
        flex: 0 0 auto !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .modal-menu .modal-body.uag-drawer-body,
    .modal-menu .modal-body {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .modal-menu .uag-drawer-title {
        color: #39146D;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .modal-menu .uag-drawer-back,
    .modal-menu .uag-drawer-back i {
        color: #39146D !important;
        font-size: 20px;
        padding: 10px;
        display: inline-block;
    }

    .modal-menu .uag-drawer-auth {
        display: flex;
        gap: 8px;
        align-items: stretch;
        background: #39146D;
        border-radius: 8px;
        padding: 10px 8px;
        margin: 4px 0 4px;
    }

    .modal-menu .uag-drawer-login,
    .modal-menu .uag-drawer-account {
        flex: 1 1 55%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #FFBF37 !important;
        color: #39146D !important;
        font-weight: 800;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-radius: 6px;
        padding: 10px 12px;
        min-height: 44px;
        border: 0;
        text-decoration: none !important;
        line-height: 1.2;
    }

    .modal-menu .uag-drawer-register,
    .modal-menu .uag-drawer-logout {
        flex: 1 1 45%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        color: #ffffff !important;
        font-weight: 700;
        font-size: 14px;
        border: 2px solid #ffffff;
        border-radius: 6px;
        padding: 10px 12px;
        min-height: 44px;
        text-transform: uppercase;
        text-decoration: none !important;
        line-height: 1.2;
    }

    .modal-menu .uag-drawer-login:hover,
    .modal-menu .uag-drawer-account:hover {
        background: #ffd172 !important;
        color: #39146D !important;
    }

    .modal-menu .uag-drawer-register:hover,
    .modal-menu .uag-drawer-logout:hover {
        background: #ffffff !important;
        color: #39146D !important;
    }
}

/* Hide the always-visible violet header search bar while any modal is open
   on mobile. Live markup (chunks/menu-cart.tpl, $cart pages):
     li.nav-item.dropdown.search-bar.position-static
       > div.dropdown-menu.bg-primary.onclick  (violet bar)
         > input#searchvalue.form-control.search-products  placeholder="Search..."
   retail.css sets .search-bar .dropdown-menu { z-index: 1060 }, which sits
   above Bootstrap's .modal (1050) and covers the #login Username field. */
@media (max-width: 991.98px) {
    body.modal-open .header-bottom .search-bar,
    body.modal-open .search-bar,
    body:has(.modal.show) .header-bottom .search-bar,
    body:has(.modal.show) .search-bar {
        display: none !important;
    }

    body.modal-open .search-bar .dropdown-menu,
    body:has(.modal.show) .search-bar .dropdown-menu,
    body.modal-open #searchvalue,
    body:has(.modal.show) #searchvalue {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the login (and any other) modal above the search bar's 1060. */
    body.modal-open #login,
    body.modal-open .modal.show,
    body:has(.modal.show) #login,
    body:has(.modal.show) .modal.show {
        z-index: 1080 !important;
    }

    body.modal-open .modal-backdrop,
    body:has(.modal-backdrop.show) .modal-backdrop {
        z-index: 1070 !important;
    }
}