/**
 * RTL (Right-to-Left) Support for Arabic Language
 * Comprehensive RTL layout adjustments for the entire platform
 */

/* ============================================
   BASE RTL STYLES
   ============================================ */

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

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

/* ============================================
   HEADER RTL
   ============================================ */

[dir="rtl"] .ultra-nav {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .ultra-nav-menu {
    flex-direction: row-reverse !important;
}

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

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

[dir="rtl"] .ultra-language-menu {
    right: auto !important;
    left: 0 !important;
}

/* ============================================
   EVENT CARDS RTL
   ============================================ */

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

[dir="rtl"] .card-badges-tactile {
    left: auto !important;
    right: 1rem !important;
}

[dir="rtl"] .card-date-tactile {
    right: auto !important;
    left: 1rem !important;
}

[dir="rtl"] .card-actions-tactile {
    right: auto !important;
    left: 1rem !important;
}

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

[dir="rtl"] .data-header-tactile {
    flex-direction: row-reverse !important;
}

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

[dir="rtl"] .card-origin-sector {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .origin-node {
    flex-direction: row-reverse !important;
}

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

/* ============================================
   BUTTONS & LINKS RTL
   ============================================ */

[dir="rtl"] .ultra-cta-btn {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .tactile-button-primary {
    flex-direction: row-reverse !important;
}

/* ============================================
   FORMS RTL
   ============================================ */

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

/* The organizer panel's own label class is `.form--label` (double dash), which this file did
   not mention, and dashboard.css pins it physically:
     `.event__form .event-group .form--label { text-align: left !important }`
   An Arabic create-event form therefore set its labels left while the fields mirrored -
   measured 2 labels still `text-align:left` under dir=rtl. Selectors here are one level
   deeper than that rule, so they win on specificity rather than on source order. */
[dir="rtl"] .form--label {
    text-align: right !important;
    /* Base form--label is `position:absolute; left:20px` in dashboard.css - a physical edge,
       so the floating label sits on the wrong side of the field in Arabic. */
    left: auto !important;
    right: 20px !important;
}

[dir="rtl"] .event__form .event-group .form--label {
    text-align: right !important;
}

/* Bootstrap ships one geometry, `left`: `.form-check{padding-left:1.5em}`,
   `.form-check-input{float:left;margin-left:-1.5em}`, `.form-switch{padding-left:2.5em}` and a
   toggle knob at `background-position:left center` (right when checked). None of it mirrors, so
   every switch and checkbox in the panel kept its box to the left of its label in Arabic.
   `float:right` is not enough on its own: the negative margin has to move to the same edge or
   the box overlaps the text. */
[dir="rtl"] .form-check {
    padding-left: 0 !important;
    padding-right: 1.5em !important;
}

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

[dir="rtl"] .form-switch {
    padding-left: 0 !important;
    padding-right: 2.5em !important;
}

[dir="rtl"] .form-switch .form-check-input {
    margin-right: -2.5em !important;
    background-position: right center !important;
}

[dir="rtl"] .form-switch .form-check-input:checked {
    background-position: left center !important;
}

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

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

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right !important;
}

/* `.input-group` deliberately has NO reversal rule here. `direction:rtl` already starts the
   flex line at the right edge, so the `flex-direction: row-reverse` this file used to carry
   reversed it a second time and left every field on the same physical side as English -
   measured on the create-event step: DOM [input, addon] gave ltr input@630..1209 /
   addon@1208..1245 and rtl input@30..609 / addon@608..645 (addon still right, i.e. unmirrored);
   with the rule gone the pair reads input@66..645 / addon@30..67, the exact mirror. Same class
   of defect as the `[dir="rtl"] .d-flex` note below.
   The radius is by DOM position for the same reason: a first-child addon lands on the right
   edge under RTL, a last-child one on the left, and one blanket rule cannot round both. */
[dir="rtl"] .input-group-text:first-child {
    border-radius: 0 6px 6px 0 !important;
}

[dir="rtl"] .input-group-text:last-child {
    border-radius: 6px 0 0 6px !important;
}

[dir="rtl"] .input-group .form-control {
    border-radius: 6px 0 0 6px !important;
}

/* ============================================
   ICONS RTL (Mirror Directional Icons)
   ============================================ */

[dir="rtl"] .las.la-arrow-right::before {
    content: "\f060" !important; /* left arrow */
}

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

[dir="rtl"] .las.la-chevron-right::before {
    content: "\f053" !important; /* chevron left */
}

[dir="rtl"] .las.la-chevron-left::before {
    content: "\f054" !important; /* chevron right */
}

[dir="rtl"] .las.la-angle-right::before {
    content: "\f104" !important; /* angle left */
}

[dir="rtl"] .las.la-angle-left::before {
    content: "\f105" !important; /* angle right */
}

/* ============================================
   GRID & FLEXBOX RTL - FIXED: no global d-flex reversal (breaks layouts)
   Only reverse directional utilities that are semantically directional
   ============================================ */

[dir="rtl"] .justify-content-start {
    justify-content: flex-end !important;
}

[dir="rtl"] .justify-content-end {
    justify-content: flex-start !important;
}
/* NOTE: [dir="rtl"] .d-flex row-reverse REMOVED - was breaking all flex layouts. Use targeted reversals only. */

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

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

[dir="rtl"] .me-1, [dir="rtl"] .me-2, [dir="rtl"] .me-3, 
[dir="rtl"] .me-4, [dir="rtl"] .me-5 {
    margin-right: 0 !important;
}

[dir="rtl"] .me-1 { margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; }
[dir="rtl"] .me-4 { margin-left: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-left: 3rem !important; }

[dir="rtl"] .ms-1, [dir="rtl"] .ms-2, [dir="rtl"] .ms-3,
[dir="rtl"] .ms-4, [dir="rtl"] .ms-5 {
    margin-left: 0 !important;
}

[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-right: 3rem !important; }

[dir="rtl"] .pe-1, [dir="rtl"] .pe-2, [dir="rtl"] .pe-3,
[dir="rtl"] .pe-4, [dir="rtl"] .pe-5 {
    padding-right: 0 !important;
}

[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-left: 1rem !important; }
[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-left: 3rem !important; }

[dir="rtl"] .ps-1, [dir="rtl"] .ps-2, [dir="rtl"] .ps-3,
[dir="rtl"] .ps-4, [dir="rtl"] .ps-5 {
    padding-left: 0 !important;
}

[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3 { padding-right: 1rem !important; }
[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-right: 3rem !important; }

/* ============================================
   FOOTER RTL
   ============================================ */

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

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

[dir="rtl"] .social-links {
    flex-direction: row-reverse !important;
}

/* ============================================
   MODALS & DROPDOWNS RTL
   ============================================ */

[dir="rtl"] .modal-header {
    flex-direction: row-reverse !important;
}

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

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

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

/* ============================================
   BREADCRUMBS RTL
   ============================================ */

[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse !important;
}

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

/* ============================================
   PAGINATION RTL
   ============================================ */

[dir="rtl"] .pagination {
    flex-direction: row-reverse !important;
}

/* ============================================
   TABLES RTL
   ============================================ */

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

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

/* ============================================
   ALERTS & NOTIFICATIONS RTL
   ============================================ */

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

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

/* ============================================
   CAROUSEL RTL
   ============================================ */

[dir="rtl"] .carousel-control-prev {
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .carousel-control-next {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .carousel-indicators {
    flex-direction: row-reverse !important;
}

/* ============================================
   SPECIFIC SECTIONS RTL
   ============================================ */

/* Hero Section */
[dir="rtl"] .hero-section {
    text-align: right !important;
}

/* Featured Events */
[dir="rtl"] .ultra-showcase-grid {
    direction: rtl !important;
}

/* Categories */
[dir="rtl"] .category-card {
    text-align: right !important;
}

/* Locations */
[dir="rtl"] .location-card {
    text-align: right !important;
}

/* Testimonials */
[dir="rtl"] .testimonial-card {
    text-align: right !important;
}

/* ============================================
   MOBILE RTL
   ============================================ */

@media (max-width: 991px) {
    [dir="rtl"] .ultra-nav-content {
        right: auto !important;
        left: -100% !important;
    }
    
    [dir="rtl"] .ultra-nav-content.active {
        left: 0 !important;
    }
    
    [dir="rtl"] .ultra-mobile-toggle {
        order: -1 !important;
    }
}

/* ============================================
   PRINT RTL
   ============================================ */

@media print {
    [dir="rtl"] {
        direction: rtl !important;
        text-align: right !important;
    }
}