/* Curated localisation additions for Shaiya Hollow. */

.language-nav {
  position: relative;
  display: flex;
  align-items: center;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(219, 182, 111, 0.22);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(209, 168, 95, 0.06);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-nav.is-open .language-toggle {
  color: var(--text);
  border-color: rgba(209, 168, 95, 0.52);
  background: rgba(209, 168, 95, 0.12);
}

.language-toggle__icon {
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.85;
  position: relative;
}

.language-toggle__icon::before,
.language-toggle__icon::after {
  content: "";
  position: absolute;
  inset: 3px 1px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-radius: 50%;
}

.language-toggle__icon::after {
  inset: 1px 5px;
  border: 0;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.language-nav .dropDown-menu {
  right: 0;
  left: auto;
  min-width: 220px;
}

.language-nav:hover .dropDown-menu,
.language-nav:focus-within .dropDown-menu,
.language-nav.is-open .dropDown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.language-option {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.language-option small {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.language-option[aria-current="true"] {
  color: var(--text);
  border-color: var(--line);
  background: rgba(209, 168, 95, 0.12);
}

.translation-review-banner {
  width: min(var(--max), calc(100% - 32px));
  margin: 12px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(130, 168, 188, 0.28);
  border-radius: 8px;
  background: rgba(17, 25, 32, 0.88);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.translation-review-banner strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
}

.translation-review-banner p,
.translation-source-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.translation-source-note {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 2px solid var(--blue);
  background: rgba(130, 168, 188, 0.07);
}

/* The bundled display font is Latin-only. Use one complete font per Cyrillic
   interface rather than mixing Latin display glyphs with fallback Cyrillic. */
html[lang="ru"] body,
html[lang="uk"] body,
html[lang="ru"] button,
html[lang="uk"] button,
html[lang="ru"] input,
html[lang="uk"] input,
html[lang="ru"] select,
html[lang="uk"] select,
html[lang="ru"] textarea,
html[lang="uk"] textarea,
html[lang="ru"] h1,
html[lang="uk"] h1,
html[lang="ru"] h2,
html[lang="uk"] h2,
html[lang="ru"] h3,
html[lang="uk"] h3,
html[lang="ru"] .brand-name,
html[lang="uk"] .brand-name,
html[lang="ru"] .hero-logo__word,
html[lang="uk"] .hero-logo__word {
  font-family: "Segoe UI", Arial, sans-serif !important;
}

html[lang="ru"] .eyebrow,
html[lang="uk"] .eyebrow,
html[lang="ru"] .metric span,
html[lang="uk"] .metric span,
html[lang="ru"] .stat-line span,
html[lang="uk"] .stat-line span {
  letter-spacing: 0.04em;
}

@media (max-width: 1120px) {
  .language-toggle__name {
    display: none;
  }

  .language-nav .dropDown-menu {
    min-width: 200px;
  }
}

@media (max-width: 820px) {
  .language-nav {
    width: 100%;
    display: block;
  }

  .language-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .language-toggle__name {
    display: inline;
  }

  .language-nav .dropDown-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .language-nav.is-open .dropDown-menu,
  .language-nav:focus-within .dropDown-menu {
    display: block;
  }
}

/* Keep translated authentication actions on one clean line in the desktop header. */
@media (min-width: 1061px) {
  .account-nav > a,
  .account-nav > button,
  .account-nav > .signIn,
  .account-nav > .state-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}