/* Simply.IN Native Login Page - Shop-Login OTP Popup
   Same chrome treatment as the cart offer's OTP modal (simplyin-cart-offer.css) - kept in its own
   file/selector rather than sharing that one so this login-page surface never touches the cart
   page's CSS. Box background/width/padding come from the branded .simplyin-popup class
   (simplyin-modal.css, loaded on this page too); checkout gets its rounded corners + shadow from
   the Magento_Ui modal wrapper, which this page can't use (see login/shop-login-otp.js docblock),
   so this adds the same treatment directly. */
.simplyin-login-otp-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.simplyin-login-otp-modal.active {
    display: flex;
}

.simplyin-login-otp-modal .simplyin-popup {
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
}

/* Digit-group sizing: both groups already inherit the shared box/gap treatment from
   simplyin-modal.css's ".popup-input-code .simplyin-otp-digit" rules (40x56 default, 55x87 at
   min-width:1280px, 45x70 at max-width:600px) via the shared .simplyin-otp-digit class - that's
   tuned for a 4-box row and fits the SMS-fallback group unchanged. The 6-box e-mail group needs a
   narrower box at the same small-viewport breakpoint, or it overflows the popup on the smallest
   supported screens (6 boxes at the shared 45px + 5 gaps of 10px = 320px, wider than the ~280px
   interior a 320px-wide viewport leaves inside .simplyin-popup-content's padding). */
@media screen and (max-width: 600px) {
    body .simplyin-login-otp-digits-email .simplyin-otp-digit {
        width: 32px !important;
        height: 46px !important;
        font-size: 18px !important;
    }

    .simplyin-login-otp-digits-email {
        gap: 8px;
    }
}

/* Persistent field badge - shown next to the e-mail input from page load, see
   login/shop-login-otp.js's injectFieldBadge(). */
.simplyin-login-field-wrap {
    position: relative;
}

.simplyin-login-field-wrap .input-text {
    padding-right: 36px;
}

.simplyin-login-field-badge {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}