/* ==========================================================================
   ARABIC — DIRECTIONAL ARROWS FOLLOW THE READING DIRECTION

   On the Arabic site an arrow that means "forward" points LEFT, the way the
   text runs. Every rule here is behind [dir="rtl"], so the English site cannot
   match any of it.

   HOW AN ARROW IS MIRRORED
   With the standalone `scale: -1 1` property, not `transform: scaleX(-1)`.
   The two compose instead of competing: an arrow that nudges on hover with
   `transform: translateX(4px)` keeps its transform, and because `scale` is
   applied after it, the nudge is mirrored too — the arrow now moves left,
   towards where it points. Size, colour, position, spacing and every hover
   state are left exactly as they are.

   ALREADY MIRRORED ELSEWHERE — deliberately NOT repeated here, which would
   flip them back:
     header.css    .sud-mega__all svg   the menu panel's "Overview" arrow
     showcase.css  .sud-ax__go svg      the therapeutic-area cards' arrow
     carousel.css  .sud-car__btn        the Multi-Pillar slider's chevrons

   NOT TOUCHED: arrows that point up or down (the menu's dropdown carets, the
   drawer toggles) and every non-directional icon.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ICON ARROWS — any icon in the Elementor icon libraries whose name says
      it points left or right: arrow, alt-arrow, chevron, angle, caret,
      circle-arrow. Elementor renders these as <svg class="e-font-icon-svg
      e-fas-arrow-right"> (or <i class="fas fa-arrow-right">), so matching the
      name catches every button, link and icon widget that uses one — including
      ones added in the editor later — without naming them one by one.
   -------------------------------------------------------------------------- */

[dir="rtl"] :is(svg, i):is(
	[class*="arrow-right"], [class*="arrow-left"],
	[class*="alt-right"], [class*="alt-left"],
	[class*="chevron-right"], [class*="chevron-left"],
	[class*="angle-right"], [class*="angle-left"],
	[class*="caret-right"], [class*="caret-left"],
	[class*="circle-right"], [class*="circle-left"]
) {
	scale: -1 1;
}

/* --------------------------------------------------------------------------
   2. THE THEME'S OWN ARROWS
   -------------------------------------------------------------------------- */

/* News & Articles: "Read the article" and the story pages' breadcrumb
   separator — both the sud_ed_arrow() SVG in inc/editorial.php. */
[dir="rtl"] .sud-ed__more svg,
[dir="rtl"] .sud-ed__breadcrumb svg {
	scale: -1 1;
}

/* Home, Therapeutic Areas: the arrow drawn after "Explore Therapeutic Areas".
   Its hover nudge (translateX 5px) is mirrored along with it. */
[dir="rtl"] .sud-ta .sud-ta__cta .elementor-button::after {
	scale: -1 1;
}

/* --------------------------------------------------------------------------
   3. ELEMENTOR CAROUSEL NAVIGATION

   Elementor's carousel runs right-to-left in Arabic — slide 1 on the right,
   the next ones to its left — but pins its buttons exactly as in English:
   Previous on the left, Next on the right (Elementor Pro's RTL stylesheet for
   this widget is identical to the LTR one). So the arrow on the right advanced
   towards slides that lie to the left.

   Mirrored here: the two buttons trade sides, using the same variables
   Elementor positions them with, so any offset set in the editor carries over;
   and their chevrons are mirrored by section 1. The result is Next on the
   left pointing ←, Previous on the right pointing →.
   -------------------------------------------------------------------------- */

[dir="rtl"] .elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev {
	left: auto;
	right: calc(var(--e-n-carousel-arrow-prev-left-align) + var(--e-n-carousel-arrow-prev-left-position));
}

[dir="rtl"] .elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-next {
	right: auto;
	left: calc(var(--e-n-carousel-arrow-next-right-align) + var(--e-n-carousel-arrow-next-right-position));
}