/* Addon-owned WHMCS header. Keep this independent of updateable theme files. */
#header .navbar-light,
#header .main-navbar-wrapper {
    background: #071106 !important;
    border-bottom: 1px solid rgba(142, 209, 60, .28) !important;
}

#header .main-navbar-wrapper {
    border-top: 1px solid rgba(142, 209, 60, .28) !important;
}

#header .main-navbar-wrapper > .container > .navbar-collapse > .navbar-nav > li > a,
#header .toolbar > .nav-item > a,
#header .toolbar > .nav-item > button {
    color: #ffffff !important;
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 700;
}

#header .main-navbar-wrapper > .container > .navbar-collapse > .navbar-nav > li > a:hover,
#header .main-navbar-wrapper > .container > .navbar-collapse > .navbar-nav > li > a:focus,
#header .toolbar > .nav-item > a:hover,
#header .toolbar > .nav-item > a:focus,
#header .toolbar > .nav-item > button:hover,
#header .toolbar > .nav-item > button:focus {
    color: #8ed13c !important;
}

#header .cart-btn,
#header .toolbar button.nav-link {
    border: 1px solid rgba(142, 209, 60, .42) !important;
    border-radius: 9px !important;
    min-height: 42px;
    min-width: 44px;
}

/* Dropdown links must stay dark on their white surface, even on dark order routes. */
html body #header .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #d8e2e8 !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(16, 38, 56, .16) !important;
    height: auto !important;
    max-height: min(60vh, 360px);
    max-width: min(90vw, 280px);
    min-height: 0 !important;
    min-width: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px !important;
}

html body #header .dropdown-menu > li.dropdown-item {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #header .dropdown-menu a.dropdown-item {
    align-items: center;
    background: transparent !important;
    border-radius: 7px;
    color: #102638 !important;
    display: flex;
    font-weight: 700;
    line-height: 1.35;
    min-height: 38px;
    padding: 8px 10px !important;
    white-space: normal;
}

html body #header .dropdown-menu a.dropdown-item:hover,
html body #header .dropdown-menu a.dropdown-item:focus {
    background: #f0fae8 !important;
    color: #356d0d !important;
    outline: 0;
}

html body #header .dropdown-menu a.dropdown-item:focus-visible {
    box-shadow: inset 0 0 0 2px #8ed13c;
}

#header .logo-img,
html body #header .navbar-brand img.logo-img {
    display: block;
    filter: none !important;
    height: auto !important;
    max-height: 52px !important;
    max-width: 100% !important;
    object-fit: contain;
    object-position: left center;
    width: clamp(196px, 19vw, 236px) !important;
}

@media (max-width: 1199px) {
    #header .main-navbar-wrapper .navbar-collapse {
        padding-bottom: 8px;
        padding-top: 8px;
    }

    #header .main-navbar-wrapper > .container > .navbar-collapse > .navbar-nav > li > a {
        align-items: center;
        display: flex;
        min-height: 44px;
        padding: 8px 12px !important;
    }

    html body #header .main-navbar-wrapper .dropdown-menu {
        margin: 2px 0 8px !important;
        max-width: none;
        position: static !important;
        width: 100%;
    }
}

@media (max-width: 575px) {
    #header .logo-img,
    html body #header .navbar-brand img.logo-img {
        max-height: 45px !important;
        object-position: center;
        width: clamp(174px, 48vw, 190px) !important;
    }
}