/* ============================================================
    1. FORMULÁRIO DE CONTACTOS
        1.1 SECÇÃO PRINCIPAL
        1.2 CABEÇALHO
        1.3 LAYOUT
        1.4 CARDS
        1.5 FORMULÁRIO
        1.6 VALIDAÇÃO
        1.7 ERROS
        1.8 CONTADOR
        1.9 BOTÃO
        1.10 INFO CONTACTOS
        1.11 REDES SOCIAIS
    2. TOAST
        2.1 CONTAINER
        2.2 TOAST
        2.3 ANIMAÇÕES
    3. LINKS
    4. RESPONSIVIDADE
        4.1 TABLET
        4.2 MOBILE
        4.3 MOBILE PEQUENO
============================================================ */



/* ============================================================
   1. FORMULÁRIO DE CONTACTOS
============================================================ */



/* ============================================================
   1.1 SECÇÃO PRINCIPAL
============================================================ */

.contact {

    /* Ocupa toda a largura */
    max-width: 100%;

    /* Espaçamento interno */
    padding: 100px 20px;

    /* Fundo principal */
    background: var(--bg-primary);
}



/* ============================================================
   1.2 CABEÇALHO
============================================================ */

.section-header {

    /* Centralizar texto */
    text-align: center;

    /* Espaço inferior */
    margin-bottom: 50px;
}


/* Título */
.section-header h2 {

    /* Tamanho grande */
    font-size: 2.5em;

    /* Cor destaque */
    color: var(--accent);

    /* Espaço inferior */
    margin-bottom: 15px;
}


/* Descrição */
.section-header p {

    /* Cor secundária */
    color: var(--text-secondary);

    /* Tamanho */
    font-size: 1.1em;
}



/* ============================================================
   1.3 LAYOUT
============================================================ */

.contact-container {

    /* Largura máxima */
    max-width: 1500px;

    /* Centralizar */
    margin: 0 auto;

    /* Grid */
    display: grid;

    /* Formulário maior que info */
    grid-template-columns: 1.5fr 1fr;

    /* Espaço entre colunas */
    gap: 50px;
}



/* ============================================================
   1.4 CARDS
============================================================ */

.contact-form,
.contact-info {

    /* Fundo */
    background: var(--bg-secondary);

    /* Espaçamento interno */
    padding: 40px;

    /* Bordas arredondadas */
    border-radius: 20px;

    /* Sombra */
    box-shadow: 0 10px 40px rgba(18, 123, 184, 0.589);

    /* Borda */
    border: 1px solid var(--border);
}



/* ============================================================
   1.5 FORMULÁRIO
============================================================ */

/* Grupo */
.form-group {

    /* Espaço inferior */
    margin-bottom: 25px;
}


/* Label */
.form-group label {

    /* Ficar em linha própria */
    display: block;

    /* Espaço abaixo */
    margin-bottom: 8px;

    /* Peso */
    font-weight: 600;

    /* Cor */
    color: var(--text-primary);
}


/* Campo obrigatório */
.required {

    color: var(--danger);

    --danger: #ff0000;
}


/* Wrapper do input */
.input-wrapper {

    position: relative;
}


/* Inputs */
.form-group input,
.form-group select,
.form-group textarea {

    /* Ocupa largura toda */
    width: 100%;

    /* Espaço interno */
    padding: 14px 45px 14px 16px;

    /* Borda */
    border: 2px solid var(--border);

    /* Cantos */
    border-radius: 12px;

    /* Texto */
    font-size: 1em;
    font-family: inherit;

    /* Fundo */
    background: var(--bg-primary);

    /* Cor */
    color:black;

    /* Transição */
    transition: all 0.3s;
}


/* Focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    /* Remove outline default */
    outline: none;

    /* Cor da borda */
    border-color: var(--accent);

    /* Glow */
    box-shadow: 0 0 0 4px rgba(26,122,191,.15);
}


/* Textarea */
.form-group textarea {

    /* Permitir aumentar verticalmente */
    resize: vertical;

    /* Altura mínima */
    min-height: 120px;

    color:black;
}



