/* Login only. The original 1774 x 887 artwork remains unmodified.
   Live controls are measured from its card: x1078, y115, width526, height670.
   Keep these styles separate from the shared authenticated application theme. */
:root {
    color-scheme: dark;
    --cbs-login-artwork: url('../brand/cod-process-login-reference.png');
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #02061b; }
body.cp-login {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    background: #02061b;
    color: #f7f8ff;
    font-family: Arial, Helvetica, sans-serif;
}
button, input { font: inherit; }
.cbs-login-page {
    position: relative;
    width: 100%;
    aspect-ratio: 1774 / 887;
}
.cbs-login-artwork {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}
.cbs-login-card {
    position: absolute;
    left: 60.76662909%;
    top: 12.96505073%;
    width: 29.65050733%;
    height: 75.53551297%;
    container-type: inline-size;
}
.cbs-login-form { position: absolute; inset: 0; margin: 0; }
.cbs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cbs-field {
    position: absolute;
    left: 9.50570342%;
    width: 81.55893536%;
    height: 8.20895522%;
    border-radius: 2.66159696cqw;
    cursor: text;
}
.cbs-login-field { top: 42.98507463%; }
.cbs-password-field { top: 58.65671642%; }
.cbs-field input {
    position: absolute;
    left: 13.3%;
    top: 15%;
    width: 83%;
    height: 70%;
    min-width: 0;
    margin: 0;
    padding: 0 0.76045627cqw;
    border: 0;
    border-radius: 0.76045627cqw;
    outline: none;
    background: transparent;
    color: #edf0ff;
    caret-color: #b3a8ff;
    font-size: 2.85171103cqw;
    line-height: normal;
    letter-spacing: 0.01em;
}
.cbs-password-field input { width: 73%; }
/* Cover only the printed placeholder while the user enters an actual value. */
.cbs-field input:not(:placeholder-shown) {
    background: linear-gradient(105deg, #060e37, #09113b);
}
.cbs-field input:autofill {
    box-shadow: 0 0 0 100px #080f37 inset;
    -webkit-text-fill-color: #edf0ff;
    caret-color: #b3a8ff;
}
.cbs-field:focus-within {
    outline: 1px solid #a396ff;
    box-shadow: 0 0 0 3px rgb(111 88 255 / 15%);
}
.cbs-artwork-control {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f7f8ff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cbs-artwork-control:focus-visible,
.cbs-remember input:focus-visible {
    outline: 2px solid #c3b9ff;
    outline-offset: 3px;
}
.cbs-password-toggle {
    left: 80.79847909%;
    top: 58.65671642%;
    width: 10.07604563%;
    height: 8.20895522%;
    border-radius: 1.52091255cqw;
}
.cbs-visible-eye { display: none; }
.cbs-password-toggle[aria-pressed="true"]::before {
    content: '';
    position: absolute;
    inset: 22% 15%;
    border-radius: 3px;
    background: #09113b;
}
.cbs-password-toggle[aria-pressed="true"] .cbs-visible-eye {
    position: relative;
    display: block;
    width: 45%;
    height: auto;
    margin: auto;
    color: #bbc5ff;
}
.cbs-remember {
    position: absolute;
    left: 9.50570342%;
    top: 69.10447761%;
    width: 28.51711027%;
    height: 4.92537313%;
    cursor: pointer;
}
.cbs-remember input {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 0.19011407cqw;
    top: 15.15151515%;
    width: 4.18250951cqw;
    height: 4.18250951cqw;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0.76045627cqw;
    background: transparent;
    cursor: pointer;
}
.cbs-remember input:not(:checked) {
    background: #090d31;
    border-color: #72709e;
}
.cbs-forgot-password {
    left: 66.53992395%;
    top: 69.10447761%;
    width: 24.33460076%;
    height: 4.92537313%;
    border-radius: 0.76045627cqw;
}
.cbs-submit {
    left: 9.50570342%;
    top: 76.71641791%;
    width: 81.55893536%;
    height: 8.80597015%;
    border-radius: 3.42205323cqw;
    font-size: 2.85171103cqw;
    font-weight: 700;
}
.cbs-submit:hover { background: rgb(255 255 255 / 4%); }
.cbs-submit.is-submitting {
    background: linear-gradient(110deg, #5c54ff, #4800fd);
    cursor: wait;
}
.cbs-login-error {
    position: absolute;
    z-index: 1;
    left: 9.50570342%;
    top: 102%;
    width: 81.55893536%;
    margin: 0;
    padding: 1.52091255cqw 2.28136882cqw;
    border: 1px solid rgb(255 157 173 / 35%);
    border-radius: 1.52091255cqw;
    background: #301c3b;
    color: #ffd9e0;
    font-size: max(12px, 2.28136882cqw);
    line-height: 1.4;
}
.cbs-password-help {
    max-width: 420px;
    width: calc(100% - 40px);
    padding: 28px;
    border: 1px solid #6256de;
    border-radius: 20px;
    background: #0c1235;
    color: #f7f8ff;
    box-shadow: 0 24px 90px #0008;
}
.cbs-password-help::backdrop { background: rgb(2 6 27 / 75%); }
.cbs-password-help h2 { margin: 0 0 14px; font-size: 22px; }
.cbs-password-help p { margin: 0 0 22px; color: #c4c8eb; font-size: 15px; line-height: 1.6; }
.cbs-password-help button {
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 10px;
    background: #5140f5;
    color: white;
    font-weight: 700;
    cursor: pointer;
}
.cbs-mobile-brand, .cbs-mobile-visual { display: none; }
@media (max-width: 1099px) {
    body.cp-login { display: block; padding: 22px 0; }
    .cbs-login-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        aspect-ratio: auto;
    }
    .cbs-login-artwork { display: none; }
    /* Mobile crops also use the original file, including its logo and cards. */
    .cbs-mobile-brand {
        display: block;
        width: min(362px, calc(100% - 48px));
        aspect-ratio: 362 / 98;
        background-image: var(--cbs-login-artwork);
        background-size: 490.05524862% 905.10204082%;
        background-position: 14.09348442% 3.0418251%;
        background-repeat: no-repeat;
    }
    .cbs-login-card {
        position: relative;
        inset: auto;
        width: min(526px, calc(100% - 32px));
        height: auto;
        aspect-ratio: 526 / 670;
        border-radius: clamp(12px, 3.8vw, 22px);
        background-image: var(--cbs-login-artwork);
        background-size: 337.26235741% 132.3880597%;
        background-position: 86.37820513% 52.99539171%;
        background-repeat: no-repeat;
    }
    .cbs-field input { font-size: max(16px, 2.85171103cqw); }
    .has-error .cbs-login-card { margin-bottom: 68px; }
    .cbs-mobile-visual {
        display: block;
        width: min(670px, 100%);
        aspect-ratio: 980 / 670;
        background-image: var(--cbs-login-artwork);
        background-size: 181.02040816% 132.3880597%;
        background-position: 5.03778338% 64.51612903%;
        background-repeat: no-repeat;
    }
}