/* ════════════════════════════════════════════════════════════════════
   NexFlow · RTL leftovers (Arabic pages only)
   Logical properties live in the shared stylesheets. This file covers
   what CSS cannot express as logical: keyframes, masks, translateX
   drawer direction, arrow mirroring, and native scrollbar.
   ════════════════════════════════════════════════════════════════════ */

html[dir="rtl"] .arr,
html[dir="rtl"] .nf-nav-svc-foot a span[aria-hidden],
html[dir="rtl"] .what-do-go .arr {
  display: inline-block;
  transform: scaleX(-1);
}
html[dir="rtl"] .btn:hover .arr,
html[dir="rtl"] .what-do-card:hover .what-do-go .arr,
html[dir="rtl"] .demo-foot .cta:hover .arr,
html[dir="rtl"] .nf-sale-inner:hover .nf-sale-cta {
  transform: scaleX(-1) translateX(-3px);
}

/* Nav underline grows from the start edge */
html[dir="rtl"] .nf-nav-links a::after,
html[dir="rtl"] .blog-card::after {
  transform-origin: right;
}

/* Mobile drawer: slides in from the start (right) edge in RTL */
@media (max-width: 880px) {
  html[dir="rtl"] .nf-nav-links {
    transform: translateX(-100%);
  }
  html[dir="rtl"] .nf-nav-links.open {
    transform: translateX(0);
  }
}

/* Marquee: reverse so glyphs do not run into the fade mask */
html[dir="rtl"] .marquee-track {
  animation-name: marquee-rtl;
}
@keyframes marquee-rtl {
  to { transform: translateX(50%); }
}
html[dir="rtl"] .marquee {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to left, transparent, #000 4%, #000 96%, transparent);
}

/* Horizontal pager: prev is on the start edge, next on the end */
html[dir="rtl"] .nf-h-arrow.prev .arr,
html[dir="rtl"] .nf-h-arrow.next .arr {
  transform: scaleX(-1);
}

/* Language toggle: English label keeps the Latin face even in RTL chrome.
   Arabic label uses --font-ar-sans via [lang="ar"] in sections.css. */
html[dir="rtl"] .nf-lang-toggle[lang="en"] { font-family: var(--font-sans); }

/* WhatsApp CTA (Arabic chrome only) */
.nf-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Native scrollbars: keep the track on the start edge in Firefox */
html[dir="rtl"] {
  scrollbar-width: thin;
  scrollbar-color: var(--fg-3) transparent;
}
html[dir="rtl"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[dir="rtl"] *::-webkit-scrollbar-thumb {
  background: var(--fg-3);
  border-radius: 999px;
}

/* Demo payloads stay LTR even when chrome is RTL */
html[dir="rtl"] .demo-body,
html[dir="rtl"] .demo-body .paper,
html[dir="rtl"] .demo-body .term,
html[dir="rtl"] .hero-flow-log,
html[dir="rtl"] .hero-flow-type {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Brand / email / code isolation */
.ltr-isolate { unicode-bidi: isolate; direction: ltr; display: inline; }

/* Intro overlay skip sits on the start edge */
html[dir="rtl"] .nf-intro-skip {
  right: auto;
  inset-inline-end: 18px;
}
html[dir="rtl"] .nf-intro-word,
html[dir="rtl"] .nf-intro-tag,
html[dir="rtl"] .nf-intro-cta {
  font-family: var(--font-ar-display), var(--font-ar-sans), sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] .nf-intro-cta .arr { transform: scaleX(-1); }