/* --- ESTILOS DA CAIXA DE BUSCA E RESULTADOS --- */

.search-section {
    width: 100%; 
    max-width: 400px;
    margin: 15px auto 0 auto; /* Ajuste a margem superior */
    padding: 0 20px; 
    box-sizing: border-box;
}

/* Estilo para a caixa de busca (input) */
#caixaBusca {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc; 
    border-radius: 25px; 
    font-size: 16px;
    color: var(--text-dark); 
    outline: none; 
    transition: border-color 0.3s;
    box-sizing: border-box; 
    background-color: white;
}

#caixaBusca:focus {
    border-color: var(--icon-color); /* Foco usa a cor de destaque */
}

/* Estilo para a área de resultados */
#resultados {
    margin-top: 5px;
    max-height: 150px; 
    overflow-y: auto; 
    background-color: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0; 
    text-align: left; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#resultados ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilo para o LI (Contêiner do link) */
#resultados li {
    padding: 0; 
    border-bottom: 1px solid #eee; 
}

/* Estiliza o link (item clicável) */
#resultados li a {
    display: block; 
    text-decoration: none; 
    color: var(--text-dark); 
    padding: 8px 15px; 
    transition: background-color 0.2s;
}

/* Efeito de hover/foco no link */
#resultados li a:hover,
#resultados li a:focus {
    background-color: #f0f0f0; 
    color: var(--icon-color); 
    outline: none; 
}

#resultados li:last-child {
    border-bottom: none; 
}

#resultados p {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    margin: 5px 0;
}

/* --- LINKS DO RODAPÉ (WhatsApp) --- */
#link-whats-rodape a {
    font-size: 0.8em;
    color: var(--text-light);
    text-decoration: none;
    display: block;
    padding: 10px 0;
    transition: color 0.2s;
}
#link-whats-rodape a:hover {
    color: var(--icon-color);
}