.np-popup {
--np-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: fixed;
inset: 0;
z-index: var(--np-z, 100050);
display: flex;
align-items: center;
justify-content: center;
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
visibility: hidden;
pointer-events: none;
}
.np-popup[hidden] {
display: none !important;
}
.np-popup.is-open {
visibility: visible;
pointer-events: auto;
overflow: hidden;
}
.np-popup--pos-top {
align-items: flex-start;
padding-top: max(48px, env(safe-area-inset-top));
}
.np-popup__overlay {
position: absolute;
inset: 0;
background: var(--np-overlay, rgba(11, 18, 32, 0.55));
opacity: 0;
transition: opacity 0.28s var(--np-ease);
}
.np-popup.is-open .np-popup__overlay {
opacity: 1;
}
.np-popup__dialog {
position: relative;
z-index: 1;
width: min(100%, var(--np-width, 640px));
max-width: 100%;
min-width: 0;
max-height: calc(100dvh - 24px);
margin: 0;
display: flex;
flex-direction: column;
background: var(--np-dialog-bg, #fff);
border-radius: var(--np-radius, 16px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.28s var(--np-ease),
transform 0.34s var(--np-ease);
} .np-popup__body {
padding: var(--np-pad, 24px);
flex: 0 0 auto;
overflow: visible;
}
.np-popup__body .nsf-field-select,
.np-popup__body .nsf-field-select:has(.nice-select.open) {
position: relative;
z-index: 5;
overflow: visible;
}
.np-popup__body .nice-select.open {
z-index: 60;
overflow: visible !important;
}
.np-popup--shadow .np-popup__dialog {
box-shadow:
0 24px 60px rgba(15, 23, 42, 0.28),
0 2px 8px rgba(15, 23, 42, 0.08);
}
.np-popup--full .np-popup__dialog {
width: min(100vw, 100%);
height: var(--np-max-h, 96vh);
max-height: none;
border-radius: 0;
}
.np-popup.is-open .np-popup__dialog {
opacity: 1;
transform: none;
}
.np-popup--scale .np-popup__dialog {
transform: scale(0.96) translateY(6px);
}
.np-popup--scale.is-open .np-popup__dialog {
transform: none;
}
.np-popup--slide-up .np-popup__dialog {
transform: translateY(28px);
}
.np-popup--slide-up.is-open .np-popup__dialog {
transform: none;
}
.np-popup--fade .np-popup__dialog {
transform: none;
}
.np-popup__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--np-header-bg, #fff);
color: var(--np-header-color, #111827);
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
flex-shrink: 0;
position: relative;
}
.np-popup__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
padding-inline-end: 44px;
}
.np-popup__close {
appearance: none;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
padding: 6px 8px;
border-radius: 10px;
opacity: 0.78;
transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
z-index: 2;
}
.np-popup__close:hover,
.np-popup__close:focus-visible {
opacity: 1;
background: rgba(15, 23, 42, 0.06);
outline: none;
}
.np-popup__close:active {
transform: translateY(-50%) scale(0.96);
}
.np-popup__close--circle {
border-radius: 999px;
background: rgba(15, 23, 42, 0.05);
}
.np-popup__close--text {
font-size: 0.85rem;
font-weight: 600;
padding-inline: 12px;
}
.np-popup__close--image {
padding: 4px;
background: transparent;
}
.np-popup__close--image:hover,
.np-popup__close--image:focus-visible {
background: rgba(15, 23, 42, 0.04);
}
.np-popup__close-img {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
} .np-popup.is-open .nsf-form.nsf-form-loading {
opacity: 1;
visibility: visible;
}
.np-popup__body .elementor-section,
.np-popup__body .e-con {
max-width: 100%;
}
html.np-popup-lock,
html.np-popup-lock body {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.np-popup__overlay,
.np-popup__dialog {
transition: none !important;
}
}