/**
 * Popup Control — front end styles.
 *
 * Nearly every value comes from a custom property written inline per popup,
 * so this file only describes layout, states and motion.
 */

.pctl-popup {
	--pctl-width: 560px;
	--pctl-max-width: 90vw;
	--pctl-min-width: 0px;
	--pctl-height: auto;
	--pctl-max-height: 90vh;
	--pctl-min-height: 0px;
	--pctl-overflow: auto;
	--pctl-padding: 32px;
	--pctl-radius: 14px;
	--pctl-bg: #fff;
	--pctl-color: inherit;
	--pctl-border: none;
	--pctl-shadow: 0 24px 60px -12px rgba(16, 24, 40, 0.28);
	--pctl-overlay-bg: rgba(16, 24, 40, 0.65);
	--pctl-overlay-blur: 0px;
	--pctl-z: 999999;
	/* Zero needs a unit: these feed calc() below. */
	--pctl-offset-x: 0px;
	--pctl-offset-y: 0px;
	--pctl-in-duration: 320ms;
	--pctl-out-duration: 220ms;
	--pctl-in-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
	--pctl-out-easing: ease-out;
	--pctl-close-size: 34px;
	--pctl-close-color: #667085;
	--pctl-close-bg: rgba(16, 24, 40, 0.06);
	--pctl-bg-size: cover;
	--pctl-bg-position: center center;
	--pctl-bg-repeat: no-repeat;

	position: fixed;
	top: var(--pctl-offset-y);
	left: var(--pctl-offset-x);
	right: calc(-1 * var(--pctl-offset-x));
	bottom: calc(-1 * var(--pctl-offset-y));
	z-index: var(--pctl-z);
	display: none;
	box-sizing: border-box;
}

.pctl-popup *,
.pctl-popup *::before,
.pctl-popup *::after {
	box-sizing: border-box;
}

.pctl-popup[hidden] {
	display: none !important;
}

.pctl-popup.pctl-is-open,
.pctl-popup.pctl-closing {
	display: flex;
}

/* ---------------------------------------------------------------- Overlay */

.pctl-overlay {
	/* Fixed so the box offsets never drag the dimmer off the viewport. */
	position: fixed;
	inset: 0;
	background: var(--pctl-overlay-bg);
	animation: pctl-overlay-in var(--pctl-in-duration) ease both;
}

.pctl-popup:not(.pctl-has-overlay) {
	pointer-events: none;
}

.pctl-popup:not(.pctl-has-overlay) .pctl-box {
	pointer-events: auto;
}

@supports (backdrop-filter: blur(1px)) {
	.pctl-overlay {
		backdrop-filter: blur(var(--pctl-overlay-blur));
	}
}

.pctl-closing .pctl-overlay {
	animation: pctl-overlay-out var(--pctl-out-duration) ease both;
}

/* -------------------------------------------------------------------- Box */

.pctl-box {
	position: relative;
	width: var(--pctl-width);
	max-width: var(--pctl-max-width);
	min-width: var(--pctl-min-width);
	height: var(--pctl-height);
	max-height: var(--pctl-max-height);
	min-height: var(--pctl-min-height);
	padding: var(--pctl-padding);
	border: var(--pctl-border);
	border-radius: var(--pctl-radius);
	background: var(--pctl-bg);
	background-size: var(--pctl-bg-size);
	background-position: var(--pctl-bg-position);
	background-repeat: var(--pctl-bg-repeat);
	box-shadow: var(--pctl-shadow);
	color: var(--pctl-color);
	overflow: var(--pctl-overflow);
	margin: auto;
	-webkit-overflow-scrolling: touch;
}

.pctl-popup[style*="--pctl-font"] .pctl-box,
.pctl-box {
	font-family: var(--pctl-font, inherit);
	font-size: var(--pctl-font-size, inherit);
	line-height: var(--pctl-line-height, inherit);
	text-align: var(--pctl-text-align, inherit);
}

.pctl-box a {
	color: var(--pctl-link, inherit);
}

/*
 * Padding should be the only space around the content. Theme and block
 * styles add outer margins (often with higher specificity) and nested
 * blocks carry their own, so the first and last element at each level is
 * flattened, and images sit on the box edge instead of the text baseline.
 */
/* Margins set on a block in the editor arrive inline and are left alone. */
.pctl-content > :first-child:not([style*="margin"]),
.pctl-content > :first-child > :first-child:not([style*="margin"]),
.pctl-content > :first-child > :first-child > :first-child:not([style*="margin"]) {
	margin-top: 0 !important;
}

