/* Cera Pro's masked-bullet glyph is narrow; widen it so password dots don't crowd together */
.input-field[type="password"] {
    letter-spacing: 0.15em;
}
/* Don't stretch the placeholder text itself, only the masked dots above */
.input-field[type="password"]::placeholder {
    letter-spacing: normal;
}
 
/* Custom Portal Auth — global styles
 * Tailwind CSS (CDN) handles layout / spacing utilities.
 * This file provides brand colours, card styles, button behaviour,
 * input focus states, and font classes Tailwind doesn't know about.
 */
 
*, *::before, *::after { box-sizing: border-box; }
 
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
 
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
 
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
 
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
 
body {
    font-family: 'Cera Pro', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
 
/* ── Focus ring ─────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #FFBF3F;
    outline-offset: 2px;
    border-radius: 4px;
}
 
/* ── Page background ────────────────────────────────────────────── */
/* Applied once to the whole page column (main + footer) so the image is continuous behind both,
   with no seam where the footer begins. Positioned right/cover so the swoosh graphic anchors
   to the right edge and the image's own gradient darkens to navy by the time it reaches the footer. */
.login-bg {
    background: url('./bg-desktop.png') no-repeat right center / cover;
    background-attachment: fixed; /* keeps cover's crop tied to the viewport, not the element's own (min-height-driven) box */
    min-height: 100vh;
}
@media (max-width: 767px) {
    .login-bg {
        background-image: url('./bg-mobile.png');
        background-color: #002D72;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top center;
    }
}
 
/* ── Card shadow ────────────────────────────────────────────────── */
.card-shadow {
    box-shadow:
        0 4px 24px rgba(0, 45, 114, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
}
 
/* ── Typography ─────────────────────────────────────────────────── */
.font-display {
    font-family: 'Cera Pro', Georgia, serif;
}
/* Not in the purged tailwind.min.css build; uses the CeraPro-Bold.ttf face already loaded above */
.font-bold {
    font-weight: 700;
}
 
/* ── Auth logo styling ──────────────────────────────────────────── */
.auth-logo {
    /* Logo SVG has gold icon and white text built-in */
    height: 48px;
    display: block;
}
@media (min-width: 640px) {
    .auth-logo { height: 64px; }
}
/* ssb_logo_blue.svg has ~8% transparent padding above/below the visible mark baked into the
   file; clip the bottom of it so CSS gaps below the logo measure from the real ink edge. */
.auth-logo-wrap {
    overflow: hidden;
    height: 44px;
}
@media (min-width: 640px) {
    .auth-logo-wrap { height: 59px; }
}
/* Not in the purged tailwind.min.css build (only gap-1.5/2/3 are) — logo→label and
   label→card were silently getting zero gap without this, despite the class being applied. */
.gap-6 {
    gap: 1.5rem;
}
/* Not in the purged tailwind.min.css build (only text-sm/lg/xl etc. are) */
.text-base {
    font-size: 1rem;
}
 
/* ── Brand colours (text) ───────────────────────────────────────── */
.text-navy      { color: #002D72; }
.text-navy-dark { color: #001F50; }
 
.hover-navy:hover { color: #002D72; }
/* ── Footer links ──────────────────────────────────────────── */
.text-white { color: #FFFFFF; }
.text-white a { color: #FFFFFF; }
.text-white a:hover { color: #FFBF3F; transition: color 0.15s ease; }
/* No background of its own — sits on the continuation of the shared .login-bg image
   applied on the page's outer wrapper, so there's no hard seam above the footer. */
/* Hand-written layout classes (not Tailwind utilities) since tailwind.min.css is a purged
   static build and doesn't include every utility PortalFooter.tsx uses on the homepage. */
/* Three independently-centered stacked rows: logo, links, copyright — each owns its own line */
.auth-footer-inner {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
.auth-footer-logo {
    height: 3rem;
    width: auto;
    flex-shrink: 0;
}
.auth-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    line-height: 1.625;
    list-style: none;
    margin: 0;
    padding: 0;
}
.auth-footer-li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.auth-footer-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.75rem;
}
.auth-footer-link:hover {
    color: #FFFFFF;
    transition: color 0.15s ease;
}
.auth-footer-sep {
    color: rgba(255, 255, 255, 0.3);
}
.auth-footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}
@media (min-width: 640px) {
    .auth-footer-inner { padding: 0.5rem 1.5rem 1rem; }
}
/* ── Input ──────────────────────────────────────────────────────── */
.input-field {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: #111827;
}
.input-field::placeholder {
    color: #D1D5DB;
}
.input-field:focus {
    border-color: #002D72 !important;
    box-shadow: 0 0 0 3px rgba(0, 45, 114, 0.1);
}
/* Cera Pro's masked-bullet glyph is narrow; widen it so password dots don't crowd together */
.input-field[type="password"] {
    letter-spacing: 0.15em;
}
/* Don't stretch the placeholder text itself, only the masked dots above */
.input-field[type="password"]::placeholder {
    letter-spacing: normal;
}

/* Email OTP code entry (forgot-password flow) */
.otp-input {
    font-family: monospace;
    font-size: 1.25rem;
    letter-spacing: 0.5em;
    text-align: center;
}
.otp-input::placeholder {
    letter-spacing: normal;
    font-size: 0.9rem;
}

/* Stacked secondary actions below the OTP/password forms — plain margin-based spacing,
   since this file's compiled tailwind.min.css has no gap-* utilities at all (purged build). */
.btn-secondary {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    color: #002D72;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.btn-secondary:hover:not(:disabled) {
    background: #F9FAFB;
}
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.otp-secondary-action {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.4rem 0;
    background: none;
    border: none;
    color: #6B7280;
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
}
.otp-secondary-action:hover:not(:disabled) {
    color: #002D72;
}
.otp-secondary-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Matches the MFA screen's "Resend code" convention — plain text link, not a button. */
.otp-resend-link {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.4rem 0;
    background: none;
    border: none;
    color: #002D72;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.otp-resend-link:hover:not(:disabled) {
    text-decoration: underline;
}
.otp-resend-link:disabled {
    opacity: 0.5;
    text-decoration: none;
    cursor: not-allowed;
}

/* Expired/used welcome-link icon — circular, SSB-approved darker error red
   (#E74C3C, same brand --color-error used in the React portal), not Tailwind's red-500. */
.token-issue-icon-wrap {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    background: #FDEDEB;
    border: 2px solid #E74C3C;
    color: #E74C3C;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Live password-policy checklist — anchored beside the New Password field it
   describes (parent field wrapper is position:relative), so it moves with the
   card instead of being pinned to the viewport. Collapses to an inline block
   below the field on narrow screens. */
.password-policy-panel {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 1rem;
    width: 240px;
    background: #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 45, 114, 0.18);
    border: 1px solid #E5E7EB;
    padding: 1.1rem 1.4rem;
    z-index: 40;
}
.password-policy-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #002D72;
    margin: 0 0 0.7rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #FFBF3F;
}
.password-policy-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.password-policy-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #6B7280;
    line-height: 1.3;
    margin-bottom: 0.55rem;
}
.password-policy-item:last-child {
    margin-bottom: 0;
}
.password-policy-item.is-met {
    color: #002D72;
    font-weight: 600;
}
.password-policy-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #F3F4F6;
    color: #9CA3AF;
    margin-top: 0.05rem;
}
.password-policy-item.is-met .password-policy-icon {
    background: #002D72;
    color: #FFFFFF;
}
@media (max-width: 1024px) {
    .password-policy-panel {
        position: static;
        width: 100%;
        margin: 0.6rem 0 0 0;
        box-shadow: none;
    }
}

/* Live New Password / Confirm Password match indicator */
.password-match-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0 0;
    font-size: 0.8rem;
    font-weight: 600;
}
.password-match-indicator.is-match {
    color: #002D72;
}
.password-match-indicator.is-mismatch {
    color: #6B7280;
}
.password-match-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    font-size: 0.6rem;
    flex-shrink: 0;
}
.password-match-indicator.is-match .password-match-icon {
    background: #002D72;
    color: #FFFFFF;
}
.password-match-indicator.is-mismatch .password-match-icon {
    background: #F3F4F6;
    color: #9CA3AF;
}
 
/* ── Primary button ─────────────────────────────────────────────── */
.btn-primary {
    background: #FFBF3F !important;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover:not(:disabled) {
    background: #E6A820 !important;
    box-shadow: 0 0 0 3px rgba(0, 45, 114, 0.2);
}
.btn-primary:active:not(:disabled) {
    transform: scale(0.99);
}
.btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}