/* The interface language (js/i18n.js puts lang-en or lang-fa on <html>). */

/* English: the Persian twins that used to sit beside each label are hidden. */
.lang-en .fa,
.lang-en .fa-p { display: none !important; }

/* Persian: the Vazirmatn face everywhere, right to left. Persian script must
   never be letter-spaced or upper-cased: it breaks the joins between letters. */
.lang-fa {
  --serif: 'Vazirmatn', Tahoma, sans-serif;
  --sans: 'Vazirmatn', Tahoma, sans-serif;
}
.lang-fa body,
.lang-fa #ui,
.lang-fa button,
.lang-fa input,
.lang-fa textarea,
.lang-fa select { font-family: 'Vazirmatn', Tahoma, sans-serif; }
.lang-fa #ui * { letter-spacing: 0 !important; text-transform: none !important; }
.lang-fa #ui { direction: rtl; }
.lang-fa .fa-p { text-align: right; }
/* Numbers, coordinates and addresses stay left to right inside RTL text. */
.lang-fa .address-chip,
.lang-fa .coin,
.lang-fa code { direction: ltr; unicode-bidi: isolate; }
/* Titles set in the serif were sized for Latin capitals; Persian needs a little more. */
.lang-fa .sarlowh h2, .lang-fa .sarlowh h1 { font-size: 18px; font-weight: 600; }
/* Margins written for Persian twins on the right become logical. */
.lang-fa .tab .fa, .lang-fa .chip .fa { margin-left: 0; margin-right: 6px; }
/* The sage's book: in Persian the alternate-language copy is redundant. */
.lang-fa .sage-log .alt { display: none; }

/* The language choice. */
.lang-pick { display: flex; gap: 6px; justify-content: center; }
.lang-pick button {
  min-width: 92px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(201, 161, 74, 0.6);
  background: rgba(255, 252, 240, 0.08); color: inherit; cursor: pointer; font: inherit; font-size: 13px;
}
.lang-pick button.on { background: var(--turq, #2aa6a1); border-color: var(--turq, #2aa6a1); color: #fff; }
.lang-pick button[data-lang="fa"] { font-family: 'Vazirmatn', Tahoma, sans-serif; }
.lang-float { position: absolute; top: calc(12px + var(--safe-t, 0px)); right: 12px; z-index: 30; }
.lang-fa .lang-float { right: auto; left: 12px; }
.gate-card .gate-lang { margin: -4px 0 10px; }
.gate-card .lang-pick button { color: var(--ink, #2a1d12); background: rgba(255, 252, 240, 0.6); }
.gate-card .lang-pick button.on { color: #fff; background: var(--turq, #2aa6a1); border-color: var(--turq, #2aa6a1); }
.opt .lang-pick button { color: var(--ink, #2a1d12); background: rgba(255, 252, 240, 0.6); }
.opt .lang-pick button.on { color: #fff; background: var(--turq, #2aa6a1); }
.lang-fa .plate { padding: 8px 8px 8px 18px; }
.lang-fa .plate .who > span { margin-inline-end: 10px; }
@media (max-width: 760px) { .lang-fa .plate { padding: 6px 6px 6px 14px; } }
.lang-fa .plate .who span { font-family: 'Vazirmatn', Tahoma, sans-serif; }
@media (max-width: 520px) { .opt { flex-wrap: wrap; row-gap: 8px; } .opt .seg, .opt .lang-pick { margin-inline-start: auto; } }