/* RTL Support for Arabic Language */

/* ========================================
   1. GLOBAL RTL STYLES
   ======================================== */

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] body {
    text-align: right;
}

/* ========================================
   2. TOPBAR & HEADER LTR EXCEPTION
   IMPORTANT: Keep topbar and header LTR for consistency
   ======================================== */

/* Force topbar to stay LTR */
[dir="rtl"] .topbar,
[dir="rtl"] .topbar-inner,
[dir="rtl"] .topbar-left,
[dir="rtl"] .topbar-right {
    direction: ltr !important;
}

[dir="rtl"] .topbar *,
[dir="rtl"] .topbar-inner *,
[dir="rtl"] .topbar-left *,
[dir="rtl"] .topbar-right * {
    direction: ltr !important;
}

/* Force main header/menu to stay LTR */
[dir="rtl"] .header,
[dir="rtl"] .main-menu,
[dir="rtl"] .main-menu-inner,
[dir="rtl"] .main-menu-left,
[dir="rtl"] .main-menu-right {
    direction: ltr !important;
}

[dir="rtl"] .header *,
[dir="rtl"] .main-menu *,
[dir="rtl"] .main-menu-inner *,
[dir="rtl"] .main-menu-left *,
[dir="rtl"] .main-menu-right * {
    direction: ltr !important;
}

/* Keep navigation menu LTR */
[dir="rtl"] .navigation,
[dir="rtl"] .main-menu-list {
    direction: ltr !important;
}

/* ========================================
   2. DESKTOP HEADER RTL (min-width: 992px)
   ======================================== */

@media (min-width: 992px) {

    /* Logo alignment */
    [dir="rtl"] .main-header .logo {
        margin-right: 0;
        margin-left: auto;
    }

    /* Navigation alignment */
    [dir="rtl"] .main-nav {
        margin-left: 0;
        margin-right: auto;
    }

    [dir="rtl"] .main-nav ul {
        padding-right: 0;
    }

    /* Language selector */
    [dir="rtl"] .language-selector {
        margin-left: 0;
        margin-right: 15px;
    }
}

/* ========================================
   3. MOBILE MENU - Content Text RTL
   Menu animation works normally, text direction is RTL
   ======================================== */

@media (max-width: 991px) {
    /* Mobile menu slides from left in all languages (LTR behavior) */
    /* Only text direction and alignment are RTL */

    [dir="rtl"] .mobile-nav-content {
        direction: rtl;
        text-align: right;
        left: 0;
        /* Fix RTL positioning - prevent -300px offset */
    }

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

/* ========================================
   4. FORM FIELDS RTL
   ======================================== */

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

[dir="rtl"] .input-group-text {
    border-radius: 0 0.25rem 0.25rem 0;
}

[dir="rtl"] .input-group>.form-control:not(:last-child) {
    border-radius: 0.25rem 0 0 0.25rem;
}

/* Placeholder text alignment */
[dir="rtl"] ::placeholder {
    text-align: right;
}

/* Radio buttons and checkboxes - position on right side */
[dir="rtl"] input[type="radio"],
[dir="rtl"] input[type="checkbox"] {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}

[dir="rtl"] .form-check-input {
    float: right;
    margin-left: 0.5em;
    margin-right: -1.5em;
}

[dir="rtl"] .form-check-label {
    padding-left: 0;
    padding-right: 0;
}

/* ========================================
   5. ICONS AND ARROWS RTL
   ======================================== */

/* Icons on left side of text */
[dir="rtl"] .icon-left {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Icons on right side of text */
[dir="rtl"] .icon-right {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Flip arrows */
[dir="rtl"] .arrow-right::before {
    content: "←";
}

[dir="rtl"] .arrow-left::before {
    content: "→";
}

/* Font Awesome icons */
[dir="rtl"] .fa-arrow-right::before {
    content: "\f060";
    /* fa-arrow-left */
}

[dir="rtl"] .fa-arrow-left::before {
    content: "\f061";
    /* fa-arrow-right */
}

/* ========================================
   6. BUTTONS AND LINKS
   ======================================== */

/* Reverse button order in RTL */
[dir="rtl"] .event-details-booking-button {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.5rem;
}

[dir="rtl"] .btn-icon-left {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .btn-icon-right {
    margin-left: 0;
    margin-right: 8px;
}

/* ========================================
   7. LISTS AND NAVIGATION
   ======================================== */

[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 0;
    padding-left: 0;
}

[dir="rtl"] .list-unstyled {
    padding-right: 0;
}

/* ========================================
   8. FOOTER RTL
   ======================================== */

[dir="rtl"] .footer-widget-contact-list,
[dir="rtl"] .footer-widget-socials,
[dir="rtl"] .mobile-nav-social {
    justify-content: flex-end;
}

/* ========================================
   9. BREADCRUMBS
   ======================================== */

[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 0.5rem;
    content: "/";
}

/* ========================================
   10. MODALS AND DROPDOWNS
   ======================================== */

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

[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

/* ========================================
   11. TABLES
   ======================================== */

[dir="rtl"] table {
    text-align: right;
}

[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

/* ========================================
   12. FLATPICKR DATE PICKER RTL
   ======================================== */

[dir="rtl"] .flatpickr-calendar {
    direction: rtl;
}

[dir="rtl"] .flatpickr-months .flatpickr-prev-month {
    right: auto;
    left: 0;
}

[dir="rtl"] .flatpickr-months .flatpickr-next-month {
    left: auto;
    right: 0;
}

/* ========================================
   13. UTILITY CLASSES
   ======================================== */

[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

[dir="rtl"] .float-left {
    float: right !important;
}

[dir="rtl"] .float-right {
    float: left !important;
}

[dir="rtl"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ========================================
   14. CUSTOM COMPONENTS
   ======================================== */

/* Steps section - reverse order for RTL */
[dir="rtl"] .steps-container {
    flex-direction: row-reverse;
}

/* Country grid - reverse order */
[dir="rtl"] .country-grid {
    direction: rtl;
}

/* Social media icons */
[dir="rtl"] .social-icons {
    flex-direction: row-reverse;
}