/* ==========================================================================
   ANBOOST UI — platform sign-in pages (/login, /register, /login/forget-password). Scoped to body.au-authp.
   Builds on anboost-ui.css and checkout.css (the flow hero and the account step's au-auth / au-otp components).
   ========================================================================== */

/* One centred column for the hero and the card: the page's .au-wrap (1200px, content at its inline start) is narrowed to
   the form's width, so the content sits in the middle of the viewport in both directions. */
.au-authp { --au-authp-col: 520px; }
.au-authp:has(.au-authp-card--wide) { --au-authp-col: 760px; }
.au-authp .au-authp-hero > .au-wrap, .au-authp .au-authp-body { max-width: calc(var(--au-authp-col) + 2 * var(--gutter)); }
.au-authp .au-authp-body { padding-bottom: clamp(64px, 8vw, 110px); }
.au-authp .au-authp-card { display: grid; gap: 16px; }
.au-authp .au-grid-2 { align-items: start; }
.au-authp .au-field { align-content: start; }
.au-authp .au-authp-card > .au-alert { margin: 0; }
.au-authp .au-auth__panel .au-alert:focus { outline: none; }
.au-authp .au-input[aria-invalid="true"] { border-color: #D92D20; box-shadow: 0 0 0 4px rgba(217, 45, 32, .1); }
.au-authp .au-auth__row .au-check { align-items: center; padding-block: 0; }
.au-authp .au-auth__row .au-check input { margin: 0; }
.au-authp .au-auth__panel > .au-btn { margin-top: 4px; }

/* Show / hide password (as the account pages) */
.au-authp .au-pass { position: relative; }
.au-authp .au-pass .au-input { padding-inline-end: 54px; }
.au-authp .au-pass__toggle { position: absolute; top: 50%; inset-inline-end: 3px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--mute); cursor: pointer; }
.au-authp .au-pass__toggle:hover, .au-authp .au-pass__toggle.is-on { color: var(--teal-ink); }
.au-authp .au-pass__toggle .au-i { font-size: 19px; }

/* Field help and errors */
.au-authp .au-field .au-hint { margin: 0; font-size: 13.5px; }
.au-authp .au-authp-err { margin: 0; color: #B42318; font-size: 13.5px; font-weight: 600; }
.au-authp .au-authp-err[hidden] { display: none; }
.au-authp .au-authp-wa { display: inline-flex; align-items: center; gap: 7px; }
.au-authp .au-authp-wa .au-i { font-size: 17px; color: #128C7E; }
.au-authp .au-authp-generate { justify-self: start; gap: 7px; border: 0; padding: 0; background: none; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.au-authp .au-authp-generate .au-i { font-size: 16px; }
.au-authp .au-authp-terms { padding-block: 4px; font-size: 14.5px; }
.au-authp .au-authp-terms a { color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Secondary lines */
.au-authp .au-authp-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14.5px; }
.au-authp .au-authp-alt .au-link { gap: 6px; }
.au-authp .au-authp-alt .au-link .au-i { font-size: 16px; }
.au-authp .au-authp-or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--mute); font-size: 13.5px; }
.au-authp .au-authp-or::before, .au-authp .au-authp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Forgot password: "check your email" */
.au-authp .au-authp-sent { display: grid; justify-items: start; gap: 10px; }
.au-authp .au-authp-sent:focus { outline: none; }
.au-authp .au-authp-sent__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--teal-soft); color: var(--teal-ink); font-size: 24px; }
.au-authp .au-authp-sent__title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.35; }
.au-authp .au-authp-sent .au-btn { margin-top: 6px; }
.au-authp .au-authp-again { border-top: 1px solid var(--line); padding-top: 6px; }
.au-authp .au-authp-again > summary { list-style: none; gap: 6px; cursor: pointer; }
.au-authp .au-authp-again > summary::-webkit-details-marker { display: none; }
.au-authp .au-authp-again > summary .au-i { font-size: 16px; transition: transform .2s; }
.au-authp .au-authp-again[open] > summary .au-i { transform: rotate(180deg); }
.au-authp .au-authp-again > form { padding-top: 6px; }

/* While the code step is open, the page title stays but the lead steps back */
.au-authp .au-authp-hero.is-otp .au-flow-hero__lead { display: none; }

@media (max-width: 720px) {
    .au-authp .au-grid-2 { grid-template-columns: minmax(0, 1fr); }
}