/* ============================================================
   1.6 VALIDAÇÃO
============================================================ */

/* Ícone */
.input-icon {

    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 1.2em;

    /* Inicialmente invisível */
    opacity: 0;

    transition: opacity 0.3s;
}


/* Estado válido */
.form-group.valid .input-icon {

    opacity: 1;

    color: var(--success);

    --success: #2fb950;
}


/* Símbolo válido */
.form-group.valid .input-icon::before {

    content: '✓';
}


/* Estado inválido */
.form-group.invalid .input-icon {

    opacity: 1;

    color: var(--danger);

    --danger: #ff0000;
}


/* Símbolo inválido */
.form-group.invalid .input-icon::before {

    content: '✗';
}


/* Borda válida */
.form-group.valid input,
.form-group.valid select,
.form-group.valid textarea {

    border-color: var(--success);

    --success: #2fb950;
}


/* Borda inválida */
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {

    border-color: var(--danger);

    --danger: #ff0000;
}



/* ============================================================
   1.7 ERROS
============================================================ */

.error-message {

    display: block;

    color: var(--danger);

    --danger: #ff0000;

    font-size: 0.85em;

    margin-top: 6px;

    min-height: 20px;

    opacity: 0;

    transition: opacity 0.3s;
}


/* Mostrar erro */
.form-group.invalid .error-message {

    opacity: 1;
}



/* ============================================================
   1.8 CONTADOR
============================================================ */

.char-counter {

    /* Alinhar à direita */
    text-align: right;

    font-size: 0.85em;

    color: var(--text-secondary);

    margin-top: 6px;
}


/* Aviso */
.char-counter.warning {

    color: rgb(255, 167, 5);
}


/* Erro */
.char-counter.error {

    color: var(--danger);

    --danger: #ff0000;
}



/* ============================================================
   1.9 BOTÃO
============================================================ */

.submit-btn {

    /* Largura total */
    width: 100%;

    /* Espaçamento */
    padding: 16px 32px;

    /* Fundo */
    background: linear-gradient(
        135deg,
        var(--accent),
        var(--accent-2)
    );

    color: white;

    /* Sem borda */
    border: none;

    border-radius: 12px;

    /* Texto */
    font-size: 1.1em;
    font-weight: 600;

    /* Flex */
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    transition: all 0.3s;
}


/* Hover */
.submit-btn:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(13, 62, 97, 0.719);
}


/* Desativado */
.submit-btn:disabled {

    opacity: 0.6;
}



/* Loading */
.submit-btn.loading .btn-text::after {

    content: '';

    display: inline-block;

    width: 12px;
    height: 12px;

    border: 2px solid white;

    border-top-color: transparent;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

    margin-left: 8px;
}


/* Spinner */
@keyframes spin {

    to {
        transform: rotate(360deg);
    }
}



/* ============================================================
   1.10 INFO CONTACTOS
============================================================ */

.contact-info h3 {

    color: var(--accent);

    margin-bottom: 25px;
}


/* Item */
.info-item {

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border);

    color: var(--text-primary);
}


/* Último item */
.info-item:last-of-type {

    border-bottom: none;
}


/* Ícone */
.info-item .icon {

    font-size: 1.5em;
}



/* ============================================================
   1.11 REDES SOCIAIS
============================================================ */

.social-links {

    display: flex;

    gap: 15px;

    margin-top: 30px;
}


/* Botões */
.social-links a {

    flex: 1;

    padding: 12px;

    background: rgb(26, 144, 199);

    border: 1px solid var(--border);

    border-radius: 10px;

    text-align: center;

    text-decoration: none;

    color: rgb(255, 255, 255);

    font-weight: 600;

    transition: all 0.3s;
}


/* Hover */
.social-links a:hover {

    background: var(--accent);

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(13, 62, 97, 0.719);
}



/* ============================================================
   2. TOAST
============================================================ */



/* ============================================================
   2.1 CONTAINER
============================================================ */

