/* ═══════════════════════════════════════════════════════════════════════════
   Seletor de idioma — topbar e menu do celular.

   Segue a linguagem visual já existente na topbar: pílula sobre o azul
   profundo, filete dourado, tipografia de 12px em caixa alta. A bandeira é
   emoji, não imagem: renderiza nativo em todo sistema, não faz requisição e
   nunca aparece quebrada.

   Paleta oficial GLA, sem cor nova:
     #2F2F2F azul profundo · #C8AA6F dourado · #E3D5BB bege · #F9F6F0 off white
   ═══════════════════════════════════════════════════════════════════════════ */

.gla-lang{ position:relative; flex-shrink:0 }

/* ── Botão ─────────────────────────────────────────────────────────────── */
/* Pílula: bandeira em moldura própria + sigla + seta. A bandeira ganhou anel e
   raio menor que o da pílula, para ler como selo dentro do controle e não como
   figurinha solta; a sigla é o que diz que o controle troca o idioma. */
.gla-lang__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 10px 4px 5px; border-radius:999px;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(200,170,111,.32);
  cursor:pointer; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s,
             transform .24s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.gla-lang__flag{
  display:flex; padding:2px; border-radius:6px; line-height:0;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(200,170,111,.3);
  transition:background .2s, box-shadow .2s;
}
.gla-lang__cur{
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.gla-lang__btn:hover{
  background:rgba(200,170,111,.16);
  border-color:rgba(200,170,111,.6);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(200,170,111,.7);
}
.gla-lang__btn:hover .gla-lang__flag{ box-shadow:inset 0 0 0 1px rgba(200,170,111,.6) }
.gla-lang__btn:focus-visible{
  outline:2px solid #C8AA6F; outline-offset:2px;
}

/* Bandeira em SVG, não emoji.
   O Windows não traz glifo de bandeira no Segoe UI Emoji: ele desenha o par de
   letras regionais como uma caixinha escrita "BR" ou "US". No painel e no site
   aberto no Windows, que é o caso aqui, a barra do topo virava um amontoado de
   siglas e o seletor parecia quebrado. O desenho vetorial resolve em todo
   sistema, sem arquivo e sem requisição. */
.gla-flag{
  display:block; flex-shrink:0; border-radius:3px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.2);
}
/* Sigla do idioma. Só existe dentro do menu aberto: no botão fechado a
   bandeira já diz tudo, e a barra do topo não tem espaço sobrando. */
.gla-lang__sg{
  flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-radius:5px; padding:2px 6px; line-height:1.2;
  font-variant-numeric:tabular-nums;
  transition:color .15s, background .15s, border-color .15s;
}
.gla-lang__opt:hover .gla-lang__sg,
.gla-lang__opt:focus-visible .gla-lang__sg{ color:rgba(255,255,255,.82) }
.gla-lang__opt.is-on .gla-lang__sg{
  color:#C8AA6F; background:rgba(200,170,111,.16); border-color:rgba(200,170,111,.4);
}

.gla-lang__caret{
  font-size:9px; color:#C8AA6F; margin-left:1px;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.gla-lang.is-open .gla-lang__caret{ transform:rotate(180deg) }
.gla-lang.is-open .gla-lang__btn{
  background:rgba(200,170,111,.18); border-color:rgba(200,170,111,.65); color:#fff;
}

/* ── Painel ────────────────────────────────────────────────────────────── */
.gla-lang__menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:1200;
  min-width:238px; max-height:min(70vh, 420px); overflow-y:auto; padding:8px;
  background:#2F2F2F;
  border:1px solid rgba(200,170,111,.3);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(27,22,13,.44), 0 2px 8px rgba(27,22,13,.3);
  /* Fecha por padrão sem display:none, para a transição existir. */
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .2s ease, transform .2s cubic-bezier(.4,0,.2,1), visibility .2s;
}
.gla-lang.is-open .gla-lang__menu{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
/* Bico apontando para o botão. */
.gla-lang__menu::before{
  content:""; position:absolute; top:-5px; right:20px; width:9px; height:9px;
  background:#2F2F2F;
  border-left:1px solid rgba(200,170,111,.3);
  border-top:1px solid rgba(200,170,111,.3);
  transform:rotate(45deg);
}

/* ⚠ Este bloco é da versão ESCURA do painel. O fundo charcoal existe porque o
   título é `position:sticky` e precisa tapar a lista que rola por baixo — e foi
   exatamente ele que sobrou quando o painel virou branco, deixando uma tarja
   escura com letra escura (1.97:1). Quem manda hoje é o bloco CLAREAMENTO no
   fim de `aga-chrome.css`, que repinta a faixa de papel. Editar as cores AQUI
   não muda nada na tela. */
.gla-lang__ttl{
  margin:2px 4px 7px; padding:0 6px;
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(200,170,111,.85);
  position:sticky; top:-8px; z-index:1;
  background:#2F2F2F;   /* fica legível quando a lista rola por baixo */
}
/* Segundo grupo: separado por um filete, para a lista de 24 idiomas não virar
   uma parede. Os seis primeiros são os países onde o escritório mais atende. */
.gla-lang__ttl--2{
  margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(200,170,111,.22);
  color:rgba(255,255,255,.45);
}

/* Barra de rolagem discreta: com 24 idiomas a lista rola, e a barra padrão do
   Windows sobre o azul escuro fica pesada. */
.gla-lang__menu{ scrollbar-width:thin; scrollbar-color:rgba(200,170,111,.45) transparent }
.gla-lang__menu::-webkit-scrollbar{ width:8px }
.gla-lang__menu::-webkit-scrollbar-thumb{ background:rgba(200,170,111,.4); border-radius:99px }
.gla-lang__menu::-webkit-scrollbar-track{ background:transparent }

.gla-lang__opt{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:9px;
  color:rgba(255,255,255,.8); text-decoration:none;
  font-size:13px; font-weight:500; line-height:1.2;
  transition:background .15s, color .15s;
}
.gla-lang__opt:hover,
.gla-lang__opt:focus-visible{
  background:rgba(200,170,111,.15); color:#fff; outline:none;
}
.gla-lang__opt:focus-visible{ box-shadow:inset 0 0 0 1px rgba(200,170,111,.55) }
.gla-lang__nm{ flex:1; min-width:0 }

.gla-lang__tick{
  font-size:10px; color:#C8AA6F; opacity:0;
  transition:opacity .15s;
}
.gla-lang__opt.is-on{ color:#fff; background:rgba(200,170,111,.1) }
.gla-lang__opt.is-on .gla-lang__tick{ opacity:1 }

/* ── Menu lateral do celular ───────────────────────────────────────────── */
.gla-lang-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  margin:2px 0 4px;
}
.gla-lang-grid__it{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:11px;
  text-decoration:none; font-size:13px; font-weight:500; line-height:1.15;
  color:#2F2F2F;
  background:#F9F6F0;
  border:1px solid rgba(47,47,47,.12);
  transition:background .16s, border-color .16s, color .16s;
}
.gla-lang-grid__it:hover{ background:#E3D5BB; border-color:rgba(200,170,111,.45) }
.gla-lang-grid__it.is-on{
  background:rgba(200,170,111,.14);
  border-color:rgba(200,170,111,.6);
  color:#715724; font-weight:700;
}
.gla-lang-grid__n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Telas estreitas: o painel encosta na borda direita e ganha respiro. */
@media(max-width:1400px){
  .gla-lang__btn{ padding:4px 8px 4px 7px; gap:5px }
}
@media(prefers-reduced-motion:reduce){
  .gla-lang__menu,
  .gla-lang__caret,
  .gla-lang__btn{ transition:none }
}