/* ===== Shared OTP verification screens + "do not close" loader popup =====
   Used by the business area registration and the conference registration forms. */
/* ===== Do Not Close Popup ===== */
.do-not-close-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.do-not-close-popup[hidden] {
    display: none !important;
}

.do-not-close-popup.is-open {
    display: flex;
}

.do-not-close-popup .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.do-not-close-popup .modal-dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 90%;
    margin: 20px;
}

.do-not-close-popup .modal-content {
    padding: 40px 32px;
    text-align: center;
}

.do-not-close-popup .modal-title {
    font-size: 1.5rem;
    color: #1a2b4a;
    margin-bottom: 16px;
    font-weight: 700;
}

.do-not-close-popup .modal-text {
    font-size: 1rem;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0;
}

/* Both iOS Safari and Android Chrome can keep scrolling behind a fixed overlay
   when the body is only set to overflow: hidden, and the scrolling element is
   sometimes html rather than body, so both are locked. The JS parks the scroll
   offset in the top property and puts it back on close. */
html.modal-open {
    overflow: hidden;
    height: 100%;
}

body.modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    /* The global html, body { height: 100% } would size this fixed box to one
       screen and overflow: hidden would then clip the rest of the page away,
       taking the footer with it on short viewports. Auto height sizes the box
       to its content, so nothing is clipped and the page stays as it was. */
    height: auto;
    overflow: hidden;
}

/* ===== OTP Verification (modal overlay) ===== */
#otpContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#otpContainer[hidden] {
    display: none !important;
}

.otp-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
}

.otp-screen[hidden] {
    display: none !important;
}

.otp-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 40px 32px;
    max-width: 480px;
    width: 90%;
    margin: 20px;
    text-align: center;
}

/* Closes the popup and returns to the form with everything still filled in. */
.otp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1a2b4a;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.otp-close:hover {
    background: rgba(15, 60, 116, 0.08);
}

.otp-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
    color: #1a2b4a;
    font-weight: 600;
}

/* The six boxes live in a form of their own so WebKit spreads an autofilled
   code across all of them. Purely a grouping element - no layout of its own. */
.otp-form {
    margin: 0;
    padding: 0;
    border: 0;
}

.otp-input-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    direction: ltr;
}

.otp-digit {
    width: 48px;
    height: 52px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

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

.otp-digit:focus {
    border-color: #1a2b4a;
    box-shadow: 0 0 0 2px rgba(26, 43, 74, 0.15);
}

.otp-digit.otp-error {
    border-color: #c8102e;
}

.otp-error-message {
    color: #c8102e;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.otp-resend {
    margin-bottom: 24px;
    font-size: 0.875rem;
    color: #4a4a4a;
}

.otp-resend-link {
    color: #1a2b4a;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.otp-resend-link:hover {
    color: #0d1a33;
}

.otp-screen .btn.primary {
    min-width: 200px;
}

/* Lockout */
.otp-countdown {
    font-size: 2rem;
    font-weight: 700;
    color: #1a2b4a;
    margin: 24px 0;
    direction: ltr;
}

/* Success */
.otp-success-card h2 {
    font-size: 1.5rem;
    color: #1a2b4a;
    margin-bottom: 16px;
}

.otp-success-card .rich-text {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 24px;
}

.otp-success-icon {
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    width: 110px;
    height: 110px;
}

.otp-success-icon .player,
.otp-success-icon lottie-player {
    width: 100%;
    height: 100%;
}

/* Mobile: larger touch targets for digit inputs */
@media (max-width: 575px) {
    .otp-card {
        padding: 32px 20px;
    }

    .otp-digit {
        width: 44px;
        height: 48px;
        font-size: 1.2rem;
    }

    .otp-input-group {
        gap: 6px;
    }
}