/* ═══════════════════════════════════════════════════════════════
   PROMAKE ART · SELETOR MULTILÍNGUE (PORTUGUÊS / INGLÊS)
   Visual minimalista, integrado ao design system e acessível
════════════════════════════════════════════════════════════════ */

.pm-lang-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: rgba(17, 17, 17, .04);
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.pm-lang-switch:hover {
  border-color: rgba(17, 17, 17, .38);
  background: rgba(17, 17, 17, .06);
}

.pm-lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  font: 700 11px/1 var(--upw-mono, monospace);
  letter-spacing: .08em;
  color: var(--upw-muted, #4b4740);
  outline: none;
  transition: color .22s ease, background-color .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}

.pm-lang-btn:focus-visible {
  outline: 2px solid var(--upw-accent, #ff3b1f);
  outline-offset: 2px;
}

/* Hover suave com leve escala */
.pm-lang-btn:hover {
  color: var(--upw-ink, #111111);
  transform: translateY(-1px) scale(1.04);
}

/* Estado Ativo com pílula contrastante e sutil */
.pm-lang-btn.is-active {
  background: #ffffff;
  color: var(--upw-ink, #111111);
  box-shadow: 0 2px 8px rgba(17, 17, 17, .12), 0 0 1px rgba(17, 17, 17, .2);
}

/* Bandeiras SVG: proporção oficial, bordas arredondadas e sombra suave */
.pm-flag-icon {
  width: 17px;
  height: 12px;
  display: inline-block;
  flex: none;
  border-radius: 2.5px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.pm-flag-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pm-lang-btn:hover .pm-flag-icon {
  transform: scale(1.12) rotate(-2deg);
}

.pm-lang-btn.is-active .pm-flag-icon {
  transform: scale(1.05);
}

/* Micro-animação de troca suave */
@keyframes pmFlagSwap {
  0% { transform: scale(.8) rotate(-8deg); opacity: .7; }
  60% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1.05) rotate(0deg); opacity: 1; }
}

.pm-lang-btn.pm-just-swapped .pm-flag-icon {
  animation: pmFlagSwap .4s cubic-bezier(.2, .9, .3, 1) both;
}

/* Transição de fade para atualização dos textos do site */
.pm-i18n-transition {
  transition: opacity .15s ease-out;
}
.pm-i18n-fading {
  opacity: .88;
}

/* Responsivo Mobile */
@media (max-width: 600px) {
  .pm-lang-switch {
    padding: 2px;
    gap: 2px;
  }
  .pm-lang-btn {
    padding: 4px 7px;
    font-size: 9px;
    gap: 4px;
  }
  .pm-flag-icon {
    width: 14px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-lang-btn,
  .pm-flag-icon,
  .pm-lang-btn.pm-just-swapped .pm-flag-icon {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}