/*  km-login_20261024_002.css - the Kaelo Money log-in page (option A, chosen by James 23 Oct 2026).
    24 Oct: renamed from km-login_20261023.css when the pages that break off the log-in (Forgot password, its
    confirmation, Reset password, its confirmation, the two OTP pages) moved onto the same layout; the additions are
    marked "24 Oct" below.
    Loaded by Views/Shared/_LoginLayout.cshtml only. Plain <link>, no asp-append-version (Shared has no
    _ViewImports), so an edit needs a NEW FILE NAME and the <link> updated.

    The background is the AskNelson log-in photo under the same navy wash asknelson.kaelo.co.za/login uses
    (#01253B at about 88%). The phone is the black handset from the old desk background
    (KaeloMoney_Login_Background.jpg), redrawn in CSS so its screen can show the Kaelo Lifestyle landing page. */

.km-login-body {
    --km-navy: #01253b;
    --km-green: #80c243;
    --km-ink-soft: rgba(255, 255, 255, .78);
    --km-line: rgba(255, 255, 255, .28);
    margin: 0;
    min-height: 100vh;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #fff;
    background: linear-gradient(rgba(1, 37, 59, .88), rgba(1, 37, 59, .88)),
                url('../Content/images/KaeloMoney_Login_People.jpg') center 30% / cover no-repeat fixed;
    background-color: #01253b;
    -webkit-font-smoothing: antialiased;
}
.km-login-body *, .km-login-body *::before, .km-login-body *::after { box-sizing: border-box; }

.km-login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 480px);
    gap: clamp(40px, 8vw, 140px);
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}
.km-login-right { display: flex; justify-content: center; }

