/**
 * Member login — split-screen layout (custom UNMER)
 * Scoped under .unmer-login so it never leaks into other OPAC pages.
 * Deliberately editorial/institutional: navy panel + gold hairline accents,
 * serif wordmark, asymmetric grid. Not the generic centered-card look.
 */

.unmer-login {
    --ul-navy: #0d2340;
    --ul-navy-2: #123055;
    --ul-ink: #16202e;
    --ul-muted: #5b6b7d;
    --ul-line: #e3e8ee;
    /* primary brand color — amber/gold (oklch, universally supported) */
    --ul-primary: oklch(0.681 0.162 75.834);
    --ul-primary-dark: oklch(0.585 0.150 74);
    --ul-primary-soft: oklch(0.681 0.162 75.834 / 0.22);
    /* keep old names as aliases so every accent picks up the new primary */
    --ul-blue: var(--ul-primary);
    --ul-blue-dark: var(--ul-primary-dark);
    --ul-gold: var(--ul-primary);

    display: flex;
    min-height: 100vh;
    margin: 0;
    background: #fff;
    color: var(--ul-ink);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- brand panel */
.unmer-login .ul-brand {
    position: relative;
    flex: 0 0 44%;
    max-width: 620px;
    padding: 3.5rem 3.25rem;
    display: flex;
    flex-direction: column;
    color: #eaf1fb;
    background:
        linear-gradient(160deg, var(--ul-navy) 0%, var(--ul-navy-2) 100%);
    overflow: hidden;
}

/* faint ruled-paper motif — subtle, not a floating blob */
.unmer-login .ul-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 34px);
    pointer-events: none;
}
.unmer-login .ul-brand::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(200, 162, 75, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(200, 162, 75, .05);
    pointer-events: none;
}

.unmer-login .ul-brand__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.unmer-login .ul-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
}
.unmer-login .ul-brand__logo img {
    height: 44px;
    width: auto;
    display: block;
}
.unmer-login .ul-brand__wordmark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.15;
}

.unmer-login .ul-brand__hero {
    margin-top: auto;
    padding-top: 3rem;
}
.unmer-login .ul-brand__eyebrow {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ul-gold);
    margin-bottom: 1rem;
}
.unmer-login .ul-brand__title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 2.35rem;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: #fff;
}
.unmer-login .ul-brand__lead {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(234, 241, 251, .78);
    max-width: 34ch;
    margin: 0;
}

.unmer-login .ul-brand__meta {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 1.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: .7rem;
}
.unmer-login .ul-brand__meta li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .92rem;
    color: rgba(234, 241, 251, .82);
}
.unmer-login .ul-brand__meta li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 8px;
    height: 8px;
    background: var(--ul-gold);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------- form panel */
.unmer-login .ul-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}
.unmer-login .ul-panel__inner {
    width: 100%;
    max-width: 380px;
}

/* headline coming from member.inc.php (.tagline) */
.unmer-login .ul-panel .tagline {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ul-ink);
    border-bottom: 0;
    padding: 0;
    margin: 0 0 .35rem;
}
.unmer-login .ul-panel .tagline::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: .9rem;
    background: var(--ul-gold);
}

.unmer-login .ul-panel .loginInfo {
    padding: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ul-muted);
}
.unmer-login .ul-panel form { margin-top: 1.6rem; }

.unmer-login .ul-panel .fieldLabel {
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .2px;
    color: var(--ul-ink);
    padding: 0 0 .4rem;
}
.unmer-login .ul-panel .marginTop { margin-top: 1.1rem; }

.unmer-login .ul-panel .form-control {
    width: 100%;
    height: auto;
    padding: .7rem .9rem;
    font-size: .95rem;
    color: var(--ul-ink);
    background: #fff;
    border: 1px solid var(--ul-line);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.unmer-login .ul-panel .form-control:focus {
    outline: 0;
    border-color: var(--ul-primary);
    box-shadow: 0 0 0 3px var(--ul-primary-soft);
}

.unmer-login .ul-panel .captchaMember { margin-top: 1.1rem; }

.unmer-login .ul-panel .memberButton {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin-top: 1.6rem;
    padding: .8rem 1rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ul-navy);
    background: var(--ul-primary);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.unmer-login .ul-panel .memberButton:hover {
    background: var(--ul-primary-dark);
    box-shadow: 0 8px 20px var(--ul-primary-soft);
}
.unmer-login .ul-panel .memberButton:active { transform: translateY(1px); }

.unmer-login .ul-back {
    display: inline-block;
    margin-top: 1.6rem;
    font-size: .85rem;
    color: var(--ul-muted);
    text-decoration: none;
}
.unmer-login .ul-back:hover { color: var(--ul-blue); }

/* flash / error boxes keep working */
.unmer-login .ul-panel .errorBox,
.unmer-login .ul-panel .alert {
    border-radius: 8px;
    font-size: .88rem;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .unmer-login { flex-direction: column; }
    .unmer-login .ul-brand {
        flex: none;
        max-width: none;
        min-height: 240px;
        padding: 2rem 1.75rem;
    }
    .unmer-login .ul-brand__hero { padding-top: 1.5rem; }
    .unmer-login .ul-brand__title { font-size: 1.7rem; }
    .unmer-login .ul-brand__meta { display: none; }
    .unmer-login .ul-panel { padding: 2.5rem 1.5rem; }
}