/* Shared 6-digit OTP entry modal (Views/Shared/Partials/Auth/_OtpModal.cshtml + Scripts/otp-modal.js) */

/* Self-sufficient base modal chrome, ID-scoped to #otp_modal only. This modal is used from
   Views/Default/Index.cshtml (the pre-auth login page), which has Layout = null and loads no
   Bootstrap CSS at all (only an old Bootstrap 3 JS bundle, for its own unrelated behavior) --
   Html.DefaultModal's markup uses Bootstrap-4-only classes like .modal-dialog-centered that
   would otherwise render completely unstyled there. These rules are safe to also apply on
   authenticated pages that DO have Bootstrap 4 CSS loaded, since they're scoped to this one
   modal's id and simply reinforce the same appearance rather than overriding anything else.
   Bootstrap's modal JS plugin (loaded on every page this modal appears on) still owns the
   show/hide mechanics (backdrop element creation, display toggling) -- these rules only own
   the visual appearance of those states. */
#otp_modal.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10500;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

    #otp_modal.modal.show,
    #otp_modal.modal.in {
        display: block;
    }

#otp_modal .modal-dialog {
    position: relative;
    width: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
    max-width: 420px;
    pointer-events: none;
}

@media (max-width: 480px) {
    #otp_modal .modal-dialog {
        max-width: calc(100vw - 24px);
        margin: 0 12px;
    }
}

@media (max-width: 360px) {
    .otp-digit-box {
        width: 38px;
        height: 48px;
        font-size: 19px;
    }

    .otp-box-row {
        gap: 6px;
    }
}

#otp_modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    outline: 0;
    /* Default is fully visible -- safe fallback if the animate-in class below never gets
       applied for any reason. The keyframe itself supplies the 0%-opacity starting point
       for the brief entrance transition. */
    opacity: 1;
}

    /* Applied by Scripts/otp-modal.js on Bootstrap's shown.bs.modal event (not a passive
       CSS-only trigger) -- reliably restarts on every open of this persistent modal instance,
       not just the first. */
    #otp_modal .modal-content.otp-animate-in {
        animation: otpModalPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

#otp_modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #eef1f2;
}

    #otp_modal .modal-header .modal-title {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: #33475b;
    }

    #otp_modal .modal-header .close {
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 18px;
        line-height: 1;
        color: #94a3b8;
        cursor: pointer;
    }

#otp_modal .modal-body {
    padding: 10px 0 0 0 !important;
}

/* Not ID-scoped to #otp_modal (Bootstrap appends .modal-backdrop as a body-level sibling,
   not necessarily DOM-adjacent to #otp_modal), but IS scoped to body.otp-modal-backdrop-scope
   (toggled by $.showOtpModal in Scripts/otp-modal.js right before/after .modal(...)) so it only
   ever applies while the OTP modal itself is open. Needed on the login page, which has no
   Bootstrap backdrop CSS of its own at all. Applying this unscoped broke every OTHER Bootstrap
   modal on authenticated pages once this stylesheet started loading app-wide (see
   _HeaderAssets.cshtml): this z-index (10490) sits ABOVE those modals' own default Bootstrap
   z-index (~1050), and the opacity was only conditioned on .show/.in, which Bootstrap never adds
   to a backdrop unless the modal element itself has the "fade" class -- plain `class="modal"`
   markup (e.g. Views/CompanySelection/Index.cshtml's #m_modal_6) hit the un-animated base state,
   opacity:1, i.e. a solid black screen with the modal content stacked invisibly underneath it. */
body.otp-modal-backdrop-scope .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10490;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0.5;
}

