/* =============================================================
   ALAQAAR — RTL OVERRIDES
   Most of site.css/sections.css already use logical properties
   (margin-inline, padding-inline, inset-inline, text-align: driven
   by the element's own direction) so they mirror automatically
   under dir="rtl" — set on <html> in _Layout.cshtml whenever the
   active culture is Arabic. The rules below only cover the handful
   of spots that need an explicit RTL-specific tweak.
   ============================================================= */

[dir="rtl"] body {
  /* Arabic script doesn't benefit from Latin-style letter tracking. */
  letter-spacing: 0;
}

[dir="rtl"] .brand__text,
[dir="rtl"] .eyebrow {
  letter-spacing: 0;
}

/* Directional icons that visually imply "forward" (e.g. an arrow) need
   to be mirrored in RTL; none of the current icon set is directional,
   this hook is here so a future arrow/chevron icon mirrors correctly. */
[dir="rtl"] .icon--flip-rtl {
  transform: scaleX(-1);
}

/* Bootstrap's form-validation libraries add tooltips/positions that
   assume LTR in a couple of edge cases; nudging error text back to the
   field's own reading direction keeps things tidy under RTL. */
[dir="rtl"] .field-error {
  text-align: right;
}