/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/* ===================================================================== */
/* ANIMAÇÃO BOUNCE CORRIGIDA
/* ===================================================================== */


.leaflet-marker-icon {
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out;
}

/*
  Quando o mouse passa sobre o item na lista, a classe .bounce é adicionada
  ao ícone, e sua opacidade vai para 100%.
*/
.leaflet-marker-icon.bounce {
    opacity: 1;
}


/* ===================================================================== */
/* CSS EXISTENTE
/* ===================================================================== */

/* Container de cada item da lista */
.page-template-template-mapa #main {
	padding-left:0 !important;
    padding-right:0 !important;
}
.page-template-template-mapa .fusion-row {
	max-width:100% !important;
    width:100%;
}
.itemFavelaContainer {
    padding: 0px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s;
}
.itemFavelaContainer:hover {
	background-color:#ccc;
    border-radius:5px;
}

/* Nome da favela, que é sempre visível */
.nomeFavela {
    cursor: pointer;
    margin-top:5px;
    margin-bottom:5px;
}

/* A div com os detalhes, OCULTA POR PADRÃO */
.detalhesFavelas {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border-left: 3px solid #ca6c33; /* Cor de destaque */
    font-size: 0.9em;
}

.detalhesFavelas p {
    margin: 5px 0;
}

#favelasSidebar {
    padding-top:200px;
    padding-bottom:100px;
    display:flex;
    flex-direction: column;
}

.mapa-direito-das-favelas {
	flex:none;
    width:100%;
    min-height:600px;
    margin-top:40px;
}

#listaFavelas, .itensFavelas {
	list-style: none;
}

.skew-box {
  position: relative;
  overflow: hidden;
  flex:none;
    width:100%;
    padding:20px;
}

.skew-box .content {
  padding: 20px;
}

.titulo-cidade {
	font-size: 20px;
    font-weight: bold;
    margin-bottom:0;
    margin-top:0;
}
.titulo-cidade img {
	margin-right: -20px;
}
.itensFavelas {
	padding-left:0;
}

/* Contêiner principal para o layout horizontal */
#container-listagem-horizontal {
    display: flex;
    flex-direction: row;
    height: 400px; /* Ou a altura que preferir */
}

/* Estilo base para todas as 3 colunas */
.coluna-listagem {
    overflow-y: auto; /* Adiciona scroll se o conteúdo for grande */
}
.coluna-listagem:last-child {
    border-right: none; /* Remove a borda da última coluna */
}

/* Wrapper para a lista de cidades (Coluna 1) */
#lista-cidades-wrapper {
    flex-basis: 15%; /* Largura da coluna de cidades */
    border-right:1px solid #ddd;
}

/* Wrapper para a lista de favelas (Coluna 2) */
#lista-favelas-wrapper {
    flex-basis: 20%; /* Largura da coluna de favelas */
}
    
/* Wrapper para os detalhes (Coluna 3) */
#detalhes-favela-wrapper {
    flex-basis: 65%; /* Largura da coluna de detalhes */
    padding: 20px;
    border-left: 2px solid #FF9442;
}

/* --- ESTILOS DOS ITENS E PLACEHOLDERS --- */

/* Remove padding padrão da UL de cidades */
#listaCidades {
    list-style: none;
    padding-left:5px;
    padding-right:5px;
    margin: 0;
}

/* Estilo para cada item de cidade */
.item-cidade {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease-in-out;
    display:inline-block;
}

.item-cidade:hover {
    background-color: #f0f0f0;
}

/* Placeholder na coluna de favelas */

.placeholder-favelas, .placeholder-detalhes {
    padding: 0px;
    color: #888;
    text-align: left;
    font-size:14px;
}
.placeholder-favelas {
	padding-top:20px;
    padding-left:20px;
}

/* Estilo para o contêiner de itens de favela */
.itensFavelas {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Estilo para cada item de favela */


.itemFavelaContainer:hover {
    background-color: #f7f7f7;
}

/* NOVO: Estilo para a favela ATIVA na coluna 2 */
.itemFavelaContainer.active {
    font-weight: bold;
}

.container-mapa {
	max-width: 1230px;
    margin: 0 auto;
    padding: 10px 15px;
}

.item-cidade.active {
	background-color: #FF9442;
	padding-left:20px;
	clip-path: polygon(
    0px 0,   /* canto superior esquerdo deslocado para a esquerda */
    100% 0,    /* canto superior direito */
    100% 100%, /* canto inferior direito */
    5px 100%     /* canto inferior esquerdo */
  );
}

.coluna-listagem h3 {
	margin-top:0;
    color:#FF9442;
}

.coluna-listagem h4 {
	margin-bottom:0;
}

.coluna-listagem p {
	margin-top:10px;
    margin-bottom:10px;
}

.coluna-listagem h4:first-child {
	margin-top:0;
}

#dados-favelas_wrapper table th, #dados-favelas_wrapper table td {
	font-size:14px;
}

.dt-scroll-body.active-drag {
    cursor: grabbing;
}

.font-awesome-solid {
	font-family: 'Font Awesome 5 Free';
}

div.dt-button-collection {
	width:400px;
}
#dados-favelas_wrapper {
	margin-top:100px;
}

/* --- NOVO: PAINEL FLUTUANTE (LISTA DE CIDADES/FAVELAS) --- */
#floating-list-container {
    position: absolute;
    top: 60px; /* 40px da margem do mapa + 20px de espaço */
    right: 20px;
    width: 300px;
    max-height: 80%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000; /* Para ficar sobre o mapa */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.panel-header {
    padding: 12px 15px;
    font-weight: bold;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
}
#city-favela-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}
.city-item > span {
    display: block;
    padding: 12px 15px;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}
.city-item > span:hover {
    background-color: #f5f5f5;
}
.city-item.active > span {
    background-color: #FF9442;
    color: white;
}
.favelas-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fafafa;
    display: none; /* Escondido por padrão */
}
.favela-item {
    padding: 10px 15px 10px 30px; /* Indentação para favelas */
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}
.favela-item:hover {
    background-color: #e9e9e9;
}

/* --- NOVO: LIGHTBOX (DETALHES DA FAVELA) --- */
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
}
#lightbox-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 2001;
    display: flex; /* Usado para o layout interno */
    flex-direction: column;
}
#close-lightbox {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}
#close-lightbox:hover {
    color: #333;
}
#lightbox-details {
    padding: 25px 30px;
    overflow-y: auto;
}
#lightbox-details h4 {
    margin-top: 20px;
    margin-bottom: 5px;
    color: #FF9442;
}
#lightbox-details h4:first-child {
    margin-top: 0;
}
#lightbox-details p {
    margin: 5px 0;
    font-size: 14px;
}


@media (max-width: 991px) {
.container-mapa {width:100%;}
	#container-listagem-horizontal {flex-direction: column;}
    .coluna-listagem {max-height: 200px; flex-basis: auto !important; flex:none; overflow-y: auto; border-bottom:1px solid #ddd;padding-top:20px;padding-bottom:20px; }
    
}