/* Shared public-site navigation: phone and tablet layout. Loaded after site-chrome.css. */
@media (max-width: 991.98px) {
    /* Login, registration, and password pages use a separate public header. */
    #reg_nav {
        box-sizing: border-box;
        padding: 10px 0;
    }

    #reg_nav .container-fluid {
        padding-inline: 16px;
    }

    #reg_nav .row {
        margin-inline: 0;
        align-items: center;
    }

    #reg_nav .logo,
    #reg_nav .langs {
        min-width: 0;
        padding: 0 !important;
    }

    #reg_nav .logo {
        text-align: start !important;
    }

    #reg_nav .logo img {
        display: block;
        width: clamp(160px, 50vw, 205px) !important;
        max-width: 100%;
        height: auto !important;
        object-fit: contain;
    }

    #reg_nav .langs {
        text-align: end !important;
    }

    #reg_nav .langs a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 7px 10px;
        border: 1px solid #d8e9dc;
        border-radius: 10px;
        background: #fff;
        color: #17613c;
        font-size: 15px;
        line-height: 1.4;
        text-decoration: none;
    }

    #reg_nav .langs a:focus-visible {
        outline: 3px solid #b2dec0;
        outline-offset: 2px;
    }

    .nav-header {
        box-sizing: border-box;
        max-width: calc(100% - 20px) !important;
    }

    .nav-header nav .d-flex.justify-content-between {
        grid-template-columns: minmax(0, 1fr) 46px !important;
        column-gap: 10px !important;
        row-gap: 12px !important;
    }

    .nav-header nav .nav-middle {
        min-width: 0;
    }

    .nav-header .nav-brand img {
        width: clamp(180px, 52vw, 205px) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .nav-header nav .d-flex.justify-content-between > .nav-item.d-lg-none {
        width: 46px !important;
        height: 46px !important;
    }

    .nav-header .toggle-btn {
        appearance: none;
        border: 0;
        padding: 0;
        width: 46px !important;
        height: 46px !important;
        font: inherit;
        font-size: 22px;
    }

    .nav-header .toggle-btn:focus-visible,
    .mobile-menu-info .close-menu:focus-visible,
    .mobile-menu-info [role="button"]:focus-visible,
    .mobile-menu-info a:focus-visible {
        outline: 3px solid #b2dec0;
        outline-offset: 2px;
    }

    .nav-header nav .d-flex.justify-content-between > .nav-item:last-child {
        min-width: 0;
    }

    .nav-header .links {
        min-width: 0;
        margin: 0 !important;
    }

    .nav-header .links li {
        border: 0 !important;
    }

    .nav-header .links a.account-signin,
    .nav-header .links a.account-register,
    .nav-header .links a.account-dashboard {
        min-height: 44px !important;
        padding: 9px 11px !important;
        font-size: 13px !important;
    }

    .nav-header .links a.account-dashboard .dashboard-symbol {
        width: 18px;
        height: 18px;
    }

    .mobile-menu-info {
        box-sizing: border-box;
        width: min(320px, 100vw) !important;
        height: 100vh;
        height: 100dvh;
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: transform .25s ease, visibility .25s ease;
        visibility: hidden;
        background: #17613c;
        z-index: 1001;
    }

    html[lang="ar"] .mobile-menu-info {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%);
    }

    html[lang="en"] .mobile-menu-info {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-100%);
    }

    .mobile-menu-info.is-open {
        transform: translateX(0) !important;
        visibility: visible;
    }

    .mobile-menu-info .header {
        height: 60px;
        border-bottom: 1px solid #e8f1ea;
    }

    .mobile-menu-info .header li {
        box-sizing: border-box;
        height: 60px;
        padding: 16px;
        color: #17613c;
    }

    .mobile-menu-info .header li.active {
        background: #17613c;
    }

    .mobile-menu-info .close-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #17613c;
    }

    .mobile-menu-info .cats-menu,
    .mobile-menu-info .acc-menu {
        margin: 0;
        padding: 12px 16px 24px;
    }

    .mobile-menu-info .cats-menu li a,
    .mobile-menu-info .acc-menu li a {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
        line-height: 1.5;
    }

    .body-overlay.is-open {
        display: block !important;
        z-index: 1000;
    }

    body.site-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 620px) {
    /* The language switch is also available inside the mobile menu. */
    .nav-header .links .lang_list {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .nav-header .links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100% !important;
    }

    .nav-header .links li {
        display: block !important;
        min-width: 0;
        width: 100% !important;
    }

    .nav-header .links li:has(> .account-dashboard) {
        grid-column: 1 / -1;
    }

    .nav-header .links li a.account-signin,
    .nav-header .links li a.account-register,
    .nav-header .links li a.account-dashboard {
        width: 100% !important;
        padding: 9px 8px !important;
        font-size: 13px !important;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-info {
        transition-duration: 0.01ms !important;
    }
}