/* SHADA-MOBILE-HEADER-R17 START */

/*
 * One mobile breakpoint shared with the existing Shada drawer.
 * Desktop begins at 992px and is not changed by this file.
 */
@media (max-width: 991.98px) {

    /* --------------------------------------------------------
       FARSI MOBILE BRANDING — LIVE-SITE ARRANGEMENT
       -------------------------------------------------------- */

    html[lang^="fa"] body
    .container-header
    .container-topbar {
        position: relative !important;
        min-height: 122px !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    /*
     * Centre the branding against the physical viewport rather
     * than against the desktop header grid. This reproduces the
     * former live mobile header regardless of RTL page direction.
     */
    html[lang^="fa"] body
    .container-header
    .shada-header-logo--fa {
        box-sizing: border-box !important;

        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: clamp(16px, 3vw, 32px) !important;

        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 40px) !important;

        margin: 0 !important;
        padding: 0 !important;

        direction: ltr !important;
        text-align: center !important;

        transform: translate(-50%, -50%) !important;
        z-index: 40 !important;
    }

    html[lang^="fa"] body
    .container-header
    .shada-header-logo--fa
    .shada-header-logo-fa__text {
        order: 1 !important;
        display: block !important;
        flex: 0 1 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #087f83 !important;
        -webkit-text-fill-color: #087f83 !important;

        font-family:
            "ShadaIRANSans",
            Arial,
            sans-serif !important;

        font-size:
            clamp(24px, 5.3vw, 46px) !important;

        font-weight: 700 !important;
        line-height: 1.2 !important;

        direction: rtl !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html[lang^="fa"] body
    .container-header
    .shada-header-logo--fa
    .shada-header-logo-fa__icon {
        order: 2 !important;
        display: block !important;

        flex:
            0 0
            clamp(72px, 13vw, 126px) !important;

        width:
            clamp(72px, 13vw, 126px) !important;

        min-width:
            clamp(72px, 13vw, 126px) !important;

        max-width:
            clamp(72px, 13vw, 126px) !important;

        height:
            clamp(72px, 13vw, 126px) !important;

        min-height:
            clamp(72px, 13vw, 126px) !important;

        max-height:
            clamp(72px, 13vw, 126px) !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        transform: none !important;
    }

    /* --------------------------------------------------------
       DRAWER CLOSE BUTTON AND LANGUAGE CONTROLS
       -------------------------------------------------------- */

    html body
    .shada-mobile-menu-drawer {
        position: fixed !important;
        padding-top: 18px !important;
    }

    html body
    .shada-mobile-menu-drawer
    .shada-mobile-menu-close {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        left: auto !important;

        margin: 0 !important;
        z-index: 20 !important;
    }

    /*
     * The close button is absolute, so reserve its own top row.
     * The language controls begin below it and cannot cover it.
     */
    html body
    .shada-mobile-menu-drawer
    .shada-mobile-language-switcher {
        box-sizing: border-box !important;

        width: 100% !important;

        margin:
            76px
            auto
            16px !important;

        padding:
            0
            0
            14px !important;

        clear: both !important;
        position: relative !important;
        z-index: 5 !important;
    }
}

/* SHADA-MOBILE-HEADER-R17 END */