/* Sign-in, split card.
 *
 * Loaded after login_new.css and scoped to .login_split, which is the sign-in
 * container. The legacy sheet styles .card, .input-container and .submit_login
 * with plain class selectors, so everything here is written one level more
 * specific to win without !important where possible.
 *
 * The markup is deliberately untouched: login.js toggles .active on the
 * container, builds the pin keypad into #loginpin, and switches the
 * .btn_login_pin_type tabs against the div_1/div_2 pairs. Restyling only.
 *
 * The accent is per tenant, so --login-accent and its derived tints are set
 * inline by the view; everything below consumes them.
 */

.login_page_body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
        radial-gradient(1100px 520px at 12% -10%, var(--login-accent-wash), transparent 60%),
        radial-gradient(900px 480px at 108% 110%, var(--login-accent-wash), transparent 55%),
        #f4f5f9;
    font-family: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The legacy sheet caps .container at 460px, and this card is nested inside
   that wrapper, so the wrapper has to be released before the card can grow. */
.login_page_body > .container {
    width: 100% !important;
    max-width: min(940px, 100%) !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
.login_page_body > .container > .row { margin: 0 !important; }

/* ------------------------------------------------------------ the card */

.login_split {
    display: flex !important;
    align-items: stretch;
    width: min(940px, 100%) !important;
    max-width: none !important;
    min-height: 500px;
    margin: 0 auto !important;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(28, 22, 64, .16), 0 2px 6px rgba(28, 22, 64, .06);
}

.login_split > .card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    float: none;
    transition: none;
}

/* brand panel: second visually, so the form leads on a keyboard and for
   screen readers while still sitting on the right */
.login_split > .card:nth-of-type(1) {
    order: 2;
    flex: 1 1 44%;
    position: relative;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
    background: linear-gradient(150deg, var(--login-accent-light) 0%, var(--login-accent) 55%, var(--login-accent-dark) 100%);
    overflow: hidden;
}
/* two soft rings, the depth cue from the reference without an image */
.login_split > .card:nth-of-type(1)::before,
.login_split > .card:nth-of-type(1)::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .16);
}
.login_split > .card:nth-of-type(1)::before {
    width: 420px; height: 420px;
    top: -130px; right: -160px;
    background: rgba(255, 255, 255, .07);
}
.login_split > .card:nth-of-type(1)::after {
    width: 300px; height: 300px;
    bottom: -120px; left: -110px;
    background: rgba(255, 255, 255, .05);
}

.login_brand_panel {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 38px 34px;
    color: #fff;
}
.login_brand_panel .login_brand_shot {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .9;
}
/* a scrim so the wordmark stays legible over any photo */
.login_brand_panel .login_brand_shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 8, 30, .12) 0%, rgba(12, 8, 30, .55) 100%);
}
.login_brand_panel .login_brand_text { position: relative; z-index: 2; }
.login_brand_panel h2 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
}
.login_brand_panel p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

/* form panel */
.login_split > .card:nth-of-type(2) {
    order: 1;
    flex: 1 1 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px 52px;
    background: #fff;
}

.login_split .title {
    margin: 0 0 4px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #14132a;
    text-align: center;
    /* the legacy sheet puts a hardcoded purple bar here */
    border-left: 0 !important;
    padding-left: 0 !important;
}
.login_split .login_subtitle {
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6a85;
    text-align: center;
}

/* ------------------------------------------------------------- fields */

/* The legacy sheet floats the label with input:focus ~ label and animates a
   .bar underline. The float is kept because it is good UX and the markup
   already supports it; the underline is dropped for a filled field. */
