/* Sign In / Email Sign In / Reset Password — split-screen layout (Figma "Signup 14" and related).
   Everything is scoped under .jakAuth. The pages only get that class (and the brand panel) when they are
   not opened by the JAK SDK popup, which keeps its compact legacy look. */
/* elements that only exist in the new design (hidden for the SDK popup's legacy layout) */
.jaOnly { display: none; }
.jakAuth .jaOnly { display: block; }
.jakAuth img.jaOnly { display: inline-block; }

body:has(.jakAuth) { background: #0055fc !important; background-image: none !important; }
body:has(.jakAuth) #blurContainer { display: none !important; }
body:has(.jakAuth) > .container,
body:has(.jakAuth) > .container > main { max-width: none; width: 100%; padding: 0; }
body:has(.jakAuth) .content, body:has(.jakAuth) .content__inner { max-width: none; }

#fullArea.jakAuth, .jakAuth {
    display: grid;
    grid-template-columns: minmax(0, 797fr) minmax(0, 851fr);
    width: 100% !important; max-width: none !important; min-height: 100vh; height: auto !important; margin: 0 !important;
    padding: 40px; box-sizing: border-box;
    font-family: "JAK Shell Sans", "Söhne", "Open Sans", sans-serif;
}
.jakAuth > .jak-auth-panel { display: block; }

/* White card on the right */
.jakAuth > .backgroundContainer,
.jakAuth__card {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: auto; min-height: calc(100vh - 80px); margin: 0; padding: 40px 0; box-sizing: border-box;
    background: #fff; border-radius: 36px; box-shadow: none; position: relative;
}
.jakAuth .loader { border-radius: 36px; }

.jakAuth .letsStartContainer,
.jakAuth .signInContainer,
.jakAuth .otpContainer {
    position: static; width: 100%; max-width: 476px; height: auto; min-height: 0; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: start; transform: none;
}
.jakAuth.jakAuth .close-btn, .jakAuth .back-btn, .jakAuth .jakLogo, .jakAuth .auditlogosign,
.jakAuth .letsStartContainer > img[alt="Store2door-logo"], .jakAuth .signInContainer > img[alt="Store2door-logo"],
.jakAuth .smsMessage, .jakAuth .smsChargesMessages, .jakAuth .sdk-hide-in-jak { display: none !important; }

.jakAuth h3.label, .jakAuth .lets-start-title, .jakAuth h4.title {
    margin: 0 0 8px; padding: 0; font-size: 30px; line-height: 48px; font-weight: 700 !important; letter-spacing: -.3px; color: #1a1026; text-align: start;
}
.jakAuth .jakAuth__sub, .jakAuth .letsStartContainer .message, .jakAuth .otpContainer .message {
    margin: 0 0 22px; font-size: 16px; line-height: 24px; color: #5f5670; text-align: start;
}

