/* ===================================
   RTL (Right-to-Left) Styles for Arabic
   =================================== */

body.rtl {
    text-align: right;
    font-family: 'Poppins', sans-serif;
    /* Arabe works better with Poppins or dedicated font */
}

/* Header RTL */
body.rtl .nav {
    flex-direction: row-reverse;
}

body.rtl .nav__menu {
    flex-direction: row-reverse;
}

body.rtl .nav__item--has-dropdown .arrow-down {
    margin-left: 0;
    margin-right: 5px;
}

body.rtl .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

body.rtl .nav__link--login .arrow-down {
    margin-left: 0;
    margin-right: 8px;
}

/* Hero RTL */
body.rtl .hero__content {
    grid-template-columns: 0.85fr 1.15fr;
    /* Swap columns */
}

body.rtl .hero__text {
    padding-right: 0;
    padding-left: var(--space-4);
    text-align: right;
}

body.rtl .hero__subtitle {
    margin-left: auto;
    margin-right: 0;
}

body.rtl .hero__phone {
    transform: rotate(-3deg);
    /* Reverse tilt */
    margin-right: 0;
    margin-left: -10%;
}

/* Features RTL */
body.rtl .features__wrapper {
    flex-direction: row-reverse;
}

body.rtl .feature-item {
    flex-direction: row-reverse;
    text-align: right;
}

body.rtl .feature-item__icon-box {
    margin-right: 0;
    margin-left: 20px;
}

/* Footer RTL */
body.rtl .footer__content {
    direction: rtl;
}

body.rtl .footer__section {
    text-align: right;
}

body.rtl .footer__links li {
    padding-left: 0;
    padding-right: 0;
}

body.rtl .footer__logo-main {
    margin-left: auto;
    margin-right: 0;
}

/* Buttons RTL */
body.rtl .btn svg {
    margin-left: 0;
    margin-right: 10px;
}

/* Generic Utilities */
body.rtl .text-left {
    text-align: right;
}

body.rtl .text-right {
    text-align: left;
}

/* Mobile RTL */
@media (max-width: 1024px) {
    body.rtl .nav__menu {
        left: auto;
        right: -100%;
        align-items: flex-end;
    }

    body.rtl .nav__menu.active {
        left: auto;
        right: 0;
    }

    body.rtl .nav__link {
        text-align: right;
        width: 100%;
        padding-right: 20px;
    }

    body.rtl .hero__content {
        grid-template-columns: 1fr;
    }

    body.rtl .hero__text {
        padding-left: 0;
    }
}