/* ==========================================================================
   Login / Create Account — media panel + operation panel

   desktop (>= 1280px) : screen split vertically, media panel and operation
                         panel each exactly half the viewport.
   tablet  (768–1279px) : the same even side-by-side split, just narrower.
   mobile  (< 768px)    : operation panel only, full bleed.
   ========================================================================== */

.auth {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--surface);
}

/* ---- Media panel -------------------------------------------------------- */

.auth__media {
    display: none;
}

.auth__media img {
    width: 100%;
    height: 100%;
    /* Centre the media and crop whatever does not fit. */
    object-fit: cover;
    object-position: center;
}

/* ---- Operation panel ---------------------------------------------------- */

.auth__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    padding-inline: var(--gutter);
    background: var(--surface);
}

.auth__panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin-inline: auto;
    padding-block: 40px 32px;
}

/* Holds the brand, heading and form; centred in the space above the footer,
   which lands the block slightly above the true middle as per the design. */
.auth__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.auth__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.auth__mark {
    width: 56px;
    height: 56px;
}

.auth__mark__account_created {
    width: 180px;
    height: 180px;
}

/* Heading + optional line of copy under it, kept closer together than the
   20px that separates the mark from the heading. */
.auth__heading {
    display: grid;
    gap: 10px;
}

.auth__title {
    /* Poppins, loaded by _AuthLayout, rather than the site-wide --font-display
       fallback chain (a system-font stack with no real face behind it) — the
       closest visual match available to the reference design's heading. */
    font-family: "Poppins", var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Create Account's own heading size — 30% smaller than the shared
   .auth__title used by Login and the rest of the auth flow, so it is a
   modifier applied only from CreateAccount.cshtml rather than a change to
   the shared rule above. */
.auth__title--sm {
    font-size: clamp(0.98rem, 2.24vw, 1.54rem);
    font-weight: 600;
}

.auth__subtitle {
    font-size: 14px;
    color: var(--ink-soft);
}

/* The address the code went to, on its own line under the copy. */
.auth__subtitle strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

/* "(Change Email)" — Verification's way back to CreateAccount/ForgotPassword
   (whichever started this flow) to fix a wrong address without restarting the
   whole visit. Quiet on purpose: the address above it is the important part. */
.auth__change-email {
    font-size: 12px;
    color: var(--link);
}

.auth__change-email:hover {
    color: var(--link-hover);
}

.auth__form {
    display: grid;
    gap: 24px;
}

/* Utility link under a field, e.g. "Forget Password". */
.auth__field-link {
    margin-top: -12px;
    font-size: 13px;
}

/* The design leaves a deliberate gap before the submit control. */
.auth__submit {
    margin-top: 24px;
}

/* Create Account's own rhythm: more room after the field above the
   checkbox, then the checkbox sits right against Continue below it — the
   reverse of every other .auth__form's even 24px throughout, so these two
   are scoped to Create Account alone rather than changed on the shared
   classes above. */
.field--terms {
    margin-top: 19px;
}

.auth__submit--tight {
    margin-top: -12px;
}

.auth__summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: #fdecea;
    color: var(--ink);
    font-size: 13px;
}

/* A circled "!" ahead of the message — ::before rather than markup baked
   into the text, since asp-validation-summary renders a plain <ul>/<li>
   with nothing to hang a real icon element off. Flex on .auth__summary
   itself is what lets this line up beside that <ul> instead of stacking
   above it: a ::before is a full flex item of its own element. */
.auth__summary::before {
    content: "!";
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.auth__summary ul {
    display: grid;
    gap: 4px;
}

/* MVC stamps this class on the summary when there is nothing to report. */
.auth__summary.validation-summary-valid {
    display: none;
}

.auth__note {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: #eaf3ff;
    color: #14448f;
    font-size: 13px;
}

.auth__footer {
    padding-top: 56px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-muted);
}

/* ---- Back control ------------------------------------------------------
   Pinned to the operation panel itself (.auth__panel is its positioning
   context) rather than flowing with .auth__panel-inner's centred column, so
   it sits a fixed 20px from the panel's own top and left edges — the left
   edge being exactly the media panel's right border — at every breakpoint,
   on the steps that replace the KGI mark with a way back (verification, set
   password). */

.auth__back {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    color: var(--ink);
}

.auth__back:hover {
    background: var(--surface-sunken);
    color: var(--ink);
    text-decoration: none;
}

.auth__back svg {
    width: 22px;
    height: 22px;
}

/* ---- One-time code — Verification --------------------------------------- */

/* Tighter than the default form rhythm: the boxes, the wait message and the
   resend control read as one block in the design. */
.auth__form--otp {
    gap: 16px;
}

.otp {
    display: flex;
    justify-content: center;
    gap: 8px;
    /* Without this the row is sized by the boxes' own widths and pushes past
       the panel gutter on narrow screens. */
    min-width: 0;
}