.login_split .card .input-container,
.login_split .input-container {
    position: relative;
    margin: 0 0 16px;
    padding: 0;
}
.login_split .card .input-container input,
.login_split .input-container input {
    width: 100%;
    height: 58px;
    padding: 23px 16px 7px;
    border: 1.5px solid #e3e2ef;
    border-radius: 12px;
    background: #f7f7fb;
    box-shadow: none;
    color: #14132a;
    font-size: 15px;
    line-height: 22px;
    outline: none;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.login_split .card .input-container input:hover,
.login_split .input-container input:hover { border-color: #d2d0e6; }

.login_split .card .input-container input:focus,
.login_split .input-container input:focus {
    border-color: var(--login-accent);
    background: #fff;
    box-shadow: 0 0 0 4px var(--login-accent-ring);
}

.login_split .card .input-container label,
.login_split .input-container label {
    position: absolute;
    /* the filled input paints over an auto-stacked label, so lift it */
    z-index: 2;
    top: 18px;
    left: 17px;
    margin: 0;
    /* 4.5:1 against the filled field; the previous tone was too faint to read */
    color: #55536f;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .18s ease, color .18s ease;
}
.login_split .card .input-container input:focus ~ label,
.login_split .card .input-container input:valid ~ label,
.login_split .input-container input:focus ~ label,
.login_split .input-container input:valid ~ label {
    top: 18px;
    transform: translateY(-11px) scale(.75);
    color: var(--login-accent);
    font-size: 15px;
}
/* the animated underline belongs to the old look */
.login_split .card .input-container .bar,
.login_split .input-container .bar { display: none; }

.login_split .error_txt,
.login_split .red_error { color: #d13b2e; font-size: 13px; }
.login_split .green_error { color: #1a7f4b; font-size: 13px; }

/* ------------------------------------------------------------- button */

.login_split .button-container { margin: 6px 0 0; text-align: left; }
.login_split .card .button-container button.submit_login,
.login_split .button-container .submit_login {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 15px 24px;
    border: 0;
    border-radius: 12px;
    background: var(--login-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    box-shadow: 0 10px 24px var(--login-accent-shadow);
}
.login_split .card .button-container button.submit_login span,
.login_split .button-container .submit_login span { color: #fff; }
.login_split .button-container .submit_login:hover { filter: brightness(1.06); }
.login_split .button-container .submit_login:active { transform: translateY(1px); }
.login_split .button-container .submit_login:focus-visible {
    outline: 3px solid var(--login-accent-ring);
    outline-offset: 2px;
}

/* Forgot password, then the way into the other sign-in mode. */
.login_split .login_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    text-align: center;
}
.login_split .login_footer a {
    color: #6b6a85;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 20px;
    padding: 4px 2px;
    text-decoration: none;
    border-radius: 6px;
    transition: color .18s ease;
}
.login_split .login_footer a:hover { color: var(--login-accent); text-decoration: underline; }
.login_split .login_footer a:focus-visible {
    outline: 3px solid var(--login-accent-ring);
    outline-offset: 2px;
}
.login_split .login_footer_sep { color: #cfceda; font-size: 13px; user-select: none; }

/* The switch offers the mode you are not in, so the active one is hidden and
   login.js keeps owning which is which. */
.login_split .login_mode_switch {
    color: var(--login-accent);
    /* the legacy sheet gives .btn_login_pin_type a bordered pill; this is a link */
    display: inline;
    border: 0;
    background: none;
    padding: 4px 2px;
}
.login_split .login_mode_switch.active_login_btn { display: none; }

/* version number, kept out of the way rather than in the flex flow */
.login_split .pull-right {
    position: absolute;
    right: 14px;
    bottom: 10px;
    margin: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
}

/* -------------------------------------------------------- pin keypad */

.login_split #loginpin { margin: 6px 0 18px; }
.login_split #loginpin input {
    height: 58px;
    width: 52px;
    border: 1.5px solid #e3e2ef;
    border-radius: 12px;
    background: #f7f7fb;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #14132a;
}
.login_split #loginpin input:focus {
    border-color: var(--login-accent);
    background: #fff;
    box-shadow: 0 0 0 4px var(--login-accent-ring);
    outline: none;
}

/* ------------------------------------------------------- responsive */

@media (max-width: 860px) {
    .login_split { flex-direction: column; min-height: 0; }
    .login_split > .card:nth-of-type(1) {
        order: 1;
        flex: none;
        min-height: 150px !important;
    }
    .login_brand_panel { padding: 22px 24px; justify-content: flex-end; }
    .login_brand_panel h2 { font-size: 20px; }
    .login_brand_panel p { display: none; }
    .login_split > .card:nth-of-type(2) { order: 2; padding: 30px 24px; }
    .login_split .pull-right { color: rgba(20, 19, 42, .45); }
}

@media (max-width: 420px) {
    .login_split > .card:nth-of-type(2) { padding: 24px 18px; }
    .login_split .title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .login_split *,
    .login_page_body .btn_login_pin_type { transition: none !important; }
}