/*
 * RTL layout fixes for the custom "mz-*" homepage/footer components (woodmart-child
 * theme). Loaded only while Arabic is active.
 *
 * Most of this theme's custom CSS already uses logical properties (inset-inline-start,
 * border-inline-end, margin-inline, etc.) and therefore mirrors correctly on its own once
 * <html dir="rtl"> is set — those rules need no changes here. This file only overrides the
 * handful of places that use physical left/right values and would otherwise look wrong
 * mirrored (or must deliberately NOT mirror, like the category marquee's scroll math).
 *
 * WooCommerce / WordPress core / Elementor load their own official -rtl.css files
 * automatically once is_rtl() is true (handled by the locale switch in mz-lang-switch.php)
 * — nothing to do for those here.
 */

/* Hero: slide-in direction. Slides normally enter from the right and exit to the left
   (LTR reading order). Under RTL, flip so they enter from the left and exit to the right —
   consistent with reading direction, matching the mirrored gradient/triangle below. */
[dir="rtl"] .mz-hero__slide {
	transform: translateX(-100%);
}
[dir="rtl"] .mz-hero__slide.is-active {
	transform: translateX(0);
}
[dir="rtl"] .mz-hero__slide.is-prev {
	transform: translateX(100%);
}

/* Hero: the dark gradient + yellow corner triangle were built assuming text sits on the
   left. Under RTL the text naturally moves to the right (browser default), so mirror the
   gradient and move the triangle to the opposite corner to match. */
[dir="rtl"] .mz-hero__slide::before {
	background: linear-gradient(270deg, rgba(17, 18, 20, .95) 0%, rgba(17, 18, 20, .7) 40%, rgba(17, 18, 20, 0) 72%);
}
[dir="rtl"] .mz-hero::after {
	inset: 0 auto auto 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
@media (max-width: 700px) {
	[dir="rtl"] .mz-hero__slide::before {
		background: linear-gradient(180deg, rgba(17, 18, 20, .18) 0%, rgba(17, 18, 20, .52) 100%);
	}
	[dir="rtl"] .mz-hero::after {
		inset: 0 auto auto 0;
	}
}

/* Categories marquee: the auto-scroll math (the CSS keyframes animate translateX(0) to
   translateX(-50%), assuming the track sits flush with the viewport's LEFT edge at rest)
   is written in plain physical pixels. Setting direction:ltr on .mz-catm__track ALONE is
   not enough: .mz-catm__viewport (its parent) was still inheriting dir="rtl", and a
   wider-than-container block is positioned by its PARENT's direction, not its own — so the
   track was starting flush with the viewport's RIGHT edge instead, overflowing far past the
   left edge before the animation even started. The translateX(-50%) keyframe then animated
   through a completely different range than the one visible categories actually occupy,
   which is exactly the "shows empty" gap being reported. Both viewport and track need the
   LTR override for the track to rest flush-left the way the animation math assumes. */
[dir="rtl"] .mz-catm__viewport,
[dir="rtl"] .mz-catm__track {
	direction: ltr;
}
[dir="rtl"] .mz-catm__item {
	direction: rtl; /* ...but keep each item's own label readable in Arabic */
}

/* Small physical left/right leftovers */
[dir="rtl"] .mz-floating-cart__info {
	text-align: right;
}
[dir="rtl"] .mz-track-widget__price-box {
	align-items: flex-end;
	text-align: right;
}

/* Perk / stat bullets built with a physical ::before square: keep the bullet readable
   next to right-aligned Arabic text instead of float-stranded on the old side. */
[dir="rtl"] .mz-hero__perks,
[dir="rtl"] .mz-pg-stats {
	direction: rtl;
}

/* Promo/banner photo cards (.mz-banner — used in "Tous vos projets", Nouveautés,
   Promotions, etc.): built the same way as the hero — dark gradient + text on the left,
   photo subject positioned toward the right (object-position: right center), yellow corner
   accent top-right. Under RTL the text block itself already moves to the right on its own
   (plain flex row, direction-aware by default) — mirror the other three pieces so the whole
   composition flips consistently instead of ending up with text on the right sitting over
   what's now the photo's "empty" side and the subject/gradient still built for the left. */
[dir="rtl"] .mz-banner__img {
	transform: scaleX(-1);
	object-position: left center;
}
[dir="rtl"] .mz-banner:hover .mz-banner__img {
	transform: scaleX(-1) scale(1.04);
}
[dir="rtl"] .mz-banner::before {
	background: linear-gradient(270deg, var(--mz-ink) 0%, rgba(17, 18, 20, .84) 38%, rgba(17, 18, 20, 0) 72%);
}
[dir="rtl"] .mz-banner--light::before {
	background: linear-gradient(270deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .86) 38%, rgba(255, 255, 255, 0) 70%);
}
[dir="rtl"] .mz-banner--yellow::before {
	background: linear-gradient(270deg, var(--mz-yellow) 0%, rgba(252, 184, 25, .93) 42%, rgba(252, 184, 25, 0) 74%);
}
[dir="rtl"] .mz-banner::after {
	inset: 0 auto auto 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
[dir="rtl"] .mz-banner--yellow::after {
	clip-path: polygon(0 0, 100% 0, 0 100%);
}