/* ===============================================
   FORMULÁRIO B2C - COPA DO MUNDO 2026
   Estilos customizados para o tema Copa 2026
   =============================================== */

/* Importação de fontes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===============================================
   RESET E CONFIGURAÇÕES BÁSICAS
   =============================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===============================================
   CONFIGURAÇÕES DO BODY E FUNDO
   =============================================== */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0f683a 0%, #1863dc 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Padrão de hexágonos do futebol no fundo */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(30deg, transparent, transparent 35px, rgba(255,255,255,0.03) 35px, rgba(255,255,255,0.03) 70px),
        repeating-linear-gradient(-30deg, transparent, transparent 35px, rgba(255,255,255,0.03) 35px, rgba(255,255,255,0.03) 70px);
    pointer-events: none;
    z-index: 1;
}

/* ===============================================
   HEADER COM ANIMAÇÃO
   =============================================== */

.header-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
    animation: slide 20s linear infinite;
}

@keyframes slide {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* ===============================================
   BOTÃO SUBMIT COM EFEITOS
   =============================================== */

.submit-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.submit-btn:hover::before {
    width: 300%;
    height: 300%;
}

/* ===============================================
   ANIMAÇÕES DE ENTRADA
   =============================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group,
.form-row {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: calc(var(--index) * 0.1s);
    opacity: 0;
}

.form-group { --index: 1; }
.form-row:nth-child(2) { --index: 2; }
.form-group:nth-child(3) { --index: 3; }
.form-row:nth-child(4) { --index: 4; }
.form-group:nth-child(5) { --index: 5; }
.form-group:nth-child(6) { --index: 6; }
.form-group:nth-child(7) { --index: 7; }

/* ===============================================
   SEÇÕES COM BARRAS LATERAIS
   =============================================== */

.section-title::before,
.section-title::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: #fec503;
}

.section-title::before { left: 8px; }
.section-title::after { right: 8px; }

/* ===============================================
   EFEITOS HOVER PARA OPÇÕES
   =============================================== */

.option:hover {
    transform: translateX(5px);
}

/* ===============================================
   RESPONSIVIDADE
   =============================================== */

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .header h1 {
        font-size: 1.8rem;
    }

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

    .section-title {
        margin-left: -10px;
        margin-right: -10px;
        font-size: 1rem;
    }
}