/* One shared language picker for the login and member settings screens. */
.zug-language-dialog {
  box-sizing:border-box; width:min(350px,calc(100vw - 32px)); max-width:350px;
  max-height:calc(100dvh - 32px); margin:auto; padding:22px 18px 20px;
  color:#eef7ff; border:1px solid transparent; border-radius:24px;
  background:linear-gradient(150deg,#0c2139,#080f25) padding-box,linear-gradient(135deg,#25d9ff,#7065ff 65%,#ee68ed) border-box;
  box-shadow:0 20px 70px #0009,0 0 24px #168fce33; overflow:auto;
}
.zug-language-dialog::backdrop { background:#020916b8; backdrop-filter:blur(3px); }
.zug-language-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.zug-language-heading h2 { font-size:20px; line-height:1.4; margin:0; color:inherit; }
.zug-language-heading p { font-size:12px; line-height:1.6; color:#a5c2dc; margin:5px 0 0; }
.zug-language-close { flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:12px; border:1px solid #33516d; background:#142a42; color:#e8f4ff; font:24px/1 system-ui; cursor:pointer; }
.zug-language-steps { display:grid; gap:9px; padding-right:32px; }
.zug-language-step {
  box-sizing:border-box; display:flex; align-items:center; gap:12px;
  min-height:54px; width:100%; margin-left:calc(var(--language-step) * 8px); padding:10px 13px;
  border:1px solid #294b69; border-radius:14px; background:#10253c; color:#edf7ff;
  font:inherit; text-align:left; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s;
}
.zug-language-code { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px; color:#89dfff; background:#1b3b56; font:700 10px/1 system-ui; letter-spacing:.05em; }
.zug-language-name { flex:1; min-width:0; font-size:15px; font-weight:600; line-height:1.5; }
.zug-language-check { flex:none; width:18px; color:#6df1ff; visibility:hidden; }
.zug-language-step[aria-pressed="true"] { border-color:#4ad3ff; background:linear-gradient(110deg,#125187,#393781); box-shadow:0 0 0 1px #43cfff22,0 4px 16px #0874b52e; }
.zug-language-step[aria-pressed="true"] .zug-language-check { visibility:visible; }
.zug-language-step:hover { border-color:#8acfe9; background-color:#19334d; }
.zug-language-step:focus-visible,.zug-language-close:focus-visible { outline:2px solid #70edff; outline-offset:3px; }

.site-language-switch {
  display:flex; flex:none; padding:0; border:0; background:transparent;
}
.site-language-switch button[data-site-language] {
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; padding:0 10px; border:1px solid #325672; border-radius:11px;
  background:#0b1e34; color:#eff7ff; font-family:inherit; line-height:1.3;
  font-size:12px; font-weight:700; cursor:pointer;
}
.site-language-switch .language-globe {
  display:inline-block; width:14px; height:14px; flex:none;
  border:1px solid #74dfff; border-radius:50%; position:relative;
}
.language-globe::before {
  content:""; position:absolute; inset:0 3px; border-inline:1px solid #74dfff; border-radius:50%;
}
.language-globe::after {
  content:""; position:absolute; inset:5px 0 auto; border-top:1px solid #74dfff;
}
.language-arrow {
  width:6px; height:6px; border:solid #86cbe4; border-width:0 1px 1px 0;
  transform:rotate(45deg); margin:-3px 1px 0 2px; flex:none;
}
.site-language-switch button[data-site-language]:focus-visible {
  outline:2px solid #70edff; outline-offset:3px;
}
@media(max-width:360px) {
  .site-language-switch button[data-site-language] { gap:5px; padding-inline:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .zug-language-step { transition:none; }
}