/* Tooltip flutuante */
#tooltip {
  position: absolute;
  pointer-events: none;
  display: none;               /* escondido por padrão */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;                 /* acima do mapa */
}

#tooltip.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Hover nos estados */
.state-area {
  transition: fill 0.2s;
}

/* Efeito para as bandeiras */
.country-flag {
    filter: grayscale(100%);
    transition: all 0.3s ease;
    width: 80px;
    height: auto;
    margin: 0.5rem;
    opacity: 0.9;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
}

.country-flag:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
    border-color: #333;
}

.country-flag.active {
    filter: grayscale(0);
    opacity: 1;
    border-color: #00d1b2;
}

/* Ajuste de responsividade */
@media screen and (max-width: 768px) {
    .country-flag {
        width: 60px;
        margin: 0.3rem;
    }
}
/* Estilo para fazer as bandeiras ocuparem 100% da largura da coluna em dispositivos móveis */
@media screen and (max-width: 768px) {
    .flag-mobile-full {
        width: 100% !important;
        height: auto;
        max-width: 100px; /* Limita o tamanho máximo para não ficar excessivamente grande */
        margin: 0.3rem auto; /* Centraliza a bandeira */
    }
}