/* ============================================
   Maneer WM — RTL Stylesheet (Arabic)
   Applied when html[dir="rtl"]
   ============================================ */

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

/* --- Typography --- */
[dir="rtl"] .font-arabic {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    letter-spacing: 0;
}

[dir="rtl"] .hero-title,
[dir="rtl"] .section-title {
    letter-spacing: 0;
}

[dir="rtl"] .section-label {
    letter-spacing: 0.02em;
}

/* --- Header (RTL uses native direction, no flex-reverse) --- */
[dir="rtl"] .header-inner {
    direction: rtl;
}

[dir="rtl"] .logo-text {
    direction: rtl;
}

[dir="rtl"] .nav-list {
    direction: rtl;
}

[dir="rtl"] .header-actions {
    direction: rtl;
}

/* --- Hero --- */
[dir="rtl"] .hero .container {
    direction: rtl;
}

[dir="rtl"] .hero-visual {
    justify-content: flex-start;
}

[dir="rtl"] .dashboard-body {
    direction: rtl;
}

/* --- Solution Section --- */
[dir="rtl"] .solution-layout {
    direction: rtl;
}

[dir="rtl"] .solution-content .section-title {
    text-align: right;
}

[dir="rtl"] .solution-benefits li {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .solution-benefits li svg {
    margin-top: 2px;
}

/* --- Workflow Diagram --- */
[dir="rtl"] .workflow-step {
    flex-direction: row-reverse;
}

/* --- Feature Cards --- */
[dir="rtl"] .feature-detail-card {
    direction: rtl;
}

/* --- Feature List --- */
[dir="rtl"] .feature-list li {
    padding-left: 0;
    padding-right: var(--space-6);
}

[dir="rtl"] .feature-list li::before {
    left: auto;
    right: 0;
}

/* --- Solution Points --- */
[dir="rtl"] .solution-points li {
    padding-left: 0;
    padding-right: var(--space-6);
}

[dir="rtl"] .solution-points li::before {
    left: auto;
    right: 0;
}

/* --- About / Contact --- */
[dir="rtl"] .about-values li {
    text-align: right;
}

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

[dir="rtl"] .form-row {
    direction: rtl;
}

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

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

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

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

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

[dir="rtl"] .footer-nav {
    text-align: right;
}

/* --- Approach numbers --- */
[dir="rtl"] .approach-number {
    text-align: right;
}

/* --- Language Switcher --- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-500);
    border: 1px solid var(--color-gray-200);
    border-radius: 50%;
    text-decoration: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.lang-switch:hover {
    color: var(--color-navy);
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

/* --- Arabic text line-height --- */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] span {
    line-height: 1.8;
}

[dir="rtl"] .hero-subtitle,
[dir="rtl"] .section-desc,
[dir="rtl"] .page-hero-desc {
    line-height: 1.9;
}

[dir="rtl"] .problem-card p,
[dir="rtl"] .feature-card p,
[dir="rtl"] .solution-card p,
[dir="rtl"] .stat-card p,
[dir="rtl"] .trust-item p,
[dir="rtl"] .approach-item p {
    line-height: 1.8;
}

/* --- Mobile Nav RTL --- */
@media (max-width: 768px) {
    [dir="rtl"] .main-nav {
        position: fixed;
        top: 0;
        left: -100%;
        right: auto;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--color-white);
        padding: calc(var(--header-height) + var(--space-8)) var(--space-6) var(--space-6);
        box-shadow: var(--shadow-xl);
        transition: left var(--transition-base);
        z-index: 999;
        display: block;
        justify-content: flex-start;
    }

    [dir="rtl"] .main-nav.is-open {
        left: 0;
    }

    [dir="rtl"] .nav-list {
        flex-direction: column;
        align-items: stretch;
    }

    [dir="rtl"] .problems-grid {
        grid-template-columns: 1fr;
    }
}