/* ── Language selector <select> in the header bar ─────────── */

.lang-select {
  display: inline-block;
  min-width: 94px;
  height: 36px;
  margin-left: .45rem;
  padding: 0 30px 0 11px;
  color: var(--fenix-ink);
  background-color: var(--fenix-surface);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E")
    no-repeat right 8px center / 14px;
  background-color: var(--fenix-surface);
  border: 1px solid var(--fenix-border);
  border-radius: 8px;
  appearance: none;        /* remove native arrow */
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--reader-ui-font);
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color .15s ease, background-color .15s ease;
}

.lang-select:hover {
  border-color: var(--fenix-link);
  background-color: var(--fenix-bg-soft);
}

.lang-select:focus {
  border-color: var(--fenix-link);
  outline: 2px solid var(--fenix-link);
  outline-offset: 2px;
}

/* Disabled (current language) option styling */
.lang-select option[disabled] {
  font-weight: 600;
  color: var(--md-primary-fg-color);
}

/* Dark mode tweaks */
[data-md-color-scheme="slate"] .lang-select {
  color: var(--fenix-ink);
  border-color: var(--fenix-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
}
[data-md-color-scheme="slate"] .lang-select:hover {
  border-color: rgba(168, 199, 250, 0.5);
}

@media screen and (max-width: 59.9375em) {
  .lang-select {
    min-width: 78px;
    height: 34px;
    margin-left: .15rem;
    padding: 0 25px 0 8px;
    font-size: 12px;
  }
}