* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: sans-serif; 
}

body {
    background-color: #3a2d46;
    background-image: url('fundo_principal.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container { 
    width: 100%; 
    max-width: 400px; 
    padding: 20px; 
}

.form-container {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

form h1 { 
    text-align: center; 
    margin-bottom: 25px; 
    color: #e0e0e0; 
}

form input { 
    width: 100%; 
    padding: 12px 15px; 
    margin-bottom: 15px; 
    border: 1px solid #444; 
    background-color: #333; 
    color: #fff; 
    border-radius: 5px; 
    font-size: 16px; 
}

form input::placeholder { 
    color: #888; 
}

form button { 
    width: 100%; 
    padding: 12px; 
    border: none; 
    background-color: #bb86fc; 
    color: #121212; 
    font-size: 18px; 
    font-weight: bold; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
}

form button:hover { 
    background-color: #a062f8; 
}

form p { 
    text-align: center; 
    margin-top: 20px; 
    color: #aaa; 
    text-shadow: 0 0 5px #000; 
}

form p a { 
    color: #bb86fc; 
    text-decoration: none; 
    font-weight: bold; 
}

form p a:hover { 
    text-decoration: underline; 
}

.form-logo {
    display: block;
    width: 220px;
    margin: 0 auto 30px auto;
    filter: drop-shadow(0 0 10px rgba(187, 134, 252, 0.4));
}

/* --- ESTILO ATUALIZADO PARA O BOTÃO VIP COM MAIS DESTAQUE --- */
.vip-button {
    display: block;
    text-align: center;
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    border: none; /* Removendo a borda para um look mais sólido */
    background-color: #03dac6; /* Uma cor de destaque (ciano), que contrasta bem com o roxo */
    color: #121212; /* Texto escuro para melhor leitura */
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(3, 218, 198, 0.6); /* Sombra correspondente à nova cor */
    animation: pulse 2s infinite; /* Adicionando uma animação de pulso para chamar atenção */
}

.vip-button:hover {
    background-color: #01a998; /* Ciano mais escuro no hover */
    box-shadow: 0 0 15px rgba(3, 218, 198, 1); /* Sombra mais intensa */
    animation-play-state: paused; /* Pausa a animação quando o mouse está sobre o botão */
}

/* Animação de pulso para chamar a atenção */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(3, 218, 198, 0.6);
    }
    50% {
        transform: scale(1.02); /* Aumenta ligeiramente o tamanho do botão */
        box-shadow: 0 0 15px rgba(3, 218, 198, 1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(3, 218, 198, 0.6);
    }
}