.locale-trigger .locale-current-flag { font-size: 1.6rem; line-height: 1; }
.locale-menu {
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(70dvh, 34rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  overflow: hidden;
  padding: .9rem;
  color: #f4f8ff;
}
.locale-menu[hidden], .locale-option[hidden], .locale-empty[hidden] { display: none; }
.locale-menu-heading { margin: 0; font-size: 1rem; font-weight: 700; }
.locale-search {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid #8eb7db;
  border-radius: .65rem;
  background: #f7fbff;
  color: #142c48;
  font: inherit;
  font-size: 1rem;
}
.locale-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #88b5e0 #17283f;
  padding-right: .3rem;
}
.locale-option {
  justify-content: flex-start;
  gap: .65rem;
  min-height: 48px;
  padding: .6rem;
  border: 1px solid transparent;
  font-size: .93rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.locale-flag { flex: 0 0 1.7rem; font-size: 1.45rem; line-height: 1.2; }
.locale-option.is-active { background: #dff1ff; color: #102f50; border-color: #5eb7ff; }
.locale-option:hover { background: #244366; color: #fff; }
.locale-option:focus-visible, .locale-search:focus-visible { outline: 3px solid #ffcf55; outline-offset: -3px; }
.locale-empty { margin: .25rem 0; color: #e2ebf5; }
.locale-status { margin: 0; font-size: .85rem; line-height: 1.4; color: #e2ebf5; }
.locale-status:empty { display: none; }
.locale-content-note { margin: 0; font-size: .8rem; line-height: 1.4; color: #c8d7e9; }
.locale-content-note[hidden] { display: none; }
@media (max-width: 359px) {
  .locale-menu { padding: .7rem; }
  .locale-options { grid-template-columns: 1fr; }
}