.pctl-content > :last-child:not([style*="margin"]),
.pctl-content > :last-child > :last-child:not([style*="margin"]),
.pctl-content > :last-child > :last-child > :last-child:not([style*="margin"]) {
	margin-bottom: 0 !important;
}

.pctl-content img,
.pctl-content video,
.pctl-content iframe,
.pctl-content svg {
	vertical-align: bottom;
}

.pctl-content > p:empty,
.pctl-content > br:last-child {
	display: none;
}

/* --------------------------------------------------------------- Position */

.pctl-popup {
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.pctl-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.pctl-pos-top-center { align-items: flex-start; justify-content: center; }
.pctl-pos-top-right { align-items: flex-start; justify-content: flex-end; }
.pctl-pos-center-left { align-items: center; justify-content: flex-start; }
.pctl-pos-center-center { align-items: center; justify-content: center; }
.pctl-pos-center-right { align-items: center; justify-content: flex-end; }
.pctl-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.pctl-pos-bottom-center { align-items: flex-end; justify-content: center; }
.pctl-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }

.pctl-popup:not(.pctl-pos-center-center) .pctl-box {
	margin: 0;
}

/* ------------------------------------------------------------ Popup types */

.pctl-type-fullscreen .pctl-box {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pctl-type-fullscreen {
	padding: 0;
}

.pctl-type-corner .pctl-box {
	--pctl-width: 340px;
}

.pctl-type-bar {
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	inset: auto 0 auto 0;
	height: auto;
}

.pctl-type-bar.pctl-bar-bottom {
	inset: auto 0 0 0;
}

.pctl-type-bar.pctl-bar-top {
	inset: 0 0 auto 0;
}

.pctl-type-bar .pctl-box {
	width: 100%;
	max-width: none;
	border-radius: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.pctl-type-bar:not(.pctl-bar-sticky) {
	position: absolute;
}

.pctl-inline {
	position: static;
	display: block;
	inset: auto;
	padding: 0;
	translate: none;
}

.pctl-inline .pctl-box {
	margin: 0 auto;
}

.pctl-inline .pctl-overlay {
	display: none;
}

/* ----------------------------------------------------------- Close button */

.pctl-close {
	position: absolute;
	width: var(--pctl-close-size);
	height: var(--pctl-close-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--pctl-close-bg);
	color: var(--pctl-close-color);
	line-height: 1;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 2;
}

.pctl-close svg {
	width: 58%;
	height: 58%;
	fill: currentColor;
	display: block;
}

.pctl-close:hover {
	transform: scale(1.06);
	opacity: 0.85;
}

.pctl-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pctl-close--circle { border-radius: 50%; }
.pctl-close--square { border-radius: 8px; }
.pctl-close--plain { background: transparent; }

.pctl-close--text {
	width: auto;
	height: auto;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.85em;
	white-space: nowrap;
}

.pctl-close-at-inside-top-right { top: 10px; right: 10px; }
.pctl-close-at-inside-top-left { top: 10px; left: 10px; }
.pctl-close-at-inside-bottom-right { bottom: 10px; right: 10px; }
.pctl-close-at-inside-bottom-left { bottom: 10px; left: 10px; }
.pctl-close-at-outside-top-right { top: calc(var(--pctl-close-size) * -1 - 8px); right: 0; }
.pctl-close-at-outside-top-left { top: calc(var(--pctl-close-size) * -1 - 8px); left: 0; }

.pctl-close-at-bottom-center {
	position: static;
	display: block;
	margin: 18px auto 0;
}

/* ------------------------------------------------- Opt out and auto close */

.pctl-dsa {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 0.82em;
	opacity: 0.75;
	cursor: pointer;
}

.pctl-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(16, 24, 40, 0.08);
	overflow: hidden;
	border-radius: 0 0 var(--pctl-radius) var(--pctl-radius);
}

.pctl-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	opacity: 0.45;
}

/* ------------------------------------------------------------- Animations */

.pctl-opening .pctl-box {
	animation-duration: var(--pctl-in-duration);
	animation-timing-function: var(--pctl-in-easing);
	animation-fill-mode: both;
}

.pctl-closing .pctl-box {
	animation-duration: var(--pctl-out-duration);
	animation-timing-function: var(--pctl-out-easing);
	animation-fill-mode: both;
}

