/* === Cyberpunk Access Code Form Styles === */

/* Container */
.cyberpunk-form-container {
    max-width: 350px;
    margin: 2em auto;
    padding: 2em;
    background: #111;
    border: 2px solid #0ff;
    border-radius: 12px;
    box-shadow: 0 0 20px #0ff, 0 0 40px #0ff66a;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
}

.cyberpunk-form-container input[type="text"],
.home .cyberpunk-form-container input[type="text"] {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
    padding: 1em;
    margin: 0 auto;
    display: block;
    background-color: #222 !important;
    border: 2px solid #39ff14 !important;
    color: #0ff !important;
    font-size: 0.9em !important;
    text-align: center;
    text-transform: uppercase;
    border-radius: 6px !important;
    box-shadow: 0 0 10px #39ff14 !important;
    outline: none !important;
}

.cyberpunk-form-container button[type="submit"],
.home .cyberpunk-form-container button[type="submit"] {
    background: #ff00ff;
    color: #fff;
    padding: 0.6em 1.5em;
    font-size: 1em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cyberpunk-form-container button[type="submit"]:hover,
.home .cyberpunk-form-container button[type="submit"]:hover {
    background: #ff33ff;
    transform: scale(1.05);
}

 /* Error animation styles */
   .cyberpunk-form-container button.cyberpunk-error-animate {
        background-color: #ff0033 !important;
        box-shadow: 0 0 15px #ff0033, 0 0 25px #ff0033 !important;
        animation: shake 0.5s ease;
    }
    @keyframes shake {
        0% { transform: translateX(0); }
        20% { transform: translateX(-5px); }
        40% { transform: translateX(5px); }
        60% { transform: translateX(-5px); }
        80% { transform: translateX(5px); }
        100% { transform: translateX(0); }
    }
    </style>';
}
add_action('wp_head', 'cyberpunk_form_styles');