@keyframes otpModalPopIn {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.otp-modal-body {
    text-align: center;
    padding: 8px 16px 20px 16px;
}

.otp-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px auto;
    border-radius: 50%;
    background: rgba(144, 173, 179, 0.14);
    color: var(--primary, #90adb3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.otp-modal-message {
    color: #5b6b74;
    font-size: 14px;
    margin-bottom: 22px;
}

.otp-modal-user-info {
    color: #33475b;
    font-size: 13px;
    margin: -12px 0 14px 0;
}

.otp-modal-spam-note {
    color: var(--danger, #f4516c);
    font-size: 11px;
    line-height: 1.35;
    text-align: left;
    margin: 4px 0 0 0;
    padding: 8px 10px;
    background: rgba(244, 81, 108, 0.08);
    border-radius: 8px;
}

    .otp-modal-spam-note i {
        margin-right: 4px;
    }

.otp-box-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .otp-box-row.otp-shake {
        animation: otpBoxShake 0.45s ease-in-out;
    }

    .otp-box-row.otp-success .otp-digit-box {
        border-color: var(--success, #34bfa3) !important;
        color: var(--success, #34bfa3);
        transition: border-color 0.2s ease, color 0.2s ease;
    }

.otp-digit-box {
    width: 46px;
    height: 54px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #33475b;
    border: 1.5px solid var(--border-gray, #ddd);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    -moz-appearance: textfield;
}

    .otp-digit-box::-webkit-outer-spin-button,
    .otp-digit-box::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .otp-digit-box:focus {
        border-color: var(--primary, #90adb3);
        box-shadow: 0 0 0 3px rgba(144, 173, 179, 0.22);
    }

    .otp-digit-box.otp-filled {
        animation: otpBoxFillPulse 0.3s ease;
        border-color: var(--primary, #90adb3);
    }

@keyframes otpBoxFillPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(144, 173, 179, 0.5);
    }

    40% {
        transform: scale(1.22);
        box-shadow: 0 0 0 6px rgba(144, 173, 179, 0.18);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(144, 173, 179, 0);
    }
}

@keyframes otpBoxShake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(7px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(3px);
    }
}

.otp-modal-error {
    color: var(--danger, #f4516c);
    font-size: 13px;
    margin-bottom: 14px;
    animation: otpErrorFadeIn 0.2s ease;
}

@keyframes otpErrorFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.otp-modal-actions {
    margin-bottom: 12px;
}

.otp-verify-btn {
    min-width: 140px;
    background-color: var(--primary, #90adb3) !important;
    border-color: var(--primary, #90adb3) !important;
}

    .otp-verify-btn:hover {
        background-color: var(--primary-dark, #638b93) !important;
        border-color: var(--primary-dark, #638b93) !important;
    }

.otp-modal-resend {
    font-size: 13px;
}

    .otp-modal-resend a {
        color: var(--primary-dark, #638b93);
        text-decoration: none;
    }

        .otp-modal-resend a:hover {
            text-decoration: underline;
        }

        .otp-modal-resend a.otp-resend-disabled {
            pointer-events: none;
            color: #a9b4b8;
        }

#otp_resend_countdown {
    color: #a9b4b8;
}

/* Close (X) button visibility is toggled per call-site by Scripts/otp-modal.js based on the
   `dismissable` option, since Html.DefaultModal renders this partial's header once, globally. */
#otp_modal.otp-not-dismissable .modal-header .close {
    display: none;
}

/* Success confirmation view -- swapped in for #otp_form_view on a correct code (see
   Scripts/otp-modal.js submitCode()) instead of hiding the modal immediately, so the user
   gets a clear, deliberate confirmation before navigation happens. */
#otp_success_view {
    padding: 12px 0 8px 0;
    text-align: center;
}

.otp-success-check-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-success-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--success, #34bfa3);
    opacity: 0;
}

    #otp_success_view.otp-success-animate .otp-success-ring {
        animation: otpSuccessRing 0.7s ease-out;
    }

.otp-success-check {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--success, #34bfa3);
    color: #fff;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    opacity: 0;
}

    #otp_success_view.otp-success-animate .otp-success-check {
        animation: otpSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
    }

@keyframes otpSuccessRing {
    0% {
        transform: scale(0.6);
        opacity: 0.45;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes otpSuccessPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.otp-success-message {
    color: #33475b;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    opacity: 0;
}

    #otp_success_view.otp-success-animate .otp-success-message {
        animation: otpSuccessTextIn 0.4s ease 0.35s forwards;
    }

@keyframes otpSuccessTextIn {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}