/* ==========================================================================
   DESSANT: right-to-left layer (Arabic).
   Loaded ONLY on ar / rates-ar / terms-ar / privacy-ar, right after site.css
   (homepage + rates) or legal.css (legal pages). Every rule is scoped under
   html[dir="rtl"], so this file can never touch another language.

   Mostly the browser does the mirroring on its own (flex rows, grid columns,
   text-align: start, tables, multi-column). This file fixes what does not
   flip by itself: physical left/right values in site.css / legal.css, the
   Arabic typography, and the bidi islands (numbers, phones, emails).

   Source-HTML contract (details in the hand-over report):
   - keep the arrow in the .btn-arrow spans as a right-pointing glyph; this
     file mirrors it with CSS (a text arrow inside a link cannot be mirrored
     by CSS: use a right-pointing one for the legal "Back to site" link and
     the rates "Change" button);
   - a currency amount or a Latin phrase with digits that follows an Arabic
     word must be isolated, otherwise the bidi algorithm prints $350 as 350$:
     put &lrm; (U+200E) before the $ or wrap it in <bdi dir="ltr">, and do the
     same for a bare phone number (one that is not inside a tel: link);
   - optional: natural right-to-left order of the pinned "How it works" cards
     needs a 3 line change in js/site.js (see section 6 below).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography
   Manrope has no Arabic glyphs. It stays FIRST so Latin letters and digits
   (brand names, prices, the outlined step numbers) keep the site look; the
   browser falls through to the system Arabic face glyph by glyph.
   -------------------------------------------------------------------------- */
html[dir="rtl"] {
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, Arial, sans-serif;
}
html[dir="rtl"] body { line-height: 1.85; }

/* Arabic is a joined script: ANY letter-spacing breaks the joins. site.css and
   legal.css set it in about forty places (eyebrows, buttons, labels, tables,
   headings with negative tracking, the injected cookie banner), at several
   specificities, so one blunt reset is the only version that cannot miss one. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  letter-spacing: 0 !important;
}

/* Display type: site.css line-heights of 0.96 to 1.05 clip Arabic ascenders
   and marks. Arabic headings also read heavy at 900, so bring the weight down
   to what the Arabic face really has. */
html[dir="rtl"] .hero-title { font-size: clamp(38px, 6.4vw, 88px); line-height: 1.32; font-weight: 800; }
html[dir="rtl"] .ht-line { padding-top: 0.04em; padding-bottom: 0.14em; }
html[dir="rtl"] .h2 { line-height: 1.35; font-weight: 800; }
html[dir="rtl"] .h3 { line-height: 1.45; font-weight: 800; }
html[dir="rtl"] .band-title { line-height: 1.3; font-weight: 800; }
html[dir="rtl"] .platform-card h3,
html[dir="rtl"] .price-card h3,
html[dir="rtl"] .step-card h3,
html[dir="rtl"] .form-success h3,
html[dir="rtl"] .rc-title,
html[dir="rtl"] .rc-route { font-weight: 800; }
html[dir="rtl"] .platform-any h3 { line-height: 1.5; }
html[dir="rtl"] .rc-route { line-height: 1.55; }
html[dir="rtl"] .step-card h3 { line-height: 1.5; }
html[dir="rtl"] .hero-sub { font-weight: 600; line-height: 1.9; }
html[dir="rtl"] .acc summary,
html[dir="rtl"] .cmp-table thead th,
html[dir="rtl"] .btn { font-weight: 700; }
/* keep pill buttons and chips about as tall as in LTR */
html[dir="rtl"] .btn,
html[dir="rtl"] .wa-btn,
html[dir="rtl"] .cb-btn,
html[dir="rtl"] .seg-btn,
html[dir="rtl"] .rc-chip { line-height: 1.5; }
html[dir="rtl"] .doc-head h1 { line-height: 1.4; font-weight: 800; }
html[dir="rtl"] main h2 { line-height: 1.55; font-weight: 800; }

