/* ════════════════════════════════════════════════════════════════════
   Patriva — Login (shared sign-in surface)
   Self-contained styles for Views/Account/Login.cshtml.
   Edit colours in :root; the rest cascades.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --navy-deep: #0D1B32;
    --gold: #C8A064;
    --gold-deep: #A8844A;
    --gold-light: #DDB97A;
    --warm-white: #F7F5F0;
    --sand: #EDEAE3;
    --stone: #D4D0C8;
    --slate: #6B6760;
    --ink: #2C2A26;
    --error: #B42318;
}

* { box-sizing: border-box; }

body.lg-page {
    margin: 0;
    min-height: 100vh;
    background: var(--stone);
    color: var(--ink);
    font-family: 'DM Sans', system-ui, sans-serif;
}

.lg-wrap { display: flex; justify-content: center; padding: 0; min-height: 100vh; }

.lg-frame {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    background: var(--warm-white);
    overflow: hidden;
    display: grid;
    grid-template-columns: 5fr 7fr;
}

@media (max-width: 860px) {
    .lg-frame { grid-template-columns: 1fr; }
    .lg-hero { display: none; }
}

/* ── Hero ── */
.lg-hero { position: relative; background: var(--navy-deep); color: #fff; padding: 56px; display: flex; flex-direction: column; overflow: hidden; }
.lg-hero__geo { position: absolute; inset: 0; pointer-events: none; }

.lg-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.lg-brand__name { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; letter-spacing: .02em; line-height: 1; }

.lg-hero__bottom { position: relative; z-index: 1; margin-top: auto; margin-bottom: auto; }
.lg-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; }
.lg-hero__heading { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 48px; line-height: 1.1; margin: 0 0 22px; }
.lg-hero__heading .accent { color: var(--gold-light); }
.lg-hero__body { color: rgba(255, 255, 255, .7); font-size: 16px; line-height: 1.7; max-width: 440px; margin: 0; }

.lg-trust { display: flex; gap: 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(200, 160, 100, .2); }
.lg-trust__item { display: flex; align-items: center; gap: 8px; }
.lg-trust__text { font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.lg-trust__item svg { color: var(--gold-light); }

/* ── Form ── */
.lg-form { display: flex; flex-direction: column; background: var(--warm-white); }
.lg-topbar { padding: 20px 48px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-bottom: 1px solid var(--stone); }
.lg-topbar__text { font-size: 13.5px; color: var(--slate); }

.lg-scroll { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 48px; }
.lg-card { width: 100%; max-width: 440px; }

.lg-card__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 14px; }
.lg-heading { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; color: var(--navy-deep); margin: 0 0 10px; line-height: 1.2; }
.lg-subhead { font-size: 14.5px; color: var(--slate); margin: 0 0 28px; line-height: 1.55; }

/* ── SSO ── */
.lg-sso-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.lg-sso-btn {
    width: 100%; background: #fff; border: 1px solid var(--stone);
    padding: 12px 18px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
    text-decoration: none; transition: all 150ms ease;
}
.lg-sso-btn:hover { border-color: var(--navy-deep); background: var(--warm-white); }
.lg-sso-btn[disabled], .lg-sso-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.lg-sso-btn[disabled]:hover, .lg-sso-btn.is-disabled:hover { border-color: var(--stone); background: #fff; }

.lg-divider { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.lg-divider__line { flex: 1; height: 1px; background: var(--stone); }
.lg-divider__text { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* ── Fields ── */
.lg-field { margin-bottom: 18px; }
.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.lg-label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.lg-input-wrap { position: relative; }
.lg-input {
    width: 100%; background: #fff; border: 1px solid var(--stone); color: var(--ink);
    font-size: 15px; padding: 12px 16px 12px 40px; border-radius: 8px;
    font-family: inherit; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.lg-input:focus { outline: none; border-color: var(--navy-deep); box-shadow: 0 0 0 3px rgba(13, 27, 50, .08); }
.lg-input::placeholder { color: var(--slate); }
.lg-input.has-toggle { padding-right: 44px; }
.lg-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--slate); }
.lg-input:focus ~ .lg-input-icon { color: var(--navy-deep); }
.lg-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; border-radius: 4px; cursor: pointer; color: var(--slate); transition: background 150ms ease; }
.lg-toggle:hover { background: var(--warm-white); }
.lg-field-error { display: block; font-size: 11.5px; color: var(--error); margin-top: 5px; }

/* ── Remember me ── */
.lg-remember { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; cursor: pointer; user-select: none; }
.lg-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-remember__box {
    width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--stone); background: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 150ms ease; color: #fff;
}
.lg-remember__box svg { display: none; }
.lg-remember input:checked + .lg-remember__box { background: var(--navy-deep); border-color: var(--navy-deep); }
.lg-remember input:checked + .lg-remember__box svg { display: block; }
.lg-remember__text { font-size: 13.5px; color: var(--ink); }

/* ── Submit / links ── */
.lg-submit {
    width: 100%; background: var(--gold); color: var(--navy-deep); border: none;
    font-size: 15px; font-weight: 500; padding: 13px 20px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px;
    cursor: pointer; transition: background 150ms ease;
}
.lg-submit:hover { background: var(--gold-light); }

.lg-btn-outline {
    background: transparent; color: var(--navy-deep); border: 1px solid var(--navy-deep);
    font-size: 12.5px; font-weight: 500; padding: 8px 14px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; transition: all 150ms ease;
}
.lg-btn-outline:hover { background: var(--navy-deep); color: #fff; }

.lg-link { background: none; border: none; padding: 0; color: var(--gold-deep); font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; }
.lg-link:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 2px; }

.lg-compliance { font-size: 11.5px; color: var(--slate); text-align: center; line-height: 1.5; margin: 0; }
.lg-compliance a { color: var(--gold-deep); font-weight: 500; text-decoration: none; }
.lg-compliance a:hover { text-decoration: underline; }

.lg-footer { padding: 18px 48px; border-top: 1px solid var(--stone); background: var(--sand); }
.lg-footer__text { font-size: 11px; color: var(--slate); text-align: center; line-height: 1.5; margin: 0; }

.lg-summary { background: #FDECEA; border: 1px solid #F3C4BE; color: var(--error); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 18px; }
.lg-summary ul { margin: 0; padding-left: 18px; }

@keyframes lg-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lg-fade { animation: lg-fade-up .5s ease-out forwards; }