/* Seletor de idioma — pilha de bandeiras (PT / EN / ES); clique joga a da frente para o fundo */
.whb-col-right { gap: 8px; }
.whb-mobile-right { gap: 18px; }
.whb-mobile-right { justify-content: flex-end; }
.whb-mobile-right > .wd-header-text { flex: 0 0 auto; width: auto; }

.mgj-lang { position: relative; width: 66px; height: 34px; flex: 0 0 auto; z-index: 50; }
.mgj-lang__deck {
  -webkit-appearance: none; appearance: none; position: absolute; inset: 0; min-height: 0; min-width: 0;
  padding: 0 !important; margin: 0; border: 0; background: transparent !important; box-shadow: none !important;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mgj-lang__deck:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: 4px; }

/* indicação de troca: seta reta, fina */
.mgj-lang__arrow {
  position: absolute; left: 0; top: 4px; width: 11px; height: 22px; color: rgba(255,255,255,.55);
  transition: color .2s, transform .3s ease; pointer-events: none;
}
.mgj-lang:hover .mgj-lang__arrow { color: rgba(255,255,255,.9); transform: translateY(-2px); }

/* cartas */
.mgj-flag {
  position: absolute; left: 15px; top: 12px; width: 30px; height: 20px; display: block; overflow: hidden;
  background: #111; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.45);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
  pointer-events: none;
}
.mgj-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgj-flag[data-pos="0"] { transform: translate(0,0); z-index: 3; }
.mgj-flag[data-pos="1"] { transform: translate(10px,-4px); z-index: 2; filter: brightness(.82); }
.mgj-flag[data-pos="2"] { transform: translate(20px,-8px); z-index: 1; filter: brightness(.66); }
.mgj-lang:hover .mgj-flag[data-pos="0"] { transform: translate(-1px,1px); }
.mgj-lang:hover .mgj-flag[data-pos="1"] { transform: translate(12px,-6px); }
.mgj-lang:hover .mgj-flag[data-pos="2"] { transform: translate(24px,-12px); }

/* a carta da frente sai para cima e entra por trás da pilha; as outras avançam */
.mgj-flag.is-thrown { animation: mgj-throw .6s cubic-bezier(.4,0,.2,1); }
@keyframes mgj-throw {
  0%   { transform: translate(0,0);                      z-index: 4; filter: none; }
  45%  { transform: translate(-4px,-22px) rotate(-6deg); z-index: 4; filter: none; }
  50%  { transform: translate(-2px,-23px) rotate(-5deg); z-index: 0; }
  100% { transform: translate(20px,-8px);                z-index: 0; filter: brightness(.66); }
}

@media (prefers-reduced-motion: reduce) {
  .mgj-flag, .mgj-lang__arrow { transition: none; }
  .mgj-flag.is-thrown { animation: none; }
}