/* Boditrax website - Language menu
 * Header language button: globe icon only below the xl breakpoint (80rem / 1280px), where the
 * header row is already at full width; globe + two-letter language code (EN, ES, AR, TH) from 1280px up.
 * Dropdown position and option alignment use logical properties so the menu mirrors correctly
 * in right-to-left languages (Arabic). Everything else uses the existing navigation utility classes. */
.btx-language-code {
  display: none;
}
@media (width >= 80rem) {
  .btx-language-code {
    display: inline;
  }
}

/* Anchored to the button's inline-end edge: right in LTR, left in RTL. */
.btx-language-dropdown {
  inset-inline-end: 0;
}
.btx-language-option {
  text-align: start;
}

/* ---- Language list (desktop drop-down and mobile menu, Views/Shared/_LanguageList.cshtml) ------------------
 * Every language in Localization/LanguageCatalogue.cs. Green dot = has a Resource.<culture>.resx file (selectable),
 * red dot = not available yet. A search box at the top filters the list (wwwroot/js/boditrax.js). */
.btx-language-panel { width: 21rem; max-width: calc(100vw - 2rem); }

.btx-language-search { position: relative; margin: 0 0.25rem 0.375rem; }
.btx-language-search__icon {
  position: absolute;
  inset-inline-start: 0.875rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transform: translateY(-50%);
  pointer-events: none;
}
.btx-language-search__input {
  width: 100%;
  padding: 0.55rem 0.875rem;
  padding-inline-start: 2.375rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--background);
  color: var(--foreground);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.btx-language-search__input::placeholder { opacity: 0.5; }
.btx-language-search__input:focus-visible {
  border-color: var(--brand-plum);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-plum) 20%, transparent);
}

.btx-language-groups {
  max-height: min(26rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.btx-language-list--mobile .btx-language-groups { max-height: 20rem; }

.btx-language-group {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem 0.375rem;
  background: var(--card);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--foreground) 60%, transparent);
}
.btx-language-list--mobile .btx-language-group { padding-inline: 0; background: var(--background); }

.btx-language-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.btx-language-dot--available { background: var(--brand-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-green) 18%, transparent); }
.btx-language-dot--unavailable { background: var(--brand-red); opacity: 0.8; }

.btx-language-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.btx-language-list--mobile .btx-language-option { padding-inline: 0; }
button.btx-language-option { cursor: pointer; transition: background-color 150ms; }
button.btx-language-option:hover,
button.btx-language-option:focus-visible { background: color-mix(in oklab, var(--foreground) 5%, transparent); outline: none; }
.btx-language-list--mobile button.btx-language-option:hover,
.btx-language-list--mobile button.btx-language-option:focus-visible { background: transparent; color: var(--brand-plum); }
.btx-language-option[aria-current="true"] { color: var(--brand-plum); font-weight: 600; }
.btx-language-option--unavailable { color: color-mix(in oklab, var(--foreground) 55%, transparent); cursor: default; }
.btx-language-option__native { flex: 1; min-width: 0; unicode-bidi: isolate; } /* keeps each name in its own direction, aligned with the page */
.btx-language-option__english {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.6;
  white-space: nowrap;
}
.btx-language-option__check { width: 1rem; height: 1rem; flex-shrink: 0; }
.btx-language-none { padding: 0.75rem; font-size: var(--text-sm); opacity: 0.7; }
.btx-language-list--mobile .btx-language-none { padding-inline: 0; }