/* ==========================================================================
   Mada — RTL overrides
   Loaded ONLY when is_rtl() (inc/enqueue.php). Because base/components use
   logical properties, most RTL "just works" — this file holds only the few
   things logical properties can't express: directional icon mirroring,
   transforms, background-position, box-shadow offsets. CLAUDE.md §5.1.
   ========================================================================== */

/* Ensure Arabic typeface in RTL even if :lang(ar) isn't matched. */
[dir="rtl"] body {
	font-family: var(--font-ar);
}

/* Mirror directional icons (arrows, chevrons, "next/prev", progress).
   Add the .mada-icon--directional class to any glyph that points L/R. */
[dir="rtl"] .mada-icon--directional {
	transform: scaleX(-1);
}

/* Do NOT mirror brand/logo or non-directional icons. */
[dir="rtl"] .mada-icon--no-mirror {
	transform: none;
}

/* Carousels / sliders that use translateX should invert direction in RTL.
   Apply .mada-rtl-flip-x to such transformed tracks if needed. */
[dir="rtl"] .mada-rtl-flip-x {
	transform: scaleX(-1);
}
[dir="rtl"] .mada-rtl-flip-x > * {
	transform: scaleX(-1);
}

/* Support popup: mirror the header gradient angle (AR Pop Up 4446:69666
   draws the dark corner on the opposite side). */
[dir="rtl"] .mada-support__head {
	background-image: linear-gradient(-150deg, #006B69 -5%, #2CC1BF 45%, #C5F7F6 105%);
}

/* About "Mada vs. traditional credit": the AR frame (4282:26188) keeps the
   teal Mada card on the visual LEFT exactly as in EN — cancel the automatic
   RTL row mirroring for this pair. */
/* Must track the LTR breakpoint in about.css, which S37 moved to 699. If the
   two drift apart, Arabic renders this pair in row order WITHOUT the mirror
   for the whole 699-1024 band. */
@media (min-width: 699px) {
	[dir="rtl"] .mada-vs__row {
		flex-direction: row-reverse;
	}
}