/* RTL (Right-to-Left) Language Support */
html[dir="rtl"] {
    direction: rtl;
}

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

/* Navigation RTL */
html[dir="rtl"] .nav-container {
    flex-direction: row-reverse;
}

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

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

/* Dropdown RTL */
html[dir="rtl"] .nav-dropdown-content {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

html[dir="rtl"] .nav-dropdown-content.active {
    transform: translateX(50%) translateY(0);
}

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

html[dir="rtl"] .dropdown-section a:hover {
    padding-left: 0;
    padding-right: var(--spacing-xs);
}

/* Footer RTL */
html[dir="rtl"] .footer-grid {
    direction: rtl;
}

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

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

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

/* Hero Section RTL */
html[dir="rtl"] .hero {
    text-align: right;
}

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

/* Features RTL */
html[dir="rtl"] .features-grid {
    direction: rtl;
}

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

/* Buttons RTL */
html[dir="rtl"] .btn {
    direction: rtl;
}

html[dir="rtl"] .btn i {
    margin-left: 0;
    margin-right: var(--spacing-xs);
}

/* Forms RTL */
html[dir="rtl"] .form-group {
    text-align: right;
}

html[dir="rtl"] .form-input,
html[dir="rtl"] .form-textarea {
    text-align: right;
}

/* Language Switcher RTL */
html[dir="rtl"] .language-switcher {
    flex-direction: row-reverse;
}

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

/* Typography RTL */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    text-align: right;
}

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

/* Margin and Padding Adjustments for RTL */
html[dir="rtl"] .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* Mobile RTL Adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .hamburger {
        left: var(--spacing-lg);
        right: auto;
    }
    
    html[dir="rtl"] .nav-menu {
        text-align: right;
    }
    
    html[dir="rtl"] .nav-menu.active {
        right: 0;
        left: auto;
    }
}