/* ==========================================================================
   Arabic / right-to-left. Layout mostly flips by itself (logical properties);
   this file covers typography and the few things that need an explicit mirror.
   ========================================================================== */
html.i18n-pending body {
  opacity: 0;
  animation: i18n-show 0s 1.2s forwards; /* never stay hidden if a script fails */
}
@keyframes i18n-show { to { opacity: 1; } }

html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Pro Display", Arial, sans-serif;
  --font-text: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif;
}
/* Negative tracking breaks joined Arabic letters */
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after {
  letter-spacing: 0 !important;
}
html[lang="ar"] body { line-height: 1.6; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.3; }

/* Latin-only bits stay left-to-right inside Arabic text */
[dir="rtl"] kbd,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] .pay-copy code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] { text-align: end; }

/* Cart drawer slides in from the left */
[dir="rtl"] .cart-drawer {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
  box-shadow: 12px 0 48px rgba(0, 0, 0, 0.14);
}
[dir="rtl"] .cart-drawer.is-open { transform: none; }

/* Price range keeps low → high reading left to right, like the numbers */
[dir="rtl"] .range__slider,
[dir="rtl"] .range__values { direction: ltr; }

/* Directional icons point the other way */
[dir="rtl"] [data-scroll-prev] svg,
[dir="rtl"] [data-scroll-next] svg,
[dir="rtl"] .gallery__nav svg,
[dir="rtl"] .btn-link svg,
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* Language switch */
.lang-switch {
  font: 600 13px/1 var(--font-text);
  padding: 7px 10px;
  border-radius: 980px;
  border: 1px solid var(--color-gray-border, rgba(0,0,0,.15));
  color: inherit;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch:hover { background: rgba(127, 127, 127, 0.12); }
.lang-switch[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-text); }

/* Dropdown arrows sit on the left */
[dir="rtl"] select.field__input { background-position: 17px 26px, 22px 26px; }
[dir="rtl"] .select select { padding: 8px 16px 8px 38px; }