/* Sign-in flow, shared by the /signin page and the modal (users::auth.flow) */
.signin-flow { width: 100%; }
.signin-step[hidden] { display: none !important; }
.signin-step { animation: signinIn .2s ease; }
@keyframes signinIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.signin-title { font-size: 20px; font-weight: 900; color: var(--colorDarker); margin: 0 0 8px; }
.signin-lead { font-size: 14px; line-height: 1.9; color: var(--colorGrayDark); margin: 0 0 20px; }
.signin-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--colorText); }
.signin-flow .kt-input { height: 48px; line-height: 48px; font-size: 16px; border-radius: var(--borderRadiusMd); }
.signin-ltr { direction: ltr; text-align: left; }
.signin-flow input.signin-ltr::placeholder { text-align: left; }

.signin-error { min-height: 22px; margin: 6px 0 0; font-size: 13px; color: var(--colorRed); }
.signin-error:empty { min-height: 8px; }
.signin-error.is-info { color: var(--colorGrayDark); }
.signin-hint { font-size: 12px; color: var(--colorGray); margin: 6px 0 0; }

.signin-submit { width: 100%; height: 48px; justify-content: center; font-size: 16px; margin-top: 8px; }

.signin-link {
    display: inline-flex; align-items: center; background: none; border: 0; padding: 10px 0; margin-top: 6px;
    color: var(--colorMain); font-size: 14px; font-weight: 600; cursor: pointer;
}
.signin-link:hover { text-decoration: underline; }
.signin-link-inline { padding: 0; margin: 0 4px 0 0; font-size: 13px; }
.signin-terms { font-size: 12px; color: var(--colorGray); margin: 10px 0 0; }
.signin-terms a { color: var(--colorGrayDark); text-decoration: underline; }

/* 5 code boxes */
.otp-boxes { display: flex; gap: 10px; justify-content: center; }
.otp-box {
    width: 52px; height: 58px; flex: 0 1 52px; min-width: 0; text-align: center; font-size: 24px; font-weight: 700;
    border: 1.5px solid rgba(0, 0, 0, .2); border-radius: var(--borderRadiusMd); background: #fff; color: var(--colorText);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; caret-color: var(--colorMain);
}
.otp-box:focus { outline: 0; border-color: var(--colorMain); box-shadow: 0 0 0 3px rgba(var(--colorMainRGB), .15); }
.otp-box.filled { border-color: rgba(var(--colorMainRGB), .55); }
.otp-boxes.invalid .otp-box { border-color: var(--colorRed); }
.otp-boxes.shake { animation: otpShake .35s ease; }
.otp-boxes.done .otp-box { border-color: var(--colorGreen); }
@keyframes otpShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .signin-step, .otp-boxes.shake { animation: none; } }

.signin-resend { text-align: center; font-size: 13px; color: var(--colorGray); margin: 12px 0 0; min-height: 40px; }
.signin-resend [hidden] { display: none !important; }

.signin-pass-wrap { position: relative; }
.signin-pass-wrap .kt-input { padding-right: 46px; }
.signin-eye {
    position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none;
    color: var(--colorGray); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.signin-password-opt { margin-top: 6px; }
.signin-password-box { padding: 12px; margin-top: 4px; border-radius: var(--borderRadiusMd); background: rgba(var(--colorMainRGB), .04); }

/* page */
.signin-page-body { padding: 15px 0 !important; }
.signin-container { margin: 80px auto; width: 460px; max-width: 100%; }
.signin-form-box { background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .1); border-radius: 24px; padding: 40px; margin: 0; }
.signin-logo { display: block; text-align: center; margin-bottom: 28px; }
.signin-logo img { max-width: 160px; height: auto; }

/* modal */
#signinModal .modal-body { padding: 8px 24px 24px; }
#signinModal .modal-header { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 992px) {
    .signin-container { margin: 0 auto; width: 100%; }
    .signin-form-box { box-shadow: none; border-radius: 0; padding: 24px 16px; }
}
@media (max-width: 360px) {
    .otp-boxes { gap: 6px; }
    .otp-box { height: 52px; font-size: 22px; }
}