/* Botão de idioma (static/i18n.js): a bandeira do idioma atual e, ao tocar,
   a lista com Português, English e Español. Valores de tokens.css. */

.idioma { position: relative; display: inline-flex; flex: none; }

.idioma-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px 0 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong);
  color: var(--ink); font: 600 12px/1 var(--font-ui); letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
  perspective: 200px;
}
.idioma-btn:hover { background: rgba(255, 255, 255, .12); }
.idioma-btn:active { transform: scale(.96); }
.idioma-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.idioma-bandeira { width: 20px; height: 20px; display: block; user-select: none; }

.idioma-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 400;
  display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 6px;
  border-radius: var(--r-lg);
  background: rgba(22, 19, 34, .97); border: 1px solid var(--glass-line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  transform-origin: top right;
}
.idioma-menu[hidden] { display: none; }
.idioma-menu button {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--ink); font: 500 14px/1 var(--font-ui);
  text-align: left; cursor: pointer;
}
.idioma-menu button:hover { background: rgba(var(--accent-rgb), .18); }
.idioma-menu button[aria-checked="true"] { background: rgba(var(--accent-rgb), .28); }

/* no cartão de login fica no canto de cima */
.auth-card { position: relative; }
.auth-card > .idioma { position: absolute; top: 14px; right: 14px; }

@media (max-width: 767px) {
  .idioma-btn { height: 36px; padding: 0 8px; }
  .st-top .idioma-cod, .e-top .idioma-cod { display: none; }
  .idioma-menu button { height: 44px; font-size: 15px; }
}