/* ==========================================================================
   Mila Cosmetics (Iraq store) — RTL + Arabic typography
   The layout itself is already direction-agnostic: the markup uses logical
   utilities (ms-/me-/start-/end-/text-start) instead of ml-/mr-/left-/right-,
   so flex rows, insets and spacing mirror on their own once dir="rtl" is set.
   What remains here is typography and the two directional animations.
   ========================================================================== */

/* ---- Arabic type ---- */
html[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', Jost, system-ui, sans-serif;
}
html[dir="rtl"] .font-display {
  font-family: 'Amiri', 'Playfair Display', serif;
  /* Naskh needs more vertical room than Playfair for ascenders/descenders.
     (No font-size bump here: an em value would resolve against the parent and
     silently override the element's own text-5xl / text-7xl sizing.) */
  line-height: 1.42;
}
/* Arabic joins letters — letter-spacing breaks the joins (the Latin logo keeps its tracking) */
html[dir="rtl"] [class*="tracking-"]:not(.font-display) {
  letter-spacing: 0 !important;
}
/* the Latin italic accent is meaningless in Arabic; keep the colour, drop the slant */
html[dir="rtl"] em { font-style: normal; }

/* ---- the bag drawer enters from the inline-end side ---- */
html[dir="rtl"] .sr { animation-name: sr-rtl; }
@keyframes sr-rtl {
  from { transform: translateX(-100%); }
  to   { transform: none; }
}

/* ---- the marquee already runs on a symmetric translate; nudge it to read right-to-left ---- */
html[dir="rtl"] .mq { animation-direction: reverse; }

/* ---- numbers stay Latin (prices, ratings) but should not be mirrored wrongly ---- */
html[dir="rtl"] .font-display bdi,
html[dir="rtl"] table { direction: rtl; }