:root {
  --language-switch-safe-inline-end: env(safe-area-inset-right);
  --language-switch-safe-block-end: env(safe-area-inset-bottom);
}

html[dir="rtl"] {
  --language-switch-safe-inline-end: env(safe-area-inset-left);
}

.language-switch-slot {
  position: fixed;
  inset-block-start: max(12px, env(safe-area-inset-top));
  inset-inline-end: max(12px, var(--language-switch-safe-inline-end));
  z-index: 650;
}

.language-switch-slot[hidden] {
  display: none;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--gold, #ffd700);
  border-radius: 999px;
  background: var(--nav-bg, #10111f);
  color: var(--gold, #ffd700);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.language-switch:focus-visible {
  outline: 3px solid var(--focus-ring, #ffffff);
  outline-offset: 3px;
}

.language-switch-compact {
  display: none;
}

.language-switch-slot--standalone {
  inset-block-start: auto;
  inset-block-end: max(12px, var(--language-switch-safe-block-end));
}

body:has(.screens-nav) .language-switch-slot {
  inset-block-start: max(96px, calc(env(safe-area-inset-top) + 84px));
}

body:has(dialog[open]) .language-switch-slot,
body:has(
  [role="dialog"][aria-modal="true"]:not(
    [hidden],
    [hidden] *,
    [aria-hidden="true"],
    [aria-hidden="true"] *,
    [inert],
    [inert] *,
    .hidden,
    .hidden *
  )
) .language-switch-slot,
body:has(.modal-backdrop:not(.hidden) [role="dialog"]) .language-switch-slot,
body:has(.screens-nav.open) .language-switch-slot {
  visibility: hidden;
  pointer-events: none;
}

[data-language-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 761px) and (max-width: 1224.98px) {
  html[dir="rtl"] body:has(.screens-nav) .language-switch-slot {
    inset-block-start: max(192px, calc(env(safe-area-inset-top) + 180px));
  }
}

@media (min-width: 761px) and (max-width: 1268.98px) {
  html[dir="ltr"] body:has(.screens-nav) .language-switch-slot {
    inset-block-start: max(192px, calc(env(safe-area-inset-top) + 180px));
  }
}

@media (max-width: 600px) {
  .language-switch {
    padding-inline: 10px;
  }

  .language-switch-full {
    display: none;
  }

  .language-switch-compact {
    display: inline;
  }
}