/* ============================================================
   AELAANY — RTL (Arabic) OVERRIDES
   Loaded only when lang-ar body class is present
   ============================================================ */

/* ── Direction & Alignment ───────────────────────────────── */
body.lang-ar {
  direction: rtl;
  /* Logical: aligns to right in RTL automatically, and importantly
     lets descendant `text-align: center` (used by hero CTAs and section
     headers) win — `text-align: right` here was overriding them. */
  text-align: start;
  font-family: var(--font-ar-body);
}

body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar h5,
body.lang-ar h6 {
  font-family: var(--font-ar-heading);
  font-weight: 800;
  letter-spacing: 0;
}

/* ── Flip Flex Layouts ───────────────────────────────────── */
body.lang-ar .elementor-column-wrap,
body.lang-ar .elementor-row {
  direction: rtl;
}

/* Two-column sections: flip text left / image right */
body.lang-ar .split-text-right {
  order: 1;
}
body.lang-ar .split-image-left {
  order: -1;
}

/* ── Section Labels & Dividers ───────────────────────────── */
body.lang-ar .section-label {
  letter-spacing: 0;
}

body.lang-ar .divider-blue {
  margin-left: auto;
  margin-right: 0;
}

body.lang-ar .section-header .divider-blue {
  margin: 16px auto 0;
}

/* ── Cards ───────────────────────────────────────────────── */
body.lang-ar .aelaany-card__icon {
  margin-left: auto;
  margin-right: 0;
}

/* ── Process Steps ───────────────────────────────────────── */
body.lang-ar .process-steps {
  direction: rtl;
}

body.lang-ar .process-step__number {
  margin-left: 0;
  margin-right: auto;
}

/* ── Elementor Text Widgets ──────────────────────────────── */
/* Use `start` so widgets explicitly set to `center` (Elementor's
   .elementor-align-center) keep their centered alignment. Previously
   `right` was forcing every AR heading to right-align, breaking hero/CTA. */
body.lang-ar .elementor-widget-text-editor:not(.elementor-align-center),
body.lang-ar .elementor-widget-heading:not(.elementor-align-center) {
  text-align: start;
}

/* ── Nav Arrows / Bullets ─────────────────────────────────── */
body.lang-ar .footer-links li a::before {
  content: '‹';
}

body.lang-ar .footer-links li a:hover {
  padding-right: 4px;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
body.lang-ar .aelaany-breadcrumb {
  direction: rtl;
  text-align: start;
}

/* ── Blog Post ───────────────────────────────────────────── */
body.lang-ar .blog-post-content {
  text-align: start;
}

body.lang-ar blockquote {
  /* Logical border + padding so this works for any direction. */
  border-inline-start: 4px solid var(--clr-primary);
  border-inline-end: none;
  padding-inline-start: 20px;
  padding-inline-end: 0;
}

/* ── Form Fields ─────────────────────────────────────────── */
body.lang-ar input,
body.lang-ar textarea,
body.lang-ar select {
  text-align: start;
  direction: rtl;
}

/* ── Icon Positions ──────────────────────────────────────── */
body.lang-ar .btn svg:first-child,
body.lang-ar .btn i:first-child {
  order: 1;
  margin-left: 8px;
  margin-right: 0;
}

/* ── Counter Numbers (always LTR) ────────────────────────── */
body.lang-ar .counter-number {
  direction: ltr;
  display: inline-block;
  unicode-bidi: bidi-override;
}

/* ── Social Icons (stay in same order) ──────────────────── */
body.lang-ar .aelaany-social {
  flex-direction: row;
  justify-content: flex-end;
}

/* ── Mobile Menu ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.lang-ar .aelaany-mobile-menu {
    transform: translateX(100%);
  }
  body.lang-ar .aelaany-mobile-menu.open {
    transform: translateX(0);
  }
}

/* ── Elementor Icon List ─────────────────────────────────── */
body.lang-ar .elementor-icon-list-item {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ── Testimonials ────────────────────────────────────────── */
body.lang-ar .testimonial-quote {
  text-align: start;
}

/* ── Google Map (stays LTR) ──────────────────────────────── */
body.lang-ar .map-embed {
  direction: ltr;
}

/* ── Services dropdown arrow — mirror for RTL (M26 partial) ── */
body.lang-ar .aelaany-menu > li.menu-item-has-children > a::after {
  transform: rotate(-45deg) translateY(-2px);
}

body.lang-ar .aelaany-menu > li.menu-item-has-children:hover > a::after,
body.lang-ar .aelaany-menu > li.menu-item-has-children:focus-within > a::after {
  transform: rotate(135deg) translateY(-2px);
}

/* ── Header CTA arrow — flip if a pseudo arrow is used (H10) ── */
body.lang-ar .aelaany-header-cta::after {
  content: '\2190'; /* leftward arrow ← */
}

/* ── Back-to-top button — flip side in RTL (L8 / RTL-aware) ──
   Covers both legacy `.aelaany-back-to-top` and current `.aelaany-back-top`. */
body.lang-ar .aelaany-back-to-top,
[dir="rtl"] .aelaany-back-to-top {
  left: auto;
  right: 20px;
}
[dir="rtl"] .aelaany-back-top,
body.lang-ar .aelaany-back-top {
  inset-inline-start: 24px;
}

/* ── RTL header CTA arrow mirror (additional dir="rtl" selector) ── */
[dir="rtl"] .aelaany-header-cta::after {
  content: '\2190';
  margin-right: 8px;
  margin-left: 0;
}

/* ── Force LTR numbers inside RTL counters ── */
[dir="rtl"] .counter-number {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
}

/* ── Process-line: flip transform-origin for RTL ── */
[dir="rtl"] .process-line,
body.lang-ar .process-line {
  transform-origin: right center;
}

/* ── Logo marquee: keep LTR scroll inside RTL pages ──
   Under `direction: rtl` the marquee track (width:max-content, wider than its
   wrapper) becomes RIGHT-anchored, so the leftward `translateX(-50%)` animation
   drifts the logos off-screen and leaves a growing blank gap on the right —
   it looks frozen/broken even though the animation is still running. Logos are
   direction-agnostic, so we force the marquee to behave exactly like LTR. */
body.lang-ar .logos-marquee,
body.lang-ar .logos-marquee-track,
[dir="rtl"] .logos-marquee,
[dir="rtl"] .logos-marquee-track {
  direction: ltr;
}