/* Defensive resets: your theme or another plugin's global CSS (e.g. a
   different box-sizing default, styled headings/buttons/links, "a { color }"
   rules) can otherwise bleed into the popup and distort spacing or colors
   that were actually set correctly in the builder. These establish a clean
   baseline; anything you type inline in the popup's own content still wins,
   since inline styles always beat an external stylesheet. This can't
   guarantee immunity from every possible theme, but it covers the common
   collisions (box-sizing, heading/link/button defaults, form font inheritance). */
.smoothpop-overlay,
.smoothpop-overlay *,
.smoothpop-overlay *::before,
.smoothpop-overlay *::after {
	box-sizing: border-box;
}
.smoothpop-popup-content h1,
.smoothpop-popup-content h2,
.smoothpop-popup-content h3,
.smoothpop-popup-content h4,
.smoothpop-popup-content h5,
.smoothpop-popup-content h6,
.smoothpop-popup-content p,
.smoothpop-popup-content ul,
.smoothpop-popup-content ol {
	margin: 0 0 0.6em;
	padding: 0;
	line-height: 1.4;
}
.smoothpop-popup-content a { color: inherit; text-decoration: underline; }
.smoothpop-popup-content button,
.smoothpop-popup-content input,
.smoothpop-popup-content select,
.smoothpop-popup-content textarea {
	font: inherit;
	color: inherit;
}

.smoothpop-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	padding: 20px;
	box-sizing: border-box;
}
.smoothpop-overlay[hidden] { display: none; }

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

.smoothpop-popup {
	position: relative;
	max-width: calc( 100vw - 40px );
	max-height: calc( 100vh - 40px );
	overflow: visible; /* so an "outside" close button isn't clipped; inline box-shadow is set per popup */
	animation: smoothpop-pop-in 0.25s ease-out;
}
.smoothpop-popup-content {
	max-height: calc( 100vh - 120px );
	overflow-y: auto;
}

@keyframes smoothpop-pop-in {
	from { opacity: 0; transform: scale( 0.95 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

.smoothpop-close {
	position: absolute;
	background: none;
	border: none;
	border-radius: 0;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	z-index: 5; /* Always sit above popup content, even content using its own transform/skew (which paints as its own layer and would otherwise cover this regardless of DOM position). */
}
.smoothpop-close img { max-width: none; border: none; box-shadow: none; }
.smoothpop-close-inside { top: 8px; right: 10px; }
.smoothpop-close-outside { top: -16px; right: -16px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); border-radius: 50%; }
.smoothpop-close-circle { border-radius: 50%; background: #f3f3f4; }
.smoothpop-close-square { border-radius: 0; background: #f3f3f4; }
.smoothpop-close-outside.smoothpop-close-square { border-radius: 0; }

.smoothpop-popup-content img { max-width: 100%; height: auto; }

@media ( prefers-reduced-motion: reduce ) {
	.smoothpop-popup { animation: none; }
}