/* LUMÉA — Arabic / RTL layer. Only active when <html dir="rtl">.
   The El Messiri + IBM Plex Sans Arabic webfonts are loaded from index.html
   (only when the site is actually in Arabic), not @import-ed here. */

html[dir='rtl'] body,
html[dir='rtl'] input,
html[dir='rtl'] textarea,
html[dir='rtl'] button,
html[dir='rtl'] select,
html[dir='rtl'] .font-sans {
	font-family: 'IBM Plex Sans Arabic', 'Jost', system-ui, sans-serif;
}

html[dir='rtl'] .font-serif,
html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3,
html[dir='rtl'] h4,
html[dir='rtl'] blockquote {
	font-family: 'El Messiri', 'Fraunces', Georgia, serif;
}

/* Arabic runs a touch large in these faces — settle the display sizes */
html[dir='rtl'] .tracking-\[0\.25em\],
html[dir='rtl'] .tracking-\[0\.2em\],
html[dir='rtl'] .tracking-\[0\.3em\],
html[dir='rtl'] .tracking-\[0\.35em\],
html[dir='rtl'] .uppercase {
	letter-spacing: 0 !important;
}
html[dir='rtl'] .uppercase {
	text-transform: none !important;
}

/* text alignment */
html[dir='rtl'] .text-left { text-align: right !important; }
html[dir='rtl'] .text-right { text-align: left !important; }

/* physical spacing utilities the bundle actually uses */
html[dir='rtl'] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir='rtl'] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
html[dir='rtl'] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir='rtl'] .ml-4 { margin-left: 0; margin-right: 1rem; }
html[dir='rtl'] .-ml-2 { margin-left: 0; margin-right: -0.5rem; }
html[dir='rtl'] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir='rtl'] .mr-auto { margin-right: 0; margin-left: auto; }
html[dir='rtl'] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir='rtl'] .pr-4 { padding-right: 0; padding-left: 1rem; }

/* the "back to shop" arrow and any lucide chevrons that imply direction */
html[dir='rtl'] .lucide-arrow-left,
html[dir='rtl'] .lucide-arrow-right,
html[dir='rtl'] .lucide-chevron-left,
html[dir='rtl'] .lucide-chevron-right,
html[dir='rtl'] .lucide-move-right,
html[dir='rtl'] .lucide-arrow-up-right {
	transform: scaleX(-1);
}

/* language switcher */
.lumea-lang {
	appearance: none;
	border: 1px solid hsl(var(--border));
	background: transparent;
	color: hsl(var(--muted-foreground));
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.15s ease, border-color 0.15s ease;
	flex: none;
}
.lumea-lang:hover {
	color: hsl(var(--foreground));
	border-color: hsl(var(--primary));
}
html[dir='rtl'] .lumea-lang {
	font-family: 'IBM Plex Sans Arabic', sans-serif;
	letter-spacing: 0;
}

/* keep the brand wordmark in its Latin display face even in RTL */
header a[href$='/LUMEA'],
footer .font-serif {
	font-family: 'Fraunces', Georgia, serif !important;
	direction: ltr;
	unicode-bidi: isolate;
}

/* --- preview checkout overlay in RTL --- */
html[dir='rtl'] .jzco-close { right: auto; left: 8px; }
html[dir='rtl'] .jzco-banner { padding: 9px 16px 9px 44px; }
html[dir='rtl'] .jzco-method input { margin-left: 0; }
html[dir='rtl'] .jzco-item-price { text-align: left; }