/**
 * =============================================
 *  Nxt Mobile Auth — Forgot Password Form
 *  Version: 1.3.6  |  Premium Dark Theme
 * =============================================
 * Extends login-form.css. Only forgot-password-specific
 * overrides are defined here.
 */

/* Step container transitions */
#nxt-forgot-password-form-container #nxt-step-1-mobile,
#nxt-forgot-password-form-container #nxt-step-2-password {
    animation: cma-slide-in 0.35s ease;
}

@keyframes cma-slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Next button — slightly smaller than submit */
#nxt-fp-next-btn {
    margin-top: 4px;
}

/* Mobile message under mobile field */
#nxt-fp-mobile-message {
    min-height: 18px;
}

/* Password message under confirm password field */
#nxt-fp-password-message {
    min-height: 18px;
}

/* Success state for request completion */
#nxt-fp-success-message {
    padding: 16px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    margin-top: 12px;
    animation: cma-fade-in 0.3s ease;
}

@keyframes cma-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success message for forgot password */
#nxt-fp-success-message.success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Error message for forgot password */
#nxt-fp-success-message.error {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}