/**
 * ITPCPLUS Popups - front-end styles.
 * Colors, spacing, borders and width of the popup itself come from the
 * section's own Divi design settings.
 */

/* Hidden until opened (also prevents a flash before the script runs). */
.et_pb_section.popup,
.itpcplus-popup,
[data-itpcplus-popup] {
	display: none;
}

.itpcplus-pop-wrap {
	display: none;
	position: fixed;
	/* Offset is measured in JS (admin bar + sticky/fixed/theme-builder header). */
	top: var(--itpcplus-pop-offset, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000001;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 10px;
	box-sizing: border-box;
	background: transparent;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 300ms;
	outline: none;
}

/* Fallback only until JS measures the real header. Inline --itpcplus-pop-offset wins. */
.admin-bar .itpcplus-pop-wrap {
	--itpcplus-pop-offset: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .itpcplus-pop-wrap {
		--itpcplus-pop-offset: 46px;
	}
}

.itpcplus-pop-wrap.is-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.itpcplus-pop-wrap.is-visible {
	opacity: 1;
}

.itpcplus-pop-wrap > .et_pb_section.popup,
.itpcplus-pop-wrap > .itpcplus-popup,
.itpcplus-pop-wrap > [data-itpcplus-popup] {
	display: block;
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	transition-property: transform;
	transition-duration: inherit;
	transition-timing-function: ease-out;
}

/* Zero-specificity defaults, so the section's own Divi width/margin/shadow settings win. */
:where(.itpcplus-pop-wrap) > :where(.itpcplus-pop-section) {
	margin: auto;
	width: 90%;
	min-width: min(320px, 100%);
	max-width: 100%;
	/* Zero-specificity white fill so a transparent Divi section does not show
	   the page overlay through the popup. The section's own Divi background wins. */
	background-color: #fff;
	isolation: isolate;
	position: relative;
	z-index: 1;
}

:where(.itpcplus-pop-wrap:not(.itpcplus-pop-no-shadow)) > :where(.itpcplus-pop-section) {
	box-shadow: 0 3px 10px -1px rgba(0, 0, 0, 0.3), 0 2px 50px 2px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 980px) {
	:where(.itpcplus-pop-wrap) > :where(.itpcplus-pop-section) {
		width: 100%;
	}
}

/* Animations */
.itpcplus-pop-anim-zoom > * {
	transform: scale(0.85);
}

.itpcplus-pop-anim-slide-up > * {
	transform: translateY(60px);
}

.itpcplus-pop-anim-slide-down > * {
	transform: translateY(-60px);
}

.itpcplus-pop-wrap.is-visible > * {
	transform: none;
}

.itpcplus-pop-anim-none,
.itpcplus-pop-anim-none > *,
.itpcplus-pop-overlay.itpcplus-pop-anim-none {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.itpcplus-pop-wrap,
	.itpcplus-pop-wrap > *,
	.itpcplus-pop-overlay {
		transition: none !important;
		transform: none !important;
	}
}

/* Overlay: full-viewport backdrop behind the popup wrap (never a child of it).
   It dims only the page. The wrap sits at a higher z-index so the popup stays bright. */
.itpcplus-pop-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000000;
	background-color: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: auto;
	transition-property: opacity;
	transition-duration: 300ms;
}

.itpcplus-pop-overlay.is-open {
	display: block;
}

.itpcplus-pop-overlay.is-visible {
	opacity: 1;
}

/* Page scroll lock */
html.itpcplus-pop-lock,
html.itpcplus-pop-lock body {
	overflow: hidden !important;
}

/* Close button (dark by default; light inside dark popups).
   Default 14px inset sits just inside the popup on all screen sizes.
   Position uses :where() (zero specificity) so custom CSS, including an
   intentionally outside position, still wins. */
.itpcplus-pop-section > .itpcplus-pop-close {
	position: absolute;
	z-index: 100;
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.03);
	color: #333;
	font-family: "Courier New", monospace;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	opacity: 0.75;
	transition: all 0.2s;
}

:where(.itpcplus-pop-section > .itpcplus-pop-close) {
	top: 14px;
	right: 14px;
}

.itpcplus-pop-section > .itpcplus-pop-close:hover,
.itpcplus-pop-section > .itpcplus-pop-close:focus {
	opacity: 1;
	background: #fff;
	color: #000;
	transform: scale(1.1);
}

.itpcplus-pop-section > .itpcplus-pop-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.itpcplus-pop-dark .itpcplus-pop-section > .itpcplus-pop-close {
	background: rgba(0, 0, 0, 0.15);
	color: #eee;
	text-shadow: 0 0 1px #000, 0 0 3px rgba(0, 0, 0, 0.65);
}

.itpcplus-pop-dark .itpcplus-pop-section > .itpcplus-pop-close:hover,
.itpcplus-pop-dark .itpcplus-pop-section > .itpcplus-pop-close:focus {
	background: #2b2b2b;
	color: #fff;
}

.itpcplus-pop-close-alt .itpcplus-pop-section > .itpcplus-pop-close,
.itpcplus-pop-close-alt .itpcplus-pop-section > .itpcplus-pop-close:hover,
.itpcplus-pop-close-alt .itpcplus-pop-section > .itpcplus-pop-close:focus {
	background: transparent;
	box-shadow: none;
}

/* Loader */
.itpcplus-pop-loading > .itpcplus-pop-section::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	animation: itpcplus-pop-spin 0.8s linear infinite;
	z-index: 99;
}

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

/* Keep lightboxes (Divi gallery/image) above open popups. */
.itpcplus-pop-open .mfp-bg {
	z-index: 2147483000;
}

.itpcplus-pop-open .mfp-wrap {
	z-index: 2147483001;
}

/* Master-page popups container takes no space. */
.itpcplus-pop-master {
	display: contents;
}