/* relivex360.ae: the Arabic, right-to-left layer on top of styles.css.
 * The layout is mostly logical already (flex, grid, text-align: start); this
 * file flips what is not: arrows, the billing toggle, progress fills, hover
 * nudges, and the few physical margins. Arabic is cursive, so the negative
 * letter-spacing the Latin headings use is switched off (it breaks joins).
 * Readex Pro is served from this site, not from Google, so a visitor's
 * browser talks to nobody but relivex360.ae. */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/readex-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/readex-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { --font: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif; }
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] :is(h1, h2, h3, h4, b, strong, .h2, .hero__title, .kpi b, .tab b, .card__txt h3, .idx__row b, .step h3, .plan__price b, .tcard__n, .legal h1, .contact h1, .nf h1) { letter-spacing: 0; }
[dir="rtl"] .hero__title { line-height: 1.25; }
[dir="rtl"] .h2 { line-height: 1.3; }
[dir="rtl"] .idx__head { letter-spacing: 0; }

/* arrows point the way you read */
[dir="rtl"] .arr { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .arr--l { transform: none; }

/* billing toggle: "monthly" sits on the right */
[dir="rtl"] .period__knob { left: auto; right: 5px; }
[dir="rtl"] .period.y .period__knob { transform: translateX(-110px); }
[dir="rtl"] .period__save { margin-left: 0; margin-right: 4px; }

/* fills and nudges that grow from the start edge */
[dir="rtl"] .il-ln, [dir="rtl"] .idx__row::after { transform-origin: right; }
[dir="rtl"] .idx__row::after { left: auto; right: 0; }
[dir="rtl"] .idx__row:hover b { transform: translateX(-6px); }
[dir="rtl"] .tb__list li { transform: translateX(14px); }
[dir="rtl"] .proto__foot b i { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .mstage__n { left: auto; right: 18px; }

/* chat bubbles: the patient on the left, the reply on the right */
[dir="rtl"] .il-me { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
[dir="rtl"] .il-bot { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }

/* the testimonial carousel scrolls in LTR geometry (app.js measures
   offsetLeft); each card's text is still right to left */
[dir="rtl"] .tst__track { direction: ltr; }
[dir="rtl"] .tcard { direction: rtl; }
[dir="rtl"] .tst__nav { direction: ltr; }
[dir="rtl"] .tst__nav .arr { transform: none; }
[dir="rtl"] .tst__nav .arr--l { transform: scaleX(-1); }

/* numbers, times and units stay left to right inside Arabic text */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* the contact form's honeypot */
[dir="rtl"] .contact__form .hp { left: auto; right: -9999px; }

/* Arabic labels are two words where English had one; keep each on a line */
.nav__links a, .nav__login, .btn { white-space: nowrap; }