/* Small text: Arabic at 11 to 13px is too fine to read, nudge only those. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero-kicker { font-size: 14px; }
html[dir="rtl"] .hstat-label,
html[dir="rtl"] .astat-label { font-size: 14px; }
html[dir="rtl"] .badge { font-size: 12px; }
html[dir="rtl"] .pop-tag { font-size: 12.5px; }
html[dir="rtl"] .price-tier { font-size: 14px; }
html[dir="rtl"] .fx-flip-cap { font-size: 13px; }
html[dir="rtl"] .fx-flip-tab { font-size: 12px; }
html[dir="rtl"] .cmp-table thead th { font-size: 13.5px; }
html[dir="rtl"] .mini-table thead th { font-size: 13px; }
html[dir="rtl"] .rv-tag { font-size: 12px; }
html[dir="rtl"] .rv-card figcaption { font-size: 14.5px; line-height: 1.7; }
html[dir="rtl"] .f-col h4 { font-size: 14px; }
html[dir="rtl"] .fset legend { font-size: 14px; }
html[dir="rtl"] .ferr { font-size: 14px; }
html[dir="rtl"] .mm-langs-label { font-size: 12.5px; }
html[dir="rtl"] .wa-strip small { font-size: 13.5px; }
html[dir="rtl"] .rc-fld > span { font-size: 13.5px; }
html[dir="rtl"] .rc-hint,
html[dir="rtl"] .rc-note { font-size: 14px; line-height: 1.7; }
html[dir="rtl"] .rc-sub,
html[dir="rtl"] .rc-explain { font-size: 13.5px; line-height: 1.7; }
html[dir="rtl"] .rc-line .rc-tag { font-size: 11.5px; }
html[dir="rtl"] .rc-fcl-head { font-size: 11px; }
html[dir="rtl"] .rc-fcl-cell span { font-size: 12.5px; }
html[dir="rtl"] .plain b { font-size: 13px; }
html[dir="rtl"] .doc-head .updated { font-size: 15px; }
html[dir="rtl"] thead th { font-size: 13px; }

/* Body copy: a little more air between Arabic lines. */
html[dir="rtl"] .choice-note { line-height: 1.8; }
html[dir="rtl"] .about-copy { line-height: 1.95; }
html[dir="rtl"] .section-sub { line-height: 1.8; }
html[dir="rtl"] .f-col address { line-height: 1.8; }
html[dir="rtl"] .cookie-banner { line-height: 1.75; }
html[dir="rtl"] main p,
html[dir="rtl"] main li { line-height: 1.9; }
html[dir="rtl"] .plain { line-height: 1.85; }

/* --------------------------------------------------------------------------
   2. Bidi islands. Numbers, phones, emails and handles must keep their own
   left-to-right order inside an RTL line ("4,000+" must not become "+4,000").
   .ltr / bdi[dir] are helpers for the Arabic HTML.
   -------------------------------------------------------------------------- */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .ltr,
