/* ================================================================
   RTL (Arabic) Layout Fixes — active only when lang=ar (dir="rtl")
   Loaded globally via styles.blade.php
   ================================================================ */

/* 1. Arabic font for all text elements */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span,
[dir="rtl"] li, [dir="rtl"] button, [dir="rtl"] input,
[dir="rtl"] label, [dir="rtl"] td, [dir="rtl"] th {
    font-family: 'nkar', 'Noto Kufi Arabic', Arial, sans-serif;
}

/* 2. Swap margin-left / margin-right utility classes */
[dir="rtl"] .ml-3  { margin-left: 0 !important; margin-right: 3px !important; }
[dir="rtl"] .mr-3  { margin-right: 0 !important; margin-left: 3px !important; }
[dir="rtl"] .ml-5  { margin-left: 0 !important; margin-right: 5px !important; }
[dir="rtl"] .mr-5  { margin-right: 0 !important; margin-left: 5px !important; }
[dir="rtl"] .ml-8  { margin-left: 0 !important; margin-right: 8px !important; }
[dir="rtl"] .mr-8  { margin-right: 0 !important; margin-left: 8px !important; }
[dir="rtl"] .ml-10 { margin-left: 0 !important; margin-right: 10px !important; }
[dir="rtl"] .mr-10 { margin-right: 0 !important; margin-left: 10px !important; }
[dir="rtl"] .ml-15 { margin-left: 0 !important; margin-right: 15px !important; }
[dir="rtl"] .mr-15 { margin-right: 0 !important; margin-left: 15px !important; }
[dir="rtl"] .ml-20 { margin-left: 0 !important; margin-right: 20px !important; }
[dir="rtl"] .mr-20 { margin-right: 0 !important; margin-left: 20px !important; }
[dir="rtl"] .ml-25 { margin-left: 0 !important; margin-right: 25px !important; }
[dir="rtl"] .mr-25 { margin-right: 0 !important; margin-left: 25px !important; }
[dir="rtl"] .ml-30 { margin-left: 0 !important; margin-right: 30px !important; }
[dir="rtl"] .mr-30 { margin-right: 0 !important; margin-left: 30px !important; }
[dir="rtl"] .ml-40 { margin-left: 0 !important; margin-right: 40px !important; }
[dir="rtl"] .mr-40 { margin-right: 0 !important; margin-left: 40px !important; }

/* 3. Swap padding-left / padding-right utility classes */
[dir="rtl"] .pl-5  { padding-left: 0 !important; padding-right: 5px !important; }
[dir="rtl"] .pr-5  { padding-right: 0 !important; padding-left: 5px !important; }
[dir="rtl"] .pl-8  { padding-left: 0 !important; padding-right: 8px !important; }
[dir="rtl"] .pr-8  { padding-right: 0 !important; padding-left: 8px !important; }
[dir="rtl"] .pl-15 { padding-left: 0 !important; padding-right: 15px !important; }
[dir="rtl"] .pr-15 { padding-right: 0 !important; padding-left: 15px !important; }
[dir="rtl"] .pl-20 { padding-left: 0 !important; padding-right: 20px !important; }
[dir="rtl"] .pr-20 { padding-right: 0 !important; padding-left: 20px !important; }
[dir="rtl"] .pl-25 { padding-left: 0 !important; padding-right: 25px !important; }
[dir="rtl"] .pr-25 { padding-right: 0 !important; padding-left: 25px !important; }
[dir="rtl"] .pl-30 { padding-left: 0 !important; padding-right: 30px !important; }
[dir="rtl"] .pr-30 { padding-right: 0 !important; padding-left: 30px !important; }
[dir="rtl"] .pl-40 { padding-left: 0 !important; padding-right: 40px !important; }
[dir="rtl"] .pr-40 { padding-right: 0 !important; padding-left: 40px !important; }

