/* RTL (Right-to-Left) specific styles for Arabic and Urdu versions */

/* ===== Desktop RTL Adjustments ===== */

/* RTL specific adjustments for language selector */
html[dir="rtl"] .language-dropdown {
    right: 0;
    left: auto;
}

/* ===== Mobile RTL Adjustments ===== */
@media (max-width: 768px) {
    /* Language dropdown mobile RTL */
    html[dir="rtl"] .language-dropdown {
        left: -20px;
        right: auto;
    }
    
    /* Hamburger menu button - move to left side */
    html[dir="rtl"] .mobile-menu-toggle {
        right: auto;
        left: 20px;
    }
    
    /* Adjust hamburger menu animation for RTL */
    html[dir="rtl"] .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 5px);
    }
    
    html[dir="rtl"] .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-7px, -6px);
    }
    
    /* Navigation menu text alignment for RTL */
    html[dir="rtl"] .navbar-menu {
        direction: rtl;
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-link {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-cta {
        direction: ltr; /* Keep button text LTR for consistency */
    }
}

/* ===== Other UI Elements RTL Adjustments ===== */

/* Image comparison labels for RTL */
html[dir="rtl"] .comparison-label-left {
    left: auto;
    right: 8px;
}

html[dir="rtl"] .comparison-label-right {
    right: auto;
    left: 8px;
}

/* Quick action buttons RTL text alignment */
@media (max-width: 768px) {
    html[dir="rtl"] .quick-action {
        flex-direction: row-reverse;
        text-align: right;
    }
    
    html[dir="rtl"] .quick-action svg {
        margin-right: 0;
        margin-left: 12px;
    }
}

/* Footer RTL adjustments */
html[dir="rtl"] .footer-section {
    text-align: right;
}

html[dir="rtl"] .footer-links {
    align-items: flex-end;
}

html[dir="rtl"] .footer-badge {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-badge svg,
html[dir="rtl"] .footer-badge img {
    margin-left: 8px;
    margin-right: 0;
}