/* 1. Fix layout - prevent content pushed to right (campaigns page mobile) - RTL only */
[dir="rtl"] .frontend-wrapper {
    width: 100%;
    min-width: 0;
}

@media screen and (max-width: 767px) {
    html[dir="rtl"] {
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
    }

    [dir="rtl"] body {
        overflow-x: clip;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Wrapper contains overflow - critical for RTL mobile */
    [dir="rtl"] .frontend-wrapper {
        overflow-x: clip;
        max-width: 100%;
    }

    /* Ensure all main sections use full width and don't overflow */
    [dir="rtl"] .header,
    [dir="rtl"] .breadcrumb,
    [dir="rtl"] .campaign,
    [dir="rtl"] .all-campaign,
    [dir="rtl"] .footer-area,
    [dir="rtl"] .frontend-wrapper > section {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    [dir="rtl"] .header .container,
    [dir="rtl"] .breadcrumb .container,
    [dir="rtl"] .footer-area .container,
    [dir="rtl"] .campaign .container,
    [dir="rtl"] .container {
        max-width: 100%;
        padding-inline: 15px;
    }

    /* Fix footer pseudo-elements - 100vw causes horizontal overflow in RTL */
    [dir="rtl"] .bottom-footer__txt::before,
    [dir="rtl"] .bottom-footer__txt::after {
        width: 80px;
        max-width: 80px;
    }
}

/* 2. Logo above menu - ensure logo is visible in RTL mobile */
[dir="rtl"] .header__logo-col,
.header__logo-col {
    position: relative;
    z-index: 15;
}

[dir="rtl"] .header__logo,
.header__logo {
    position: relative;
    z-index: 10;
}

/* 3. RTL Buttons - Arrow points LEFT + proper positioning */
[dir="rtl"] .circle-btn {
    flex-direction: row;
    gap: 10px;
}

[dir="rtl"] .circle-btn__icon img {
    transform: scaleX(-1);
}

[dir="rtl"] .btn .btn__icon .ti::before {
    transform: scaleX(-1);
    display: inline-block;
}

[dir="rtl"] .btn .btn__icon {
    transform: translateX(-31px);
    margin-inline-start: 0;
    margin-inline-end: 8px;
}

@media screen and (max-width: 991px) {
    [dir="rtl"] .btn .btn__icon {
        transform: translateX(-18px);
    }
}

[dir="rtl"] .btn--sm .btn__icon {
    transform: translateX(-18px) !important;
}

@media screen and (max-width: 767px) {
    [dir="rtl"] .btn--sm .btn__icon {
        transform: translateX(-13px) !important;
    }
}

[dir="rtl"] .btn.w-100 .btn__icon {
    float: left;
}

/* 3. RTL Header Navigation - Desktop */
@media screen and (min-width: 1200px) {
    [dir="rtl"] .header .nav-menu .nav-item {
        margin-right: 0;
        margin-inline-end: 30px;
    }

    [dir="rtl"] .header .nav-menu .nav-item:last-child {
        margin-inline-end: 0;
        margin-inline-start: 24px;
    }
}

/* RTL Mobile Menu - Alignment (fix Contact shifted) */
@media screen and (max-width: 1199px) {
    [dir="rtl"] .header .nav-menu .nav-item:last-child {
        margin-inline-start: 0 !important;
    }

    [dir="rtl"] .header .navbar-collapse {
        direction: rtl;
    }

    [dir="rtl"] .header .nav-menu {
        text-align: right;
        padding-inline-start: 0;
        padding-inline-end: 0;
    }

    [dir="rtl"] .header .nav-menu .nav-item {
        text-align: right;
        display: block;
    }

    [dir="rtl"] .header .nav-item .nav-link {
        text-align: right;
        padding: 14px 14px 14px 0 !important;
        margin: 0 !important;
        display: block;
    }

    [dir="rtl"] .header .nav-item:last-child .nav-link {
        padding: 14px 14px 14px 0 !important;
    }

    [dir="rtl"] .header .nav-item.d-flex.justify-content-between {
        flex-direction: row-reverse;
        text-align: right;
        padding: 14px 0;
    }

    [dir="rtl"] .header .nav-item.d-flex .nav-link {
        margin-bottom: 0 !important;
    }

    [dir="rtl"] .header .nav-item.d-flex .language-box {
        text-align: right;
    }
}