.language-switcher {
  position: relative;
  z-index: 82;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: clamp(.65rem, 1.4vw, 1.2rem);
  font-family: "Arial Narrow", "Yu Gothic", sans-serif;
}

.language-switcher summary {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(220, 232, 255, .2);
  border-radius: 50%;
  color: #f4f7fb;
  background: rgba(5, 7, 11, .82);
  cursor: pointer;
  list-style: none;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover,
.language-switcher summary:focus-visible,
.language-switcher[open] summary {
  color: #fff;
  border-color: rgba(76, 145, 255, .72);
  background: rgba(18, 104, 255, .22);
  transform: translateY(-1px);
}

.language-globe {
  width: 1.12rem;
  height: 1.12rem;
  flex: 0 0 auto;
  color: #6ba4ff;
}

.language-list {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  display: grid;
  min-width: 13.5rem;
  gap: .28rem;
  margin: 0;
  padding: .62rem;
  border: 1px solid rgba(220, 232, 255, .16);
  background: rgba(5, 7, 11, .95);
  box-shadow: 0 1.35rem 3.6rem rgba(0, 0, 0, .52);
  backdrop-filter: blur(18px);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.45rem) scale(.98);
  transform-origin: top right;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.language-switcher[open] .language-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.language-link {
  display: grid;
  grid-template-columns: 1.6rem 2rem 1fr;
  min-height: 2.65rem;
  align-items: center;
  gap: .42rem;
  padding: .35rem .65rem;
  border: 1px solid transparent;
  color: #aab4c4;
  text-align: left;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}

.language-link:hover,
.language-link:focus-visible {
  color: #fff;
  border-color: rgba(76, 145, 255, .5);
  background: rgba(18, 104, 255, .14);
  transform: translateX(.15rem);
}

.language-link[aria-current="page"] {
  color: #fff;
  border-color: #1268ff;
  background: #1268ff;
}

.language-flag { width: 1.18rem; height: 1.18rem; flex: 0 0 auto; }
.language-code { font-size: .5rem; font-weight: 900; line-height: 1; letter-spacing: .05em; }
.language-link::after {
  content: attr(data-native-name);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
}

@media (max-width: 1020px) {
  .language-switcher { margin-right: .5rem; }
  .language-switcher summary { background: rgba(5, 7, 11, .9); }
  .language-list { position: fixed; top: 4.55rem; right: 1rem; }
}

@media (max-width: 420px) {
  .language-switcher summary { width: 2.75rem; height: 2.75rem; }
  .language-list { right: .65rem; min-width: 12.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .language-switcher summary,
  .language-list,
  .language-link { transition: none; }
}