/* 4. Responsive RTL swaps — xl breakpoint (≤1199px) */
@media (max-width: 1199px) {
    [dir="rtl"] .xl\:pr-20 { padding-right: 0 !important; padding-left: 20px !important; }
    [dir="rtl"] .xl\:pl-20 { padding-left: 0 !important; padding-right: 20px !important; }
    [dir="rtl"] .xl\:ml-20 { margin-left: 0 !important; margin-right: 20px !important; }
    [dir="rtl"] .xl\:mr-20 { margin-right: 0 !important; margin-left: 20px !important; }
    [dir="rtl"] .xl\:pl-15 { padding-left: 0 !important; padding-right: 15px !important; }
    [dir="rtl"] .xl\:pr-15 { padding-right: 0 !important; padding-left: 15px !important; }
    [dir="rtl"] .xl\:ml-15 { margin-left: 0 !important; margin-right: 15px !important; }
    [dir="rtl"] .xl\:mr-15 { margin-right: 0 !important; margin-left: 15px !important; }
    [dir="rtl"] .xl\:pl-30 { padding-left: 0 !important; padding-right: 30px !important; }
    [dir="rtl"] .xl\:pr-30 { padding-right: 0 !important; padding-left: 30px !important; }
    [dir="rtl"] .xl\:ml-30 { margin-left: 0 !important; margin-right: 30px !important; }
    [dir="rtl"] .xl\:mr-30 { margin-right: 0 !important; margin-left: 30px !important; }
}

/* 5. Responsive RTL swaps — md breakpoint (≤767px) */
@media (max-width: 767px) {
    [dir="rtl"] .md\:pr-0  { padding-right: 0 !important; padding-left: 0 !important; }
    [dir="rtl"] .md\:pl-0  { padding-left: 0 !important; padding-right: 0 !important; }
    [dir="rtl"] .md\:ml-0  { margin-left: 0 !important; margin-right: 0 !important; }
    [dir="rtl"] .md\:mr-0  { margin-right: 0 !important; margin-left: 0 !important; }
    [dir="rtl"] .md\:pr-20 { padding-right: 0 !important; padding-left: 20px !important; }
    [dir="rtl"] .md\:pl-20 { padding-left: 0 !important; padding-right: 20px !important; }
}

/* 6. Responsive RTL swaps — sm breakpoint (≤575px) */
@media (max-width: 575px) {
    [dir="rtl"] .sm\:pl-15 { padding-left: 0 !important; padding-right: 15px !important; }
    [dir="rtl"] .sm\:pr-15 { padding-right: 0 !important; padding-left: 15px !important; }
    [dir="rtl"] .sm\:pl-20 { padding-left: 0 !important; padding-right: 20px !important; }
    [dir="rtl"] .sm\:pr-20 { padding-right: 0 !important; padding-left: 20px !important; }
    [dir="rtl"] .sm\:ml-15 { margin-left: 0 !important; margin-right: 15px !important; }
    [dir="rtl"] .sm\:mr-15 { margin-right: 0 !important; margin-left: 15px !important; }
    [dir="rtl"] .sm\:pl-0  { padding-left: 0 !important; padding-right: 0 !important; }
    [dir="rtl"] .sm\:pr-0  { padding-right: 0 !important; padding-left: 0 !important; }
    [dir="rtl"] .sm\:ml-0  { margin-left: 0 !important; margin-right: 0 !important; }
    [dir="rtl"] .sm\:mr-0  { margin-right: 0 !important; margin-left: 0 !important; }
}

/* 7. Header: Search panel — swap icon and button sides */
[dir="rtl"] .header .header-search__field .icon {
    left: auto;
    right: 0;
}
[dir="rtl"] .header .header-search__field button {
    right: auto;
    left: 0;
}

/* 8. Header navigation: subnav dropdown triangle indicator */
[dir="rtl"] .header .header-menu .menu__nav > li > .subnav::before {
    left: auto;
    right: 20px;
}

/* 9. Mobile menu: back button chevron icon */
[dir="rtl"] .menu__backButton .icon-chevron-left {
    display: inline-block;
    transform: scaleX(-1);
}

/* 10. Header nav: chevron-right indicator on parent menu items */
[dir="rtl"] .header-menu .menu-item-has-children > a .icon-chevron-right,
[dir="rtl"] .header-menu .menu-item-has-children > a .icon-chevron-right,
[dir="rtl"] .header-menu li > a .icon-chevron-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* 11. About section: floating secondary image and tag positioning */
[dir="rtl"] .elements-image__img2 {
    left: auto;
    right: 0;
}
[dir="rtl"] .elements-image__el3 {
    right: auto;
    left: 30px;
}

