/* Username validation styles */

/* When username is taken, add visual feedback to the continue button */
.wizard-navigation .nav-btn.disabled.username-taken {
    background: #dc3545 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.wizard-navigation .nav-btn.disabled.username-taken:hover {
    background: #dc3545 !important;
    transform: none !important;
}

/* Add a warning message near the button when username is taken */
.username-taken-warning {
    display: none;
    color: #dc3545;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    font-weight: 500;
}

.wizard-step.active[data-step="1"] .username-taken-warning {
    display: block;
}

/* Enhance the username availability indicator */
.username-availability.taken {
    color: #dc3545;
    font-weight: 600;
}

.username-availability.taken::before {
    content: "❌ ";
}

.username-availability.available::before {
    content: "✅ ";
}

.username-availability.checking::before {
    content: "⏳ ";
}

/* Add shake animation for taken username */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.input-group.error.username-taken input {
    animation: shake 0.5s;
    border-color: #dc3545;
}

/* Visual feedback for the input field */
.input-group .username-availability.taken ~ input {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05);
}

.input-group .username-availability.available ~ input {
    border-color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.05);
}