/* ==========================================================================
   1. BASE DIRECTIONS & FONTS MAPPING
   ========================================================================== */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-ar);
}

html[class="rtl"] body {
    font-family: var(--font-ar);
}

html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
    font-family: var(--font-en);
}

/* ==========================================================================
   2. ICONS GLOBAL FIX
   ========================================================================== */

i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

/* ==========================================================================
   3. NUMBERS / EMAILS / PHONES FIX
   ========================================================================== */

.time-ltr,
input[type="email"],
input[type="tel"],
.phone-number,
.numeric-data {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left;
}

html[dir="rtl"] .phone-number,
html[dir="rtl"] .numeric-data {
    text-align: right;
}

/* ==========================================================================
   4. SMART ARROWS
   ========================================================================== */

html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .bi-chevron-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .bi-arrow-left,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .bi-chevron-left,
html[dir="rtl"] .fa-chevron-left {
    transform: scaleX(-1);
}

.read-more-link:hover i,
.btn:hover i.bi-arrow-right,
.btn:hover i.fa-arrow-right {
    transform: translateX(4px);
}

.btn:hover i.bi-arrow-left,
.btn:hover i.fa-arrow-left {
    transform: translateX(-4px);
}

html[dir="rtl"] .read-more-link:hover i,
html[dir="rtl"] .btn:hover i.bi-arrow-right,
html[dir="rtl"] .btn:hover i.fa-arrow-right {
    transform: translateX(-4px) scaleX(-1);
}

html[dir="rtl"] .btn:hover i.bi-arrow-left,
html[dir="rtl"] .btn:hover i.fa-arrow-left {
    transform: translateX(4px) scaleX(-1);
}

/* ==========================================================================
   5. NAVIGATION & NAVBAR
   ========================================================================== */

html[dir="rtl"] .nav-menu,
html[dir="rtl"] .navbar-actions,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-meta,
html[dir="rtl"] .hero-reference-features {
    direction: rtl;
}

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

html[dir="rtl"] .nav-menu,
html[dir="rtl"] .navbar-actions,
html[dir="rtl"] .language-toggle button,
html[dir="rtl"] .nav-admin-btn,
html[dir="rtl"] .nav-status {
    display: flex;
    flex-direction: row;
    align-items: center;
}

html[dir="rtl"] .navbar-actions {
    gap: 16px;
}

html[dir="rtl"] .language-toggle button {
    font-family: var(--font-ar);
}

html[dir="rtl"] .navbar-actions i,
html[dir="rtl"] .language-toggle button i,
html[dir="rtl"] .nav-admin-btn i {
    margin-inline-start: 8px;
    margin-inline-end: 0;
}

html[dir="rtl"] .nav-status span {
    margin-inline-end: 8px;
    margin-inline-start: 0;
}

html[dir="rtl"] .nav-status i {
    margin-inline-end: 6px;
    margin-inline-start: 0;
}

/* ==========================================================================
   6. COMPONENTS FIXES
   ========================================================================== */

html[dir="rtl"] .event-card .badge {
    align-self: flex-start;
}

html[dir="rtl"] .form-errors {
    border-right: 4px solid var(--color-accent);
    border-left: none;
}

html[dir="ltr"] .form-errors {
    border-left: 4px solid var(--color-accent);
    border-right: none;
}

html[dir="rtl"] .contact-info-item,
html[dir="rtl"] .sidebar-card h3,
html[dir="rtl"] .detail-section-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

html[dir="rtl"] .contact-info-item > i,
html[dir="rtl"] .info-list li i,
html[dir="rtl"] .sidebar-card h3 i,
html[dir="rtl"] .detail-section-title i {
    margin-inline-start: 12px;
    margin-inline-end: 0;
}

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


/* ==========================================================================
   8. CONTACT PAGE RTL FIX
   ========================================================================== */

html[dir="rtl"] .contact-section-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

html[dir="rtl"] .contact-info-sidebar {
    order: 2;
}

html[dir="rtl"] .contact-form-container {
    order: 1;
}