/* =====================================================================
   Professional mobile menu (shared, RTL + LTR via logical properties).
   Link this LAST in the master (after the content placeholder) so it
   overrides any stylesheet a content page loads (e.g. css/packages.css,
   css/style-newnew.css). Works for Arabic (RTL) and English/French (LTR).
   ===================================================================== */
@media (max-width: 992px) {
    /* hamburger */
    header .bottom-header .container .menu-toggle {
        display: block;
        font-size: 24px;
        color: #1d1d1d;
    }

    /* dimmed backdrop */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
        z-index: 1500;
    }
    .nav-backdrop.active {
        opacity: 1;
        visibility: visible;
        z-index: 0;
    }
    body.nav-open {
        overflow: hidden;
    }

    /* the drawer panel (slides in from the right) */
    header .bottom-header .container .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        width: 330px;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        background: #fff;
        padding: 0 0 28px;
        box-shadow: -6px 0 24px rgba(0, 0, 0, .18);
        z-index: 2000;
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: hidden;
        transition: right .35s cubic-bezier(.22, .61, .36, 1), visibility .35s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    header .bottom-header .container .nav-menu.active {
        right: 0;
        left: auto;
        opacity: 1;
        visibility: visible;
        z-index: 2000;
    }

    /* top bar with the close (X) button */
    header .bottom-header .container .nav-menu .close-menu {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 58px;
        min-height: 58px;
        padding: 0 20px;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid #eee;
        font-size: 26px;
        line-height: 1;
        color: #E41E26;
        cursor: pointer;
        z-index: 2;
    }

    /* list wrapper */
    header .bottom-header .container .nav-menu .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        padding: 6px 0 0;
        margin: 0;
    }

    /* items container rendered by UpperMenu (inline display:flex needs overriding) */
    header .bottom-header .container .nav-menu .nav-list #menu_div {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        width: 100%;
        padding: 0 !important;
    }

    header .bottom-header .container .nav-menu .nav-item {
        position: relative;
        width: 100%;
        border-bottom: 1px solid #f1f1f1;
    }

    header .bottom-header .container .nav-menu .nav-item > a,
    header .bottom-header .container .nav-menu .nav-item > a.dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 15px 22px;
        font-size: 16px;
        font-weight: 600;
        color: #1d1d1d;
        text-align: start;
        white-space: normal;
        transition: background .2s ease, color .2s ease;
    }
    header .bottom-header .container .nav-menu .nav-item > a:hover,
    header .bottom-header .container .nav-menu .nav-item.active > a {
        color: #E41E26;
        background: #fbf3f3;
    }

    /* hide the desktop underline marker inside the drawer */
    header .bottom-header .container .nav-menu .nav-item.active::after {
        display: none;
    }

    /* dropdown / submenu chevrons */
    .nav-menu .dropdown-toggle i,
    .nav-menu .submenu-toggle i {
        font-size: 13px;
        color: #999;
        transition: transform .3s ease;
    }
    .nav-menu .has-dropdown.active > .dropdown-toggle i,
    .nav-menu .has-submenu.active > .submenu-toggle i {
        transform: rotate(180deg);
    }

    /* nested menus */
    .nav-menu .dropdown-menu,
    .nav-menu .submenu {
        width: 100%;
        background: #f7f9fc;
        border-radius: 0;
        align-items: stretch !important;
    }
    .nav-menu .dropdown-item,
    .nav-menu .submenu > li {
        width: 100%;
        text-align: start;
        padding: 0;
    }
    .nav-menu .dropdown-item > a,
    .nav-menu .submenu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 34px;
        font-size: 14.5px;
        font-weight: 500;
        color: #4a4a4a;
        text-align: start;
    }
    .nav-menu .dropdown-item > a:hover,
    .nav-menu .submenu a:hover {
        color: #E41E26;
    }

    /* language / currency row */
    header .bottom-header .container .nav-menu .nav-list .language-currency {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 22px 4px;
    }
    .nav-menu .language .selected-lang {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border: 1px solid #e4e4e4;
        border-radius: 8px;
        cursor: pointer;
        color: #1d1d1d;
        font-weight: 600;
    }
    .nav-menu .language .custom-dropdown-menu {
        padding-inline-start: 0;
    }

    /* book-appointment CTA inside the drawer */
    header .bottom-header .container .nav-list .btn-book-appointment {
        display: block;
        width: calc(100% - 44px);
        margin: 20px 22px 0;
        padding: 14px;
        text-align: center;
        background: #E41E26;
        color: #fff;
        border-radius: 10px;
        font-weight: 700;
        font-size: 16px;
        transition: background .25s ease;
    }
    header .bottom-header .container .nav-list .btn-book-appointment:hover {
        background: #c4151c;
        color: #fff;
    }

    /* hide the standalone (desktop) book button on mobile */
    header .bottom-header .container > .container > .btn-book-appointment,
    header .bottom-header .container > .btn-book-appointment {
        display: none;
    }
}

@media (min-width: 993px) {
    .nav-backdrop {
        display: none !important;
    }
}