/* ==========================================================================
   KERAH AI Landing Page - RTL (Right-to-Left) Support for Arabic
   ========================================================================== */

/* Apply RTL direction when Arabic is active */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ==========================================================================
   1. LAYOUT ADJUSTMENTS
   ========================================================================== */

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

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

@media (max-width: 992px) {
    [dir="rtl"] .hero-content {
        text-align: center;
    }
}

/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */

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

/* ==========================================================================
   3. BUTTONS & ICONS
   ========================================================================== */

/* Flip arrow icons */
[dir="rtl"] .btn svg,
[dir="rtl"] .icon-arrow {
    transform: scaleX(-1);
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */

[dir="rtl"] .hero-visual {
    order: -1; /* Move visual to left (end) in RTL grid if needed, or keep as is */
}

@media (max-width: 992px) {
    [dir="rtl"] .hero-stats {
        justify-content: center;
    }

    [dir="rtl"] .hero-ctas {
        justify-content: center;
    }

    [dir="rtl"] .hero-trust {
        justify-content: center;
    }
}

/* ==========================================================================
   5. CAPABILITY CARDS
   ========================================================================== */

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

[dir="rtl"] .capability-feature::before {
    margin-left: var(--space-2);
    margin-right: 0;
}

/* ==========================================================================
   6. EXPERTISE SECTION
   ========================================================================== */

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

[dir="rtl"] .expertise-item svg {
    margin-left: var(--space-2);
    margin-right: 0;
}

/* ==========================================================================
   7. STEPS / HOW IT WORKS
   ========================================================================== */

[dir="rtl"] .steps-container {
    direction: rtl;
}

[dir="rtl"] .steps-line {
    left: calc(16.67% + 28px);
    right: calc(16.67% + 28px);
    background: linear-gradient(270deg, var(--accent-blue), var(--accent-orange));
}

/* ==========================================================================
   8. AGENTS SECTION
   ========================================================================== */

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

/* ==========================================================================
   9. ROADMAP
   ========================================================================== */

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

/* ==========================================================================
   10. TESTIMONIALS
   ========================================================================== */

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

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

/* ==========================================================================
   11. PRICING
   ========================================================================== */

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

[dir="rtl"] .pricing-features {
    text-align: right;
}

/* ==========================================================================
   12. FORM ELEMENTS
   ========================================================================== */

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

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

[dir="rtl"] .form-select {
    text-align: right;
    background-position: left var(--space-3) center;
    padding-left: var(--space-10);
    padding-right: var(--space-4);
}

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

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

[dir="rtl"] .waitlist-header {
    text-align: center;
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

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

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

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

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

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

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

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

[dir="rtl"] .footer-links {
    align-items: flex-end;
}

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

@media (max-width: 600px) {
    [dir="rtl"] .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   15. MARGINS & PADDINGS FLIP
   ========================================================================== */

/* General margin-left to margin-right swap */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

/* Spacing adjustments for icons next to text */
[dir="rtl"] .icon-text-gap {
    margin-left: 0;
    margin-right: var(--space-2);
}

/* ==========================================================================
   16. ANIMATIONS ADJUSTMENTS
   ========================================================================== */

/* Flip horizontal animations for RTL */
[dir="rtl"] [data-aos="fade-left"] {
    transform: translateX(-30px);
}

[dir="rtl"] [data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[dir="rtl"] [data-aos="fade-right"] {
    transform: translateX(30px);
}

[dir="rtl"] [data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

/* Orbit animation reversal */
[dir="rtl"] .orbit-icon {
    animation-direction: reverse;
}

/* ==========================================================================
   17. MISC
   ========================================================================== */

/* Badge alignment */
[dir="rtl"] .section-badge {
    margin-left: 0;
    margin-right: 0;
}

/* List markers */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: var(--space-6);
    padding-left: 0;
}

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

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

/* Border radius adjustments for specific elements */
[dir="rtl"] .rounded-left {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

[dir="rtl"] .rounded-right {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* ==========================================================================
   18. ARABIC TYPOGRAPHY ENHANCEMENTS
   ========================================================================== */

[dir="rtl"] {
    /* Slightly larger font for Arabic readability */
    font-size: calc(var(--text-base) * 1.05);

    /* Increased line height for Arabic */
    line-height: 1.7;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.4;
}

/* Arabic-specific font stack (if needed) */
[dir="rtl"] body {
    font-family: 'Inter', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}