/* Portal authentication styling, scoped to the three AYF sign-in views.
   Includes the supplied _auth.scss rules, expanded without Sass dependencies.
   The legacy form markup stays in place; no Bootstrap/app bundle is required. */
.ayf-auth-page {
    --page: #faf9fb;
    --surface: #ffffff;
    --ink: #202731;
    --muted: #4b5563;
    --brand: #a50050;
    --brand-hover: #830040;
    --focus: #006970;
    --border: #687481;
    --divider: #d4d9df;
    --error-ink: #8b1730;
    --error-bg: #fff0f2;
    margin: 0;
    min-height: 100vh;
    color-scheme: light;
    background: var(--page);
    color: var(--ink);
    font: 1rem/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-wrap: break-word;
}
.ayf-auth-page *, .ayf-auth-page *::before, .ayf-auth-page *::after { box-sizing: border-box; }
.ayf-auth-page [hidden] { display: none !important; }
.ayf-auth-page h1, .ayf-auth-page h2, .ayf-auth-page p { margin-top: 0; }
.ayf-auth-page h1 { margin-bottom: 8px; font-size: 1.75rem; line-height: 1.3; font-weight: 600; }
.ayf-auth-page p { margin-bottom: 1rem; }
.ayf-auth-page strong { font-weight: 600; }
.ayf-auth-page a { color: var(--brand); text-underline-offset: .2em; text-decoration-thickness: .1em; }
.ayf-auth-page a:hover { color: var(--brand-hover); }
.ayf-auth-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--surface);
}
.ayf-auth-page .muted { color: var(--muted); }
.ayf-auth-page .ayf-auth-skip {
    position: absolute; inset: .6rem auto auto 1rem; z-index: 10;
    padding: .7rem 1rem; min-height: 44px; border: 2px solid var(--focus);
    border-radius: .4rem; background: var(--surface); color: var(--ink);
    transform: translateY(-200%);
}
.ayf-auth-page .ayf-auth-skip:focus { transform: translateY(0); }
.ayf-auth-page .ayf-auth-header { background: var(--surface); border-bottom: 1px solid var(--divider); }
.ayf-auth-page .ayf-auth-header-inner {
    max-width: 1120px; margin-inline: auto; padding: 1.1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.ayf-auth-page .ayf-auth-brand {
    display: inline-flex; align-items: center; gap: 1.1rem; min-height: 44px;
    max-width: 100%; color: var(--ink); text-decoration: none;
}
/* Compact sign-in logo; retain the intrinsic image proportions. */
.ayf-auth-page .ayf-auth-logo {
    display: block; width: 7.5rem; max-width: 100%; height: auto;
    max-height: 2.75rem; object-fit: contain;
}
.ayf-auth-page .ayf-auth-wordmark { color: var(--brand); font-size: 1.75rem; font-weight: 600; }
.ayf-auth-page .ayf-auth-product { font-size: 1.25rem; padding-left: 1.1rem; border-left: 1px solid var(--divider); }
.ayf-auth-page .ayf-auth-city { color: var(--muted); margin: 0; }
.ayf-auth-page .ayf-auth-main {
    max-width: 36rem; margin: clamp(1.25rem, 6vh, 4rem) auto 0; padding: 0 1.25rem;
}
.ayf-auth-page .ayf-auth-card {
    background: var(--surface); border: 1px solid var(--divider); border-radius: .5rem;
    padding: clamp(1.25rem, 4vw, 2rem);
}
.ayf-auth-page .ayf-auth-footer { max-width: 36rem; margin: 0 auto; padding: 1.25rem; color: var(--muted); font-size: .875rem; }
.ayf-auth-page .ayf-auth-footer p { margin: 0; }
.ayf-auth-page .auth-panel .auth-context { margin-bottom: 6px; font-size: .875rem; color: #62717b; }
.ayf-auth-page .auth-panel .auth-help { margin: 8px 0 0; color: #62717b; font-size: .875rem; }
.ayf-auth-page .auth-panel .auth-code { max-width: 100%; font-variant-numeric: tabular-nums; }
.ayf-auth-page .auth-panel .auth-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ayf-auth-page .auth-panel .auth-alternative,
.ayf-auth-page .auth-panel #alt-otp-form { border-top: 1px solid #dce3e7; margin-top: 24px; padding-top: 20px; }
.ayf-auth-page .auth-panel .auth-alternative p { margin: 0 0 12px; }
.ayf-auth-page .auth-panel .auth-back { margin-top: 18px; margin-bottom: 0; }
.ayf-auth-page .ayf-auth-intro { margin-bottom: 1.5rem; }

/* Only the old presentation wrappers are neutralised. Inputs/forms are not replaced. */
.ayf-auth-page .ayf-auth-view :is(.container, .row, .panel, .panel-body, .otp-wrapper, .otp-inner, [class*="col-md-"], [class~="col-3"]) {
    display: block; float: none; position: static; width: 100%; max-width: none;
    min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
}
.ayf-auth-page .ayf-auth-view .row { height: auto !important; min-height: 0; }
.ayf-auth-page .ayf-auth-view .panel-heading,
.ayf-auth-page .ayf-auth-view .panel > hr { display: none; }
.ayf-auth-page .ayf-auth-view form { margin: 0; }
.ayf-auth-page .ayf-auth-view .form-group { margin: 0 0 1.25rem; }
.ayf-auth-page .ayf-auth-view .form-group:last-child { margin-bottom: 0; }
.ayf-auth-page .ayf-auth-view .form-group .form-group { margin-top: 1.25rem; }
.ayf-auth-page .ayf-auth-view label { display: block; margin-bottom: .45rem; font-weight: 500; color: var(--ink); }
.ayf-auth-page .ayf-auth-view button,
.ayf-auth-page .ayf-auth-view input { font: inherit; }
.ayf-auth-page .ayf-auth-view input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]) {
    display: block; width: 100%; min-width: 0; min-height: 48px; padding: .65rem .75rem;
    border: 1px solid var(--border); border-radius: .45rem; background: var(--surface); color: var(--ink);
}
.ayf-auth-page .ayf-auth-view input:focus { border-color: var(--focus); }
.ayf-auth-page .ayf-auth-view input[aria-invalid="true"],
.ayf-auth-page .ayf-auth-view .has-error input { border: 2px solid var(--error-ink); }
.ayf-auth-page .ayf-auth-view input[name="one_time_password"] { font-variant-numeric: tabular-nums; }
.ayf-auth-page[data-ayf-auth-mode="authenticator"] .ayf-auth-view input[name="one_time_password"] { letter-spacing: .15em; }
.ayf-auth-page .ayf-auth-view .btn,
.ayf-auth-page .ayf-auth-view button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: .5rem;
    background: var(--surface); color: var(--ink); font-weight: 500; line-height: 1.4;
    text-decoration: none; white-space: normal; cursor: pointer;
}
.ayf-auth-page .ayf-auth-view button.btn-primary,
.ayf-auth-page .ayf-auth-view .button-primary {
    background: var(--brand); color: var(--surface); border-color: var(--brand);
}
.ayf-auth-page .ayf-auth-view button.btn-primary:hover,
.ayf-auth-page .ayf-auth-view .button-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.ayf-auth-page .ayf-auth-view a.btn-link { color: var(--brand); border-color: transparent; text-decoration: underline; }
.ayf-auth-page .ayf-auth-view #alt-otp-form button:hover { background: #edf0f4; }
.ayf-auth-page .ayf-auth-view button:disabled { cursor: not-allowed; opacity: .65; }
.ayf-auth-page .ayf-auth-view button > :is(.fa, .ss-login) { display: none; }
.ayf-auth-page .ayf-auth-view .alert-danger {
    padding: .85rem 1rem; margin: 0 0 1.25rem; border: 1px solid var(--error-ink); border-radius: .45rem;
    background: var(--error-bg); color: var(--error-ink);
}
.ayf-auth-page .ayf-auth-view .help-block { display: block; margin: .45rem 0 0; color: var(--error-ink); }
.ayf-auth-page .ayf-auth-view ul { margin: 0; padding-inline-start: 1.25rem; }
.ayf-auth-page .ayf-auth-view li > a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .4rem; }
@media (max-width: 480px) {
    .ayf-auth-page .ayf-auth-logo { width: 6.5rem; }
    .ayf-auth-page .ayf-auth-header-inner { padding: .85rem 1rem; }
    .ayf-auth-page .ayf-auth-main { padding-inline: .75rem; }
    .ayf-auth-page .ayf-auth-view .btn,
    .ayf-auth-page .ayf-auth-view button { width: 100%; }
    .ayf-auth-page .ayf-auth-view a.btn-link { margin-top: .45rem; }
}
@media (forced-colors: active) {
    .ayf-auth-page :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight; }
    .ayf-auth-page .ayf-auth-card, .ayf-auth-page .ayf-auth-view button { border-color: CanvasText; }
}