/**
 * RTL (Right-to-Left) Styles for Arabic Language
 * يتم تطبيق هذه الأنماط عندما تكون اللغة العربية
 */

/* Body direction is set in HTML, but ensure consistency */
body[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Reverse flex direction for header */
body[dir="rtl"] .header-content {
    flex-direction: column-reverse;
}

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

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

/* Navigation alignment */
body[dir="rtl"] nav {
    text-align: center;
}

body[dir="rtl"] nav a {
    margin: 5px;
}

/* Grid and Flex containers */
body[dir="rtl"] .categories-container {
    direction: rtl;
}

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

/* Canvas and controls layout */
body[dir="rtl"] .app-layout {
    flex-direction: row-reverse;
}

body[dir="rtl"] .slider-container {
    flex-direction: row-reverse;
}

body[dir="rtl"] .value-display {
    text-align: center;
}

/* Frame icons */
body[dir="rtl"] .frame-icons {
    direction: rtl;
}

/* Control groups */
body[dir="rtl"] .controls-section {
    text-align: right;
}

body[dir="rtl"] .frame-selection {
    text-align: center;
}

/* Labels and text */
body[dir="rtl"] label {
    text-align: right;
}

body[dir="rtl"] .site-branding {
    text-align: center;
}

/* Buttons remain centered */
body[dir="rtl"] button {
    text-align: center;
}

/* Loading spinner - keep on right side in RTL */
body[dir="rtl"] .loading-spinner {
    margin-right: 0;
    margin-left: 8px;
}

/* Back link alignment */
body[dir="rtl"] .back-link {
    text-align: right;
}

/* Category info */
body[dir="rtl"] .category-info {
    text-align: right;
}

body[dir="rtl"] .category-info h3 {
    text-align: right;
}

/* Pagination */
body[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

/* Quality info */
body[dir="rtl"] .quality-info {
    text-align: right;
}

/* Arrows and icons - flip horizontally */
body[dir="rtl"] .nav_home::before {
    transform: scaleX(-1);
}

/* Mobile responsive RTL adjustments */
@media (max-width: 768px) {
    body[dir="rtl"] .app-layout {
        flex-direction: column;
    }
    
    body[dir="rtl"] .categories-container {
        direction: rtl;
    }
}

/* Ensure Arabic font rendering is optimal */
body[dir="rtl"] * {
    font-family: 'Rubik', 'Tajawal', 'Cairo', 'Noto Sans Arabic', sans-serif;
}
/* About page RTL */
body[dir="rtl"] .about-container h1,
body[dir="rtl"] .about-intro,
body[dir="rtl"] .about-section h2 {
    text-align: right;
}

body[dir="rtl"] .step-item {
    border-left: none;
    border-right: 4px solid var(--primary-color);
}

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

body[dir="rtl"] .mission-section {
    text-align: right;
}
/* Contact form RTL */
body[dir="rtl"] .contact-form-group label {
    text-align: right;
}

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

body[dir="rtl"] .contact-alert {
    text-align: right;
}

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

body[dir="rtl"] .hero-features {
    flex-direction: row-reverse;
}

body[dir="rtl"] .feature-item {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    body[dir="rtl"] .hero-features {
        flex-direction: column-reverse;
    }
}