/* popup-block v1.1.0 — frontend styles */

/* ── Scroll lock — applied to both html and body ────────────────── */
html.popup-block-open,
body.popup-block-open {
	overflow: hidden !important;
	/* Prevent layout shift from scrollbar disappearing */
	padding-right: var(--popup-scrollbar-width, 0px);
}

/* ── Overlay — fixed, covers full viewport ──────────────────────── */
.popup-block-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	/* Centre the dialog */
	align-items: center;
	justify-content: center;
	/* Allow dialog to scroll on very small screens */
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	box-sizing: border-box;
}

.popup-block-overlay.is-open {
	display: flex;
}

/* ── Dialog ──────────────────────────────────────────────────────── */
.popup-block-dialog {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	padding: 40px;
	box-sizing: border-box;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.15);
	/* Prevent dialog itself from causing page scroll */
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	margin: auto;
}

/* ── Close button ────────────────────────────────────────────────── */
.popup-block-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}
.popup-block-close:hover,
.popup-block-close:focus {
	background: #f0f0f0;
	color: #1e1e1e;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ── Content ─────────────────────────────────────────────────────── */
.popup-block-content {
	line-height: 1.6;
}
.popup-block-content iframe {
	width: 100%;
	min-height: 400px;
	display: block;
	border: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════════ */

.popup-block-overlay .popup-block-dialog {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            opacity  0.25s ease;
}

/* fade */
.popup-block-anim-fade .popup-block-dialog          { opacity: 0; }
.popup-block-anim-fade.is-open .popup-block-dialog  { opacity: 1; }

/* slide-up */
.popup-block-anim-slide-up .popup-block-dialog          { opacity: 0; transform: translateY(40px); }
.popup-block-anim-slide-up.is-open .popup-block-dialog  { opacity: 1; transform: translateY(0); }

/* slide-down */
.popup-block-anim-slide-down .popup-block-dialog         { opacity: 0; transform: translateY(-40px); }
.popup-block-anim-slide-down.is-open .popup-block-dialog { opacity: 1; transform: translateY(0); }

/* zoom */
.popup-block-anim-zoom .popup-block-dialog         { opacity: 0; transform: scale(0.85); }
.popup-block-anim-zoom.is-open .popup-block-dialog { opacity: 1; transform: scale(1); }

/* none */
.popup-block-anim-none .popup-block-dialog { opacity: 1; transform: none; transition: none; }

/* ═══════════════════════════════════════════════════════════════════
   Utility modifier classes
   ═══════════════════════════════════════════════════════════════════ */

/* Dark theme */
.popup-block-overlay.popup-dark .popup-block-dialog      { background: #1a1a2e; color: #e0e0e0; }
.popup-block-overlay.popup-dark .popup-block-close       { color: #aaa; }
.popup-block-overlay.popup-dark .popup-block-close:hover { background: #2a2a3e; color: #fff; }

/* Fullscreen */
.popup-block-overlay.popup-fullscreen                     { padding: 0; align-items: stretch; }
.popup-block-overlay.popup-fullscreen .popup-block-dialog { max-width: 100% !important; max-height: 100vh; min-height: 100vh; border-radius: 0; margin: 0; }

/* No padding */
.popup-block-overlay.popup-no-padding .popup-block-dialog { padding: 0; overflow: hidden; }

/* Sizes */
.popup-block-overlay.popup-narrow .popup-block-dialog { max-width: 400px !important; }
.popup-block-overlay.popup-wide   .popup-block-dialog { max-width: 900px !important; }

/* Text alignment */
.popup-block-overlay.popup-centered .popup-block-content { text-align: center; }

/* Border radius variants */
.popup-block-overlay.popup-soft  .popup-block-dialog { border-radius: 20px; }
.popup-block-overlay.popup-sharp .popup-block-dialog { border-radius: 0; }

/* Overlay tints */
.popup-block-overlay.popup-overlay-light { background: rgba(255, 255, 255, 0.65); }
.popup-block-overlay.popup-overlay-dark  { background: rgba(0, 0, 0, 0.82); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.popup-block-overlay { padding: 12px; }
	.popup-block-dialog  { padding: 28px 18px; }
}