/* Add additional form styles */

.form-container {
    border: 2px solid var(--primary-color);
    transition: all 0.3s ease;
    position: relative;
}

/* Make sure the form is visible with a distinctive border */
#school-registration-form.form-container {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

/* Make sure the confirmation message container is properly visible */
#registration-confirmation {
    background-color: #1a1a2e !important;
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 30px !important;
    border-radius: 12px !important;
    margin: 50px auto 100px auto !important;
    max-width: 700px !important;
    transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* Enhanced code box styles */
.code-box {
    background-color: #f7f7f7 !important;
    border: 3px solid var(--primary-color) !important;
    padding: 20px 15px !important;
    border-radius: 8px !important;
    font-size: 26px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 15px auto !important;
    max-width: 320px !important;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1) !important;
    letter-spacing: 2px !important;
    font-family: 'Courier New', monospace !important;
    color: #333 !important;
    display: block !important;
}

/* Additional animation for visibility */
@keyframes highlightBorder {
    0%, 100% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); }
    50% { box-shadow: 0 0 30px rgba(138, 43, 226, 0.8); }
}

.highlight-container {
    animation: highlightBorder 2s infinite;
}