.pctl-opening[data-pctl-anim-in="fade"] .pctl-box { animation-name: pctl-fade-in; }
.pctl-opening[data-pctl-anim-in="slide-up"] .pctl-box { animation-name: pctl-slide-up-in; }
.pctl-opening[data-pctl-anim-in="slide-down"] .pctl-box { animation-name: pctl-slide-down-in; }
.pctl-opening[data-pctl-anim-in="slide-left"] .pctl-box { animation-name: pctl-slide-left-in; }
.pctl-opening[data-pctl-anim-in="slide-right"] .pctl-box { animation-name: pctl-slide-right-in; }
.pctl-opening[data-pctl-anim-in="zoom-in"] .pctl-box { animation-name: pctl-zoom-in; }
.pctl-opening[data-pctl-anim-in="zoom-out"] .pctl-box { animation-name: pctl-zoom-out-in; }
.pctl-opening[data-pctl-anim-in="bounce"] .pctl-box { animation-name: pctl-bounce-in; }
.pctl-opening[data-pctl-anim-in="flip"] .pctl-box { animation-name: pctl-flip-in; }
.pctl-opening[data-pctl-anim-in="rotate"] .pctl-box { animation-name: pctl-rotate-in; }
.pctl-opening[data-pctl-anim-in="swing"] .pctl-box { animation-name: pctl-swing-in; }

.pctl-closing[data-pctl-anim-out="fade"] .pctl-box { animation-name: pctl-fade-out; }
.pctl-closing[data-pctl-anim-out="slide-up"] .pctl-box { animation-name: pctl-slide-up-out; }
.pctl-closing[data-pctl-anim-out="slide-down"] .pctl-box { animation-name: pctl-slide-down-out; }
.pctl-closing[data-pctl-anim-out="slide-left"] .pctl-box { animation-name: pctl-slide-left-out; }
.pctl-closing[data-pctl-anim-out="slide-right"] .pctl-box { animation-name: pctl-slide-right-out; }
.pctl-closing[data-pctl-anim-out="zoom-in"] .pctl-box { animation-name: pctl-zoom-out; }
.pctl-closing[data-pctl-anim-out="zoom-out"] .pctl-box { animation-name: pctl-zoom-out; }
.pctl-closing[data-pctl-anim-out="bounce"] .pctl-box { animation-name: pctl-zoom-out; }
.pctl-closing[data-pctl-anim-out="flip"] .pctl-box { animation-name: pctl-flip-out; }
.pctl-closing[data-pctl-anim-out="rotate"] .pctl-box { animation-name: pctl-rotate-out; }
.pctl-closing[data-pctl-anim-out="swing"] .pctl-box { animation-name: pctl-fade-out; }

@keyframes pctl-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pctl-overlay-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes pctl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pctl-fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes pctl-slide-up-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pctl-slide-up-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(40px); } }

@keyframes pctl-slide-down-in { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes pctl-slide-down-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-40px); } }

@keyframes pctl-slide-left-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes pctl-slide-left-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(60px); } }

@keyframes pctl-slide-right-in { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes pctl-slide-right-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-60px); } }

@keyframes pctl-zoom-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@keyframes pctl-zoom-out-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes pctl-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } }

@keyframes pctl-bounce-in {
	0% { opacity: 0; transform: scale(0.7); }
	55% { opacity: 1; transform: scale(1.06); }
	75% { transform: scale(0.97); }
	100% { transform: scale(1); }
}

@keyframes pctl-flip-in { from { opacity: 0; transform: perspective(1000px) rotateX(-35deg); } to { opacity: 1; transform: none; } }
@keyframes pctl-flip-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: perspective(1000px) rotateX(35deg); } }

@keyframes pctl-rotate-in { from { opacity: 0; transform: rotate(-8deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes pctl-rotate-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotate(8deg) scale(0.9); } }

@keyframes pctl-swing-in {
	0% { opacity: 0; transform: rotate(-6deg); }
	40% { opacity: 1; transform: rotate(4deg); }
	70% { transform: rotate(-2deg); }
	100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pctl-reduced-motion-ok .pctl-box,
	.pctl-reduced-motion-ok .pctl-overlay {
		animation-name: pctl-fade-in !important;
		animation-duration: 120ms !important;
	}

	.pctl-reduced-motion-ok.pctl-closing .pctl-box,
	.pctl-reduced-motion-ok.pctl-closing .pctl-overlay {
		animation-name: pctl-fade-out !important;
	}
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 767px) {
	.pctl-mpos-center-center { align-items: center; justify-content: center; }
	.pctl-mpos-top-center { align-items: flex-start; justify-content: center; }

	.pctl-mpos-bottom-center {
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}

	.pctl-mpos-bottom-center .pctl-box {
		width: 100%;
		max-width: 100%;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.pctl-mpos-fullscreen {
		padding: 0;
	}

	.pctl-mpos-fullscreen .pctl-box {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
}