/*!
 * Language switcher styling (feature 2.7) — shared by every surface so the
 * control looks and behaves identically everywhere.
 */
.vz-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1;
}

.vz-lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 8px;
  color: inherit;
  opacity: .65;
}

.vz-lang-btn:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.vz-lang-btn.on { opacity: 1; font-weight: 700; background: rgba(127, 127, 127, .16); }

.vz-lang-sep { opacity: .35; }

/*
 * Feature 2.7-D — a switch that could not happen says so.
 *
 * The dictionary request can fail (offline, a 5xx, a CDN hiccup) and the old
 * language stays. Until now that looked exactly like a dead button, so the
 * reader pressed it again. The tint is deliberately quiet and short-lived —
 * the page is still perfectly readable, only in the language it was already
 * in — and the reason arrives in words through the control's own title.
 */
.vz-lang-stuck {
  border-radius: 8px;
  outline: 1px solid rgba(220, 38, 38, .45);
  outline-offset: 2px;
  animation: vz-lang-stuck-fade 4s ease-out forwards;
  cursor: help;
}

@keyframes vz-lang-stuck-fade {
  0%   { outline-color: rgba(220, 38, 38, .55); }
  70%  { outline-color: rgba(220, 38, 38, .40); }
  100% { outline-color: rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vz-lang-stuck { animation: none; }
}

.vz-lang-more {
  background: none;
  border: 1px solid rgba(127, 127, 127, .35);
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
  max-width: 44px;
}

.vz-lang-more option { color: #0f172a; }

/*
 * Right-to-left languages need no rule here: a flex row already runs
 * right-to-left inside [dir="rtl"], so the switcher flows with the page.
 * An explicit row-reverse would fight that and drag it back to left-to-right.
 *
 * The language names themselves are a different matter — each one must be
 * read in its own direction, whatever the surrounding page is doing.
 */
.vz-lang-btn[lang="ar"],
.vz-lang-btn[lang="ur"] { direction: rtl; }

.vz-lang-btn[lang="en"],
.vz-lang-btn[lang="bn"],
.vz-lang-btn[lang="hi"],
.vz-lang-btn[lang="id"],
.vz-lang-btn[lang="es"] { direction: ltr; }

/* The dropdown lists every language at once, so it stays neutral */
.vz-lang-more { direction: ltr; text-align: center; }