/* ---------- the form ---------- */
.km-form { width: 100%; max-width: 380px; margin: 0; }
.km-logo { display: block; height: 44px; width: auto; margin-bottom: 48px; }
.km-form h1 { font-size: 52px; font-weight: 900; margin: 0 0 8px; letter-spacing: -.5px; line-height: 1.05; }
.km-form .km-sub { color: var(--km-ink-soft); font-size: 16px; margin: 0 0 30px; line-height: 1.45; }
.km-field { margin-bottom: 18px; }
.km-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.km-input {
    position: relative; display: flex; align-items: center;
    height: 54px; border: 1px solid var(--km-line); border-radius: 6px; background: rgba(1, 26, 42, .35);
}
.km-input:focus-within { border-color: var(--km-green); box-shadow: 0 0 0 3px rgba(128, 194, 67, .25); }
.km-input input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff;
    font: inherit; font-size: 16px; padding: 0 16px; outline: none;
}
.km-input input::placeholder { color: rgba(255, 255, 255, .55); font-style: italic; }
/* Chrome's autofill paints its own pale fill; keep the field dark. */
.km-input input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #0b2f45 inset;
    caret-color: #fff;
}
.km-eye {
    background: none; border: 0; color: rgba(255, 255, 255, .8); width: 52px; height: 100%;
    cursor: pointer; display: grid; place-items: center; flex: none;
}
.km-eye:focus-visible { outline: 2px solid var(--km-green); outline-offset: -4px; border-radius: 6px; }
.km-row { display: flex; justify-content: flex-end; margin: -4px 0 28px; }
.km-link { color: #fff; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.km-link:hover, .km-link:focus { color: var(--km-green); }
.km-link:focus-visible { outline: 2px solid var(--km-green); outline-offset: 2px; }
.km-btn {
    display: block; width: 100%; height: 56px; border: 0; border-radius: 6px; cursor: pointer;
    background: var(--km-green); color: var(--km-navy); font: inherit; font-size: 18px; font-weight: 900; letter-spacing: .2px;
}
.km-btn:hover { background: #8fd24f; }
.km-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* 24 Oct: the pages that break off the log-in. */
.km-form h1.km-h1-sm { font-size: 40px; }
.km-msg { font-size: 16px; line-height: 1.5; margin: 0 0 24px; }
.km-msg-box {
    font-size: 16px; font-weight: 700; padding: 14px 16px; margin: 0 0 24px;
    border: 1px solid var(--km-line); border-radius: 6px; background: rgba(1, 26, 42, .35); word-break: break-word;
}
a.km-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.km-btn-ghost {
    margin-top: 12px; background: transparent; color: #fff; border: 1px solid var(--km-line); font-weight: 700;
}
.km-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.km-note { color: var(--km-ink-soft); font-size: 14px; line-height: 1.55; margin: 22px 0 0; text-align: center; }
.km-note .km-link { font-size: 14px; }

/* 24 Oct (_002): the language policy link made quiet - small, dim, underlined only on hover/focus. */
.km-policy { text-align: center; margin-top: 28px; font-size: 12px; }
.km-policy .km-link { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .45); text-decoration: none; }
.km-policy .km-link:hover, .km-policy .km-link:focus { color: var(--km-ink-soft); text-decoration: underline; }

/* Validation - Bootstrap's red is unreadable on navy, so a lighter one. */
.km-form .text-danger, .km-form .field-validation-error, .km-form .validation-summary-errors {
    color: #ff9e93; font-size: 14px; font-weight: 700;
}
.km-form .field-validation-error { display: block; margin-top: 6px; }
.km-form .validation-summary-errors ul { margin: 0 0 16px; padding-left: 18px; }
.km-form .validation-summary-valid { display: none; }
.km-form .input-validation-error { color: #fff; }
.km-input:has(.input-validation-error) { border-color: #ff9e93; }

/* ---------- the phone ---------- */
.km-phone {
    --w: 290px;
    position: relative; width: var(--w); aspect-ratio: 300 / 640;
    padding: calc(var(--w) * .047) calc(var(--w) * .033) calc(var(--w) * .06);
    border-radius: calc(var(--w) * .14);
    background: linear-gradient(145deg, #2a2e33 0%, #0b0d10 40%, #050607 100%);
    box-shadow:
        inset 0 0 0 2px #3a3f45,
        inset 0 0 0 4px #0b0d10,
        0 40px 80px -20px rgba(0, 0, 0, .65),
        0 18px 30px -12px rgba(0, 0, 0, .5);
}
.km-phone::before { /* earpiece */
    content: ""; position: absolute; top: calc(var(--w) * .022); left: 50%; transform: translateX(-50%);
    width: 22%; height: calc(var(--w) * .01); border-radius: 99px; background: #23272c;
}
.km-phone::after { /* camera */
    content: ""; position: absolute; top: calc(var(--w) * .018); left: 66%;
    width: calc(var(--w) * .022); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #4a5866, #0b0d10 70%);
}
.km-phone-screen { width: 100%; height: 100%; border-radius: calc(var(--w) * .1); overflow: hidden; background: #fff; }
.km-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.km-phone-glare {
    position: absolute; inset: calc(var(--w) * .047) calc(var(--w) * .033) calc(var(--w) * .06);
    border-radius: calc(var(--w) * .1); pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
}
@media (prefers-reduced-motion: no-preference) {
    .km-phone { animation: km-float 7s ease-in-out infinite; }
    @keyframes km-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
}

.km-login-credits {
    position: absolute; right: 16px; bottom: 10px; font-size: 11px; color: rgba(255, 255, 255, .35);
}
.km-login-credits a { color: rgba(255, 255, 255, .45); text-decoration: none; }

/* Phones and narrow windows: the form alone, like AskNelson. */
@media (max-width: 900px) {
    .km-login-wrap { grid-template-columns: 1fr; justify-items: center; padding: 40px 20px 56px; }
    .km-login-right { display: none; }
    .km-form h1, .km-form h1.km-h1-sm { font-size: 34px; }
}
@media (max-width: 600px) {
    .km-logo { height: 34px; margin-bottom: 40px; }
    .km-login-credits { position: static; text-align: center; padding: 0 16px 12px; margin-top: -40px; }
}