/* ---- inputs ---- */
.jakAuth .form-container { position: relative; width: 100%; margin: 0 0 16px !important; }
.jakAuth .form-container .form-group { width: 100%; margin: 0; }
.jakAuth .input-feild:not(.code-feild):not(.number-feild) {
    width: 100%; height: 56px; padding: 0 56px 0 20px; box-sizing: border-box; border: 1px solid #edeaf5; border-radius: 12px;
    background: #fff; font-size: 15px; color: #1a1026; box-shadow: none;
}
.jakAuth .input-feild::placeholder { color: #9e97ad; }
.jakAuth .input-feild:focus { border-color: #0055fc; outline: 0; }
.jakAuth .form-container .float { position: absolute; top: 50%; inset-inline-end: 20px; transform: translateY(-50%); display: flex; width: auto; height: auto; }
.jakAuth .form-container .float img { width: 22px; height: 22px; }
.jakAuth .form-control-placeholder { display: none; }

/* phone: one box = country | divider | number */
.jakAuth .form-wrapper {
    display: flex; align-items: center; width: 100%; height: 56px; padding: 0 20px; box-sizing: border-box;
    border: 1px solid #edeaf5; border-radius: 12px; background: #fff;
}
.jakAuth .form-wrapper .form-feild { position: relative; display: flex; align-items: center; height: 100%; margin: 0; padding: 0; width: auto; background: transparent; border: 0; }
.jakAuth .form-wrapper .form-feild:nth-child(2) { flex: 1; min-width: 0; }
.jakAuth .form-wrapper .form-feild .form-group { height: 100%; }
.jakAuth .form-wrapper .lang-select { position: relative; display: flex; align-items: center; height: 100%; background: transparent !important; }
.jakAuth .form-wrapper .btn-select {
    position: relative; height: 54px !important; margin: 0 !important; padding: 0 12px 0 0; border: 0; border-radius: 0;
    display: flex; align-items: center; gap: 4px;
    background-color: transparent !important; font-size: 16px; color: #000;
}
.jakAuth .form-wrapper .btn-select li:first-child { display: flex; align-items: center; gap: 4px; float: none; }
.jakAuth .form-wrapper .btn-select li:first-child img { position: static !important; margin: 0 !important; transform: none !important; }
.jakAuth .form-wrapper .btn-select li:first-child span { position: static !important; top: auto !important; margin: 0 !important; line-height: 20px !important; transform: none !important; }
.jakAuth .form-wrapper .btn-select li:last-child { display: flex; align-items: center; float: none; font-size: 0; }
.jakAuth .form-wrapper .btn-select li:last-child img { position: static !important; display: block; width: 16px !important; height: 16px !important; margin: 0 !important; transform: none !important; }
/* short divider (Figma) instead of a full-height border */
.jakAuth .form-wrapper .btn-select::after, .jrRM__cc::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: #d9d9d9; }
.jakAuth .form-wrapper .number-feild, .jakAuth .form-wrapper input.mobileNumber {
    width: 100% !important; height: 54px !important; padding: 0 40px 0 16px !important; margin: 0 !important; border: 0 !important; background: transparent !important; font-size: 15px;
}
[dir="rtl"] #fullArea #mNumber { direction: rtl !important; text-align: right !important; padding-right: 48px !important; padding-left: 16px !important; }
.jakAuth .form-wrapper .form-feild.form-container { width: auto !important; flex: 1; }
.jakAuth .form-wrapper .phone-icon { position: absolute; top: 50%; inset-inline-end: 0; transform: translateY(-50%); }
.jakAuth .form-wrapper .phone-icon img { width: 22px; height: 22px; }

/* ---- verification method ---- */
.jakAuth .otp-method-container { width: 100%; margin: 0 0 24px; }
.jakAuth .otp-method-subtitle { margin: 0 0 4px; padding: 4px 0; font-size: 14px; line-height: 24px; font-weight: 500; letter-spacing: -.14px; color: #1a1026; }
.jakAuth .otp-method-radios { display: flex; gap: 8px; }
.jakAuth .otp-radio-card {
    flex: 1; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px; margin: 0; position: relative;
    border: 1px solid #edeaf5; border-radius: 8px; background: #fff; cursor: pointer; box-sizing: border-box;
}
.jakAuth .otp-radio-card.selected { border-color: #0055fc; }
.jakAuth .otp-radio-card .otp-radio-icon { display: inline-flex; }
.jakAuth .otp-radio-card .otp-radio-label { flex: 1; font-size: 14px; font-weight: 400; line-height: 1.6; color: #5f5670; }
.jakAuth .otp-radio-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.jakAuth .otp-radio-card .otp-radio-dot { width: 20px; height: 20px; border: 1.5px solid #9e97ad; border-radius: 50%; box-sizing: border-box; flex: none; }
.jakAuth .otp-radio-card.selected .otp-radio-dot { border-color: #0055fc; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #0055fc; }

/* ---- buttons ---- */
.jakAuth .jaBtn {
    display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 56px; padding: 0 24px; margin: 0 0 12px;
    border: 0; border-radius: 12px; background: #0055fc; color: #fff; font-size: 16px; font-weight: 400; letter-spacing: .384px; text-decoration: none; cursor: pointer;
}
.jakAuth .jaBtn:hover { background: #0049d6; color: #fff; }
.jakAuth .jaBtn img { width: 22px; height: 22px; }
.jakAuth .jaBtn--dark { background: #1a1026; }
.jakAuth .jaBtn--dark:hover { background: #2b1f3a; }
.jakAuth .jaBtn--dark img.jaBtn__lead { filter: invert(1); }
.jakAuth a.jaBtn { margin-top: 0; }
.jakAuth .jaBtn:disabled { opacity: .45; cursor: not-allowed; }
/* legacy action buttons stay in the DOM (their handlers run) but the new buttons front them */
.jakAuth .otp-method-row, .jakAuth .jaLegacy { display: none !important; }

.jakAuth .jaFoot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; line-height: 1.6; color: #333; text-align: center; }
.jakAuth .jaFoot a { font-size: 14px; font-weight: 500; color: #005bff; text-decoration: none; }
.jakAuth .jaForgot { display: flex; justify-content: flex-end; gap: 6px; width: 100%; margin: -4px 0 20px; font-size: 13px; color: #1a1026; }
.jakAuth .jaForgot a, .jakAuth .jaForgot .reset-option { font-weight: 500; color: #0055fc; text-decoration: none; }
.jakAuth .chkLangMain { position: static !important; display: flex !important; justify-content: center; margin: 16px auto 0 !important; font-size: 14px !important; color: #5f5670 !important; }
.jakAuth .createAccount { display: none !important; }

/* =========== Reset password: the steps sit in a modal-style box over a dimmed card =========== */
.jakAuth--wizard { padding: 40px; }
.jakAuth--wizard .multisteps-form { width: 100%; height: auto !important; min-height: 0; }
.jakAuth--wizard .multisteps-form > .row:first-child { display: none; }
.jakAuth--wizard .multisteps-form > .row,
.jakAuth--wizard .multisteps-form > .row > [class*="col-"] { max-width: none; width: 100%; height: 100%; margin: 0; padding: 0; flex: 1 1 100%; }
.jakAuth--wizard .multisteps-form__form { height: 100% !important; }
.jakAuth--wizard .multisteps-form__panel { position: absolute !important; inset: 0; height: 100%; display: none; }
.jakAuth--wizard .multisteps-form__panel.js-active { display: block; }
.jakAuth--wizard .multisteps-form__content, .jakAuth--wizard .multisteps-form__content > br { height: 100%; }
.jakAuth--wizard .multisteps-form__content > br { display: none; }
.jakAuth--wizard .multisteps-form__form { position: relative; min-height: calc(100vh - 80px); }
.jakAuth--wizard .backgroundContainer {
    background: #aab0bb; border-radius: 36px; height: 100%; min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box;
}
.jakAuth--wizard .letsStartContainer, .jakAuth--wizard .otpContainer {
    width: 527px; max-width: 100%; padding: 32px; background: #fff; border-radius: 24px; box-shadow: 0 12px 40px rgba(26, 16, 38, .18);
}
.jakAuth--wizard h4.lets-start-title, .jakAuth--wizard h4.title { margin: 0 0 12px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
.jakAuth--wizard .letsStartContainer .message, .jakAuth--wizard .otpContainer .message { margin: 0 0 20px; font-size: 14px; line-height: 20px; color: #454545; }
.jakAuth--wizard .otp-container { display: flex; justify-content: center; gap: 16px; margin: 8px 0 16px; }
.jakAuth--wizard .otp-container .otpInput { width: 56px; height: 60px; padding: 0; border: 1px solid #e5e9ef; border-radius: 12px; background: #fff; font-size: 22px; font-weight: 500; text-align: center; color: #1a1026; }
.jakAuth--wizard .otp-container .otpInput:focus { border-color: #0055fc; outline: 0; }
.jakAuth--wizard .resend-option { text-align: center; font-size: 13px; color: #454545; }
.jakAuth--wizard .resend-option #timer { color: #454545 !important; }
.jakAuth--wizard .resend-link { font-weight: 500; color: #0055fc; }
.jakAuth--wizard .center-container { width: 100%; }
.jakAuth--wizard .button-row { width: 100%; margin: 0 !important; }
.jakAuth--wizard .button-row .btn-primary, .jakAuth--wizard .jaBtn {
    width: 100%; 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;
}
.jakAuth--wizard .button-row .btn-primary .btn-label { color: #fff; }
.jakAuth--wizard .button-row .btn-primary .btn-icon { display: none; }
.jakAuth--wizard .forgetBottom { margin-top: 16px; align-items: center; }
.jakAuth--wizard .forgetBottom a.flex { justify-content: center; text-decoration: none; }
.jakAuth--wizard .forgetBottom .create-account-label { margin: 0; font-size: 14px; font-weight: 500; color: #1a1026; }
.jakAuth--wizard .chkLangMain { margin-top: 12px !important; }

@media (max-width: 991.98px) {
    #fullArea.jakAuth, .jakAuth { grid-template-columns: minmax(0, 1fr); padding: 16px; min-height: 100vh; }
    .jakAuth > .jak-auth-panel { display: none; }
    .jakAuth > .backgroundContainer, .jakAuth__card { min-height: calc(100vh - 32px); border-radius: 24px; padding: 32px 20px; }
    /* legacy mobile rules add their own side padding; the card already has it */
    div.jakAuth #divLoginMobile, div.jakAuth .signInContainer, div.jakAuth .letsStartContainer, div.jakAuth .otpContainer { padding: 0 !important; }
    div.jakAuth .form-wrapper { padding: 0 !important; }
    div.jakAuth .form-container .form-group { width: 100% !important; max-width: none !important; padding: 0 !important; }
    div.jakAuth .form-container .input-feild:not(.number-feild):not(.code-feild), div.jakAuth .form-container input#txtem, div.jakAuth .form-container input#txtpassword { width: 100% !important; padding-inline-end: 56px !important; }
}


.jakAuth .form-container { padding: 0 !important; }
.jakAuth .form-wrapper .form-feild .form-group { display: flex; align-items: center; }
.jakAuth .form-wrapper .number-feild { line-height: 54px; }
.jakAuth p.sign_in_btn { width: 100%; margin: 0 !important; }
.jakAuth #signinEmail.jaBtn, .jakAuth .sign_in_btn button.btn.jaBtn {
    width: 100% !important; height: 56px; margin: 0 0 12px !important; padding: 0 24px !important; border: 0 !important; border-radius: 12px !important;
    background: #1a1026 !important; color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.jakAuth #signinEmail .btn-label { color: #fff !important; font-size: 16px; font-weight: 400; letter-spacing: .384px; }
.jakAuth #signinEmail .btn-icon { display: none !important; }
.jakAuth #signinEmail img.jaBtn__lead { filter: invert(1); }
.jakAuth #signinSub.jaBtn { background: #0055fc; color: #fff; }
.jakAuth #signinSub.jaBtn .btn-label { color: #fff; }
.jakAuth #signinSub.jaBtn .btn-icon { display: inline-flex; position: static; }

.jakAuth .input-feild:not(.code-feild):not(.number-feild) { width: 100% !important; max-width: none !important; }
.jakAuth--wizard .button-row, .jakAuth--wizard .button-row.send-otp, .jakAuth--wizard .send-otp { position: static !important; width: 100% !important; transform: none !important; margin: 0 !important; display: block; }
.jakAuth--wizard .send-otp .btn.btn-primary { position: static; width: 100%; margin: 0; }
.jakAuth--wizard .lets-start-title, .jakAuth--wizard h4.title, .jakAuth--wizard .letsStartContainer .message, .jakAuth--wizard .otpContainer .message { text-align: start !important; }
.jakAuth--wizard .center-container { display: block; }
.jakAuth--wizard .form-container .float { inset-inline-end: 20px; }

/* legacy wizard CSS positions titles, messages and buttons absolutely; the modal box lays them out in flow */
.jakAuth--wizard :is(.letsStartContainer, .otpContainer) :is(h4, .message, .otp-container, .center-container, .button-row, .btn, .resend-option, .forgetBottom, .smsChargesMessages) {
    position: static !important; inset: auto !important; transform: none !important; float: none !important;
}
.jakAuth--wizard :is(.letsStartContainer, .otpContainer) .btn { width: 100% !important; margin: 0 !important; }
.jakAuth--wizard :is(.letsStartContainer, .otpContainer) .center-container { margin: 0 !important; padding: 0; }
.jakAuth--wizard .otp-container { margin: 8px 0 16px !important; }
.jakAuth--wizard .resend-option { margin: 0 0 20px !important; }
.jakAuth--wizard :is(.letsStartContainer, .otpContainer) .button-row { margin-top: 0 !important; }
.jakAuth--wizard .lets-start-title, .jakAuth--wizard h4.title { display: block; width: 100%; }

/* =====================================================================================
   Reset Password modal (_ResetPasswordModal.cshtml) — over the right-hand card
   ===================================================================================== */
.jrRM { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40, 55, 85, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: "JAK Shell Sans", "Söhne", "Open Sans", sans-serif; }
.jrRM[hidden], .jrRM [hidden] { display: none !important; }
body:has(.jakAuth) > .jrRM { top: 40px; right: 40px; bottom: 40px; left: calc(40px + (100% - 80px) * 797 / 1648); border-radius: 36px; }
@media (max-width: 991.98px) { body:has(.jakAuth) > .jrRM { inset: 0; border-radius: 0; } }
.jrRM__box { position: relative; width: 527px; max-width: 100%; max-height: 100%; overflow: visible; padding: 32px; background: #fff; border-radius: 24px; box-shadow: 0 12px 40px rgba(26, 16, 38, .18); }
.jrRM__x { position: absolute; top: 28px; inset-inline-end: 28px; width: 28px; height: 28px; border: 0; background: none; font-size: 26px; line-height: 1; color: #1a1026; cursor: pointer; }
.jrRM__title { margin: 0 40px 12px 0; font-size: 20px; line-height: 28px; font-weight: 500; color: #1a1026; text-align: start; }
.jrRM__text { margin: 0 0 20px; font-size: 14px; line-height: 20px; color: #454545; text-align: start; }
.jrRM__label { margin: 16px 0 4px; padding: 4px 0; font-size: 14px; line-height: 24px; font-weight: 500; color: #1a1026; }
.jrRM__field { position: relative; margin-bottom: 20px; }
.jrRM__input { width: 100%; height: 56px; padding: 0 56px 0 20px; box-sizing: border-box; border: 1px solid #e5e9ef; border-radius: 12px; background: #fff; font-size: 15px; color: #1a1026; outline: 0; }
.jrRM__input:focus { border-color: #0055fc; }
.jrRM__icon { position: absolute; top: 50%; inset-inline-end: 20px; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none; }
.jrRM__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin: 4px 0 0; border: 0; border-radius: 12px; background: #0055fc; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }
.jrRM__btn:hover { background: #0049d6; }
.jrRM__btn.is-busy { opacity: .6; pointer-events: none; }
.jrRM__link { display: block; margin-top: 16px; text-align: center; font-size: 14px; font-weight: 500; color: #1a1026; text-decoration: none; }
.jrRM__link:hover { color: #0055fc; }

.jrRM__phone { position: relative; display: flex; align-items: center; height: 56px; padding: 0 20px; box-sizing: border-box; border: 1px solid #e5e9ef; border-radius: 12px; background: #fff; }
.jrRM__cc { display: flex; align-items: center; gap: 8px; height: 100%; position: relative; padding: 0 12px 0 0; border: 0; background: none; font-size: 16px; color: #000; cursor: pointer; }
.jrRM__cc img:first-child { width: 32px; height: 20px; border-radius: 3px; object-fit: cover; image-rendering: -webkit-optimize-contrast; }
.jrRM__num { flex: 1; min-width: 0; height: 100%; padding: 0 44px 0 16px; border: 0; background: none; font-size: 15px; outline: 0; }
.jrRM__phone .jrRM__icon { inset-inline-end: 20px; }
.jrRM__ccList { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 5; width: 300px; max-height: 260px; overflow: auto; padding: 8px; background: #fff; border: 1px solid #e5e9ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(26, 16, 38, .12); }
.jrRM__ccSearch { width: 100%; height: 40px; margin-bottom: 6px; padding: 0 12px; box-sizing: border-box; border: 1px solid #e5e9ef; border-radius: 8px; font-size: 14px; outline: 0; }
.jrRM__ccList ul { margin: 0; padding: 0; list-style: none; }
.jrRM__ccList li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.jrRM__ccList li:hover { background: #f5f8ff; }
.jrRM__ccList li span { flex: 1; }
.jrRM__ccList li b { font-weight: 400; color: #5f5670; }
.jrRM__ccList li img { border-radius: 3px; object-fit: cover; }

.jrRM__radios { display: flex; gap: 8px; margin-bottom: 20px; }
.jrRM__radio { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px; box-sizing: border-box; border: 1px solid #edeaf5; border-radius: 8px; background: #fff; font-size: 14px; color: #5f5670; cursor: pointer; }
.jrRM__radio span { flex: 1; }
.jrRM__radio input { position: absolute; opacity: 0; pointer-events: none; }
.jrRM__radio i { flex: none; width: 20px; height: 20px; border: 1.5px solid #9e97ad; border-radius: 50%; box-sizing: border-box; }
.jrRM__radio.is-on { border-color: #0055fc; }
.jrRM__radio.is-on i { border-color: #0055fc; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #0055fc; }

.jrRM__otp { display: flex; justify-content: center; gap: 16px; margin: 8px 0 16px; }
.jrRM__code { width: 56px; height: 60px; padding: 0; border: 1px solid #e5e9ef; border-radius: 12px; background: #fff; font-size: 22px; font-weight: 500; text-align: center; color: #1a1026; outline: 0; }
.jrRM__code:focus { border-color: #0055fc; }
.jrRM__resend { margin: 0 0 20px; text-align: center; font-size: 13px; color: #454545; }
.jrRM__resend a { font-weight: 500; color: #0055fc; text-decoration: none; }

/* ---- Sign In page alignment fixes (legacy flex-centering shrank the fields) ---- */
.jakAuth #divLoginMobile, .jakAuth .signInContainer { display: block !important; }
.jakAuth #divLoginMobile > *, .jakAuth .signInContainer > * { max-width: none; }
.jakAuth .form-container { max-width: none !important; width: 100% !important; }
.jakAuth .form-wrapper .form-feild, .jakAuth .form-wrapper .form-feild.form-container { margin: 0 !important; }
.jakAuth .form-wrapper .form-feild:nth-child(2) { align-self: stretch; }
.jakAuth .form-wrapper .form-feild:nth-child(2) .form-group { height: 100%; width: 100%; display: flex; align-items: center; }
.jakAuth .form-wrapper .phone-icon { position: absolute; top: 50%; inset-inline-end: 0; transform: translateY(-50%); display: flex !important; width: 22px; height: 22px; margin: 0; }
.jakAuth .form-wrapper .phone-icon img { width: 22px; height: 22px; display: block; }
.jakAuth .form-wrapper #mNumber { flex: 1; width: 100%; height: 100% !important; padding: 0 36px 0 16px !important; line-height: normal; }
.jakAuth p.sign_in_btn { display: block; width: 100% !important; }
.jakAuth .otp-method-container, .jakAuth .jaBtn, .jakAuth .jaFoot { width: 100%; box-sizing: border-box; }

/* ---- RTL ---- */
[dir="rtl"] body:has(.jakAuth) > .jrRM { left: 40px; right: calc(40px + (100% - 80px) * 797 / 1648); }
@media (max-width: 991.98px) { [dir="rtl"] body:has(.jakAuth) > .jrRM { inset: 0; } }
/* phone boxes stay visually LTR (flag + dial code, then number) like the registration form */
.jakAuth .form-wrapper, .jrRM__phone { direction: ltr; }
.jakAuth .form-wrapper .number-feild, .jakAuth .form-wrapper #mNumber, .jrRM__num { text-align: left !important; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select { display: flex; align-items: center; gap: 8px; direction: ltr; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li { display: flex; align-items: center; gap: 8px; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select img { position: static; margin: 0; }
[dir="rtl"] .jrRM__box .jrRM__title { margin: 0 0 12px; padding-inline-start: 44px; box-sizing: border-box; }
[dir="rtl"] .jrRM__x { inset-inline-end: auto; inset-inline-start: 28px; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li:first-child img { position: static !important; top: auto !important; inset: auto !important; margin: 0 !important; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li:first-child span { top: 0 !important; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li:last-child img { right: 6px !important; left: auto !important; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li:first-child img { transform: none !important; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li:first-child { float: none !important; }
[dir="rtl"] .jakAuth .form-wrapper .btn-select li:last-child { float: none !important; }

/* ---- tester bugs 2026-10-06 ---- */
/* Country picker: flag is a 32x24 rounded rectangle (Figma), not a circle that crops the flag into a blob */
.jakAuth .form-wrapper .btn-select li:first-child img { width: 32px !important; height: 20px !important; border-radius: 3px !important; object-fit: cover !important; image-rendering: -webkit-optimize-contrast; }
.jakAuth .form-wrapper .btn-select, .jakAuth .form-wrapper .btn-select:focus, .jakAuth .form-wrapper .btn-select:active, .jakAuth .form-wrapper .btn-select:hover { outline: 0 !important; box-shadow: none !important; background: transparent !important; }
.jrRM__otp { gap: 12px; }
.jrRM__code { width: 48px; height: 52px; font-size: 20px; border-radius: 10px; }
[dir="rtl"] .jrRM__code { direction: ltr !important; text-align: center !important; text-indent: 0 !important; padding: 0 !important; unicode-bidi: isolate !important; }
/* "Sign In" title underline (tester request) */
.jakAuth .jaTitle { display: block; padding-bottom: 0; border-bottom: 0; }

/* =====================================================================================
   Phone layout (Figma mobile frames): no blue frame — soft light gradient full screen, small logo mark centred on
   top, language link in the top corner. Sign In / Email Sign In (.jakAuth) and Create Account (.jakReg).
   ===================================================================================== */
@media (max-width: 767.98px) {
    body:has(.jakAuth) { background: linear-gradient(180deg, #e8eefb 0%, #f6f8fe 38%, #fff 100%) fixed !important; }
    div.jakAuth { padding: 0 !important; }
    div.jakAuth > .backgroundContainer {
        min-height: 100vh; border-radius: 0; background: transparent; padding: 100px 16px 32px; align-items: flex-start; position: relative;
    }
    div.jakAuth > .backgroundContainer::before {
        content: ""; position: absolute; top: 40px; left: 50%; width: 44px; height: 44px; transform: translateX(-50%);
        background: url("/imgs/jakLogoIcon.png") center / contain no-repeat;
    }
    div.jakAuth .chkLangMain {
        position: absolute !important; top: 44px; bottom: auto !important; height: auto !important; width: auto !important; inset-inline-end: 16px; margin: 0 !important; font-size: 15px !important; color: #1a1026 !important;
    }
    .jakAuth h3.label, .jakAuth .lets-start-title { text-align: center; }
    .jakAuth h3.label.jaTitle { display: block; border-bottom: 0; padding-bottom: 0; }
    .jakAuth .jakAuth__sub, .jakAuth .letsStartContainer .message { text-align: center; }
}

/* phone-only extras (top-bar back arrow, field labels) */
.jaMobBack, .jaMobLabel { display: none; }
@media (max-width: 767.98px) {
    .jaMobBack { position: absolute; top: 44px; inset-inline-start: 16px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; z-index: 2; }
    [dir="rtl"] .jaMobBack svg { transform: scaleX(-1); }
    .jaMobLabel { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #1a1026; text-align: start; }
}

/* Sign In phone: short grey divider between the country code and the number (same as Create Account) */
.jakAuth .form-wrapper .lang-select { position: relative; }
.jakAuth .form-wrapper .lang-select::after { content: ""; position: absolute; top: 50%; inset-inline-end: 0; width: 1px; height: 24px; transform: translateY(-50%); background: #d9d9d9; pointer-events: none; }

/* show / hide password toggle inside the reset-password popup */
.jrRM__eye { position: absolute; top: 50%; inset-inline-end: 16px; transform: translateY(-50%); display: inline-flex; padding: 0; border: 0; background: none; color: #9e97ad; cursor: pointer; }
.jrRM__eye .jrRM__eyeOff { display: inline; }
.jrRM__eye.is-on .jrRM__eyeOff { display: none; }
.jrRM__eye.is-on { color: #0055fc; }

/* Arabic: placeholders must keep the page's Arabic font (a Latin-only font made them fall back to a calligraphic system face on phones) */
[dir="rtl"] .jakAuth input::placeholder, [dir="rtl"] .jakAuth textarea::placeholder, [dir="rtl"] .jrRM input::placeholder,
[dir="rtl"] #otpModal input::placeholder { font-family: "Jali Arabic", sans-serif; }

/* ---- tester round 3 (#003 #007): sentence-style casing, lighter weight on the Sign In buttons ---- */
.jakAuth #signinEmail .btn-label, .jakAuth #signinSub .btn-label, .jakAuth #loginViaOtp, .jakAuth #loginViaOtp span { text-transform: none !important; font-weight: 400 !important; }
.jakAuth #signinSub, .jakAuth #signinSub span, .jakAuth #signinGo, .jakAuth #signinGo span { font-weight: 400 !important; text-transform: none !important; }
.jrRM__didnt { margin: 0 0 4px; text-align: center; font-size: 13px; font-weight: 500; color: #1a1026; }
.jrRM__resend { margin-top: 0; }
/* Change Password step in the reset popup (Figma): labels, red border + message under the field */
.jrRM__lbl { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #1a1026; }
.jrRM__field { margin-bottom: 4px; }
.jrRM__input.has-error { border-color: #d32f2f; }
.jrRM__err { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: #d32f2f; }
.jrRM__err[hidden] { display: none; }
[data-rm-step="3"] .jrRM__field { margin-bottom: 4px; }
[data-rm-step="3"] .jrRM__lbl:not(:first-of-type) { margin-top: 16px; }

/* Tester #007: the label inside the Sign In button and the "Create New Account" link still used the Söhne Halbfett (semi-bold)
   FILE as their font-family, so they rendered bold even at font-weight 400. Use the shell family at regular weight. */
.jakAuth .jaBtn, .jakAuth .jaBtn *, .jakAuth .sign-in-btn .btn-label,
.jakAuth .create-account-label, .jakAuth .createAccount, .jakAuth .createAccount * {
    font-family: var(--jak-shell-font) !important; font-weight: 400 !important; font-synthesis: none;
}
.jakAuth .create-account-label { font-size: 14px; line-height: 20px; }