/* RTL Styles for Arabic Version */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;

    /* Override global font variables for Arabic */
    --font-heading: "Cairo", sans-serif;
    --font-body: "Cairo", sans-serif;
}

html[dir="rtl"] body {
    font-family: var(--font-body);
}

/* Flip Flexbox directions if not automatically handled */
/* dir="rtl" handles most flex-direction: row automatically, but we might need specific overrides */

/* Navigation */
html[dir="rtl"] .nav-actions {
    margin-left: 0;
    margin-right: 0;
}

/* Margins and Paddings flipping */
html[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

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

/* Icons */
html[dir="rtl"] .fa-arrow-right {
    transform: rotate(180deg);
}

html[dir="rtl"] .fa-chevron-right {
    transform: rotate(180deg);
}

html[dir="rtl"] .fa-chevron-left {
    transform: rotate(180deg);
}

/* Specific Component overrides */
html[dir="rtl"] .product-card {
    text-align: right;
}

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

html[dir="rtl"] .footer-links li a {
    padding-left: 0;
    padding-right: 0;
}

html[dir="rtl"] .hero {
    text-align: center;
    /* Hero text usually stays centered */
}


/* Mobile Menu RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .nav-menu {
        left: auto;
        right: -100%;
    }

    html[dir="rtl"] .nav-menu.active {
        right: 0;
    }

    html[dir="rtl"] .product-intro-container::before {
        left: auto;
        right: 0;
    }
}