/* Language switcher + shared right-to-left rules (Persian). Loaded by every page. */
.i18n-pending body { visibility: hidden; }

.lang { position: relative; display: inline-block; }
.lang__btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .75rem;
  border-radius: 999px; border: 1px solid var(--border, rgba(255, 255, 255, .15)); background: var(--surface, var(--card, #1d1e21));
  color: var(--text, #fdfdfd); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.lang__btn:hover { border-color: var(--primary, #6ea8fe); }
.lang__btn[aria-expanded="true"] { border-color: var(--primary, #6ea8fe); box-shadow: 0 0 0 3px rgba(110, 168, 254, .22); }
.lang__btn:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; }
.lang__chev { transition: transform .2s; opacity: .7; }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 300; min-width: 170px; margin: 0; padding: .35rem; list-style: none;
  background: var(--surface, var(--card, #1d1e21)); border: 1px solid var(--border, rgba(255, 255, 255, .15)); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); animation: langIn .14s ease;
}
.lang__menu[hidden] { display: none; }
@keyframes langIn { from { opacity: 0; transform: translateY(-4px); } }
.lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .55rem .75rem; border: 0; border-radius: 10px;
  background: none; color: var(--text, #fdfdfd); font: inherit; font-size: .92rem; cursor: pointer; text-align: start;
}
.lang__item:hover, .lang__item:focus-visible { background: rgba(127, 127, 127, .16); outline: none; }
.lang__check { opacity: 0; color: var(--primary, #6ea8fe); }
.lang__item[aria-checked="true"] { font-weight: 700; }
.lang__item[aria-checked="true"] .lang__check { opacity: 1; }

/* Persian typography */
html[lang="fa"] body { font-family: "Vazirmatn", "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; line-height: 1.75; }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3 { letter-spacing: 0; line-height: 1.45; }
html[lang="fa"] .eyebrow { letter-spacing: 0; text-transform: none; }

/* Latin tokens (item names, cities, numbers in inputs) always read left-to-right inside RTL text */
html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"] { direction: ltr; text-align: start; }
html[dir="rtl"] input[type="email"] { text-align: end; }

/* The big Persian headline needs a smaller size and more line height than the Latin one */
html[lang="fa"] .hero h1 { font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.55; }
html[lang="fa"] .section__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
html[lang="fa"] .intro h1 { font-size: 1.9rem; }

/* Persian text in the left-to-right layout: the page layout and the alignment stay exactly as in English (left, or
 * centred where the English text is centred). Every text block only works out its own reading direction from its first
 * strong character (plaintext), so Persian sentences keep their punctuation, brackets and numbers in the right places
 * while Latin names stay left-to-right. The alignment is stated explicitly because `start` would follow the resolved
 * Persian direction and push the text to the right edge. */
html[lang="fa"] :where(h1, h2, h3, h4, p, li, summary, blockquote, figcaption, small, legend, label, td, th,
  .field__label, .switch__text, .pill, .eyebrow, .tooltip, .market-status, .mat__info, .age, .c-vol, .c-cost, .c-profit,
  .step, .stat span, .mcard small, .toggle span, .form-msg, .foot div) {
  unicode-bidi: plaintext;
  text-align: left;
}
/* the places where the English page centres its text */
html[lang="fa"] :where(.hero__inner, .section__head, .stats__grid, .cta, .quote, .empty) :where(h1, h2, h3, p, blockquote, small, span, .eyebrow, .form-msg) { text-align: center; }
html[lang="fa"] .lang__item { text-align: start; }
html[lang="fa"] :where(.mat__name, .mat__title, .mat-group__sub, .mat-hint, .mat-group__count) { unicode-bidi: plaintext; text-align: left; }