/* ============================================================
   rtl.css — Arabic / RTL layout overrides
   Loaded on every public page; scoped entirely under [dir="rtl"]
   so it has zero effect when the site is in English.

   Flexbox/Grid rows already mirror automatically under dir="rtl"
   (row direction and grid track placement both follow the
   document's writing direction) — these rules only cover what
   does NOT auto-mirror: fonts, physically-positioned elements,
   directional icons, and a few text-align defaults.
   ============================================================ */

[dir="rtl"] body {
  font-family: var(--font-arabic);
}

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .container,
[dir="rtl"] .section {
  text-align: right;
}

/* Directional (chevron/arrow) icons need a horizontal flip in RTL.
   (.svc-card__cta svg is already flipped in pages/services/services.css) */
[dir="rtl"] .mobile-menu__link-arrow {
  transform: scaleX(-1);
}

/* Absolutely-positioned decorative elements use physical left/right
   and need explicit mirroring */
[dir="rtl"] .about__badge-float {
  left: auto;
  right: -24px;
}

[dir="rtl"] .contact__map-cta {
  left: auto;
  right: var(--sp-4);
}

[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 24px;
}

/* The "Why Choose" section hardcodes text-align:left inline (it's a
   two-column layout, not centered like other sections) — override it
   for Arabic so the heading/subtitle/CTA read right-to-left. */
[dir="rtl"] #why-title,
[dir="rtl"] .why__inner .section-subtitle {
  text-align: right !important;
}

/* Form fields: number/tel inputs and LTR-only fields (URLs, slugs)
   stay LTR even inside an RTL page */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}