/**
 * RTL layout overrides for Arabic (dir=rtl)
 * Loaded on all pages; rules apply when html[dir="rtl"]
 */

html[dir="rtl"] {
  direction: rtl;
}

/* Keep international phone numbers LTR (+963 …) so + does not flip to the end. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .ou-phone-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

html[dir="rtl"] body,
html[dir="rtl"] .ou-body--ar {
  font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  text-align: right;
  letter-spacing: 0;
  word-spacing: 0.02em;
}

/* Logical margin/padding flips for common Tailwind utilities */
html[dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; }
html[dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; }
html[dir="rtl"] .ml-10 { margin-left: 0; margin-right: 2.5rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
html[dir="rtl"] .-ml-4 { margin-left: 0; margin-right: -1rem; }
html[dir="rtl"] .-ml-6 { margin-left: 0; margin-right: -1.5rem; }
html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
html[dir="rtl"] .pl-12 { padding-left: 0; padding-right: 3rem; }
html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
html[dir="rtl"] .px-5 { /* symmetric */ }
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] .text-start { text-align: right; }
html[dir="rtl"] .lg\:text-left { text-align: right; }
html[dir="rtl"] .md\:text-left { text-align: right; }
html[dir="rtl"] .lg\:text-start { text-align: right; }
html[dir="rtl"] .md\:text-start { text-align: right; }

html[dir="rtl"] .left-5 { left: auto; right: 1.25rem; }
html[dir="rtl"] .left-10 { left: auto; right: 2.5rem; }
html[dir="rtl"] .right-5 { right: auto; left: 1.25rem; }
html[dir="rtl"] .right-10 { right: auto; left: 2.5rem; }
html[dir="rtl"] .right-40 { right: auto; left: 10rem; }

/* Back / undo icons */
html[dir="rtl"] .lucide-undo2,
html[dir="rtl"] .lucide-undo-2 {
  transform: scaleX(-1);
}

/* Popular campaigns carousel — "تبرع الآن" arrow on the left, pointing left */
html[dir="rtl"] a.text-ou-primary.hover\:underline:has(> span[aria-hidden="true"]) {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.35em;
}

