/* ============================================================
   AIN UAE — Arabic / RTL layer. Loaded only on /ar/ pages,
   after main.css. Scope everything to [dir="rtl"] so it can
   never affect the English site.
   ============================================================ */

/* ---- Arabic typography ---- */
/* letter-spacing and text-transform:uppercase BREAK Arabic script
   (they sever the cursive joins), so they are cancelled here. */
[dir="rtl"] body {
  font-family: "IBM Plex Sans Arabic", "Manrope", sans-serif;
  line-height: 1.8;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .h-display, [dir="rtl"] .h-1, [dir="rtl"] .h-2, [dir="rtl"] .h-3 {
  font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  word-spacing: normal;
  line-height: 1.35;
}
[dir="rtl"] .mono-label {
  font-family: "IBM Plex Sans Arabic", "Manrope", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .btn { font-family: "IBM Plex Sans Arabic", "Manrope", sans-serif; letter-spacing: 0; }

/* ---- Direction-sensitive component fixes ---- */
/* List bullets: move the marker to the right, pad on the right. */
[dir="rtl"] .prose li,
[dir="rtl"] .tick-list li,
[dir="rtl"] .sources li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .prose li::before,
[dir="rtl"] .tick-list li::before,
[dir="rtl"] .sources li::before { left: auto; right: 0; }

/* Word-reveal gap flips side in RTL. */
[dir="rtl"] .sw-wrap { margin-right: 0; margin-left: 0.3em; }
[dir="rtl"] .sw-wrap:last-child { margin-left: 0; }

/* Figure / frame tags align to the right. */
[dir="rtl"] .figure figcaption,
[dir="rtl"] .frame-tag { text-align: right; }
[dir="rtl"] .frame-tag { left: auto; right: 14px; }
[dir="rtl"] .vf-label { left: auto; right: 14px; }
[dir="rtl"] .vf-play svg { margin-left: 0; margin-right: 4px; }

/* Timeline rail + dots move to the right edge. */
[dir="rtl"] .timeline { padding-left: 0; padding-right: 0; }
[dir="rtl"] .t-progress,
[dir="rtl"] .t-step::before { left: auto; right: 27px; }
[dir="rtl"] .t-dot { left: auto; right: 8px; }
[dir="rtl"] .t-step { padding-left: 0; padding-right: 64px; }

/* Hover nudges reverse direction. */
[dir="rtl"] .mobile-menu a:hover { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .footer ul a:hover { padding-left: 0; padding-right: 6px; }

/* Directional arrows in buttons/links point the RTL way. */
[dir="rtl"] .btn svg,
[dir="rtl"] .card h3 svg,
[dir="rtl"] .mono-label a { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(4px); }

/* Breadcrumb + inline separators keep natural flow (flex handles it),
   but the leading dash on .mono-label sits fine because it is a flex item. */

/* Nav CTA + language switch keep left-to-right internal order sensible. */
[dir="rtl"] .nav-cta { flex-direction: row; }

/* Contact form: labels and inputs already block-level; just align text. */
[dir="rtl"] .field label,
[dir="rtl"] .prose,
[dir="rtl"] .lead,
[dir="rtl"] .cc-text { text-align: right; }

/* Numbers, phone, email, URLs, and Latin technical terms stay LTR inside RTL. */
[dir="rtl"] .ltr,
[dir="rtl"] .nav-phone,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---- Language switcher (shared, both directions) ---- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: .85rem; font-weight: 600; color: var(--txt);
  transition: background var(--dur), border-color var(--dur);
}
.lang-switch:hover { background: var(--accent-dim); border-color: var(--accent); }
.lang-switch img { width: 22px; height: 15px; border-radius: 2px; display: block; }
.nav-on-video:not(.is-scrolled) .lang-switch { color: #fff; border-color: rgba(255,255,255,.5); }
.nav-on-light-video:not(.is-scrolled) .lang-switch { color: var(--txt); border-color: var(--line-strong); }
@media (max-width: 860px) { .lang-switch span { display: none; } .lang-switch { padding: 7px; } }