/*
    Two-step sign-in verification — the Security Verification modal and the Success confirmation.
    Built on the shared .wp-modal shell (modal-base.css): this file owns only what differs — the
    shield/check marks, the 6-digit code inputs, the primary Continue button, and the success state.

    This page is Bootstrap-free, so open/close/backdrop/Esc/focus are driven by the vanilla
    controller in Index.cshtml, exactly as the Apply modal is. Palette is the page's own tokens
    (variables.css): --primary drives the mark and the button; success green is local to this file.
*/

.otp-modal,
.otp-success {
    --otp-success: #12B76A;
    --otp-success-soft: #D1FADF;
    --otp-error: #E03131;
    --otp-box-border: var(--light-border);
}

/*
    Fixed, viewport-centred overlay + backdrop. This route loads no Bootstrap, so the fixed
    positioning, vertical centring and backdrop tint/blur it would supply are declared here —
    mirroring the Apply modal's rules in login-page.css so both modals behave identically. The
    surface, entry/exit and close button still come from modal-base.css via .wp-modal.
*/
.login-page .otp-modal.modal,
.login-page .otp-success.modal {
    position: fixed;
    inset: 0;                 /* pins to the viewport: never scrolls with the page */
    z-index: 1055;            /* above the backdrop (1050) and all page chrome */
    display: none;            /* the controller flips this to block on open */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;           /* honours mobile browser chrome where supported */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
}

/* Perfectly centred, both axes — flex + a full-height min keep the dialog mid-viewport. */
.login-page .otp-modal .modal-dialog-centered,
.login-page .otp-success .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 32px);
    margin: 0 auto;
}

/* Dark, semi-transparent, blurred overlay — the login page stays visible behind it. */
.login-page #wp-otp-backdrop.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(7, 20, 55, 0.55); /* --heading at 55% */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.login-page #wp-otp-backdrop.modal-backdrop.show {
    opacity: 1;
}

.login-page #wp-otp-backdrop[hidden] {
    display: none;
}

/* Lock the page behind any open modal on this route (no scroll while a modal is up). */
body.wp-modal-open {
    overflow: hidden;
}

/* Both verification and success surfaces are a touch narrower than the Apply modal. */
.otp-modal .modal-dialog,
.otp-success .modal-dialog {
    max-width: 440px;
}

/* Upright serif (not the Apply modal's italic) — matches the reference lockup. */
.otp-modal .wp-modal__title,
.otp-success .wp-modal__title {
    font-family: var(--modal-font-heading);
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
}

/* ---- Shield mark ---- */
.otp-modal__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.otp-modal__icon svg {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 8px 16px rgba(98, 0, 238, 0.28));
}

/* ---- Code inputs ---- */
.otp-form {
    margin: 0;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 8px;
}

.otp-box {
    width: clamp(40px, 13vw, 52px);
    height: 56px;
    padding: 0;
    text-align: center;
    font-family: var(--modal-font-body-strong);
    font-size: 22px;
    font-weight: 600;
    color: var(--heading);
    background-color: var(--white);
    border: 1.5px solid var(--otp-box-border);
    border-radius: var(--modal-radius-control);
    caret-color: var(--primary);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    -moz-appearance: textfield;
}

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

.otp-box--filled {
    border-color: var(--primary-30);
    background-color: var(--primary-5);
}

.otp-box:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--modal-focus-ring);
}

.otp-box--error {
    border-color: var(--otp-error);
    background-color: #FEF2F2;
}

/* ---- Inline error (never closes the modal) ---- */
.otp-error {
    min-height: 20px;
    margin: 0 0 8px;
    text-align: center;
    font-family: var(--modal-font-body);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--otp-error);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.otp-error--shown {
    opacity: 1;
    transform: none;
}

/* ---- Continue / OK buttons ---- */
.otp-continue {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 15px 20px;
    border: none;
    border-radius: var(--modal-radius-control);
    background-color: var(--primary);
    color: var(--white);
    font-family: var(--modal-font-body-strong);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 60ms ease;
}

.otp-continue:hover {
    background-color: var(--primary-hover, #5300cc);
    box-shadow: 0 10px 24px -8px rgba(98, 0, 238, 0.5);
}

.otp-continue:active {
    transform: translateY(1px);
}

.otp-continue:focus {
    outline: none;
}

.otp-continue:focus-visible {
    box-shadow: var(--modal-focus-ring), 0 10px 24px -8px rgba(98, 0, 238, 0.5);
}

.otp-continue[aria-busy="true"] {
    cursor: progress;
}

.otp-continue[aria-busy="true"] .otp-continue__label {
    visibility: hidden;
}

.otp-continue__spinner {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: otp-spin 700ms linear infinite;
}

.otp-continue[aria-busy="true"] .otp-continue__spinner {
    display: block;
}

@keyframes otp-spin {
    to { transform: rotate(360deg); }
}

/* ---- Success state ---- */
.otp-success .modal-content {
    text-align: center;
    overflow: hidden;
}

.otp-success__check {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.otp-success__check-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background-color: var(--otp-success);
    box-shadow: 0 0 0 8px var(--otp-success-soft);
    animation: otp-pop 320ms var(--modal-ease) both;
}

.otp-success__check-circle svg {
    width: 42px;
    height: 42px;
    stroke: var(--white);
}

@keyframes otp-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* Decorative confetti dots — echo the reference; purely cosmetic. */
.otp-success__confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.otp-success__confetti span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    opacity: 0.85;
    animation: otp-confetti 900ms var(--modal-ease) both;
}

.otp-success__confetti span:nth-child(1) { left: 22%; top: 26%; background: #F79009; animation-delay: 40ms; }
.otp-success__confetti span:nth-child(2) { left: 74%; top: 22%; background: #6200EE; border-radius: 50%; animation-delay: 90ms; }
.otp-success__confetti span:nth-child(3) { left: 34%; top: 18%; background: #12B76A; animation-delay: 140ms; }
.otp-success__confetti span:nth-child(4) { left: 64%; top: 30%; background: #F63D68; border-radius: 50%; animation-delay: 60ms; }
.otp-success__confetti span:nth-child(5) { left: 18%; top: 40%; background: #2E90FA; animation-delay: 180ms; }
.otp-success__confetti span:nth-child(6) { left: 80%; top: 42%; background: #F79009; border-radius: 50%; animation-delay: 120ms; }

@keyframes otp-confetti {
    0% { transform: translateY(-10px) scale(0.4); opacity: 0; }
    50% { opacity: 0.9; }
    100% { transform: translateY(0) scale(1); opacity: 0.85; }
}

.otp-success__ok {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .otp-success__check-circle,
    .otp-success__confetti span { animation: none; }
    .otp-continue__spinner { animation-duration: 1200ms; }
}