/* Responsive auth slider math (device-agnostic) */
:root {
    --auth-panel-w: clamp(250px, 74vw, 330px); /* actual form panel width */
    --auth-pad-x: clamp(20px, 5vw, 55px); /* wrap left/right padding */
    --auth-step: calc(var(--auth-panel-w) + 70px); /* offscreen parking step */
}

/* Outer centering */
.asi-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

/* Wrap scales by math, not fixed device list */
.asi-login-wrap {
    width: calc(var(--auth-panel-w) + (var(--auth-pad-x) * 2));
    padding: 55px var(--auth-pad-x) 33px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Ensure panel width follows variable */
.asi-login-form {
    width: var(--auth-panel-w);
}

/* parked states */
.forgotpass-codescreen {
    transform: translateX(var(--auth-step)) !important;
}

.validate-text {
    transform: translateX(var(--auth-step)) !important;
}

.validate-email {
    transform: translateX(calc(var(--auth-step) * 2)) !important;
}

.validate-authapp {
    transform: translateX(calc(var(--auth-step) * 3)) !important;
}

.validate-other {
    transform: translateX(calc(var(--auth-step) * 4)) !important;
}

/* active states */
#text-check:checked ~ .validate-form,
#email-check:checked ~ .validate-form,
#authapp-check:checked ~ .validate-form,
#other-check:checked ~ .validate-form,
#forgotpass-check:checked ~ .validate-form {
    transform: translateX(calc(var(--auth-step) * -1)) !important;
}

#text-check:checked ~ .validate-text {
    transform: translateX(calc(var(--auth-panel-w) * -2)) !important;
}

#email-check:checked ~ .validate-email {
    transform: translateX(calc((var(--auth-panel-w) - 10px) * -1)) !important;
}

#authapp-check:checked ~ .validate-authapp {
    transform: translateX(calc(var(--auth-panel-w) * -3)) !important;
}

#other-check:checked ~ .validate-other {
    transform: translateX(calc(var(--auth-panel-w) * -4)) !important;
}

#forgotpass-check:checked ~ .forgotpass-codescreen {
    transform: translateX(calc(var(--auth-panel-w) * -1)) !important;
}