html[dir="rtl"] bdi[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* An email or phone link used as a whole block (footer column) keeps the
   column's start edge, which is the right edge in RTL. */
html[dir="rtl"] .f-col a[href^="tel:"],
html[dir="rtl"] .f-col a[href^="mailto:"] { text-align: right; }

/* Big counters and prices. These blocks are right-aligned like everything else
   in RTL, but their glyph order is left to right. */
html[dir="rtl"] .hstat-num,
html[dir="rtl"] .astat-num,
html[dir="rtl"] .rc-price,
html[dir="rtl"] .rc-fcl-cell b,
html[dir="rtl"] .ig-handle {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .astat-num { text-align: right; }
html[dir="rtl"] .ig-handle { justify-self: start; }
/* The step numbers (01 to 04) are Latin digits: keep them in Manrope order. */
html[dir="rtl"] .step-num { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* "4,000+" in the trust-band headline sits inside an Arabic sentence. */
html[dir="rtl"] .band-title .grad { display: inline-block; direction: ltr; unicode-bidi: isolate; }

/* Price blocks mix a number, a currency sign and an Arabic unit ("/year").
   Isolating them stops the surrounding sentence from reordering them; the
   direction stays RTL so a number followed by an Arabic unit reads in order. */
html[dir="rtl"] .pa-num,
html[dir="rtl"] .pa-num em,
html[dir="rtl"] .pa-per,
html[dir="rtl"] .price-local,
html[dir="rtl"] .fx-face .pa-num,
html[dir="rtl"] .fx-face .pa-per,
html[dir="rtl"] .fx-flip-cap { unicode-bidi: isolate; }
/* A postal address that starts with a digit gets scrambled by the bidi
   algorithm; read the direction from the first strong letter instead. */
html[dir="rtl"] .f-col address { unicode-bidi: plaintext; text-align: right; }

/* --------------------------------------------------------------------------
   3. Page furniture that sits off-screen with a physical offset.
   `left: -9999px` is harmless in LTR but in RTL the negative-left overflow
   becomes SCROLLABLE: it made the whole document ~10000px wide (and the
   page paint blank). Park these on the right, which RTL clips.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .skip-link { left: auto; right: -9999px; }
html[dir="rtl"] .skip-link:focus { left: auto; right: 12px; }
html[dir="rtl"] .hp { left: auto; right: -9999px; }

/* --------------------------------------------------------------------------
   4. Buttons and arrows
   The -> in the buttons is plain text. `scale` is an independent transform
   property, so the existing hover nudge (translateX(5px)) is applied first
   and then mirrored: it nudges toward the reading direction, to the left.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .btn-arrow { display: inline-block; scale: -1 1; }

/* --------------------------------------------------------------------------
   5. Header, language menu, burger, mobile overlay
   -------------------------------------------------------------------------- */
/* hover underline grows in the reading direction */
html[dir="rtl"] .nav-links a::after { transform-origin: left; }
html[dir="rtl"] .nav-links a:hover::after { transform-origin: right; }
/* the dropdown opens under the button's start edge (its right edge) */
html[dir="rtl"] .lang-list { right: 0; left: auto; }
html[dir="rtl"] .nav-links a { font-size: 15px; }

/* --------------------------------------------------------------------------
   6. How it works: pinned horizontal track
   site.js slides .how-track with a NEGATIVE x (content moves left, so the
   right end of the track is revealed), which only makes sense when card 01
   starts at the LEFT. With the unchanged JS the row therefore stays left to
   right (01 at the left, 04 at the right) and only the text inside each card
   is RTL. Mirroring the row with a CSS transform is not possible here:
   ScrollTrigger/GSAP overwrite translate, rotate and scale on the pinned
   element, and a transformed ancestor would break the pin (position: fixed).
   OPTIONAL natural RTL order (01 at the right, track sliding the other way):
   apply the small JS patch from the report. It adds the class "how-rtl" to
   <html>, and the :not(.how-rtl) guard below then switches this fallback off.
   -------------------------------------------------------------------------- */
html[dir="rtl"]:not(.how-rtl) .how-pin,
html[dir="rtl"]:not(.how-rtl) .how-track { direction: ltr; }
html[dir="rtl"] .step-card { direction: rtl; }
/* accent bar on the start (right) edge of the card, in every layout */
html[dir="rtl"] .step-card::before { inset: 0 0 0 auto; }

/* --------------------------------------------------------------------------
   7. Platforms, pricing
   -------------------------------------------------------------------------- */
/* Hover shine on the plan cards. Arabic cards are taller, and the skewed sweep
   (parked at left: -80% in site.css) then pokes a bright wedge into the top
   corner at rest. In RTL it sweeps the other way: parked beyond the right edge,
   mirrored skew and gradient, travelling right to left on hover. */
html[dir="rtl"] .price-card::after {
  left: 140%; transform: skewX(18deg);
  background: linear-gradient(255deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
html[dir="rtl"] .price-card:hover::after { left: -90%; }

html[dir="rtl"] .price-feats li { padding: 8px 26px 8px 0; }
html[dir="rtl"] .price-feats li::before { left: auto; right: 2px; }
html[dir="rtl"] .dash-list li { padding: 6px 22px 6px 0; }
html[dir="rtl"] .dash-list li::before { left: auto; right: 0; }

/* One-Time Buyer header row. Flex order already mirrors (price on the right,
   CTA on the left) and the 3-column feature list flows right to left. Only the
   physical text-align: left of the stacked layout needs a flip. */
@media (max-width: 900px) {
  html[dir="rtl"] .price-otb .otb-title { text-align: right; }
}

/* --------------------------------------------------------------------------
   8. Tables (site.css and legal.css both hard-code text-align: left)
   -------------------------------------------------------------------------- */
html[dir="rtl"] th,
html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] .cmp-table th,
html[dir="rtl"] .cmp-table td { text-align: center; }
html[dir="rtl"] .cmp-table tbody th { text-align: right; }

/* --------------------------------------------------------------------------
   9. Trust band + marquee
   The ticker loops with translateX(-50%) over a duplicated row, so its row
   must stay LTR; in RTL the track would anchor at the right edge and slide
   away from its own content. Items are RTL inside.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .marquee-track { direction: ltr; }
html[dir="rtl"] .marquee-track span { direction: rtl; padding-right: 0; padding-left: 34px; }
html[dir="rtl"] .marquee-track span::after { margin-left: 0; margin-right: 34px; }

/* --------------------------------------------------------------------------
   10. Reviews
   -------------------------------------------------------------------------- */
html[dir="rtl"] .rv-tag { margin-right: 0; margin-left: 8px; }
/* the play triangle always points right (it is a media symbol, not an arrow),
   and its optical centring nudge is a left padding either way */

/* --------------------------------------------------------------------------
   11. Sign-up form
   -------------------------------------------------------------------------- */
/* select chevron moves to the start-opposite (left) side */
html[dir="rtl"] .fgroup select {
  background-position: left 16px center;
  padding-right: 16px; padding-left: 40px;
}
/* e-mail is always typed left to right; keep it aligned with the rest */
html[dir="rtl"] .fgroup input[type="email"] { direction: ltr; text-align: right; }
html[dir="rtl"] .fgroup input[type="email"]::placeholder { text-align: right; }
/* phone: dial code + number are one left-to-right unit, as people write them */
html[dir="rtl"] .phone-row { direction: ltr; }
html[dir="rtl"] .fgroup input[type="tel"] { text-align: left; }
html[dir="rtl"] .fgroup input[type="tel"]::placeholder { text-align: left; }

/* --------------------------------------------------------------------------
   12. WhatsApp strip + floating button
   Floating button goes to the bottom LEFT in RTL (the mirror of its LTR
   spot); its row is reversed so the icon stays pinned to the screen corner
   while the label unfolds toward the page. margin-left in site.css then sits
   between icon and label, which is exactly where it is wanted.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .wa-fab { right: auto; left: 20px; flex-direction: row-reverse; }
@media (max-width: 640px) {
  html[dir="rtl"] .wa-fab { right: auto; left: 14px; }
}

/* --------------------------------------------------------------------------
   13. Rates page (calculator)
   -------------------------------------------------------------------------- */
html[dir="rtl"] .rc-fld select {
  padding: 13px 16px 13px 42px;
  background-position: left 16px center;
}
html[dir="rtl"] .rc-ctl select {
  padding: 10px 12px 10px 34px;
  background-position: left 12px center;
}
/* the scrolling price list reserves a 6px gutter for its scrollbar; in RTL the
   scrollbar sits on the left */
html[dir="rtl"] .rc-lines,
html[dir="rtl"] .rc-fcl { margin: 0 0 14px 6px; }
html[dir="rtl"] .rc-line .rc-tag { margin-left: 0; margin-right: 8px; }

/* --------------------------------------------------------------------------
   14. Legal pages (legal.css)
   -------------------------------------------------------------------------- */
/* legal.css sets .doc-head to "padding: 56px 0 8px", which wipes the 24px side
   padding of .wrap: the title, date and intro box then sit 24px outside the
   body text and touch the screen edge on phones (true in every language). */
html[dir="rtl"] .doc-head { padding-left: 24px; padding-right: 24px; }
html[dir="rtl"] main h2 .no { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] main ul,
html[dir="rtl"] main ol { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .plain {
  border-left: 0; border-right: 4px solid var(--amber);
  border-radius: 12px 0 0 12px;
}