/* ============================================================
   lang.css - Arabic (right-to-left) layout + language switch
   Load it LAST on every page (after the page's own CSS).
   Every mirror rule below starts with [dir="rtl"], so the English
   (left-to-right) layout is exactly the same as before.
   ============================================================ */

/* Hide the page for a split second while English text is swapped in */
html.lang-pending body { visibility: hidden; }

/* ---------- Arabic typography ---------- */
html[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] .hero h1 { line-height: 1.45; }
html[lang="ar"] :is(.rp-head h2, .rp-cta h2, .svc-main h2, .rp-req-text h2) { line-height: 1.5; }
html[lang="ar"] :is(.rp-lead, .hero-text, .faq-answer p, .svc-desc) { line-height: 1.85; }

/* Arabic letters must stay joined: no letter-spacing, no uppercase */
[dir="rtl"] :is(.pill span, .rp-letter, .rs-title, .rs-pill, .rp-kicker, .rp-tag,
                .rp-fab-btn, .rp-photo span, .rp-sev dt, .svc-badge) {
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Home / all heroes ---------- */
/* score badge sits on the other corner of the photo */
[dir="rtl"] .hero-badge { left: auto; right: -1.5rem; }
@media (max-width: 1023px) {
  [dir="rtl"] .hero-badge { left: auto; right: .5rem; }
}
/* services + about heroes stay centred in Arabic too */
@media (min-width: 1024px) {
  [dir="rtl"] :is(.svc-hero, .ab-hero) :is(h1, .hero-text) { text-align: center; }
}

/* ---------- How to book (home) ---------- */
[dir="rtl"] .rp-step { text-align: right; }
[dir="rtl"] .rp-num { right: auto; left: .9rem; }
@media (min-width: 1100px) {
  [dir="rtl"] .rp-step:not(:last-child)::after { right: auto; left: -1.25rem; }
}

/* WhatsApp example: the bubble "tail" corner follows the side */
[dir="rtl"] .rp-out .rp-bubble { border-top-right-radius: .9rem; border-top-left-radius: .2rem; }
[dir="rtl"] .rp-in  .rp-bubble { border-top-left-radius: .9rem; border-top-right-radius: .2rem; }
[dir="rtl"] .rp-chip-sys { padding: .3rem .35rem .3rem .8rem; }

/* ---------- Reveal animation: list items slide in from the right ---------- */
@keyframes rpSlideRtl { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.rp-js[dir="rtl"] :is(.rp-checks li, .rp-scale li, .rp-table tbody tr).rp-in { animation-name: rpSlideRtl; }

/* ---------- Fixed helpers created by report.js ---------- */
[dir="rtl"] .rp-progress i { transform-origin: right center; }
[dir="rtl"] .rp-top { right: auto; left: 1.25rem; }
[dir="rtl"] .rp-rail { right: auto; left: 1.25rem; }
[dir="rtl"] .rp-rail a::after { right: auto; left: calc(100% + .6rem); transform: translate(-6px, -50%); }
[dir="rtl"] .rp-rail a:hover::after { transform: translate(0, -50%); }
@media (min-width: 1280px) {
  [dir="rtl"] .rp-has-rail main .container-wide { padding-right: 1.5rem; padding-left: 1.5rem; }
}

/* ---------- Services ---------- */
[dir="rtl"] .svc-badge { left: auto; right: 1rem; }

/* ---------- Sample report ---------- */
[dir="rtl"] .rp-area > .rp-sub-head { border-left: 1px solid var(--border); border-right: 6px solid var(--primary); }
[dir="rtl"] .rp-req { border-left: 1px solid var(--border); border-right: 6px solid var(--primary); }

/* pictures that grow on hover stay inside the screen */
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .rp-photos .rp-fig:first-child .rp-photo { transform-origin: right center; }
  [dir="rtl"] .rp-photos .rp-fig:last-child  .rp-photo { transform-origin: left center; }
  [dir="rtl"] .rp-photos .rp-fig:only-child  .rp-photo { transform-origin: center; }
}

/* floating "Report" button moves to the left edge */
[dir="rtl"] .rp-fab { right: auto; left: 0; }
[dir="rtl"] .rp-fab-btn { border-radius: 0 12px 12px 0; }

/* ---------- About us ---------- */
[dir="rtl"] .ab-chip { direction: rtl; }
[dir="rtl"] .tl-step::after { left: auto; right: 2.3rem; }
@media (min-width: 1100px) {
  [dir="rtl"] .tl-step::after { right: 100%; }
  .rp-js[dir="rtl"] .tl-step::after { transform-origin: right; }
}

/* the map itself keeps its normal direction; popups read right-to-left */
[dir="rtl"] .map { direction: ltr; }
html[lang="ar"] .leaflet-popup-content { direction: rtl; text-align: right; }