/*
    Forgot Password — standalone split-screen route (/forgot-password).

    Four steps rendered server-side on one page (email -> code -> password -> done; see
    ForgotPassword.cshtml.cs), no AJAX. Imports the shared chrome from components/auth-shell.css
    (reset, grid, image panel, font vars, field recipe, focus ring, links) plus the shared button
    system from components/buttons.css. This file holds ONLY what is unique to this route: the
    vertically-centred panel (same recipe as login-page.css), the step-specific text, the single
    code field, and the success state.

    Deliberately OFF-THEME — see the header of auth-shell.css for why.
*/

.fp-page {
    --page-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --page-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --page-font-body-strong: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Panels: image left, form right — same placement as /login and /register ---- */
.fp-page .auth-page__panel--image { grid-column: 1; grid-row: 1; }
.fp-page__panel--form { grid-column: 2; grid-row: 1; }

@media (max-width: 1023px) {
    .fp-page .auth-page__grid { grid-template-columns: 0.7fr 1fr; }
}

/* Same asset /login uses, so the standalone-auth family reads as one system. */
.fp-page .auth-page__panel--image {
    background-color: var(--button-pressed);
    background-image: url('/images/login-bg.png');
}

/*
    Spacer/form/spacer rows centre the column vertically without breaking scroll once content
    outgrows the viewport (the code step's countdown, or an open error banner) — same recipe as
    login-page.css's .login-page__panel--form.
*/
.fp-page__panel--form {
    display: grid;
    grid-template-rows: 1fr auto 0.85fr;
    justify-items: center;
    padding: 48px 64px;
}

.fp-page__form-col {
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-width: 400px;
}

.fp-page__subtitle {
    margin: 0 0 32px;
}

/* Every primary CTA on this narrow single-column form fills its width. */
.fp-page__submit {
    width: 100%;
}

.fp-resend-form {
    margin-top: 0;
}

/* The 6-digit code is real separate boxes now (otp-verify.css's .otp-inputs/.otp-box, the same
   recipe the login page's two-factor modal uses) rather than one wide text field — nothing of
   this page's own to add beyond centring the row under the label. */
.fp-page .otp-inputs {
    justify-content: flex-start;
}

.fp-countdown {
    margin: -4px 0 20px;
    font-family: var(--page-font-body);
    font-size: 13px;
    color: var(--text-3);
}

.fp-countdown--expired { color: var(--error-active); }

.fp-footer-note {
    margin-top: 20px;
    text-align: center;
    font-family: var(--page-font-body);
    font-size: 14px;
    color: var(--text-3);
}

/* ---- Success state, mirroring register-page.css's .reg-success recipe ---- */
.fp-success { text-align: center; }
.fp-success__badge { display: block; margin: 0 auto 24px; }

.fp-success__title {
    font-family: var(--page-font-heading);
    font-size: 24px;
    font-weight: var(--fw-600);
    color: var(--heading);
    margin: 0 0 10px;
}

.fp-success__text {
    font-family: var(--page-font-body);
    font-size: 15px;
    color: var(--text-3);
    line-height: 1.6;
    margin: 0 0 28px;
}

@media (max-width: 767px) {
    .fp-page__panel--form {
        height: auto;
        min-height: 100dvh;
        padding: 40px 24px;
    }
}