/* Languages: the selector (shared/_language_menu), right-to-left overrides and script-specific typography.
   Tokens come from application.css. Everything here uses logical properties (inline-start/end) so the selector
   needs no RTL override; the second part patches the physical left/right rules of the older stylesheets for
   <html dir="rtl"> (Arabic, Hebrew) without touching them. */

/* ---------- Selector ---------- */
.lang-menu { position: relative; display: inline-block; font-size: var(--text-md); line-height: 1.3; }
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-trigger { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; padding: 0 var(--space-14); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-2); color: var(--text); cursor: pointer; user-select: none; font-weight: var(--weight-medium); }
.lang-trigger:hover { border-color: var(--edge); }
.lang-trigger:focus-visible, .lang-item:focus-visible, .lang-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang-trigger svg { flex: none; color: var(--muted); }
/* Flags: 4:3 SVGs; the hairline ring keeps white flags (Japan, Israel, Poland) visible on light and dark. */
.lang-flag { display: block; flex: none; width: 20px; height: 15px; border-radius: var(--radius-xs); object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-gray-500) 50%, transparent); }
.lang-chevron { transition: transform var(--dur-fast) var(--ease); }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }

.lang-panel { position: absolute; inset-inline-end: 0; top: 100%; z-index: var(--z-overlay); margin-top: var(--space-8); box-sizing: border-box; width: min(600px, calc(100vw - 32px)); max-height: min(72vh, 480px); overflow: auto; padding: var(--space-12); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-3xl); box-shadow: var(--shadow); text-align: start; }
.lang-menu-up .lang-panel { top: auto; bottom: 100%; margin: 0 0 var(--space-8); inset-inline-start: 0; inset-inline-end: auto; }

.lang-search { position: sticky; top: -12px; z-index: var(--z-raised); display: block; margin: -12px -12px var(--space-8); padding: var(--space-12); background: var(--surface); }
.lang-search[hidden] { display: none; }
.lang-search input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 var(--space-14); border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); font: inherit; }
.lang-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-2); }
.lang-list li[hidden] { display: none; }
.lang-form { margin: 0; display: block; }
.lang-item { position: relative; display: flex; flex-direction: row; align-items: center; gap: var(--space-10); box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-8) var(--space-12); padding-inline-end: var(--space-28); border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.lang-item:hover { background: var(--surface-2); }
.lang-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-bold); }
.lang-item[aria-current="true"]::after { content: "✓"; position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); }
.lang-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.lang-name { font-weight: inherit; }
.lang-en { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-regular); }
.lang-item[aria-current="true"] .lang-en { color: inherit; opacity: .8; }
.lang-empty { margin: var(--space-12) var(--space-4) var(--space-4); color: var(--muted); }
.lang-empty[hidden] { display: none; }

@media (max-width: 640px) {
  .lang-panel { position: fixed; inset-inline: 16px; top: auto; bottom: 16px; width: auto; max-height: 70vh; margin: 0; }
}

/* ---------- Typography per script ---------- */
/* Cursive scripts: letter-spacing breaks the joins between letters. */
html[lang^="ar"] *, html[lang="he"] * { letter-spacing: 0 !important; }
/* Taller glyphs need more leading. */
html[lang="th"] body, html[lang="hi"] body, html[lang="ta"] body, html[lang^="ar"] body { line-height: 1.7; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3, html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3 { line-height: 1.3; }
/* Chinese, Japanese and Korean have no spaces between words: break anywhere that is not inside a Latin word. */
html[lang="ja"] body, html[lang^="zh"] body { word-break: normal; overflow-wrap: anywhere; line-break: strict; }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
html[lang="th"] body { overflow-wrap: break-word; }
/* Italic and uppercase transforms do not exist in these scripts. */
html:is([lang^="ar"], [lang="he"], [lang="ja"], [lang="ko"], [lang^="zh"], [lang="th"], [lang="hi"], [lang="ta"]) * { font-style: normal; text-transform: none; }

/* ---------- Right to left (ar-AE, ar-SA, he) ---------- */
/* Anything that must stay left to right inside a right-to-left page: addresses, keys, code, numbers in fields. */
[dir="rtl"] input:is([type="url"], [type="email"], [type="tel"], [type="password"], [type="number"]), [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] kbd, [dir="rtl"] samp,
[dir="rtl"] .mono, [dir="rtl"] .qr-preview, [dir="rtl"] [data-qr-editor-target="preview"] { direction: ltr; unicode-bidi: plaintext; }
[dir="rtl"] input:is([type="url"], [type="email"], [type="tel"], [type="password"], [type="number"]) { text-align: end; }
/* Arrows and chevrons that point "forward" flip. */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* application.css */
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 900px) { [dir="rtl"] .sidebar { border-left: 0; } }
[dir="rtl"] .fold > summary::after { margin: -4px 0 0 var(--space-6); }
[dir="rtl"] .tag { margin-left: 0; margin-right: var(--space-4); }
[dir="rtl"] h2 small a { margin-left: 0; margin-right: var(--space-8); }
[dir="rtl"] table.responses th, [dir="rtl"] table.responses td, [dir="rtl"] .unlock { text-align: right; }
[dir="rtl"] .plan-summary .stats strong { margin-left: 0; margin-right: var(--space-8); }
[dir="rtl"] .plan-features { padding-left: 0; padding-right: var(--space-16); }
[dir="rtl"] .hp { left: auto; right: -9999px; }

/* marketing.css and seo.css */
[dir="rtl"] .m-plans, [dir="rtl"] .m-faq-item button { text-align: right; }
[dir="rtl"] .m-badge { left: auto; right: 28px; }
[dir="rtl"] .m-marquee { padding-left: 0; padding-right: var(--space-12); }
[dir="rtl"] .seo-tips > div { border-left: 1px solid var(--line); border-right: 3px solid var(--accent); border-radius: var(--radius-2xl) 0 0 var(--radius-2xl); }
[dir="rtl"] .seo-faq summary::after { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: var(--space-16); }