﻿/* Shared sign-in and password surfaces; Bootstrap utilities stay untouched. */
.login-section { background: var(--welsi-paper, #f4f7f3); min-height: 650px; display: flex; align-items: center; justify-content: center; padding: clamp(2.5rem,5vw,5rem) 1.5rem; color: var(--welsi-ink, #142c14); font-family: var(--welsi-body, 'IBM Plex Sans', sans-serif); }
.login-section .decor-circle { display: none; }
.login-section.login-page { display: grid; grid-template-columns: 1fr 1fr; padding: 0; align-items: stretch; }
.login-brand-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem,6vw,6rem); background: var(--welsi-deep, #003d20); color: white; border-bottom: 5px solid var(--welsi-accent, #e4eb9c); }
.login-brand-panel .auth-eyebrow { font-size: .73rem; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--welsi-accent, #e4eb9c); margin-bottom: 2rem; }
.login-brand-panel h2 { font-family: var(--welsi-display, 'Newsreader', Georgia, serif); font-size: clamp(2.5rem,4.5vw,4.8rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; color: white; margin-bottom: 2rem; }
.login-brand-description { color: #d8e4d7; font-size: 1rem; line-height: 1.85; }
.login-membership-link { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid #ffffff30; }
.login-membership-link p { color: #d8e4d7; margin-bottom: .65rem; font-size: .92rem; }
.login-membership-link a { color: var(--welsi-accent, #e4eb9c); text-decoration: none; font-size: .94rem; font-weight: 600; }
.login-membership-link a:hover { text-decoration: underline; text-underline-offset: .3em; }
.login-membership-link i { margin-left: 1rem; }
.login-container { width: 100%; max-width: 500px; position: relative; }
.login-page .login-container { max-width: 580px; margin: auto; padding: clamp(2rem,5vw,4rem) clamp(1.5rem,4vw,3rem); }
.auth-card { width: 100%; max-width: 580px; margin: 2rem auto; padding: clamp(1.5rem,3vw,2.5rem); background: white; border: 1px solid var(--welsi-line, #d9e3d8); border-radius: 8px; box-shadow: 0 12px 35px #003d2006; }
.login-container .auth-card { margin-block: 0; }
.login-page .auth-card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.logo-inside-form { text-align: center; margin-bottom: 1.25rem; }
.welsi-logo-form { width: auto; height: 90px; object-fit: contain; }
.auth-heading, .auth-card > h2 { font-family: var(--welsi-display, 'Newsreader', Georgia, serif); font-size: clamp(2.1rem,3.5vw,3rem); font-weight: 500; color: var(--welsi-deep, #003d20); letter-spacing: -.025em; line-height: 1.15; text-align: center; margin: 0 0 .75rem; }
.auth-card > .text-muted { color: #596a59 !important; font-size: .95rem; line-height: 1.7; }
.auth-datetime { padding: .75rem 1rem; color: var(--welsi-deep, #003d20); background: var(--welsi-paper, #f4f7f3); border-left: 2px solid var(--welsi-fern, #537b2f); font-size: .9rem; }
.auth-card .form-label-simple, .auth-card .form-label { display: block; margin-bottom: .5rem; font-size: .88rem; font-weight: 600; color: var(--welsi-ink, #142c14); }
.auth-card .note-text { color: #61702e; background: #eef1dc; border-radius: 5px; padding: 1rem; font-size: .86rem; line-height: 1.7; }
.login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-card .form-group { display: flex; flex-direction: column; }
.auth-card .form-control { padding: .85rem 1rem; border: 1px solid #cbd8c8; border-radius: 5px; background: #fff; font-size: .95rem; min-width: 0; }
.auth-card .form-control:focus { border-color: var(--welsi-fern, #537b2f); box-shadow: 0 0 0 3px #537b2f22; }
.auth-card .form-control::placeholder { color: #7d897d; }
.input-icon-wrapper { position: relative; display: flex; align-items: center; }
.input-icon-wrapper i { position: absolute; left: 1rem; font-size: .9rem; color: #6e806d; pointer-events: none; }
.input-icon-wrapper .form-control { padding-left: 2.8rem; }
.auth-card .btn-login, .auth-card .btn-welsi { background: var(--welsi-deep, #003d20); border: 1px solid var(--welsi-deep, #003d20); color: white; font-weight: 600; border-radius: 5px; padding: .85rem 1.2rem; font-size: .95rem; }
.auth-card .btn-login:hover, .auth-card .btn-welsi:hover { background: #205132; border-color: #205132; color: #fff; }
.auth-card .btn-login { margin-top: .35rem; }
.login-links { text-align: center; margin-top: 1.5rem; }
.auth-card :is(.link-text,.forgot-password-link,.back-to-login-link) { color: var(--welsi-deep, #003d20); font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; }
.auth-card .alert { border-radius: 5px; font-size: .9rem; line-height: 1.65; }
.auth-card .input-with-button { display: flex; gap: .5rem; }
.auth-card .input-with-button .form-control { flex: 1; }
.auth-card .btn-inline { white-space: nowrap; }
#reset-password-form > .d-flex { flex-wrap: wrap; gap: .75rem; }
.login-section :is(a,button):focus-visible, .auth-card :is(a,button):focus-visible { outline: 3px solid var(--welsi-fern, #537b2f); outline-offset: 4px; }
.login-brand-panel a:focus-visible { outline-color: var(--welsi-accent, #e4eb9c); }
@media (max-width: 767.98px) {
    .login-section.login-page { grid-template-columns: 1fr; }
    .login-brand-panel { padding: 2.5rem 1.5rem; }
    .login-brand-panel .auth-eyebrow { margin-bottom: 1rem; }
    .login-brand-panel h2 { margin-bottom: 1.25rem; }
    .login-brand-description { margin: 0; }
    .login-membership-link { margin-top: 1.8rem; padding-top: 1.2rem; }
    .login-page .login-container { padding: 2.5rem 1.5rem; }
}
