/* ============================================================
   VouchTrack — RTL support
   Loaded on every page; everything is scoped to [dir="rtl"], so
   it costs LTR pages nothing.

   Padding, margin, border and text-align are already logical
   properties in the main sheets and flip on their own. What is
   left here is the set that cannot: absolute positioning,
   directional transforms, gradients and a few glyph choices.
   ============================================================ */

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

/* Arabic needs a typeface that actually has the glyphs, and a
   little more line height — Latin leading is too tight for it. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; letter-spacing: 0; }

/* Mono labels: Arabic has no monospace tradition, and uppercase
   plus wide letter-spacing is unreadable. Drop both. */
[dir="rtl"] .mono, [dir="rtl"] .eyebrow, [dir="rtl"] .crumb,
[dir="rtl"] .chip, [dir="rtl"] .badge, [dir="rtl"] .tl-item .step,
[dir="rtl"] .post__meta, [dir="rtl"] .footer h4, [dir="rtl"] .plan-group {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- header & nav ---------- */
/* .logo-mark is a logo icon — not mirrored in RTL */

[dir="rtl"] .nav-links > li > a.active::after { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .burger.open i:nth-child(1) { transform: translateY(6.2px) rotate(-45deg); }
[dir="rtl"] .burger.open i:nth-child(3) { transform: translateY(-6.2px) rotate(45deg); }

/* Arrows inside buttons point the other way, and nudge the other way on hover */
[dir="rtl"] .btn svg, [dir="rtl"] .arrow svg,
[dir="rtl"] .sol .arrow svg, [dir="rtl"] .post .arrow svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .to-top svg { transform: none; }                /* up is up in both */

/* ---------- scroll & progress bars ---------- */
[dir="rtl"] .scroll-progress,
[dir="rtl"] .reading-bar { left: auto; right: 0; }
[dir="rtl"] .pc-fill { inset: 0 0 0 auto; }
[dir="rtl"] .pc-fill::after { right: auto; left: -6px; }
[dir="rtl"] .pc-marks i { /* positioned with left % — mirror it */ }
[dir="rtl"] .sc-step__bar { left: auto; right: 0; }

/* ---------- skip link ---------- */
[dir="rtl"] .skip-link { left: auto; right: 12px; border-radius: 0 0 10px 10px; }

/* ---------- floating dock & back-to-top ---------- */
[dir="rtl"] .dock { right: auto; left: 20px; }
[dir="rtl"] .dock a span { right: auto; left: 62px; transform: translateX(-8px); }
[dir="rtl"] .dock a:hover span { transform: translateX(0); }
[dir="rtl"] .to-top { right: auto; left: 22px; }
@media (max-width: 640px) {
  [dir="rtl"] .dock { left: 12px; }
  [dir="rtl"] .to-top { left: 12px; }
}

/* ---------- hero map panel ---------- */
[dir="rtl"] .hud--1 { right: auto; left: 4%; }
[dir="rtl"] .hud--2, [dir="rtl"] .hud--3 { left: auto; right: 4%; }
[dir="rtl"] .map-alert { transform: translateX(50%); left: auto; right: 50%; }
@keyframes alertCycleRtl {
  0%, 56%  { opacity: 0; transform: translate(50%, 12px); }
  63%, 90% { opacity: 1; transform: translate(50%, 0); }
  97%,100% { opacity: 0; transform: translate(50%, 12px); }
}
[dir="rtl"] .map-alert { animation-name: alertCycleRtl; }

/* ---------- explainer player ---------- */
[dir="rtl"] .scene-caption {
  left: auto; right: 3%;
  border-inline-start: 0; border-inline-end: 3px solid var(--blue);
}
[dir="rtl"] .player-badge, [dir="rtl"] .player-quality { right: auto; left: 14px; }
[dir="rtl"] .chapter.active::before { left: auto; right: 0; }
[dir="rtl"] .chapter:hover { transform: translateX(-3px); }
@media (max-width: 700px) {
  [dir="rtl"] .scene-caption { right: auto; border-inline-end: 0; border-top: 3px solid var(--blue); }
}

/* ---------- timeline ---------- */
[dir="rtl"] .timeline { padding-inline-start: 40px; padding-inline-end: 0; }
[dir="rtl"] .timeline::before,
[dir="rtl"] .timeline__prog { left: auto; right: 14px; }
[dir="rtl"] .tl-item::before { left: auto; right: -33px; }

/* ---------- table of contents ---------- */
[dir="rtl"] .toc a { border-inline-start: 0; border-inline-end: 2px solid var(--line); }
[dir="rtl"] .toc a:hover { padding-inline-start: 14px; padding-inline-end: 18px; }
[dir="rtl"] .toc a.on { border-inline-end-color: var(--blue); }
@media (max-width: 960px) {
  [dir="rtl"] .toc a { border-inline-end: 1px solid var(--line); }
}

/* ---------- cards & badges ---------- */
[dir="rtl"] .plan--featured::before { right: auto; left: 22px; border-radius: 0 0 9px 9px; }
[dir="rtl"] .quote::before { right: auto; left: 20px; }
[dir="rtl"] .answer-box { border-inline-start: 0; border-inline-end: 4px solid var(--blue); }
[dir="rtl"] .prose blockquote { border-inline-start: 0; border-inline-end: 3px solid var(--blue); }
[dir="rtl"] .footer-links li a:hover { transform: translateX(-4px); }
[dir="rtl"] .sc-badge--1, [dir="rtl"] .sc-badge--3 { left: auto; right: -2%; }
[dir="rtl"] .sc-badge--2 { right: auto; left: -3%; }
[dir="rtl"] .sc-phone--l { left: auto; right: 2%; transform: rotateY(-19deg) rotateZ(5deg) translateZ(-90px) translateY(16px); }
[dir="rtl"] .sc-phone--r { right: auto; left: 2%; transform: rotateY(19deg) rotateZ(-5deg) translateZ(-90px) translateY(-16px); }

/* ---------- pricing toggle ---------- */
[dir="rtl"] .switch::after { left: auto; right: 3px; }
[dir="rtl"] .switch.on::after { transform: translateX(-22px); }

/* ---------- reveal animations ---------- */
[dir="rtl"] [data-reveal="left"]  { transform: translateX(34px); }
[dir="rtl"] [data-reveal="right"] { transform: translateX(-34px); }

/* ---------- marquee runs the other way ---------- */
[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* ---------- gradients that imply direction ---------- */
[dir="rtl"] .grad-text { background: linear-gradient(260deg, #1f1715 0%, #970617 52%, #c41a2e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
[dir="rtl"] .btn--shine::after { transform: translateX(120%); }
[dir="rtl"] .btn--shine:hover::after { transform: translateX(-120%); }

/* ---------- SVG demos stay LTR ----------
   The maps, charts and app screenshots are artwork with baked-in
   Latin labels. Mirroring them would reverse the road layout and
   flip the text, so they are deliberately left alone. */
[dir="rtl"] .demo, [dir="rtl"] .deep__art svg, [dir="rtl"] .feat__demo svg,
[dir="rtl"] .sol__bg svg, [dir="rtl"] .map-stage svg, [dir="rtl"] .scene > svg { direction: ltr; }

/* ---------- language switcher ---------- */
.lang {
  position: relative; display: inline-flex; align-items: center;
}
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 99px;
  font-size: .86rem; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--line-strong); background: #fff;
  transition: color .3s, border-color .3s;
}
.lang__btn:hover, .lang[open] .lang__btn { color: var(--blue); border-color: var(--blue); }
.lang__btn svg { width: 15px; height: 15px; }
.lang__btn .chev { transition: transform .3s; }
.lang[open] .lang__btn .chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 176px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); z-index: 60;
}
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: var(--text-2);
  transition: background .25s, color .25s;
}
.lang__menu a:hover { background: var(--surface-2); color: var(--text); }
.lang__menu a[aria-current="true"] { color: var(--blue); font-weight: 600; background: #fbeff0; }
.lang__menu a span:last-child { font-size: .74rem; color: var(--text-3); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary { list-style: none; cursor: pointer; }
@media (max-width: 1080px) { .nav-cta .lang { display: none; } }

/* language list inside the mobile menu */
.mobile-lang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.mobile-lang a {
  padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 99px;
  font-size: .88rem; font-family: var(--font-body); border-bottom: 1px solid var(--line-strong);
}
.mobile-lang a[aria-current="true"] { border-color: var(--blue); color: var(--blue); font-weight: 600; }

/* ------------------------------------------------------------
   BIDIRECTIONAL TEXT — Latin strings inside RTL
   A phone number written in Latin digits gets reordered by the
   bidi algorithm when it sits in an RTL paragraph: +92 42 3800
   0000 renders as "0000 3800 42 92+". Isolating each run fixes
   it without touching the surrounding Arabic.
   ------------------------------------------------------------ */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href*="wa.me"],
[dir="rtl"] .ltr,
[dir="rtl"] .mono,
[dir="rtl"] code,
[dir="rtl"] .map-panel__bar .title {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Brand name, product codes and URLs keep Latin order too */
[dir="rtl"] .logo-txt b { direction: ltr; unicode-bidi: isolate; }

/* The copyright line mixes a Latin company name with an Arabic
   sentence — isolate the name so the year does not jump. */
[dir="rtl"] .footer-bottom span { unicode-bidi: isolate; }