/* =====================================================================================
   OTP modal (Figma "Signup 25"): sits over the right-hand card only, left panel stays clear
   ===================================================================================== */
body:has(.jakReg .lestsstartt.js-active) > #otpModal,
body:has(.jakAuth) > #otpModal {
    top: 40px; right: 40px; bottom: 40px;
    left: calc(40px + (100% - 80px) * 797 / 1648);
    width: auto; height: auto;
    border-radius: 36px;
    background: rgba(40, 55, 85, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 991.98px) {
    body:has(.jakReg .lestsstartt.js-active) > #otpModal,
body:has(.jakAuth) > #otpModal { inset: 0; border-radius: 0; }
}
#otpModal .otp-modal-container {
    width: 527px; max-width: calc(100% - 32px); padding: 32px; border-radius: 24px;
    box-shadow: 0 12px 40px rgba(26, 16, 38, .18);
}
#otpModal .otp-modal-close { top: 28px; right: 28px; font-size: 24px; font-weight: 400; color: #1a1026; }
[dir="rtl"] #otpModal .otp-modal-close { right: auto; left: 28px; }
#otpModal .otp-modal-title { margin: 0 40px 12px 0; font: 500 20px/28px 'JAK Shell Sans', 'Söhne', 'Open Sans', sans-serif; text-align: start; color: #1a1026; }
#otpModal .otp-modal-message { margin: 0 0 8px; font-size: 14px; line-height: 20px; text-align: start; color: #454545; }
#otpModal .otp-container .otpInput {
    width: 56px; height: 60px; padding: 0; border: 1px solid #e5e9ef; border-radius: 12px; background: #fff;
    font-size: 22px; font-weight: 500; color: #1a1026; text-align: center;
}
#otpModal .otp-container .otpInput:focus { border-color: #0055fc; outline: 0; }
#otpModal .otp-modal-hint { margin: 8px 0 4px !important; font-size: 13px !important; color: #454545 !important; text-align: center; }
#otpModal .resend-option { margin: 4px 0 !important; }
#otpModal .resend { font-size: 13px; color: #454545; }
#otpModal .resend-link { font-size: 14px; font-weight: 500; color: #0055fc; }
#otpModal #btnVerifyOTP {
    height: 56px; border: 0; border-radius: 12px; background: #0055fc; color: #fff; font-size: 16px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
#otpModal #btnVerifyOTP .btn-label { color: #fff; }
#otpModal #btnVerifyOTP .btn-icon { display: none; }
@media (min-width: 992px) { body:has(.jakAuth) > #otpModal { top: 40px; bottom: 40px; } }

/* RTL: the card is on the left, so the overlay mirrors */
[dir="rtl"] body:has(.jakReg .lestsstartt.js-active) > #otpModal,
[dir="rtl"] body:has(.jakAuth) > #otpModal {
    left: 40px;
    right: calc(40px + (100% - 80px) * 797 / 1648);
}
@media (max-width: 991.98px) {
    [dir="rtl"] body:has(.jakReg .lestsstartt.js-active) > #otpModal,
    [dir="rtl"] body:has(.jakAuth) > #otpModal { inset: 0; }
}

/* tester feedback 2026-10-06: boxes a bit smaller */
#otpModal .otp-container { gap: 12px !important; }
#otpModal .otp-container .otpInput { width: 48px !important; height: 52px !important; font-size: 20px; border-radius: 10px; }

/* phone: the legacy absolute/translated Verify button would hang outside the box */
@media (max-width: 991.98px) {
    #otpModal #btnVerifyOTP { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; margin: 0 !important; }
    #otpModal .otp-modal-container { height: auto !important; }
}

/* Phone: tighter OTP card, so there is no dead space under Verify */
@media (max-width: 575.98px) {
    #otpModal .otp-modal-container { padding: 28px 24px 20px; }
    #otpModal .button-row { margin-top: 16px !important; margin-bottom: 0 !important; }
    #otpModal .resend-option { margin: 4px 0 8px !important; }
}

/* "Resend OTP" link: deliberately NOT the legacy .resend-link class (commonscript.js binds that to the old inline OTP screen,
   which hid the page and left only the blue pattern behind the modal when it fired together with the modal's own handler). */
#otpModal .jrResendLink { font-size: 14px; font-weight: 500; color: #0055fc; text-decoration: none; cursor: pointer; }
#otpModal .jrResendLink:hover { text-decoration: underline; }