/* RTL Support for Arabic Language */
html,
body {
    direction: rtl;
    text-align: right;
    font-family: 'Tajawal', 'Space Grotesk', sans-serif;
}

input,
textarea,
select,
button {
    direction: rtl;
    text-align: right;
    font-family: 'Tajawal', 'Space Grotesk', sans-serif;
}

/* Global Layout Fixes */
.hero::before {
    right: auto;
    left: -20%;
}

.stat {
    text-align: right;
}

/* Billing Toggle Badge */
.billing-option .discount-badge {
    right: auto;
    left: -8px;
}

/* Timeline RTL Fixes */
.timeline::after {
    left: auto;
    right: 20px;
    margin-left: 0;
    margin-right: -1px;
}

.timeline-item::after {
    left: auto;
    right: 12px;
}

.timeline-number {
    right: auto;
    left: 20px;
}

/* Timeline Desktop View */
@media screen and (min-width: 768px) {
    .timeline::after {
        left: auto;
        right: 50%;
    }

    .timeline-item:nth-child(even) {
        left: auto;
        right: 50%;
    }

    .timeline-item:nth-child(odd) {
        left: auto;
        right: 0;
        text-align: right;
        /* Ensure it stays right aligned (was right in CSS but let's be safe) */
    }

    /* In original CSS:
     odd child: text-align: right (line 1602)
     This puts text towards the center spine in LTR.
     In RTL, odd child is on the RIGHT side?
     Wait. 
     LTR:
     - Odd (Left side): text-align: right (towards spine).
     - Even (Right side): defaults left (towards spine).
     
     RTL:
     - Even (Right side?? No, even/odd logic stays same).
     - We need to mirror the layout.
     
     Let's assume we want the same "Snake" layout.
     If Timeline Line is in center.
     Items alternate left and right.
     
     Original:
     Odd: left: 0 (Left side). Text-align: right.
     Even: left: 50% (Right side).
     
     RTL:
     Odd: positions at right: 0? -> Right side.
     Even: positions at right: 50% -> Left side.
     
     If Odd is Right side:
     Text-align should be Left (towards spine).
     
     If Even is Left side:
     Text-align should be Right (towards spine).
  */

    .timeline-item:nth-child(odd) {
        left: auto;
        right: 0;
        text-align: right;
        /* Towards center spine */
    }

    .timeline-item:nth-child(odd) .timeline-content {
        text-align: right;
    }

    .timeline-item:nth-child(even) {
        text-align: right;
    }

    .timeline-item:nth-child(odd) .timeline-number {
        left: auto;
        right: 20px;
    }

    .timeline-item:nth-child(even)::after {
        left: auto;
        right: -8px;
    }

    .timeline-item:nth-child(odd)::after {
        left: -8px;
        right: auto;
    }
}

/* Mobile Menu */
@media (max-width: 880px) {
    .string-labels {
        left: auto;
        right: -24px;
    }

    .timeline::after {
        left: auto;
        right: 20px;
    }
}