/* KASSE login. Scoped to its dedicated layout. */
.al-login-page { margin: 0; background: #fff; color: #17103c; font-family: 'Gordita-Regular', Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.al-login-page *, .al-login-page *::before, .al-login-page *::after { box-sizing: border-box; }
.al-login { display: grid; grid-template-columns: 53.125% 46.875%; min-height: 100vh; }
.al-login a { color: #613de0; text-decoration: none; }
.al-login a:hover { color: #4328aa; text-decoration: underline; }
.al-login a:focus-visible, .al-submit:focus-visible { outline: 3px solid #8b77db; outline-offset: 5px; border-radius: 3px; }
.al-brand-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #e6e6fc; padding: 38px 0 0; }
.al-wordmark { position: relative; z-index: 1; align-self: flex-start; margin-left: 10.5%; font-family: 'Gordita-Medium', Arial, sans-serif; font-size: 28px; line-height: 1.5; letter-spacing: -1px; }
.al-brand-copy { position: relative; z-index: 1; padding: 0 9% 0 10.5%; margin-top: clamp(48px, 8.1vh, 86px); }
.al-brand-copy h1 { margin: 0; color: #130840; font-family: 'Gordita-Bold', Arial, sans-serif; font-size: clamp(42px, 4.65vw, 70px); font-weight: normal; line-height: 1.08; letter-spacing: -2.9px; }
.al-brand-copy p { margin: 18px 0 0; color: #6e6a88; font-size: clamp(15px, 1.66vw, 24px); line-height: 1.6; letter-spacing: -.6px; }
.al-globe { display: block; width: 100%; height: auto; object-fit: contain; margin: auto 0 0;  }
.al-form-panel { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 62px 10.8% 48px 11.6%; }
.al-form-content { width: 100%; margin-top: auto; padding-top: 110px; }
.al-form-heading { margin-bottom: 38px; }
.al-form-heading h2 { margin: 0 0 10px; color: #130840; font-family: 'Gordita-Medium', Arial, sans-serif; font-size: clamp(30px, 3vw, 44px); font-weight: normal; line-height: 1.25; letter-spacing: -1.9px; }
.al-form-heading p { margin: 0; color: #716d88; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.6; letter-spacing: -.35px; }
.al-field { margin-bottom: 28px; }
.al-field-last { margin-bottom: 0; }
.al-field label { display: block; margin: 0 0 12px; color: #231b49; font-size: 16px; font-weight: normal; }
.al-input-wrap { position: relative; }
.al-field-icon { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; opacity: .56; pointer-events: none; }
.al-input { display: block; width: 100%; height: 55px; margin: 0; border: 1px solid #c7c5d3; border-radius: 9px; padding: 0 18px 0 64px; background: #fff; color: #231b49; font: inherit; font-size: 16px; line-height: normal; transition: border-color .15s, box-shadow .15s; }
.al-input::placeholder { color: #8b889e; opacity: 1; }
.al-input:hover { border-color: #a39abe; }
.al-input:focus { outline: none; border-color: #7854d8; box-shadow: 0 0 0 3px #eee8ff; }
.al-input.input-validation-error { border-color: #b33b51; }
.al-recovery { display: flex; justify-content: flex-end; margin: 22px 0 32px; font-size: 15px; }
.al-submit { width: 100%; min-height: 54px; border: 0; border-radius: 8px; padding: 12px 20px; background: #4b35aa; color: #fff; font: inherit; font-size: 17px; cursor: pointer; transition: background .15s; }
.al-submit:hover { background: #3b268f; }
.al-submit:active { background: #302077; }
.al-submit:disabled { cursor: wait; opacity: .72; }
.al-register { margin: 30px 0 0; text-align: center; font-size: 16px; color: #403660; }
.al-register a { text-decoration: underline; text-underline-offset: 3px; margin-left: 3px; }
.al-cookie-note { margin-top: auto; padding-top: 70px; color: #74708b; text-align: center; font-size: 12px; line-height: 1.8; }
.al-cookie-note a { white-space: nowrap; }
.al-errors:empty, .al-errors:has(.field-validation-valid) { display: none; }
.al-errors .field-validation-error { display: block; margin: -12px 0 18px; }
.al-login .field-validation-error { color: #af2545; font-size: 13px; line-height: 1.5; }
.al-field .field-validation-error { display: block; margin-top: 7px; }
.al-two-factor { font-size: 13px; line-height: 1.7; }
.al-two-factor:empty { display: none; }
.al-two-factor #registerPanel { padding: 18px 0; }
.al-two-factor img { max-width: 100%; }
.al-two-factor .download__column-center { display: flex; gap: 12px; margin: 14px 0; }
.al-two-factor .download__badge img { width: 135px; height: auto; }
@media (min-width: 1600px) { .al-form-content { max-width: 560px; align-self: center; } .al-brand-copy h1 { font-size: 76px; } }
@media (max-height: 800px) and (min-width: 901px) {
    .al-brand-panel { padding-top: 26px; }
    .al-brand-copy { margin-top: 38px; }
    .al-brand-copy h1 { font-size: clamp(42px, 4.3vw, 61px); }
    .al-form-panel { padding-top: 42px; padding-bottom: 25px; }
    .al-form-content { padding-top: 0; }
    .al-form-heading { margin-bottom: 27px; }
    .al-field { margin-bottom: 20px; }
    .al-field-last { margin-bottom: 0; }
    .al-recovery { margin: 18px 0 24px; }
    .al-cookie-note { padding-top: 32px; }
}
@media (max-width: 1100px) and (min-width: 901px) { .al-form-panel { padding-left: 9%; padding-right: 9%; } .al-brand-copy h1 { letter-spacing: -2px; } .al-brand-copy p { letter-spacing: -.5px; } }
@media (max-width: 900px) {
    .al-login { grid-template-columns: 1fr; }
    .al-brand-panel { padding: 23px 24px; }
    .al-wordmark { margin: 0; font-size: 24px; }
    .al-brand-copy, .al-globe { display: none; }
    .al-form-panel { width: 100%; max-width: 560px; min-height: calc(100vh - 82px); justify-self: center; padding: 48px 28px 25px; }
    .al-form-content { margin-top: 0; padding: 0; }
    .al-form-heading h2 { font-size: 34px; letter-spacing: -1.5px; }
    .al-form-heading p { font-size: 16px; }
    .al-form-heading { margin-bottom: 32px; }
    .al-cookie-note { padding-top: 46px; }
    .al-register { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .al-login * { transition: none; } }

html:has(.al-login-page) { overflow-y: auto; }
.al-brand-copy h1 { font-family: Arial, sans-serif; font-weight: 700; }

.al-login-page { overflow-y: auto; }

/* Two-step sign-in and authenticator setup. */
.al-form-content{padding-top:0}.al-form-heading h2{font-size:32px;letter-spacing:-1px}.al-form-heading p{font-size:15px}.al-step{font-size:12px;color:#827993;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}.al-signin-account{background:#f7f5fc;border:1px solid #eee8f7;border-radius:8px;padding:12px 16px;font-size:14px;color:#665b7c;margin-bottom:24px;overflow-wrap:anywhere}.al-help{font-size:13px;color:#827993;margin:8px 0 18px}.al-code-input{letter-spacing:8px;font-size:23px;text-align:center;padding:0 18px 0 26px}.al-back{text-align:center;font-size:14px;margin-top:18px}.al-qr-row{display:flex;align-items:center;gap:20px;margin:12px 0}.al-qr-row img{flex-shrink:0;background:white;border:1px solid #e6e1ef;padding:8px;width:132px;height:132px}.al-setup p{font-size:14px;margin:8px 0}.al-form-panel:has(.al-setup){padding-top:24px;padding-bottom:18px}.al-form-panel:has(.al-setup) .al-form-heading{margin-bottom:20px}.al-form-panel:has(.al-setup) .al-field{margin-top:12px;margin-bottom:14px}.al-form-panel:has(.al-setup) .al-cookie-note{padding-top:14px}@media(max-width:480px){.al-qr-row{flex-direction:column;align-items:flex-start;gap:8px}.al-form-heading h2{font-size:29px}}

/* Keep verification codes distinct from standard text fields. */
.al-login-page .al-login input.al-code-input {
    width:100%; max-width:360px; height:64px;
    padding:0 12px 0 24px;
    border:1px solid #d7cdeb; border-radius:10px;
    background:#fcfaff; color:#30204b;
    font-family:Consolas,monospace; font-size:26px; font-weight:500;
    line-height:normal; letter-spacing:12px; text-align:center;
    font-variant-numeric:tabular-nums;
}
.al-login-page .al-login input.al-code-input::placeholder { color:#b2a7c5; opacity:1; }
.al-login-page .al-login input.al-code-input:focus { border-color:#7854d8; background:#fff; box-shadow:0 0 0 3px #eee8ff; }
.al-login-page .al-login input.al-code-input.input-validation-error { border-color:#af2545; }
.al-login-page .al-login #al-code-help { margin-top:12px; line-height:1.6; }
@media(max-width:380px) { .al-login-page .al-login input.al-code-input { letter-spacing:8px; padding-left:20px; font-size:23px; } }

/* One accessible input, visually divided into six code cells. */
.al-otp.is-enhanced { position:relative; width:100%; max-width:360px; height:56px; }
.al-otp-boxes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; height:100%; pointer-events:none; }
.al-otp-boxes span { display:flex; align-items:center; justify-content:center; border:1px solid #d7cdeb; border-radius:9px; background:#fcfaff; color:#30204b; font:500 25px/1 Consolas,monospace; }
.al-otp-boxes span.is-active { border-color:#7854d8; box-shadow:0 0 0 3px #eee8ff; background:#fff; }
.al-login-page .al-login .al-otp.is-enhanced input.al-code-input,
.al-login-page .al-login .al-otp.is-enhanced input.al-code-input:focus {
    position:absolute; inset:0; z-index:1; width:100%; max-width:none; height:100%; margin:0; padding:0;
    border:0; border-radius:0; background:transparent; color:transparent; -webkit-text-fill-color:transparent;
    caret-color:transparent; box-shadow:none; outline:none; opacity:1; cursor:text;
}
.al-otp.is-enhanced input::selection { background:transparent; }
.al-otp.is-enhanced input:-webkit-autofill { -webkit-text-fill-color:transparent; transition:background-color 99999s; }
@media(max-width:380px) { .al-otp-boxes { gap:6px; } .al-otp.is-enhanced { height:50px; } }