.toast-container {

    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    gap: 15px;
}



/* ============================================================
   2.2 TOAST
============================================================ */

.toast {

    background: var(--bg-secondary);

    padding: 20px 25px;

    border-radius: 12px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.685);

    display: flex;
    align-items: center;

    gap: 15px;

    min-width: 300px;
    max-width: 400px;

    border-left: 4px solid;

    animation:
        slideInRight 0.4s ease,
        fadeOut 1.5s ease 2.6s forwards;
}


/* Toast sucesso */
.toast-success {

    border-left-color: var(--success);

    --success: #2fb950;
}


/* Toast erro */
.toast-error {

    border-left-color: var(--danger);

    --danger: #ff0000;
}


/* Ícone */
.toast-icon {

    font-size: 1.8em;

    flex-shrink: 0;
}


/* Conteúdo */
.toast-content {

    flex: 1;
}


/* Título */
.toast-title {

    font-weight: 600;

    margin-bottom: 4px;

    color: var(--text-primary);
}


/* Mensagem */
.toast-message {

    font-size: 0.9em;

    color: var(--text-secondary);
}


/* Botão fechar */
.toast-close {

    font-size: 1.3em;

    color: var(--text-secondary);

    background: none;

    border: none;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    transition: all 0.3s;
}


/* Hover */
.toast-close:hover {

    background: var(--bg-primary);
}



/* ============================================================
   2.3 ANIMAÇÕES
============================================================ */

/* Entrada */
@keyframes slideInRight {

    from {

        transform: translateX(400px);

        opacity: 0;
    }

    to {

        transform: translateX(0);

        opacity: 1;
    }
}


/* Saída */
@keyframes fadeOut {

    to {

        opacity: 0;

        transform: translateX(400px);
    }
}



/* ============================================================
   3. LINKS
============================================================ */

/* Link personalizado */
.privacy-link {

    color: var(--accent);

    text-decoration: none;

    font-weight: 600;

    transition: color 0.2s;
}


/* Hover */
.privacy-link:hover {

    color: var(--accent-2);
}



/* ============================================================
   4. RESPONSIVIDADE
============================================================ */



/* ============================================================
   4.1 TABLET
============================================================ */

@media (max-width: 1024px) {

    .contact-container {

        /* Layout vertical */
        grid-template-columns: 1fr;

        /* Menos espaço */
        gap: 35px;
    }

    .contact-form,
    .contact-info {

        padding: 35px;
    }
}



/* ============================================================
   4.2 MOBILE
============================================================ */

@media (max-width: 768px) {

    .contact {

        padding: 70px 20px;
    }

    .section-header {

        margin-bottom: 40px;
    }

    .section-header h2 {

        font-size: 2rem;
    }

    .section-header p {

        font-size: 1rem;
    }

    .contact-form,
    .contact-info {

        padding: 25px;
    }

    .social-links {

        flex-direction: column;
    }

    .toast-container {

        right: 15px;
        left: 15px;
    }

    .toast {

        min-width: unset;

        max-width: 100%;
    }
}



/* ============================================================
   4.3 MOBILE PEQUENO
============================================================ */

@media (max-width: 480px) {

    .contact {

        padding: 60px 15px;
    }

    .section-header h2 {

        font-size: 1.7rem;
    }

    .contact-form,
    .contact-info {

        padding: 20px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {

        padding: 12px 40px 12px 14px;

        font-size: 0.95rem;
    }

    .submit-btn {

        font-size: 1rem;

        padding: 14px 20px;
    }

    .toast {

        padding: 16px 18px;
    }

    .toast-title {

        font-size: 0.95rem;
    }

    .toast-message {

        font-size: 0.85rem;
    }
}


    /* 14.2 CURSOR - DESATIVAR NO MOBILE */
    @media (max-width: 900px) {

        .cursor,
        .cursor-ring,
        .trail,
        .particle {
            display: none !important;
        }

        /* restaurar cursor normal */
        * {
            cursor: auto !important;
        }
    }