/* 12. Slider: absolute-positioned prev/next nav buttons */
[dir="rtl"] .section-slider-nav.-absolute.-prev {
    left: auto;
    right: -35px;
}
[dir="rtl"] .section-slider-nav.-absolute.-next {
    right: auto;
    left: -35px;
}
@media (max-width: 575px) {
    [dir="rtl"] .section-slider-nav.-absolute.-prev { left: auto; right: -10px; }
    [dir="rtl"] .section-slider-nav.-absolute.-next { right: auto; left: -10px; }
}

/* 13. Slider hero: slider card prev/next absolute buttons */
[dir="rtl"] .section-slider-nav.-absolute.-prev.js-courses-prev {
    left: auto;
    right: -35px;
}
[dir="rtl"] .section-slider-nav.-absolute.-next.js-courses-next {
    right: auto;
    left: -35px;
}

/* 14. Arrow icons: flip all directional arrows in navigation context */
[dir="rtl"] .js-prev .icon-arrow-left,
[dir="rtl"] .js-prev .icon-arrow-right,
[dir="rtl"] .js-next .icon-arrow-left,
[dir="rtl"] .js-next .icon-arrow-right,
[dir="rtl"] .js-courses-prev .icon-arrow-left,
[dir="rtl"] .js-courses-prev .icon-arrow-right,
[dir="rtl"] .js-courses-next .icon-arrow-left,
[dir="rtl"] .js-courses-next .icon-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* 15. "More info" external link arrows */
[dir="rtl"] .icon-arrow-top-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* 16. Newsletter form submit arrow */
[dir="rtl"] .form-single-field .button .icon-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* 17. Testimonial modal: close button swap from right to left */
[dir="rtl"] .tm-modal-close {
    right: auto;
    left: 10px;
}

/* 18. Page content: section h2 underline decoration */
[dir="rtl"] .specific_page .section h2::after {
    left: auto;
    right: 0;
}

/* 19. Page content: sub-accordion arrow indicator */
[dir="rtl"] .specific_page .sub-accordion-headerr::after {
    right: auto;
    left: 20px;
}

/* 20. Page content: main accordion expand/collapse indicator */
[dir="rtl"] .specific_page .accordion-headerr::after {
    position: absolute;
    right: unset;
    left: 25px;
}

/* 21. File list table: alignment and action button spacing */
[dir="rtl"] .custom-file-table th,
[dir="rtl"] .custom-file-table td {
    text-align: right;
}
[dir="rtl"] .custom-file-table .actions a {
    margin-right: 0;
    margin-left: 8px;
}

/* 22. Sidebar: blog nav item indicator line */
[dir="rtl"] .sidebar.-base-sidebar .sidebar__links > div > a::before {
    left: auto;
    right: 0;
    padding-right: 10px;
    padding-left: 0;
}

/* 23. Event category badges inline spacing */
[dir="rtl"] .eventCard__inner .d-flex.x-gap-5 a[style*="margin-right"] {
    margin-right: 0 !important;
    margin-left: 3px !important;
}

/* 24. Mega menu: correct right-to-left banner positioning */
[dir="rtl"] .header .header-menu .mega .mega-banner {
    margin-left: 0;
    margin-right: auto;
}

/* 25. Section slider nav: keep standard [← prev][•••][→ next] layout in RTL
   Without this, dir="rtl" reverses flex order AND rule 14 flips icons,
   resulting in a double-reversal that swaps the semantic meaning of the buttons. */

[dir="rtl"] .js-section-slider > .d-flex.justify-center,
[dir="rtl"] .js-testimonials-slider-2 > .d-flex.justify-center,
[dir="rtl"] .testimonials-slider-2 > .d-flex.justify-center {
    direction: ltr;
}

/* Override rule 14 for these slider nav containers — icons must NOT flip since
   the flex reversal is already prevented above */
[dir="rtl"] .js-section-slider .js-prev .icon-arrow-left,
[dir="rtl"] .js-section-slider .js-prev .icon-arrow-right,
[dir="rtl"] .js-section-slider .js-next .icon-arrow-left,
[dir="rtl"] .js-section-slider .js-next .icon-arrow-right,
[dir="rtl"] .js-testimonials-slider-2 .js-prev .icon-arrow-left,
[dir="rtl"] .js-testimonials-slider-2 .js-prev .icon-arrow-right,
[dir="rtl"] .js-testimonials-slider-2 .js-next .icon-arrow-left,
[dir="rtl"] .js-testimonials-slider-2 .js-next .icon-arrow-right {
    transform: none !important;
}