/* RTL Support for Arabic */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .container {
    direction: rtl;
}

/* Reverse flex directions for RTL */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .space-x-8> :not([hidden])~ :not([hidden]) {
    margin-right: 2rem;
    margin-left: 0;
}

[dir="rtl"] .space-x-2> :not([hidden])~ :not([hidden]) {
    margin-right: 0.5rem;
    margin-left: 0;
}

[dir="rtl"] .space-x-4> :not([hidden])~ :not([hidden]) {
    margin-right: 1rem;
    margin-left: 0;
}

[dir="rtl"] .space-x-10> :not([hidden])~ :not([hidden]) {
    margin-right: 2.5rem;
    margin-left: 0;
}

/* Text alignment */
[dir="rtl"] .text-left {
    text-align: right;
}

[dir="rtl"] .text-right {
    text-align: left;
}

[dir="rtl"] .md\:text-right {
    text-align: left;
}

/* Margins and Padding */
[dir="rtl"] .mr-2 {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .ml-2 {
    margin-right: 0.5rem;
    margin-left: 0;
}

[dir="rtl"] .pr-12 {
    padding-left: 3rem;
    padding-right: 0;
}

[dir="rtl"] .pl-12 {
    padding-right: 3rem;
    padding-left: 0;
}

[dir="rtl"] .pl-6 {
    padding-right: 1.5rem;
    padding-left: 0;
}

[dir="rtl"] .-mr-2 {
    margin-left: -0.5rem;
    margin-right: 0;
}

/* Border adjustments */
[dir="rtl"] .border-l {
    border-right-width: 1px;
    border-left-width: 0;
}

[dir="rtl"] .border-r {
    border-left-width: 1px;
    border-right-width: 0;
}

/* Timeline adjustments for RTL */
[dir="rtl"] .timeline-line::before {
    right: 50%;
    left: auto;
    transform: translateX(50%);
}

/* Language Switcher Active State */
.lang-option.active {
    background-color: rgba(201, 169, 97, 0.1);
    font-weight: 600;
    color: #C9A961;
}

/* Smooth font transitions */
html[lang="ar"] {
    font-family: 'Tajawal', 'Arial', sans-serif;
}

/* Ensure proper text rendering for Arabic */
[dir="rtl"] * {
    text-align: start;
}

[dir="rtl"] .text-center {
    text-align: center !important;
}