/* -------------------------------------------
   ARQUIVO: css/style_contato.css
   Estilo da página de contato - Tema "Tech/Dark"
   ------------------------------------------- */

/* O body usa as variáveis do style.css principal, 
  mas aplicamos um fundo escuro e fluido. 
*/
.contact-page-body {
    background: #ffffff; /* Um fallback */
    background: linear-gradient(145deg, var(--color-green-dark) 0%, #1b4e43 100%);
    color: var(--color-text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 60px 20px;
    /* Garante que o cursor customizado funcione */
    font-family: 'Inter', sans-serif;
}

/* Container principal do formulário com efeito de vidro
*/
.contact-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(168, 230, 207, 0.2);
    border-radius: 16px;
    padding: clamp(30px, 5vw, 50px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.contact-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-logo {
    max-width: 250px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.contact-header h2 {
    font-size: clamp(2em, 5vw, 2.5em);
    color: var(--color-green-light);
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-header p {
    font-size: 1.1em;
    color: var(--color-green-light);
    opacity: 0.8;
}

/* Estilo dos campos do formulário
*/
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--color-green-light);
    margin-bottom: 10px;
    font-size: 0.95em;
    opacity: 0.9;
}

.form-group label i {
    margin-right: 8px;
    width: 15px;
    text-align: center;
    color: var(--color-green-accent);
}

/* Layout em duas colunas para campos curtos 
*/
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Estilo unificado para inputs e textarea */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    color: var(--color-text-light);
    
    background: rgba(0, 0, 0, 0.3); /* Fundo "tech" transparente */
    border: 1px solid var(--color-green-medium);
    border-radius: 8px;
    
    transition: all 0.3s ease;
    cursor: none; /* Herda o cursor customizado */
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Efeito de Foco */
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-green-accent); /* Destaque ao focar */
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px rgba(168, 230, 207, 0.2);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* Botão de Envio (reaproveita o estilo do CTA) */
.cta-button-form {
    width: 100%;
    background: var(--color-green-medium);
    color: var(--color-text-light);
    padding: 18px 40px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    transition: all 0.3s ease;
    border: none;
    cursor: none; /* Herda o cursor customizado */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.cta-button-form:hover {
    background: var(--color-green-light);
    color: var(--color-green-dark);
    transform: scale(1.02);
}

/* Mensagens de Status (Sucesso e Erro) */
.status-msg {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    font-size: 1.05em;
    border: 1px solid transparent;
}

.status-msg.success {
    background-color: #d4edda; /* Verde Bootstrap */
    color: #155724;
    border-color: #c3e6cb;
}

.status-msg.error {
    background-color: #f8d7da; /* Vermelho Bootstrap */
    color: #721c24;
    border-color: #f5c6cb;
}

/* Link de "Voltar" */
.back-link {
    display: block;
    text-align: center;
    margin-top: 30px;
    color: var(--color-green-light);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.back-link:hover {
    color: #fff;
    text-decoration: underline;
}

.back-link i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.back-link:hover i {
    transform: translateX(-4px);
}


/* --- Media Query (Mobile) --- */
@media (max-width: 768px) {
    .contact-page-body {
        padding: 20px 10px;
    }

    .contact-container {
        padding: 30px 20px;
    }

    /* Empilha os campos */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0; /* O .form-group já tem margin-bottom */
    }

    .contact-logo {
        max-width: 200px;
    }
}