/**
 * RTL (Right-to-Left) Styles for Arabic
 */

/* Base RTL */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Section headers should stay centered in RTL */
html[dir="rtl"] .section-header,
html[dir="rtl"] .section-header h2,
html[dir="rtl"] .section-header p,
html[dir="rtl"] .page-header,
html[dir="rtl"] .page-header h1,
html[dir="rtl"] .page-header p,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-subtitle {
    text-align: center;
}

/* Typography - Tajawal Arabic Font */
html[dir="rtl"] body {
    font-family: 'Tajawal', 'Segoe UI', 'Arial', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Tajawal', 'Arial', sans-serif;
    font-weight: 700;
}

/* Navbar - RTL naturally reverses flex items */
html[dir="rtl"] .navbar-container {
    flex-direction: row;
}

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

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

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

/* Flexbox reversals */
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .admin-actions,
html[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .btn .material-icons {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Cards and grids */
html[dir="rtl"] .service-card,
html[dir="rtl"] .team-card,
html[dir="rtl"] .blog-card,
html[dir="rtl"] .contact-form-card {
    text-align: right;
}

/* Service features */
html[dir="rtl"] .service-features {
    text-align: right;
}

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

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

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: left;
}

/* Icons in text */
html[dir="rtl"] .material-icons {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Lists */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* Breadcrumb */
html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

/* Page header */
html[dir="rtl"] .page-header {
    text-align: right;
}

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

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

/* Team card */
html[dir="rtl"] .team-card-content {
    text-align: right;
}

/* Blog card */
html[dir="rtl"] .blog-card-body {
    text-align: right;
}

/* Admin sidebar */
html[dir="rtl"] .admin-sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid var(--border-color);
}

html[dir="rtl"] .admin-main {
    margin-right: 280px;
    margin-left: 0;
}

html[dir="rtl"] .admin-nav a {
    flex-direction: row-reverse;
    text-align: right;
}

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

/* Tables */
html[dir="rtl"] .admin-table th,
html[dir="rtl"] .admin-table td {
    text-align: right;
}

html[dir="rtl"] .admin-table th:last-child,
html[dir="rtl"] .admin-table td:last-child {
    text-align: left;
}

/* Alerts */
html[dir="rtl"] .alert {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .alert .material-icons {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Stats */
html[dir="rtl"] .admin-stats {
    direction: rtl;
}

/* Language switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

html[dir="rtl"] .lang-switcher {
    margin-left: 0;
    margin-right: 1rem;
}

.lang-switcher a {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.lang-switcher a:hover,
.lang-switcher a.active {
    background: var(--primary);
    color: white;
}

/* FAQ */
html[dir="rtl"] .faq-question {
    flex-direction: row-reverse;
    text-align: right;
}

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

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

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

html[dir="rtl"] .pl-3 {
    padding-left: 0;
    padding-right: 1rem;
}

html[dir="rtl"] .pr-3 {
    padding-right: 0;
    padding-left: 1rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    html[dir="rtl"] .admin-sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .admin-sidebar.active {
        transform: translateX(0);
    }

    html[dir="rtl"] .admin-main {
        margin-right: 0;
    }
}

/* ==========================================
   Centered text for key sections in RTL
   ========================================== */

/* Team Section - Center all text */
html[dir="rtl"] .team-card {
    text-align: center;
}

html[dir="rtl"] .team-card h3,
html[dir="rtl"] .team-card .team-name,
html[dir="rtl"] .team-card .team-position,
html[dir="rtl"] .team-card p {
    text-align: center;
}

/* Services Section - Center text */
html[dir="rtl"] .service-card {
    text-align: center;
}

html[dir="rtl"] .service-card h3,
html[dir="rtl"] .service-card p,
html[dir="rtl"] .service-card .service-icon {
    text-align: center;
}

/* About/Who We Are Section */
html[dir="rtl"] .about-section,
html[dir="rtl"] .about-content,
html[dir="rtl"] .about-text {
    text-align: center;
}

html[dir="rtl"] .about-section h2,
html[dir="rtl"] .about-section h3,
html[dir="rtl"] .about-section p {
    text-align: center;
}

/* Stats Section */
html[dir="rtl"] .stat-item,
html[dir="rtl"] .stats-section {
    text-align: center;
}

/* CTA Section */
html[dir="rtl"] .cta-section,
html[dir="rtl"] .cta-content {
    text-align: center;
}

/* Portfolio */
html[dir="rtl"] .portfolio-card {
    text-align: center;
}

html[dir="rtl"] .portfolio-card h3,
html[dir="rtl"] .portfolio-card p {
    text-align: center;
}

/* General content centering */
html[dir="rtl"] .text-center {
    text-align: center !important;
}

/* Card content alignment */
html[dir="rtl"] .card-body,
html[dir="rtl"] .card-content {
    text-align: center;
}