/* --- Estilos específicos para a página do formulário e seus componentes --- */

/* Container principal do formulário */
.form-container {
    background-color: #ffffff;
    padding: 2rem; 
    margin: 2rem auto; 
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.05); 
    max-width: 600px; 
}

/* Título do formulário (H2) */
.form-container h2 {
    text-align: center;
    color: #1e3a8a; 
    margin-bottom: 2rem; 
    font-size: 1.8rem;
    font-weight: 700;
}

/* Agrupamento de cada campo do formulário (label + input) */
.form-group {
    margin-bottom: 1.5rem; 
}

/* Estilo para os rótulos (labels) */
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4a5568; 
    font-size: 0.875rem;
}

/* Estilo padrão para todos os campos de entrada e seleção */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%; 
    padding: 0.75rem 1rem; 
    border: 1px solid #cbd5e1; 
    border-radius: 8px; 
    font-size: 1rem;
    font-family: 'Inter', sans-serif; /* Garante consistência de fonte */
    box-sizing: border-box; /* Garante que padding e border não alterem a largura total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group textarea {
    resize: vertical; /* Permite que o usuário redimensione a altura do campo de texto */
    min-height: 120px;
}

/* Efeito de foco para os campos de entrada, dando feedback visual ao usuário */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #3b82f6; 
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25); 
    outline: none; 
}

/* Botão de Envio */
.form-group input[type="submit"] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: block; 
    width: 100%;
    margin-top: 1rem;
}

.form-group input[type="submit"]:hover {
    box-shadow: 0 7px 14px rgba(22, 163, 74, 0.3);
    transform: translateY(-2px); 
}

/* --- Slider de Quantia --- */
.range-slider-container {
    margin-bottom: 1.5rem; 
}
#quantia_slider {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none; 
    appearance: none;
    height: 8px; 
    background: #e2e8f0; 
    outline: none;
    border-radius: 9999px;
}
/* Bolinha de controle do slider para Chrome/Safari */
#quantia_slider::-webkit-slider-thumb { 
    -webkit-appearance: none;
    appearance: none;
    width: 20px; 
    height: 20px; 
    background: #3b82f6; 
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid white; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}
/* Bolinha de controle do slider para Firefox */
#quantia_slider::-moz-range-thumb { 
    width: 20px; 
    height: 20px; 
    background: #3b82f6; 
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid white; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Display que mostra o valor selecionado */
#valor_selecionado_display {
    font-weight: 700;
    color: #1e3a8a; 
    text-align: center;
    margin-top: 0.75rem; 
    font-size: 1.25rem; 
}

/* --- Mensagens de Feedback (Sucesso/Erro) --- */
.message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px; 
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
}
.success {
    background-color: #d1fae5; 
    color: #065f46;  
    border-color: #6ee7b7; 
}
.error {
    background-color: #fee2e2; 
    color: #991b1b; 
    border-color: #fca5a5; 
}

/* --- Link de Voltar --- */
.back-link {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
}
.back-link:hover {
    text-decoration: underline;
    color: #1e3a8a;
}

/* Estilo para a logo no formulário (classe '.logo' no formulario.php) */
header .header-logo-form {
    max-height: 200px; /* Reduz o tamanho da logo no cabeçalho do formulário */
    width: auto; /* Mantém a proporção da imagem */
    display: block; /* Garante que ela se comporte como um bloco para margens automáticas */
    margin: 0 auto; /* Centraliza a logo horizontalmente no cabeçalho do formulário */
}

/* Ajustes para o texto do cabeçalho no formulário */
header .subheadline {
    text-align: center; /* Garante que o texto fique centralizado no cabeçalho do formulário */
    font-size: 1.2rem; /* Ajusta o tamanho da fonte para o formulário */
    margin-top: 10px; /* Adiciona uma pequena margem acima do texto, se necessário */
}

/* Pequeno ajuste no header do formulário para reduzir padding se necessário */
.formulario-header-ajuste { /* Adicionar esta classe ao header no formulario.php */
    padding: 15px 16px; /* Reduz o padding vertical para compactar o header do formulário */
}