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

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

/* Keep the digits LTR (+963 …); do not LTR the whole tel: row or the icon stays on the left. */
html[dir="rtl"] .ou-phone-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

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 stay inset:0 full-viewport overlays. Flex-start/end + dir=rtl
   docks the drawer; setting left/right:auto shrinks the panel and clips scroll. */
html[dir="rtl"] .ou-ui-panel--center .ou-ui-card {
  text-align: right;
}

html[dir="rtl"] #ou-menu-panel .ou-ui-card--drawer {
  width: min(15rem, 68vw);
}

/* 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-appeals-slider="prev"] > svg,
html[dir="rtl"] button[data-ou-appeals-slider="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"] select {
  text-align: right;
}
html[dir="rtl"] .ou-ui-input {
  text-align: right;
}
/*
 * Chrome/Safari paint RTL textarea glyphs outside the box when the field is
 * direction:rtl AND text-align is forced to the physical right — text is
 * invisible, or it shows over the section above. Keep an LTR scroll origin and
 * right-align plaintext so Arabic still starts from the right.
 */
html[dir="rtl"] textarea,
html[dir="rtl"] textarea.ou-ui-input {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.5;
  color: #111827;
  caret-color: #111827;
  background-color: #fff;
}

/* 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; }

/* Currency in the top bar: English → far right, Arabic → far left.
   .ou-topbar-actions is forced LTR (select text + phone), so justify-end
   parks USD next to the title in RTL. Pack to the physical start instead. */
html[dir="rtl"] .ou-topbar-actions {
  justify-content: flex-start !important;
}

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

html[dir="rtl"] .ou-work-feature.ou-feature-image,
html[dir="rtl"] .ou-feature-image,
html[dir="rtl"] .ou-wwd-photo,
html[dir="rtl"] .ou-wwa-photo {
  object-position: left center;
}

/* Image + text split sections: keep the rectangle on the physical left */
@media (min-width: 1024px) {
  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"],
  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;
  }

  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;
  }

  /* Physical left — not inline-start — so photos never sit on the right */
  html[dir="rtl"] .blocks-container section .lg\:justify-end,
  html[dir="rtl"] .blocks-container section .lg\:justify-start {
    justify-content: left !important;
  }
}

/* Impact Stories leaf: English sits at end of quote (bottom-right).
   Arabic is right-aligned, so that corner covers the last line — mirror it. */
html[dir="rtl"] #case-studies .ou-story-leaf {
  right: auto;
  left: 0;
  bottom: auto;
  top: 100%;
  margin-top: 0.25rem;
  transform: none;
}

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

/* Sticky sidebar on campaign pages */
html[dir="rtl"] .ou-campaign-donate,
html[dir="rtl"] .order-2 .space-y-5.lg\:sticky {
  direction: rtl;
}
html[dir="rtl"] .ou-campaign-section-media img {
  object-position: right center;
}

/* 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;
}