/* Frontend RTL layout overrides. Loaded only when the CMS direction is RTL. */

html[dir="rtl"] body {
    text-align: right;
}

/* Mirror directional glyphs so navigation intent follows RTL reading flow. */
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-long-arrow-alt-right,
html[dir="rtl"] .fa-long-arrow-alt-left,
html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .bi-arrow-left,
html[dir="rtl"] .bi-chevron-right,
html[dir="rtl"] .bi-chevron-left {
    display: inline-block;
    transform: scaleX(-1);
}

/*
 * Bootstrap 5's bundled LTR utilities use physical left/right margins.
 * Mirror the directional utilities used by frontend icons, images, badges,
 * labels, and adjacent text when the document direction is RTL.
 */
html[dir="rtl"] .me-1 {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}

html[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

html[dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .ms-1 {
    margin-right: .25rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .ms-2 {
    margin-right: .5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .ms-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    html[dir="rtl"] .ms-lg-2 {
        margin-right: .5rem !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 992px) {
    html[dir="rtl"] .frontend-topbar-row {
        direction: ltr;
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .frontend-topbar-contact {
        text-align: right !important;
    }

    html[dir="rtl"] .frontend-topbar-contact-items {
        direction: rtl;
        justify-content: flex-start;
    }

    html[dir="rtl"] .frontend-topbar-social {
        text-align: left !important;
    }

    html[dir="rtl"] .frontend-topbar-social-items {
        direction: ltr;
        justify-content: flex-start;
    }

    html[dir="rtl"] .frontend-navbar {
        direction: ltr;
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .frontend-navbar .navbar-collapse {
        direction: ltr;
    }

    html[dir="rtl"] .frontend-navbar-menu {
        direction: rtl;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    html[dir="rtl"] .frontend-navbar-menu .nav-link {
        margin-right: 25px;
        margin-left: 0;
    }

    html[dir="rtl"] .frontend-navbar-menu .dropdown-menu {
        right: auto;
        left: 0;
        text-align: right;
    }
}

html[dir="rtl"] .frontend-topbar-contact-items small {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .frontend-topbar-contact-items small:last-child {
    margin-left: 0 !important;
}

html[dir="rtl"] .frontend-topbar-contact-items i {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

html[dir="rtl"] .frontend-topbar-social-items .btn {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .frontend-navbar {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .frontend-navbar .navbar-collapse {
        text-align: right;
    }

    html[dir="rtl"] .frontend-navbar-menu {
        align-items: flex-start !important;
        margin: 0 !important;
    }

    html[dir="rtl"] .frontend-navbar-menu .nav-link {
        width: 100%;
        margin: 0;
        text-align: right;
    }

    html[dir="rtl"] .frontend-navbar-menu .dropdown-menu {
        text-align: right;
    }
}