/* ==========================================================================
   SAHRI SKIN — RTL mirror (Arabic views only, body.sahri-rtl).
   dir="rtl" already flips flex/grid flow and default text alignment; this
   layer fixes the remaining physical (left/right) properties and swaps the
   Latin fonts for an Arabic-capable stack.
   ========================================================================== */

body.sahri-rtl {
	--font-ar: "Tajawal", "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", sans-serif;
	--font-head: var(--font-ar);
	--font-body: var(--font-ar);
}

/*
 * Cormorant Garamond, DM Sans and Elementor's Jost carry no Arabic glyphs, and
 * Elementor's global kit declares font-family directly on body/headings — which
 * beats the custom properties above. Restate the stack on the text elements so
 * Arabic never falls back to a random system face. Pseudo-elements are left
 * alone so icon fonts (stars, WooCommerce glyphs) keep working.
 */
body.sahri-rtl,
body.sahri-rtl h1,
body.sahri-rtl h2,
body.sahri-rtl h3,
body.sahri-rtl h4,
body.sahri-rtl h5,
body.sahri-rtl h6,
body.sahri-rtl p,
body.sahri-rtl a,
body.sahri-rtl li,
body.sahri-rtl span,
body.sahri-rtl div,
body.sahri-rtl strong,
body.sahri-rtl em,
body.sahri-rtl blockquote,
body.sahri-rtl figcaption,
body.sahri-rtl label,
body.sahri-rtl th,
body.sahri-rtl td,
body.sahri-rtl button,
body.sahri-rtl input,
body.sahri-rtl textarea,
body.sahri-rtl select {
	font-family: var(--font-ar) !important;
}

/* Latin tracking looks broken in Arabic script. */
body.sahri-rtl h1,
body.sahri-rtl h2,
body.sahri-rtl h3,
body.sahri-rtl .sahri-eyebrow,
body.sahri-rtl .sahri-btn,
body.sahri-rtl .sahri-announce__text,
body.sahri-rtl .sahri-nav__link,
body.sahri-rtl .sahri-marquee__item,
body.sahri-rtl .sahri-footer__heading {
	letter-spacing: 0;
}

/* --------------------------------- Nav ---------------------------------- */
body.sahri-rtl .sahri-nav__cart-count {
	right: auto;
	left: 0;
}
body.sahri-rtl .sahri-nav__submenu {
	left: auto;
	right: 0;
}

/* Mobile drawer slides in from the right in RTL. */
body.sahri-rtl .sahri-mobile {
	left: auto;
	right: 0;
	transform: translateX(100%);
}
body.sahri-rtl .sahri-mobile[data-open="true"] {
	transform: translateX(0);
}

/* Language dropdown anchors to the other edge. */
body.sahri-rtl .sahri-lang__menu {
	right: auto;
	left: 0;
}
body.sahri-rtl .sahri-lang__menu .sahri-lang__link,
body.sahri-rtl .sahri-lang__menu button {
	text-align: right;
}

/* ------------------------------- Buttons -------------------------------- */
body.sahri-rtl .sahri-btn--fill::before,
body.sahri-rtl .sahri-btn--dark::before {
	transform-origin: right center;
}
body.sahri-rtl .sahri-btn--link::after,
body.sahri-rtl .sahri-btn--sand-link::after {
	left: auto;
	right: 0;
	transform-origin: right center;
}

/* Arrows inside CTAs point the other way. */
body.sahri-rtl .sahri-btn [aria-hidden="true"],
body.sahri-rtl .sahri-cat-card__more [aria-hidden="true"] {
	display: inline-block;
	transform: scaleX(-1);
}

/* -------------------------------- Hero ----------------------------------- */
body.sahri-rtl .sahri-ingredient__deco {
	right: auto;
	left: -2%;
	transform: scaleX(-1);
}

/* ------------------------------- Products -------------------------------- */
body.sahri-rtl .sahri-product__badge {
	left: auto;
	right: 0.85rem;
}
body.sahri-rtl .sahri-pack__text {
	padding-left: 0;
	padding-right: 2rem;
	border-left: 0;
	border-right: 2px solid var(--sand);
}
body.sahri-rtl .sahri-pack__price del {
	margin-right: 0;
	margin-left: 0.25rem;
}
body.sahri-rtl .sahri-pack__features li {
	padding-left: 0;
	padding-right: 1.6rem;
}
body.sahri-rtl .sahri-pack__features li::before {
	left: auto;
	right: 0;
}

/* ------------------------------ Promo / UGC ------------------------------ */
body.sahri-rtl .sahri-promo__label {
	left: auto;
	right: 1.2rem;
}
body.sahri-rtl .sahri-ugc__tag {
	left: auto;
	right: 1rem;
}

/* --------------------------- WhatsApp testimonials ----------------------- */
body.sahri-rtl .sahri-wa__bubble time {
	float: left;
	margin-left: 0;
	margin-right: 0.35rem;
}
body.sahri-rtl .sahri-wa__bubble--out time {
	margin-right: 0.35rem;
	margin-left: 1rem;
}
body.sahri-rtl .sahri-wa__ticks {
	right: auto;
	left: 0.45rem;
}

/* ------------------------- Floating action buttons ------------------------ */
body.sahri-rtl .sahri-fab {
	right: auto;
	left: clamp(1rem, 3vw, 1.75rem);
}

/* ------------------------------- Footer ----------------------------------- */
@media (max-width: 768px) {
	body.sahri-rtl .sahri-footer__grid {
		text-align: right;
	}
}