/* Premium language selector: scoped to the portaled panel. */
.lang-backdrop.is-open { z-index: 2147483000; }
.lang-panel.is-open {
  z-index: 2147483001;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  background: linear-gradient(145deg, #20354c, #122135 70%);
  border-color: #7c6b50;
  box-shadow: 0 24px 70px #02091166, inset 0 1px 0 #ffffff12;
}
.lang-panel .lang-panel-head { padding: 12px 16px 4px; gap: 12px; }
.lang-panel .lang-panel-head strong { color: #f5f2ea; }
.lang-panel .lang-x { flex: 0 0 44px; color: #c6cfda; }
.lang-panel .lang-search-wrap { margin: 0 16px 12px; }
.lang-panel.is-open .lang-search {
  min-height: 44px; padding-block: 10px;
  padding-inline: 40px 12px; font-size: var(--fs-16);
  color: #f5f2ea; border-color: #526071;
}
.lang-panel .lang-search::placeholder { color: #b6c2d0; }
.lang-panel .lang-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 16px; margin: 0;
  scrollbar-gutter: auto; overscroll-behavior: contain;
  align-content: start;
}
.lang-panel .lang-grid li { min-width: 0; margin: 0; padding: 0; }
.lang-panel.is-open .lang-grid a {
  min-height: 48px; height: 100%; padding: 8px 10px; gap: 8px;
  font-size: var(--fs-16); line-height: 1.25; color: #f5f2ea;
  background: #ffffff05; border-color: #ffffff14;
  overflow-wrap: anywhere;
}
.lang-panel .lang-grid .flag { width: 22px; height: 22px; }
.lang-panel.is-open .lang-grid a:hover { background: #ffffff0d; border-color: #7c6b50; }
.lang-panel.is-open .lang-grid a[aria-current="true"] {
  color: #efcf94; background: #b9975b20; border-color: #ae8e58;
  box-shadow: inset 3px 0 0 #ddbd83;
}
[dir="rtl"] .lang-panel.is-open .lang-grid a[aria-current="true"] {
  box-shadow: inset -3px 0 0 #ddbd83;
}
.lang-panel.is-open :is(.lang-grid a, .lang-search, .lang-x):focus-visible {
  outline: 2px solid #efcf94; outline-offset: 2px;
}
@media (max-width: 639px) {
  .lang-panel .lang-panel-head { padding: 8px 12px 4px; }
  .lang-panel .lang-search-wrap { margin: 0 12px 8px; }
  .lang-panel .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px; }
  .lang-panel.is-open .lang-grid a { min-height: 44px; padding: 6px 8px; }
  .lang-panel .lang-grid .flag { width: 20px; height: 20px; }
}
/* Extremely short viewports / zoom: keep chrome reachable and the list scrollable. */
@media (max-height: 300px) {
  .lang-panel.is-open { overflow-y: auto; }
  .lang-panel .lang-grid { flex: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-panel.is-open, .lang-panel.is-open * { animation: none; transition: none; }
}