.hpop[hidden] { display: none !important; }

.hpop {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}
.hpop *, .hpop *::before, .hpop *::after { box-sizing: border-box; }

.hpop-overlay {
	position: absolute;
	inset: 0;
	background: var(--hpop-overlay, rgba(0,0,0,.6));
	opacity: 0;
	transition: opacity .25s ease;
}

.hpop-box {
	position: relative;
	width: 100%;
	max-width: var(--hpop-w, 600px);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}
.hpop-anim-zoom .hpop-box { transform: scale(.9); }
.hpop-anim-slide .hpop-box { transform: translateY(40px); }
.hpop-anim-none .hpop-box, .hpop-anim-none .hpop-overlay { transition: none; }

.hpop.is-open .hpop-overlay,
.hpop.is-open .hpop-box { opacity: 1; transform: none; }

.hpop-content {
	border-radius: var(--hpop-r, 12px);
	overflow: hidden;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.hpop-stage { position: relative; line-height: 0; }
.hpop-image picture { display: block; }
.hpop-image img { display: block; width: 100%; height: auto; }

/* Clickable areas over the image; positions are % of the image. */
.hpop-spot {
	position: absolute;
	display: block;
	border-radius: 6px;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.hpop-spots .hpop-spot:hover { background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 12px rgba(0,0,0,.25); }
.hpop-spot:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; }
.hpop-spot-all { inset: 0; border-radius: 0; }
.hpop-custom {
	background: #fff;
	color: #1f2937;
	overflow-y: auto;
}

.hpop-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.95);
	color: #111;
	font: 400 24px/34px Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hpop-close:hover { background: #fff; transform: scale(1.06); }
.hpop-close:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.hpop-close-outside .hpop-close { top: -14px; right: -14px; }

body.hpop-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.hpop-overlay, .hpop-box { transition: none; }
}