/* =====================================================================
   FILE: kcbme/auth.css — branded look for the shared auth pages (register, login, password reset).
   Loaded AFTER styles2.css. CSS grid only, no flexbox. Corners 8px at most.
   ===================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Banner: pinstripes in place of a hero image ---- */
.auth-banner { width: 100%; padding: 120px 0 90px; text-align: center; color: #fff; }
.auth-banner-inner { width: 86%; max-width: 820px; margin: 0 auto; }
.auth-banner .auth-eyebrow { color: #f7d48a; font-size: 1.6rem; padding: 0 0 6px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.35); }
.auth-banner h1 { font-size: 5rem; line-height: 1.15; color: #fff; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.35); }
.auth-banner .auth-lead { font-size: 1.9rem; line-height: 1.5; padding: 14px 0 0; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.35); }

/* ---- Main area ---- */
.auth-main { background: #f4f7fc; padding: 0 0 70px; }
.auth-wrap {
    width: 86%;
    max-width: 1100px;
    margin: -50px auto 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.auth-card, .auth-side {
    background: #fff;
    border: 1px solid #e3e8f2;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(30, 50, 90, 0.12);
    padding: 28px;
}
.auth-card h2, .auth-side h2 { font-size: 3rem; color: #4b5788; margin: 0 0 6px; }
.auth-card p, .auth-side p { color: #5b6075; }
.auth-card .auth-note { font-size: 1.7rem; padding: 0 0 14px; }
.auth-card .auth-note strong { color: #4b5788; font-weight: 500; }
.auth-card a, .auth-side a { color: #5f8fdd; text-decoration: none; }
.auth-card a:hover, .auth-side a:hover { color: #3f6fc0; }

/* ---- Errors ---- */
.auth-errors { background: #fdecea; border: 1px solid #e6a79c; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; }
.auth-card .auth-errors p { margin: 0; padding: 3px 0; font-size: 1.5rem; color: #a1392b; }

/* ---- Form grid ---- */
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-grid .span-2 { grid-column: 1 / -1; }

.auth-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    color: #4b5788;
    background: #fff;
    border: 1px solid #c9d3e6;
    border-radius: 8px;
}
.auth-input::placeholder { color: #8a93ad; }
.auth-input:focus { outline: none; border-color: #5f8fdd; box-shadow: 0 0 0 3px rgba(95, 143, 221, 0.25); }

.auth-card .auth-help { font-size: 1.4rem; line-height: 1.4; padding: 6px 0 0; color: #7a8199; }
.auth-card .auth-center { text-align: center; }
.auth-card .auth-switch { font-size: 1.5rem; text-align: center; padding: 18px 0 0; }

/* ---- Security PIN box ---- */
.auth-pin { background: #fff8e8; border: 1px solid #e6cf94; border-radius: 8px; padding: 14px 16px; }
.auth-card .auth-pin-title { font-size: 1.7rem; font-weight: 500; padding: 0 0 4px; color: #7a5c1e; }
.auth-card .auth-pin-title span { font-weight: 300; font-size: 1.4rem; }
.auth-card .auth-pin-text { font-size: 1.4rem; line-height: 1.5; padding: 0 0 10px; color: #8a6a28; }

/* ---- Submit button ---- */
.auth-card .probutton { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; padding: 10px 32px; font-size: 1.8rem; }

/* ---- Benefits card ---- */
.auth-side ul { list-style: none; margin: 10px 0 0; padding: 0; }
.auth-side li { position: relative; color: #5b6075; font-size: 1.6rem; line-height: 1.45; padding: 0 0 12px 28px; }
.auth-side li::before { content: "\2713"; position: absolute; left: 0; color: #5f8fdd; font-weight: 500; }
.auth-side .auth-side-note { font-size: 1.4rem; line-height: 1.4; padding: 6px 0 0; color: #7a8199; border-top: 1px solid #e3e8f2; margin-top: 6px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: minmax(0, 1fr); }
    .auth-banner h1 { font-size: 4rem; }
}
@media (max-width: 600px) {
    .auth-banner { padding: 100px 0 80px; }
    .auth-banner h1 { font-size: 3.4rem; }
    .auth-banner .auth-lead { font-size: 1.6rem; }
    .auth-grid { grid-template-columns: minmax(0, 1fr); }
    .auth-card, .auth-side { padding: 20px; }
    .auth-card h2, .auth-side h2 { font-size: 2.4rem; }
}