/* Estilo para o formulário de filtro */
.distribuidor-filtro {
    background-color: #f3f3f3;
	height: 660px !important;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 1px 1px 2px 2px rgb(0 0 0 / 20%);
}

.distribuidor-filtro h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 20px !important;
	line-height: 1.2 !important;
    margin-bottom: 15px;
    color: #333;
}

.semi-bold {
    font-weight: 600;
}

.distribuidor-filtro label {
    font-weight: bold;
    color: #555;
    display: block;
    margin-top: 10px;
}

.distribuidor-filtro select,
.distribuidor-filtro button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.distribuidor-filtro select:focus,
.distribuidor-filtro button:focus {
    border-color: #007cba;
    outline: none;
}

/* Cores para o Botão BUSCAR */
.distribuidor-filtro button {
    background-color: #008639;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.distribuidor-filtro button:hover {
    background-color: #186E40;
}

/* Estilo para a lista de distribuidores, ou seja, a caixa de resultados que aparece depois que você clica em BUSCAR */
#lista-distribuidores {
	margin-top: 20px;
    display: none; /* Oculta a lista inicialmente */
    max-height: 315px; /* Altura máxima para a rolagem. Diminua caso o conteúdo da listagem e a barra de rolagem ultrapassem o conteiner. */
    overflow-y: auto; /* Ativa a barra de rolagem */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

/* Estilo para cada item do resultado da busca */
.distribuidor-item {
	font-size: 14px !important;
	font-family: 'Raleway', Open Sans, Helvetica, sans-serif !important;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.distribuidor-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Estilo para o Nome do Distribuidor */
.distribuidor-link {
	font-size: 16px !important;
	font-weight: bold !important;
}


/* Configurações do nome do Distribuidor no Filtro */
.distribuidor-item strong {
    font-size: 15px;
    color: #333;
}

/*Define as cores dos links dos itents da pesquisa*/
.distribuidor-item a {
    color: #008639 !important;
    text-decoration: none;
}

.distribuidor-item a:hover {
	color: #186E40 !important;
}

.leaflet-popup-content {
  	font-size: 13px !important;
	margin: 10px 20px 15px 20px !important;
    line-height: 1.7 !important;
}

/* Estilos para os links do Popup do Mapa */
.leaflet-popup-content a {
  	color: #008639 !important;
	font-size: 13px !important;
}

.leaflet-popup-content a:hover {
  	color: #186E40 !important;
}

/* Estilos para desktop (duas colunas) */
.distribuidor-mapa-container {
    display: flex;
    gap: 20px;
}

.distribuidor-filtro {
    flex: 0 0 35%;
}

.distribuidor-mapa {
    flex: 1;
}

#mapa {
    width: 100%;
    height: 661px !important;
    border: 1px solid rgb(143 143 143) !important;
   	border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos para mobile (uma coluna) */
@media (max-width: 768px) {
    .distribuidor-mapa-container {
        flex-direction: column;
    }

    .distribuidor-filtro, .distribuidor-mapa {
        flex: 1 1 100%;
    }
	
	#mapa {
    width: 90% !important;
	margin: 0 auto; /* Centraliza horizontalmente */
    display: block; /* Garante que o elemento seja tratado como bloco */
    height: 400px !important;
	}
}