/* ==========================================================================
   RTL STYLES
   - Arabic Typography
   - Direction over-rides
   - Alignment flips
   ========================================================================== */

html[dir="rtl"] {
    /* No need to reset direction here as it's handled in base.css via attribute selector */
}

/* Navbar */
html[dir="rtl"] .logo {
    margin-left: var(--spacing-lg);
    margin-right: 0;
}

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

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

/* Layout helpers */
html[dir="rtl"] .text-left {
    text-align: right;
}

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

/* Gallery Overlay */
html[dir="rtl"] .gallery-overlay {
    text-align: right;
}

/* Profile Card */
html[dir="rtl"] .profile-card {
    text-align: right;
}

/* Footer */
html[dir="rtl"] .footer-links {
    padding-right: 0;
}

/* Buttons with icons */
html[dir="rtl"] .btn i {
    margin-left: var(--spacing-sm);
    margin-right: 0;
}

/* Form Inputs */
html[dir="rtl"] .form-control {
    text-align: right;
}

/* Profile Card Responsive Loophole fixes */
@media (max-width: 768px) {
    html[dir="rtl"] .profile-card {
        text-align: center;
    }
}