@import url('styles.css');

/* --- Estilos específicos para a página Contato --- */

.contato {
    padding-top: 60px;
    padding-bottom: 100px;
}

/* --- 1. ITENS DE INFORMAÇÃO (Lado Esquerdo) --- */
/* Alinha o ícone do WhatsApp/Email com o texto */
.info-item {
    display: flex;
    align-items: flex-start;
    /* Alinha ao topo caso o texto seja grande */
    margin-bottom: 25px;
    gap: 15px;
    /* Espaço entre o ícone e o texto */
}

.info-item i {
    font-size: 1.4rem;
    color: var(--verde-claro);
    /* Puxa a cor verde do seu tema principal */
    width: 25px;
    /* Garante que todos os ícones ocupem a mesma largura */
    text-align: center;
    margin-top: 4px;
    /* Pequeno ajuste para alinhar com a primeira linha de texto */
}

.info-item p {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.info-item a {
    color: var(--texto-escuro);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.info-item a:hover {
    color: var(--verde-claro);
}

/* --- 2. FORMULÁRIO AVANÇADO (Lado Direito) --- */

/* Linha flexível para colocar Telefone e Email lado a lado */
.form-row {
    display: flex;
    gap: 20px;
    /* Espaço entre os dois campos */
    margin-bottom: 15px;
}

/* O grupo que segura o label + input dentro da linha */
.form-group {
    flex: 1;
    /* Faz os dois ocuparem 50% cada */
    display: flex;
    flex-direction: column;
}

/* Estilo para o campo de Seleção (Dropdown) */
.contato-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--texto-escuro);
    background-color: var(--branco);
    margin-bottom: 15px;
    /* Espaço abaixo dele */
    cursor: pointer;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.contato-form select:focus {
    border-color: var(--verde-claro);
    /* Fica verde quando clica */
}

/* Ajuste nos inputs para garantir altura igual ao select */
.contato-form input {
    margin-bottom: 15px;
    /* Garante espaçamento padrão */
}

/* Se o input estiver dentro de um grupo, remove a margem de baixo para o grupo controlar */
.form-group input {
    margin-bottom: 0;
}

/* --- 3. RESPONSIVIDADE (Celular) --- */
@media (max-width: 768px) {

    /* No celular, quebra a linha (Telefone em cima, Email embaixo) */
    .form-row {
        flex-direction: column;
        gap: 15px;
    }

    /* Aumenta a distância entre os ícones de contato e o formulário */
    .contato-content {
        gap: 60px;
    }
}