/* =============================================================================
   Xtreme Nano — RTL Overrides
   -----------------------------------------------------------------------------
   Loaded conditionally when current language is Arabic.
   Only includes the corrections that don't naturally flip via `dir="rtl"`.
   Most logical properties (margin-inline-*, padding-inline-*) handle themselves.
   ============================================================================= */

body.xn-rtl {
	direction: rtl;
	text-align: right;
}

/* Header inner stays as flex but logo and right group naturally flip via flexbox. */

/* Mobile menu list alignment in RTL */
body.xn-rtl .xn-mobile-panel .xn-nav__list li a { text-align: right; }

/* Beam direction — mirror diagonal beams so they sweep from right to left */
body.xn-rtl .xn-beam { transform-origin: 100% 0; left: auto; right: -50%; }
body.xn-rtl .xn-beam--purple { transform: rotate(18deg); }
body.xn-rtl .xn-beam--purple.xn-beam--2 { transform: rotate(22deg); right: -60%; }
body.xn-rtl .xn-beam--purple.xn-beam--3 { transform: rotate(15deg); right: -40%; }
body.xn-rtl .xn-beam--gold { transform: rotate(20deg); right: -50%; }

/* Counter beam direction */
body.xn-rtl .xn-counters__beam { transform: rotate(8deg) translateY(-50%); right: -20%; left: auto; }

/* About corner badges flip diagonals */
body.xn-rtl .xn-about__corner--tl {
	left: auto; right: 16px;
	border: 2px solid var(--xn-gold);
	border-left: none; border-bottom: none;
}
body.xn-rtl .xn-about__corner--br {
	right: auto; left: 16px;
	border: 2px solid var(--xn-gold);
	border-right: none; border-top: none;
}

/* Buttons: arrows that point with direction need to flip */
body.xn-rtl .xn-btn svg,
body.xn-rtl .xn-service-card__link svg,
body.xn-rtl .xn-cta-panel__articles svg {
	transform: scaleX(-1);
}

/* Hover translation already handled inline in main.css with body.xn-rtl variant. */

/* Scroll progress bar already direction-agnostic. */

/* Footer columns alignment */
body.xn-rtl .xn-footer__contact li { flex-direction: row; }
body.xn-rtl .xn-footer__bottom { direction: rtl; text-align: right; }

/* Mobile FAB position already swapped in main.css via body.xn-rtl rule. */

/* Single post & generic page typography */
body.xn-rtl .xn-prose { text-align: right; }
body.xn-rtl .xn-single__meta { direction: rtl; }

/* Lang switcher: ensure pill stays visually consistent. The arrow ⇄ is symmetric so no flip needed. */

/* Service-card icon background gradient stays radial (direction-agnostic). */

/* Hero scroll indicator stays centered. */

/* Branches pin already swapped in main.css. */

/* Tooltips, dropdowns etc. — none in this build, would go here. */

/* FAB: swap to left side in RTL since we read right-to-left */
body.xn-rtl .xn-fab { right: auto; left: var(--xn-space-6); }

/* Service card link arrow flip on hover */
body.xn-rtl .xn-service-card:hover .xn-service-card__link svg { transform: scaleX(-1) translateX(4px); }

/* Header right group: keep logical alignment */
body.xn-rtl .xn-header__right { flex-direction: row; }

/* Eyebrow rotation — keep aligned naturally */
body.xn-rtl .xn-eyebrow { letter-spacing: 0; }

/* Page title gradient masks (background-clip:text) work direction-agnostically. */

/* RTL adjustments for new components */
body.xn-rtl .xn-trust__track { /* direction reversed by animation-direction */ }
body.xn-rtl .xn-panel__link-arrow svg { transform: scaleX(-1); }
body.xn-rtl .xn-burger { /* visual symmetry preserved by grid layout */ }
body.xn-rtl .xn-hero__bg-img { object-position: center left; }
body.xn-rtl .xn-hero__bg-video { object-position: center left; }
/* Mobile: car should be visible regardless of language. Override RTL to match LTR mobile. */
@media (max-width: 768px) {
	body.xn-rtl .xn-hero__bg-img { object-position: 30% center !important; }
	body.xn-rtl .xn-hero__bg-video { object-position: 30% center !important; }
}
body.xn-rtl .xn-page-hero__beam--1 { inset-inline-start: -100px; }
body.xn-rtl .xn-page-hero__beam--2 { inset-inline-end: -150px; }

/* Eyebrow keeps natural Arabic spacing */
body.xn-rtl .xn-eyebrow { letter-spacing: 0.03em; text-transform: none; font-size: 0.9rem; }

/* FAQ: Plus icon stays centered regardless of direction */
body.xn-rtl .xn-faq-item__btn { text-align: right; }

/* Footer: keep social icons LTR-friendly */
body.xn-rtl .xn-social { direction: ltr; }