/* Arabic (right to left) overrides for the /ar/ pages. Loaded last, so equal
   specificity wins over each page's own <style>. Keep fixes here, not in the
   English pages. */

:root {
  --sans: 'Geist', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
  --font-display: var(--sans);
  --font-ui: var(--sans);
}

/* Diagrams are drawn left to right; only their words change. */
html[lang="ar"] svg { direction: ltr; }
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: 'Geist', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
}

/* Tracking breaks the joins between Arabic letters, and uppercase means nothing in Arabic. */
html[lang="ar"] *:not([translate="no"]):not([translate="no"] *) {
  letter-spacing: 0 !important;
}

/* Arabic needs a little more line height than Latin at the same size. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.3; }
html[lang="ar"] p, html[lang="ar"] li { line-height: 1.75; }

/* Emails, domains, URLs and code stay left to right inside Arabic sentences. */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] code { direction: ltr; unicode-bidi: plaintext; }
html[lang="ar"] input[type="email"]::placeholder,
html[lang="ar"] input[type="url"]::placeholder { text-align: right; }

/* Card faces (dir="ltr" in the editor) print exactly as designed: never mirrored.
   Names people typed keep their own direction, Arabic or Latin. */
html[lang="ar"] [translate="no"]:not([dir]) { unicode-bidi: plaintext; }

/* Little card pictures (materials, colour themes) show the card as it prints. */
html[lang="ar"] .simcard,
html[lang="ar"] .cz-theme__chip { direction: ltr; }

/* Prices read left to right ("+$129", "$69.00 AUD") wherever they sit. */
html[lang="ar"] .addon__price,
html[lang="ar"] .price,
html[lang="ar"] [class*="__price"],
html[lang="ar"] [class*="-price"] { direction: ltr; unicode-bidi: isolate; }

/* Site nav: the flex row's DOM order (logo, links, account) auto-flips under
   RTL and puts the logo on the right. Pin it back to the left, matching the
   English layout, by reordering the same children explicitly. */
html[lang="ar"] header.nav .wrap > .logo { order: 2; }
html[lang="ar"] header.nav .wrap > nav { order: 1; }
html[lang="ar"] header.nav .wrap > .nav-right { order: 0; }
html[lang="ar"] nav.nav .nav-inner > .logo { order: 1; }
html[lang="ar"] nav.nav .nav-inner > .nav-links { order: 0; }