/* ============================================================
   GLOWPLY — RTL adjustments
   Enqueued only when is_rtl() (e.g. Arabic locale). Layered on top
   of assets/css/main.css. Mirrors directional rules and swaps the
   display/body fonts to Tajawal.
   ============================================================ */

:root{
  --font-d:"Tajawal","Plus Jakarta Sans",system-ui,sans-serif;
  --font-s:"Tajawal","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* keep the latin wordmark in the brand typeface */
[dir="rtl"] .brand,
[dir="rtl"] .lang a{font-family:"Plus Jakarta Sans",sans-serif}

[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .h2,[dir="rtl"] .eyebrow,[dir="rtl"] .stat .num,
[dir="rtl"] .plan .amt,[dir="rtl"] .hero h1{letter-spacing:0}
[dir="rtl"] .hero h1{line-height:1.2}
[dir="rtl"] .h2,[dir="rtl"] .journey-head h2,[dir="rtl"] .final h2{line-height:1.25}
[dir="rtl"] .lead,[dir="rtl"] .hero .sub,[dir="rtl"] .feat p,[dir="rtl"] .how-card p{line-height:1.75}

/* floating cards — mirror horizontal anchoring */
[dir="rtl"] .float.f-ssl{left:auto;right:-34px}
[dir="rtl"] .float.f-sales{right:auto;left:-26px}

/* how-it-works connector arrow */
[dir="rtl"] .how-card .step-arrow{right:auto;left:15px}
[dir="rtl"] .how-card .step-arrow svg{transform:scaleX(-1)}

/* forward-pointing CTA arrows */
[dir="rtl"] .btn-primary svg,
[dir="rtl"] .btn-light svg,
[dir="rtl"] .live-btn svg{transform:scaleX(-1)}

/* stat dividers */
[dir="rtl"] .stat + .stat::before{left:auto;right:-9px}

/* journey step number badge */
[dir="rtl"] .j-num{right:auto;left:50%;transform:translateX(-34px)}

/* misc */
[dir="rtl"] .pf-grid{text-align:right}
[dir="rtl"] .spark{direction:ltr}
[dir="rtl"] .step .spin{margin-left:0;margin-right:auto}
[dir="rtl"] .price-foot svg{margin-right:0;margin-left:5px}

/* feature showcase */
[dir="rtl"] .bld-side{border-right:none;border-left:1px solid var(--line)}
[dir="rtl"] .fx-livedemo{right:auto;left:18px}

/* customer stories carousel */
[dir="rtl"] .cs-quote{font-style:normal}
[dir="rtl"] .cs-prev{left:auto;right:-22px}
[dir="rtl"] .cs-next{right:auto;left:-22px}
[dir="rtl"] .cs-prev svg{transform:scaleX(-1)}
[dir="rtl"] .cs-next svg{transform:none}
[dir="rtl"] .cs-left::before{right:auto;left:-100px}

@media (max-width:980px){
  [dir="rtl"] .nav.open .nav-links{left:24px;right:24px}
}