/*!
 * 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; }

.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; }