/* Estilos simplificados para mapas - apenas opacity */

/* Container do mapa */
.map-inner {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    position: relative;
}

/* Mapas individuais das regiões */
.region-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    display: none !important;
    justify-content: center;
    align-items: center;
}

.region-map[style*="block"] {
    display: flex !important;
}

.region-map svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 400px;
}

/* Estilos para o mapa completo de Alagoas (página inicial) */
.map-regions svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 400px;
}

/* Estado padrão das regiões no mapa completo - com opacity baixa */
.map-regions [data-region] {
    opacity: 0.3;
    cursor: pointer;
}

/* Estado ativo da região no mapa completo - apenas remove opacity */
.map-regions [data-region].ativo {
    opacity: 1;
}

/* Estados das regiões ativas na lista - apenas opacity */
.sub-regions li.ativo {
    opacity: 1;
}

.sub-regions li {
    cursor: pointer;
}

/* Layout personalizado para página inicial */
.map-details {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important; /* Remove gap para controle manual */
}

.map-content {
    flex: 1 !important; /* Mapa ocupa mais espaço */
    max-width: 65% !important; /* Limita para não ocupar tudo */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.swiper.--map {
    flex: 0 0 35% !important; /* Card fixo em 35% da largura */
    max-width: 35% !important;
    margin-left: auto !important; /* Empurra para a direita */
    height: 100% !important;
}

/* Responsividade */
@media (max-width: 1024px) {
    .map-details {
        flex-direction: column !important;
        gap: 15rem !important;
    }
    
    .map-content,
    .swiper.--map {
        flex: 1 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .map-inner {
        min-height: 200px;
    }
    
    .region-map svg {
        max-height: 300px;
    }
    
    .map-regions svg {
        max-height: 300px;
    }
}