.otp__box {
    /* Sits at 56px wherever it fits and shrinks to share a narrow row. */
    flex: 0 1 56px;
    min-width: 0;
    height: 52px;
    padding: 0;
    background: var(--field-bg);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.otp__box:focus {
    background: var(--field-bg-focus);
    border-color: var(--field-border-focus);
    outline: none;
}

.otp__box:focus-visible {
    outline: none;
}

.otp--invalid .otp__box {
    background: var(--field-bg-focus);
    border-color: var(--danger);
}

.otp__status {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.otp__hint {
    font-size: 13px;
    color: var(--ink-muted);
}

.otp__error {
    font-size: 13px;
    color: var(--danger);
}

.otp__resend {
    padding: 4px 8px;
    background: none;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--link);
    cursor: pointer;
}

.otp__resend:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* While an escalating lockout is active (data-countdown-disable, site.js) —
   no point implying a tap would do anything before the lock actually lifts. */
.otp__resend:disabled {
    color: var(--ink-muted);
    cursor: default;
}

.otp__resend:disabled:hover {
    color: var(--ink-muted);
    text-decoration: none;
}

/* The Resend control when it sits inside the expired message rather than on its
   own line, so the sentence reads as one thing: "... request a new one. Resend". */
.otp__resend--inline {
    padding: 0 0 0 2px;
    font-size: inherit;
    vertical-align: baseline;
}

/* Fallback control for when the code cannot be auto-submitted (no JavaScript);
   site.js hides it once it takes that over. */
.otp__submit {
    margin-top: 8px;
}

/* ---- Contact Customer Care — a three-step wizard sharing one dialog, only
   one step showing at a time. See LockedAccountContactContentViewComponent. Same
   rule as app.css's own .wizard-step, duplicated here because _AppLayout
   (which defines that copy) is never loaded by this screen's _AuthLayout. */
.wizard-step {
    display: none;
}

.wizard-step.is-active {
    display: block;
}

/* The step indicator, its own full-width row below .dialog__head — bars
   filled up to and including the current step, the rest left at the neutral
   disabled tone. */
.wizard-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.wizard-progress__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--control-disabled-bg);
}

.wizard-progress__bar.is-filled {
    background: var(--ink);
}

/* Step 1's Email field once it arrives pre-filled and locked — see
   LockedAccountContactModel.EmailIsLocked. Same treatment as site.css's own
   .input:disabled, but for readonly: the value still has to submit, which a
   disabled field would not do. */
.input[readonly] {
    background: var(--control-disabled-bg);
    color: var(--ink-soft);
    cursor: default;
}

/* ---- Password rule checklist — Set Login Password ----------------------- */

.rules {
    display: grid;
    gap: 6px;
}

.rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-muted);
}

.rule svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--control-disabled-fg);
    transition: color 0.18s var(--ease);
}

.rule--met {
    color: #0CB97F;
}

.rule--met svg {
    color: var(--success);
}

/* The stricter checklist treatment: an unmet rule reads as an active red
   warning rather than neutral grey, with its own X icon swapped in for the
   shared check icon — scoped here rather than on the rules above, so any
   screen can opt in without affecting the others. Used by Set Login Password,
   Reset Login Password and (via the identical copy in app.css, since Change
   Password's _AppLayout never loads this file) Change Login Password. */
.rules--strict .rule {
    color: var(--danger);
}

.rules--strict .rule svg {
    color: var(--danger);
}

.rules--strict .rule--met {
    color: #0CB97F;
}

.rules--strict .rule--met svg {
    color: var(--success);
}

.rules--strict .rule__icon--unmet {
    display: inline-flex;
}

.rules--strict .rule__icon--met {
    display: none;
}

.rules--strict .rule--met .rule__icon--unmet {
    display: none;
}

.rules--strict .rule--met .rule__icon--met {
    display: inline-flex;
}

/* A solid circle in the row's own colour (red/green) with a white glyph on
   top of it, rather than the plain outline + coloured stroke every other
   page's checklist still uses — .rule__icon--circle carries the fill,
   .rule__icon--glyph the check/cross drawn on top of it. */
.rules--strict .rule__icon--circle {
    fill: currentColor;
    stroke: none;
}

.rules--strict .rule__icon--glyph {
    stroke: #fff;
}

/* Untouched — Input_Password is still empty. Every rule reads as a plain,
   ungraded checklist item instead of an error: grey, and back to the shared
   check icon in its original unfilled outline, regardless of whether an
   empty string would technically pass or fail each rule. Higher specificity
   than .rule--met above (three classes against two), so this wins once the
   field empties out again after having had text in it. */
.rules--strict.rules--empty .rule,
.rules--strict.rules--empty .rule--met {
    color: #999999;
}

