/* P10 Password Reset Page Styles */

/* Form Input Transition (same as login.css) */
input:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.1), 0 2px 4px -1px rgba(34, 197, 94, 0.06);
}

/* Eye Icon Animation */
.eye-toggle-btn svg {
    transition: color 0.2s ease;
}

.eye-toggle-btn:hover svg {
    color: #4b5563;
}

/* Success Checkmark Animation */
.checkmark-animation {
    animation: checkmarkScaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes checkmarkScaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Step Transition Fade */
.step-fade-in {
    animation: stepFadeIn 0.3s ease-in-out forwards;
}

@keyframes stepFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Password Strength Bar Colors */
#strength-bar.strength-weak {
    background-color: #ef4444;
    width: 25%;
}

#strength-bar.strength-medium {
    background-color: #f59e0b;
    width: 60%;
}

#strength-bar.strength-strong {
    background-color: #22c55e;
    width: 100%;
}

/* Requirements Checklist States */
.req-met {
    color: #22c55e;
}

.req-met .req-icon {
    display: none;
}

.req-met .req-check {
    display: inline-block;
}

.req-unmet .req-check {
    display: none;
}

/* Resend Button Cooldown */
.resend-cooldown {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}