.site-root[data-locale="en"] .film-version-control::before { content: "Choose language"; }
.site-root[data-locale="ru"] .film-version-control::before { content: "Выберите язык"; }
.site-root[data-locale="uk"] .film-version-control::before { content: "Оберіть мову"; }
.site-root[data-locale="tr"] .film-version-control::before { content: "Dil seçin"; }
.site-root[data-locale="es"] .film-version-control::before { content: "Elija el idioma"; }
.site-root[data-locale="ar"] .film-version-control::before { content: "اختر اللغة"; }

.film-version-control::before {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  width: max-content;
  max-width: min(170px, calc(100vw - 36px));
  padding: 7px 10px;
  border: 1px solid rgba(225, 235, 243, 0.22);
  border-radius: 9px;
  color: rgba(246, 249, 251, 0.94);
  background: rgba(12, 23, 33, 0.58);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(0.9);
  backdrop-filter: blur(16px) saturate(0.9);
  font: 620 var(--type-micro) var(--font-mono), monospace;
  letter-spacing: 0.025em;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.rtl .film-version-control::before {
  right: auto;
  left: 0;
}

body.film-language-show-hint .film-version-control::before {
  opacity: 1;
  transform: translateY(0);
}

body.film-language-guidance .film-version-trigger {
  animation: film-language-soft-pulse 1.2s ease-in-out 3;
}

@keyframes film-language-soft-pulse {
  0%, 100% {
    border-color: rgba(225, 235, 243, 0.2);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.11);
  }
  50% {
    border-color: rgba(210, 189, 150, 0.72);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(210, 189, 150, 0.12), 0 0 20px rgba(210, 189, 150, 0.2), inset 0 1px rgba(255, 255, 255, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.film-language-guidance .film-version-trigger {
    animation: none;
    border-color: rgba(210, 189, 150, 0.58);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16), 0 0 0 3px rgba(210, 189, 150, 0.1), inset 0 1px rgba(255, 255, 255, 0.11);
  }
}
