/* Estilos complementares para o formulário transparente */

/* Estilo para options do select */
.form-group select option {
    background: #2c1810;
    color: #fff;
    padding: 0.5rem;
}

/* Animação de entrada do formulário */
.hero-form {
    animation: fadeInUp 1s ease-out 0.5s both;
}

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

/* Efeito hover nos inputs */
.form-group input:hover,
.form-group select:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

/* Estado válido do input */
.form-group input:valid {
    border-color: rgba(46, 204, 113, 0.6);
}

/* Estado inválido do input */
.form-group input:invalid:not(:placeholder-shown) {
    border-color: rgba(231, 76, 60, 0.6);
}

/* Efeito de loading no botão */
.cta-primary.loading {
    position: relative;
    color: transparent;
}

.cta-primary.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #2c1810;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Melhorias para acessibilidade */
.form-group input:focus + .form-icon,
.form-group select:focus + .form-icon {
    color: #ffd700;
}

/* Efeito de partículas no fundo do card (opcional) */
.hero-form::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: moveParticles 20s linear infinite;
    pointer-events: none;
}

@keyframes moveParticles {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-20px, -20px);
    }
}

/* Responsividade adicional */
@media (max-width: 360px) {
    .hero-form {
        margin: 1rem;
        padding: 1.2rem;
    }
    
    .form-title {
        font-size: 1.3rem;
    }
    
    .form-group input,
    .form-group select {
        font-size: 0.9rem;
    }
    
    .cta-primary {
        font-size: 1rem;
        padding: 1rem;
    }
}