/*
 * Forgot / reset password: the pieces Metronic has no class for.
 * Used by views/backend/app_login.php (the 6-digit code step) and
 * views/backend/password_reset.php (choosing the new password).
 */

/* Same animated gradient and inputs as the sign-in page (app_login.php). */
.eq-auth-page {
    min-height: 100vh;
    background: linear-gradient(-300deg, darkviolet, #47559a, #25306a);
    background-size: 180% 180%;
    animation: eq-auth-gradient 18s ease infinite;
}
@keyframes eq-auth-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .eq-auth-page { animation: none; }
}
.eq-auth-card {
    width: 100%;
    max-width: 450px;
}
.eq-auth-page .form-control.form-control-solid {
    background-color: #dfdfdf;
}
.eq-auth-page .form-control.form-control-solid:focus {
    background-color: #c9c9c9;
    color: #262626;
}

/* The 6-digit code: big, spaced digits (the email shows it as "123 456"). */
.eq-code-input {
    letter-spacing: .5em;
    text-indent: .5em;              /* keeps the digits centred despite the trailing spacing */
    font-variant-numeric: tabular-nums;
}
.eq-code-input::placeholder {
    letter-spacing: .5em;
}

/* Password eye toggle inside .input-icon-right, as on the sign-in form. */
.eq-password-toggle {
    cursor: pointer;
    pointer-events: auto;
}

/* Account picker on the reset page (one email, several accounts). */
.eq-reset-account {
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.eq-reset-account:hover,
.eq-reset-account.active {
    border-color: #3699FF !important;
    background-color: #E1F0FF;
}