html[dir="rtl"] a.text-ou-primary.hover\:underline > span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* Nav spacing — layout uses flex + gap; keep legacy space-x fallbacks below */
html[dir="rtl"] .ou-main-nav {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
html[dir="rtl"] nav .space-x-2 > * + * {
  margin-right: 0.5rem;
  margin-left: 0;
}
html[dir="rtl"] nav .space-x-6 > * + * {
  margin-right: 1.5rem;
  margin-left: 0;
}
html[dir="rtl"] nav .xl\:space-x-8 > * + * {
  margin-right: 2rem;
  margin-left: 0;
}

/* UI panels */
html[dir="rtl"] .ou-ui-panel--right {
  right: auto;
  left: 0;
}
html[dir="rtl"] .ou-ui-panel--left {
  left: auto;
  right: 0;
}
html[dir="rtl"] .ou-ui-panel--center .ou-ui-card {
  text-align: right;
}

/* Carousel controls — flip chevrons in RTL.
   dir=rtl reverses flex order of prev/next buttons, so LTR chevron glyphs
   end up pointing inward; mirror the icons so arrows point the travel direction. */
html[dir="rtl"] button[aria-label="previous"] > svg,
html[dir="rtl"] button[aria-label="next"] > svg,
html[dir="rtl"] button[aria-label="Previous"] > svg,
html[dir="rtl"] button[aria-label="Next"] > svg,
html[dir="rtl"] button[aria-label="Previous slide"] > svg,
html[dir="rtl"] button[aria-label="Next slide"] > svg,
html[dir="rtl"] button[aria-label="الشريحة السابقة"] > svg,
html[dir="rtl"] button[aria-label="الشريحة التالية"] > svg,
html[dir="rtl"] button[aria-label="Scroll left"] > svg,
html[dir="rtl"] button[aria-label="Scroll right"] > svg,
html[dir="rtl"] button[aria-label="تمرير لليسار"] > svg,
html[dir="rtl"] button[aria-label="تمرير لليمين"] > svg,
html[dir="rtl"] button[data-ou-pricing="prev"] > svg,
html[dir="rtl"] button[data-ou-pricing="next"] > svg,
html[dir="rtl"] button[data-ou-pricing-mobile="prev"] > svg,
html[dir="rtl"] button[data-ou-pricing-mobile="next"] > svg,
html[dir="rtl"] button[data-ou-home-appeals-mobile="prev"] > svg,
html[dir="rtl"] button[data-ou-home-appeals-mobile="next"] > svg,
html[dir="rtl"] button[data-ou-carousel="prev"] > svg,
html[dir="rtl"] button[data-ou-carousel="next"] > svg,
html[dir="rtl"] button[data-ou-popular-prev] > svg,
html[dir="rtl"] button[data-ou-popular-next] > svg,
html[dir="rtl"] button[data-ou-our-work="prev"] > svg,
html[dir="rtl"] button[data-ou-our-work="next"] > svg,
html[dir="rtl"] button[data-ou-home-appeals-mobile="prev"] > svg,
html[dir="rtl"] button[data-ou-home-appeals-mobile="next"] > svg,
html[dir="rtl"] [aria-roledescription="carousel"] button .lucide-chevron-left,
html[dir="rtl"] [aria-roledescription="carousel"] button .lucide-chevron-right,
html[dir="rtl"] [aria-roledescription="carousel"] button .lucide-arrow-left,
html[dir="rtl"] [aria-roledescription="carousel"] button .lucide-arrow-right {
  transform: scaleX(-1);
}

/* Track carousels: pack from the right in Arabic */
html[dir="rtl"] [role="region"][aria-roledescription="carousel"] .overflow-hidden > .flex,
html[dir="rtl"] [data-ou-our-work="track"] {
  direction: rtl;
}

/* Keep slide text RTL even when track math uses physical edges */
html[dir="rtl"] [role="region"][aria-roledescription="carousel"] [aria-roledescription="slide"] {
  direction: rtl;
}

/* Inline “read more” chevrons (Our Work cards, related links, etc.) */
html[dir="rtl"] .ou-rtl-flip,
html[dir="rtl"] a .lucide-chevron-right {
  transform: scaleX(-1);
}

/* Keep absolute prev/next controls mirrored to the correct side in RTL */
html[dir="rtl"] button[aria-label="Previous slide"],
html[dir="rtl"] button[aria-label="الشريحة السابقة"] {
  left: auto !important;
  right: 0.5rem;
}
html[dir="rtl"] button[aria-label="Next slide"],
html[dir="rtl"] button[aria-label="الشريحة التالية"] {
  right: auto !important;
  left: 0.5rem;
}
/* Testimonials / track carousels use sr-only labels — swap absolute chevron buttons */
html[dir="rtl"] [aria-roledescription="carousel"] > button.absolute:has(.lucide-chevron-left) {
  left: auto !important;
  right: -0.5rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[dir="rtl"] [aria-roledescription="carousel"] > button.absolute:has(.lucide-chevron-right) {
  right: auto !important;
  left: -0.5rem;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
@media (min-width: 1024px) {
  html[dir="rtl"] [aria-roledescription="carousel"] > button.absolute:has(.lucide-chevron-left) {
    right: -3rem;
  }
  html[dir="rtl"] [aria-roledescription="carousel"] > button.absolute:has(.lucide-chevron-right) {
    left: -3rem;
  }
}

/* Slide gutters: physical pl/pr flip for carousel tracks */
html[dir="rtl"] [aria-roledescription="carousel"] .flex.-ml-4 {
  margin-left: 0;
  margin-right: -1rem;
}
html[dir="rtl"] [aria-roledescription="carousel"] [aria-roledescription="slide"].pl-4 {
  padding-left: 0;
  padding-right: 1rem;
}
html[dir="rtl"] [aria-roledescription="carousel"] [aria-roledescription="slide"].last\:pr-5:last-child {
  padding-right: 0;
  padding-left: 1.25rem;
}

/* Forms */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}
html[dir="rtl"] .ou-ui-input {
  text-align: right;
}

/* Donate page tabs */
html[dir="rtl"] .ou-donate-tab {
  text-align: center;
}

/* Appeals grid cards */
html[dir="rtl"] #appeals-list {
  direction: rtl;
}

/* Prose content */
html[dir="rtl"] .prose {
  text-align: right;
}

/* Footer */
html[dir="rtl"] footer .space-x-6 > * + * {
  margin-right: 1.5rem;
  margin-left: 0;
}

html[dir="rtl"] footer.ou-site-footer .ou-footer-links a:hover {
  transform: translateX(-2px);
}

html[dir="rtl"] footer.ou-site-footer {
  text-align: right;
}

html[dir="rtl"] footer.ou-site-footer .ou-footer-heading::after {
  right: 0;
  left: auto;
}

html[dir="rtl"] footer.ou-site-footer .ou-footer-links a:hover {
  transform: translateX(-3px);
}

/* Language switcher visibility */
html[dir="rtl"] .ou-lang-switch[data-lang="en"] { display: inline; }
html[dir="rtl"] .ou-lang-switch[data-lang="ar"] { display: none; }
html[dir="ltr"] .ou-lang-switch[data-lang="ar"] { display: inline; }
html[dir="ltr"] .ou-lang-switch[data-lang="en"] { display: none; }

/* Hero / section headings centered stay centered */
html[dir="rtl"] .text-center {
  text-align: center;
}

/* Image + text split sections (about-us, our-work, homepage blocks) */
@media (min-width: 1024px) {
  /* Even rows (LTR image-left): put text on the right in RTL */
  html[dir="rtl"] .blocks-container section div.mx-auto.flex.max-w-screen-ou.items-center[class*="lg:flex-row-reverse"],
  html[dir="rtl"] .blocks-container section div.relative.mx-auto.flex.flex-col.items-center[class*="lg:flex-row-reverse"] {
    flex-direction: row;
  }

  /* Odd rows: alternate — text left, image right in RTL */
  html[dir="rtl"] .blocks-container section div.mx-auto.flex.max-w-screen-ou.items-center[class*="lg:flex-row"]:not([class*="flex-row-reverse"]),
  html[dir="rtl"] .blocks-container section div.relative.mx-auto.flex.flex-col.items-center[class*="lg:flex-row"]:not([class*="flex-row-reverse"]):not([class*="gap-x-8"]):not([class*="gap-y-10"]),
  html[dir="rtl"] .blocks-container section div.mx-auto.flex.flex-col.items-center[class*="lg:flex-row"]:not([class*="flex-row-reverse"]):not([class*="rounded-2xl"]) {
    flex-direction: row-reverse;
  }

  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row"] {
    gap: 2.5rem;
  }

  /* Text columns */
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row"] > div[class*="lg:w-"],
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row-reverse"] > div[class*="lg:w-"],
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row"] > div[class*="xl:w-"],
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row-reverse"] > div[class*="xl:w-"] {
    text-align: right;
  }

  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row"] .items-center.justify-center.md\:justify-normal,
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row-reverse"] .items-center.justify-center.md\:justify-normal,
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row"] .flex.md\:justify-normal,
  html[dir="rtl"] .blocks-container section div[class*="lg:flex-row-reverse"] .flex.md\:justify-normal {
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Image columns: add space between image and text */
  html[dir="rtl"] .blocks-container section .lg\:justify-end {
    justify-content: flex-start !important;
  }

  html[dir="rtl"] .blocks-container section .lg\:justify-start {
    justify-content: flex-end !important;
  }
}

/* Fix absolute positioning for decorative shapes on about page */
html[dir="rtl"] .rotate-180.transform.lg\:block {
  /* keep decorative */
}

/* Cart badge position */
html[dir="rtl"] .ou-ui-badge {
  right: auto;
  left: -4px;
}

/* Sticky sidebar on campaign pages */
html[dir="rtl"] .order-2 .space-y-5.lg\:sticky {
  direction: rtl;
}

/* Bank details dl rows */
html[dir="rtl"] dl .flex.justify-between {
  flex-direction: row-reverse;
}

/* Mobile menu button */
html[dir="rtl"] .ou-mobile-menu-btn {
  margin-left: 0;
  margin-right: -1rem;
}

/* Search input placeholder alignment */
html[dir="rtl"] #ou-search-input::placeholder {
  text-align: right;
}