/* ==========================================================
   APEX — version arabe (RTL). Loaded after style.css on /ar/ pages only.
   ========================================================== */
:root {
  --display: "Readex Pro", "Jost", "Futura", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", "DM Sans", system-ui, sans-serif;
}
body { line-height: 1.85; }
h1, h2, h3, h4 { line-height: 1.35; letter-spacing: 0; }
.h2 { font-size: clamp(30px, 4vw, 52px); }

/* Letter-spacing breaks the joining of Arabic letters: remove it everywhere it was used */
.eyebrow, .hero__kicker, .dist__title, .lotcard__n, .footer h4, .compare__tag, .possib__title, .marquee span { letter-spacing: 0; }
.eyebrow { font-size: 15px; font-weight: 600; }
.hero__kicker { font-size: 16px; font-weight: 500; }
.possib__title { line-height: 1.3; }

/* Latin codes, numbers and addresses keep their own direction inside Arabic text */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Navigation ---------- */
.nav__links a::after { left: 100%; right: 0; transition: left .4s var(--ease); }
.nav__links a:hover::after, .nav__links a.active::after, .nav__links a[aria-current="page"]::after { left: 0; }
.nav__links a { font-size: 15.5px; }

/* Arrows point the reading direction (the play icon stays as it is) */
.btn svg:not(.keep), .more::after { transform: scaleX(-1); }
.more::after { content: "→"; display: inline-block; }
.more:hover::after { transform: scaleX(-1) translateX(4px); }

/* ---------- Hero ---------- */
.hero__title img { clip-path: inset(0 0 0 100%); }
.hero__tagline { line-height: 1.45; max-width: 24ch; }

/* ---------- Marquee: the track overflows to the left in RTL ---------- */
.marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* ---------- Stats ---------- */
.stat strong small { margin-left: 0; margin-right: 4px; }

/* ---------- Quote ---------- */
.quote { border-left: 0; border-right: 3px solid var(--green-500); border-radius: 16px 0 0 16px; line-height: 1.6; }
.quote b { line-height: 1.4; }

/* ---------- Sketch / render comparison: the slider keeps its physical left-to-right logic ---------- */
.compare { direction: ltr; }
.compare__tag { direction: rtl; }

/* ---------- Map ---------- */
.map__label { direction: rtl; text-align: right; }
.map__legend { left: auto; right: 16px; }

/* ---------- Distances ---------- */
.dist__row em { text-align: left; }
.dist__bar i { left: auto; right: 0; background: linear-gradient(270deg, var(--green-500), var(--green-300)); }
.dist__bar i::after { right: auto; left: -6px; }

/* ---------- Zones ---------- */
.zone__pill { left: auto; right: 22px; }

/* ---------- Lots ---------- */
.view3d__toggle { right: auto; left: 18px; }
.plan__filters { left: auto; right: 14px; }
.plan__hint { right: auto; left: 14px; }
.lotcard__big { font-size: 64px; line-height: 1.1; }
.lotcard dd, .ilot dd { text-align: left; }
.lotcard__bar i { background: linear-gradient(270deg, var(--green-500), var(--green-300)); margin-right: 0; margin-left: auto; }
.ltable th { text-align: right; }
.ltable td:last-child, .ltable th:last-child { text-align: left; }
.table-wrap--open .ltable caption { text-align: right; }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; }

/* ---------- Contact ---------- */
.contact::after { background: linear-gradient(270deg, rgba(16, 38, 8, .92) 0%, rgba(16, 38, 8, .75) 50%, rgba(16, 38, 8, .35) 100%); }
.form label { font-size: 14px; }
.form input[type="email"], .form input[type="tel"] { direction: ltr; text-align: right; }
.form input[type="email"]::placeholder, .form input[type="tel"]::placeholder { direction: rtl; }

/* ---------- Inner pages ---------- */
.crumbs li + li::before { content: "‹"; margin-right: 0; margin-left: 8px; }
.note { border-left: 0; border-right: 4px solid var(--green-600); }
.phero h1 { line-height: 1.3; }

/* ---------- Progress bar grows from the right ---------- */
.progress { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--green-500), var(--green-300)); }

@media (max-width: 620px) {
  .hero__kicker { font-size: 14px; letter-spacing: 0; white-space: normal; }
  .compare__tag--l { left: 10px; } .compare__tag--r { right: 10px; }
  .lotcard__big { font-size: 54px; }
  .view3d__toggle { left: auto; }
}

/* Group headings on the lots page ("المجموعة C · البقعتان 14 و15") stay on one or two clean lines */
.ilot h3 { font-size: 21px; line-height: 1.5; }