/* The icons' own color — .rule svg above sets it directly on the <svg>, not
   inherited from .rule, so it needs its own override here too, or
   .rule__icon--circle/--glyph below still resolve currentColor to red/green. */
.rules--strict.rules--empty .rule svg {
    color: #999999;
}

.rules--strict.rules--empty .rule__icon--met {
    display: inline-flex;
}

.rules--strict.rules--empty .rule__icon--unmet {
    display: none;
}

.rules--strict.rules--empty .rule__icon--circle {
    fill: none;
    stroke: currentColor;
}

.rules--strict.rules--empty .rule__icon--glyph {
    stroke: currentColor;
}

/* ---- Tablet ---------------------------------------------------------------
   Same side-by-side split as desktop below, just narrower — see .auth__panel's
   width there for why this is a separate block rather than one shared with it. */

@media (min-width: 768px) {
    .auth {
        justify-content: flex-start;
    }

    /* Fills the viewport left of the operation panel and stays put while the
       panel scrolls, so tall forms never drag the media out of view. Exactly
       half the viewport — see .auth__panel below, its equal counterpart. */
    .auth__media {
        display: block;
        position: sticky;
        inset: auto;
        top: 0;
        align-self: flex-start;
        flex: 0 0 50%;
        width: 50%;
        height: 100vh;
        height: 100svh;
        min-width: 0;
    }

    /* Exactly half the viewport, the same as .auth__media beside it — a
       fixed 50%, not a share of whatever space the media panel leaves
       behind, so neither ever grows at the other's expense. padding-inline
       is reset to 0 here, overriding the base rule's own var(--gutter) —
       .auth__panel-inner's percentage width below is what leaves the
       margin on each side, so that margin is only ever the one proportion
       of the panel, never that plus the gutter on top of it. */
    .auth__panel {
        flex: 0 0 50%;
        width: 50%;
        max-width: 100%;
        padding-inline: 0;
        box-shadow: none;
    }

    /* 67% of .auth__panel, centred — leaves exactly 16.5% of the panel's
       own width clear on each side, matching the reference design. A
       percentage rather than a fixed max-width, so that 16.5% holds at
       every viewport rather than only the one width a fixed value was
       measured against. */
    .auth__panel-inner {
        width: 67%;
        margin-inline: auto;
    }

    .auth__panel-inner {
        padding-block: 56px 40px;
    }

    .auth__mark {
        width: 64px;
        height: 64px;
    }

    .otp {
        gap: 12px;
    }
}

/* ---- Desktop --------------------------------------------------------------
   Same even 50/50 split — and the same 67%-wide, 16.5%-margined panel
   interior — the tablet block above already sets up; this only grows what
   sits inside it. */

@media (min-width: 1280px) {
    /* The 67% width itself carries over unchanged from the tablet block
       above — still exactly 16.5% clear on each side here, just over a
       wider panel — only the vertical padding grows at this breakpoint. */
    .auth__panel-inner {
        padding-block: 64px 48px;
    }

    .auth__brand {
        gap: 26px;
        margin-bottom: 80px;
    }

    .auth__mark {
        width: 72px;
        height: 72px;
    }

    .auth__submit {
        margin-top: 32px;
    }

    /* Overrides the 32px above — see the remarks on .auth__submit--tight
       where it is first declared. */
    .auth__submit--tight {
        margin-top: -12px;
    }

    .auth__footer {
        padding-top: 80px;
    }
}


/* ---- Account created — the confirmation step ---------------------------- */

/* Stands in for the confirmation artwork. Sized and spaced as the design draws
   it, so dropping an illustration inside changes nothing around it. */
.success__badge {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--surface-sunken);
}

/* ---- "Password Reset Successful" dialog — Reset Login Password ----------
   Same classes, same look, as .wizard-success in app.css (the signed-in
   Change Password screen's own version of this) — duplicated here rather
   than shared, since app.css is never loaded on this auth-layout page and
   the two are otherwise unrelated flows. */
.wizard-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.wizard-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    background: var(--success);
    color: var(--ink-inverse);
    border-radius: 50%;
}

.wizard-success__icon svg {
    width: 28px;
    height: 28px;
}

.wizard-success__title {
    margin: 0;
    font-size: 18px;
}

.wizard-success__body {
    margin: 0 0 8px;
    color: var(--ink-muted);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Legal pages — the standalone reading view

   In the browser this copy is normally shown in a dialog; these styles are for
   opening /terms-of-service directly, or following the link with JavaScript off.
   -------------------------------------------------------------------------- */

.legal {
    max-width: 760px;
    margin-inline: auto;
    padding: 56px var(--gutter) 80px;
}

.legal__title {
    margin-bottom: 24px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

.legal__body {
    display: grid;
    gap: 16px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.legal__back {
    margin-top: 40px;
    font-size: 14px;
}