/* Right-to-left overrides for Arabic.
 *
 * Most of the layout needs nothing here, because the stylesheet was already
 * written with logical properties — padding-inline-start rather than
 * padding-left, and so on. What follows are the places where a physical
 * property was unavoidable, plus the font swap.
 */

body,
h1, h2, h3, h4,
.brand {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Latin fragments inside Arabic prose — brand names, URLs, prices — must not be
   reordered by the bidi algorithm. */
.brand,
.mono,
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The eyebrow's trailing rule sits on the other side. */
html[dir="rtl"] .eyebrow::after { transform: scaleX(-1); }

/* Arrows written into the copy point the wrong way once mirrored. */
html[dir="rtl"] .work-link,
html[dir="rtl"] .card-cta { unicode-bidi: plaintext; }

/* Floats are physical by definition. */
html[dir="rtl"] .alignleft  { float: right; margin-inline-end: 0; margin-inline-start: 1.5em; }
html[dir="rtl"] .alignright { float: left;  margin-inline-start: 0; margin-inline-end: 1.5em; }

/* The hero's decorative glow is anchored to a corner. */
html[dir="rtl"] .hero::after { right: auto; left: -12%; }

/* details/summary markers. */
html[dir="rtl"] .faq-item summary { padding-inline-end: 34px; padding-inline-start: 0; }

/* Arabic numerals in prices stay Western, matching the invoices and the FTA
   forms the business actually files. */
.plan-price, .amt, .aed { direction: ltr; unicode-bidi: isolate; }

/* A Latin phrase inside Arabic prose gets reordered by the bidi algorithm —
   trailing punctuation jumps to the front, so "Books?" renders as "?Books".
   Isolating each link makes the browser lay it out on its own terms and drop
   it into place as a unit. */
html[dir="rtl"] .addon-link,
html[dir="rtl"] .work-body a,
html[dir="rtl"] .nav-login,
html[dir="rtl"] .footer-col a,
html[dir="rtl"] .price-desc,
html[dir="rtl"] .service-tag { unicode-bidi: isolate; }

/* The browser chrome mock shows a domain: always left-to-right. */
html[dir="rtl"] .browser-frame .url { direction: ltr; unicode-bidi: isolate; }