/* ============================================================
   ALNATIQ · RTL ADJUSTMENTS  (Arabic / right-to-left fixes)
   Loaded LAST so it overrides earlier rules. Keep it last.
   ============================================================ */

/* ============================================================
   RTL adjustments (appended — overrides earlier rules by order)
   ============================================================ */
html { overflow-x: hidden; }
/* Arabic glyphs use a modern sans (Tajawal) and need a touch more leading;
   never letter-space Arabic — it breaks the cursive joins. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { line-height: 1.4; letter-spacing: 0; }
:lang(ar) .display { line-height: 1.3; }

/* Keep the browser chrome (dots + URL) left-to-right like a real browser. */
.device__bar { direction: ltr; }
.device__url { font-family: var(--font-body); }

/* Mirror physical-direction properties for RTL. */
.brand__ar { margin-left: 0; margin-inline-start: .1rem; }
.hero__rating .avatars span { margin-left: 0; margin-inline-start: -9px; }
.hero__rating .avatars span:first-child { margin-inline-start: 0; }
.player__fill { inset: 0 0 0 auto; }                       /* progress grows from the start (right) */
.player__fill::after { right: auto; left: -6px; }
.faq__q { text-align: start; }
.plan--featured::before { left: auto; right: 50%; transform: translateX(50%); }
.stat + .stat { border-left: none; border-inline-start: 1px solid rgba(255,255,255,.12); }
.step:not(:last-child)::after { right: auto; left: -.95rem; }
.link-arrow svg { transform: scaleX(-1); }                 /* arrow points toward text start */
.link-arrow:hover svg { transform: scaleX(-1) translateX(3px); }

/* Floating chips: now siblings of .device inside a non-clipping wrapper,
   so they render whole instead of being cut by the device's overflow. */
.hero__media { position: relative; }
.chip--lang { top: 8%; left: auto; right: auto; inset-inline-start: -10px; }
.chip--speed { bottom: 10%; left: auto; right: auto; inset-inline-end: -10px; }
@media (min-width: 961px) {
  /* desktop: keep the floating chips off the article title and the player */
  .chip--lang  { top: 23%; inset-inline-start: auto; inset-inline-end: -10px; }
  .chip--speed { bottom: 16%; }
}
@media (max-width: 960px) {
  .chip--lang { inset-inline-start: 4px; }
  .chip--speed { inset-inline-end: 4px; }
}