/* ==========================================================================
   RTL overrides for the Arabic (/ar/) site.
   Loaded only on Arabic pages, after style.css. Mirrors the same design —
   nothing here changes colors, spacing, typography, or the English site.
   ========================================================================== */

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

/* Header nav: logo on the right, links/CTA flow to the left. */
html[dir="rtl"] .nav__logo { margin-right: 0; margin-left: auto; }

/* Scroll-reveal animations: mirror the slide-in direction to match the
   mirrored layout (content that now sits on the right slides in from the
   right, and vice versa). */
html[dir="rtl"] [data-animate="fade-in-left"] { transform: translateX(32px); }
html[dir="rtl"] [data-animate="fade-in-right"] { transform: translateX(-32px); }

/* Hero floating badges (decorative, absolutely positioned over the hero image). */
html[dir="rtl"] .hero__floating--1 { left: auto; right: 40px; }
html[dir="rtl"] .hero__floating--2,
html[dir="rtl"] .hero__floating--3 { right: auto; left: 40px; }

/* Trust-slider feature list. */
html[dir="rtl"] .trust-slider__list { text-align: right; }

/* Image overlay badges (About page media). */
html[dir="rtl"] .why__badge { left: auto; right: -24px; }
html[dir="rtl"] .story__badge { right: auto; left: -24px; }
html[dir="rtl"] .image-badge--top-left { left: auto; right: -24px; }
html[dir="rtl"] .image-badge--bottom-right { right: auto; left: -24px; }

/* Select dropdown caret. */
html[dir="rtl"] .form-group select { background-position: left 13px center; }

/* Accordion headers (FAQ, services). */
html[dir="rtl"] .faq-item__q,
html[dir="rtl"] .service-cat__head { text-align: right; }

/* Directional arrow/chevron icons — mirror so they still point the way
   content actually flows. Down/up carets are intentionally excluded. */
html[dir="rtl"] img[src$="icon-arrow-right.svg"],
html[dir="rtl"] img[src$="icon-arrow-cta.svg"],
html[dir="rtl"] img[src$="icon-arrow-learnmore.svg"],
html[dir="rtl"] img[src$="icon-chevron-right.svg"],
html[dir="rtl"] img[src$="icon-chevron-left.svg"],
html[dir="rtl"] img[src$="icon-chevron-breadcrumb.svg"] {
	transform: scaleX(-1);
}

/* Mobile nav panel slides in from the right instead of the left. */
@media (max-width: 900px) {
	html[dir="rtl"] .nav__panel {
		left: auto;
		right: 0;
		align-items: flex-end;
		transform: translateX(100%);
	}
	html[dir="rtl"] .nav.is-open .nav__panel { transform: translateX(0); }
	html[dir="rtl"] .nav__links { align-items: flex-end; }
}