/* ---------- wrapper / overlay ---------- */

.ipop-wrap {
	position: fixed;
	inset: 0;
	display: flex;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ipop-speed, 300ms) ease, visibility var(--ipop-speed, 300ms) ease;
	padding: 20px;
	box-sizing: border-box;
}

.ipop-wrap.ipop-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Keep it interactive during the closing transition, then it goes away. */
.ipop-wrap.ipop-closing {
	visibility: visible;
	pointer-events: none;
}

.ipop-overlay-bg {
	position: absolute;
	inset: 0;
}

/* With no overlay the wrapper still covers the viewport, so it must stay
   click-through or it would silently make the whole page unclickable.
   Only the box itself takes pointer events. This rule has to match the
   specificity of .ipop-wrap.ipop-open above and come after it. */
.ipop-wrap.ipop-no-overlay,
.ipop-no-overlay.ipop-open {
	pointer-events: none;
}
.ipop-no-overlay.ipop-open .ipop-box {
	pointer-events: auto;
}
.ipop-no-overlay .ipop-overlay-bg {
	display: none;
}

body.ipop-scroll-locked {
	overflow: hidden;
}

/* ---------- box ---------- */

.ipop-box {
	position: relative;
	box-sizing: border-box;
	max-height: 90vh;
	transition: transform var(--ipop-speed, 300ms) ease, opacity var(--ipop-speed, 300ms) ease;
}

/* ---------- positions ---------- */

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

/* ---------- open animations ---------- */

.ipop-anim-none .ipop-box         { transform: none; }
.ipop-anim-fade .ipop-box         { opacity: 0; }
.ipop-anim-zoom .ipop-box         { opacity: 0; transform: scale(.9); }
.ipop-anim-slide-top .ipop-box    { opacity: 0; transform: translateY(-40px); }
.ipop-anim-slide-bottom .ipop-box { opacity: 0; transform: translateY(40px); }
.ipop-anim-slide-left .ipop-box   { opacity: 0; transform: translateX(-40px); }
.ipop-anim-slide-right .ipop-box  { opacity: 0; transform: translateX(40px); }

.ipop-wrap.ipop-open .ipop-box {
	opacity: 1;
	transform: none;
}

/* ---------- close animations ---------- */

.ipop-closing.ipop-close-anim-fade .ipop-box         { opacity: 0; }
.ipop-closing.ipop-close-anim-zoom .ipop-box         { opacity: 0; transform: scale(.9); }
.ipop-closing.ipop-close-anim-slide-top .ipop-box    { opacity: 0; transform: translateY(-40px); }
.ipop-closing.ipop-close-anim-slide-bottom .ipop-box { opacity: 0; transform: translateY(40px); }
.ipop-closing.ipop-close-anim-slide-left .ipop-box   { opacity: 0; transform: translateX(-40px); }
.ipop-closing.ipop-close-anim-slide-right .ipop-box  { opacity: 0; transform: translateX(40px); }

/* ---------- close button ---------- */

.ipop-close-btn {
	position: absolute;
	top: 8px;
	right: 10px;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	color: inherit;
	opacity: .55;
	transition: opacity .2s ease;
	z-index: 2;
}
.ipop-close-btn:hover,
.ipop-close-btn:focus {
	opacity: 1;
}
.ipop-close-btn.ipop-close-hidden {
	display: none;
}

.ipop-close-inside-left .ipop-close-btn {
	right: auto;
	left: 10px;
}
.ipop-close-outside-right .ipop-close-btn {
	top: -14px;
	right: -14px;
	background: #fff;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	color: #333;
	opacity: 1;
}

/* ---------- content ---------- */

.ipop-title {
	margin: 0 0 8px;
	line-height: 1.25;
}

.ipop-subtitle {
	margin: 0 0 14px;
	line-height: 1.45;
}
.ipop-subtitle p {
	margin: 0 0 6px;
}

.ipop-body {
	line-height: 1.6;
}
.ipop-body > *:first-child { margin-top: 0; }
.ipop-body > *:last-child  { margin-bottom: 0; }
.ipop-body img {
	max-width: 100%;
	height: auto;
}

.ipop-actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ipop-pos-center .ipop-actions {
	justify-content: inherit;
}

.ipop-button {
	display: inline-block;
	padding: 11px 22px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
	transition: opacity .2s ease;
}
.ipop-button:hover {
	opacity: .88;
}

/* Outlined variant: the border color comes from the generated CSS, so
   only the box-model reset belongs here. */
.ipop-button-outline {
	padding: 9px 20px; /* keeps the 2px border from changing overall size */
}

/* Plain text link variant — strips all button chrome so it inherits the
   surrounding text flow. Needs the resets because it may render as a
   <button>, which carries UA styling. */
.ipop-link {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity .2s ease;
}
.ipop-link:hover {
	opacity: .75;
}

/* Give a link and a solid button breathing room when shown side by side. */
.ipop-actions .ipop-link {
	align-self: center;
	padding: 0 4px;
}

.ipop-trigger-btn {
	cursor: pointer;
}

/* ---------- small screens ---------- */

@media (max-width: 600px) {
	.ipop-wrap {
		padding: 12px;
	}
	.ipop-box {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ipop-wrap,
	.ipop-box {
		transition-duration: .01ms !important;
	}
}