/* Home Popup & Dashboard — front end */
html.hpd-lock,html.hpd-lock body{overflow:hidden !important}

.hpd-pop{
	position:fixed; inset:0; z-index:2147483000;
	display:flex; align-items:center; justify-content:center;
	padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
	box-sizing:border-box;
}
.hpd-pop[hidden]{display:none !important}
.hpd-pop *{box-sizing:border-box}

.hpd-pop__backdrop{
	position:absolute; inset:0; background:rgba(8,10,20,.72);
	opacity:0; transition:opacity .22s ease; cursor:pointer;
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.hpd-pop__box{
	position:relative; width:100%; max-width:var(--hpd-w,640px);
	max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
	opacity:0; transform:translateY(10px) scale(.97);
	transition:opacity .22s ease, transform .22s ease;
}
.hpd-pop.is-open .hpd-pop__backdrop{opacity:1}
.hpd-pop.is-open .hpd-pop__box{opacity:1; transform:none}

.hpd-pop__img{
	display:block; width:100%; height:auto;
	max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
	object-fit:contain; border-radius:10px;
	box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.hpd-pop__link{display:block; border-radius:10px; outline-offset:4px}
.hpd-pop__link:focus-visible{outline:3px solid #fff}

.hpd-pop__close{
	position:absolute; top:-14px; right:-14px; z-index:2;
	width:40px; height:40px; margin:0; padding:0; border:0; border-radius:50%;
	display:grid; place-items:center; cursor:pointer;
	background:#fff; color:#111; line-height:1;
	box-shadow:0 6px 18px rgba(0,0,0,.4);
	transition:transform .15s ease, background .15s ease;
}
.hpd-pop__close:hover{transform:scale(1.07); background:#f1f1f1}
.hpd-pop__close:focus-visible{outline:3px solid #fff; outline-offset:3px}
.hpd-pop__close svg{display:block}

@media (max-width:600px){
	.hpd-pop__close{top:8px; right:8px; width:36px; height:36px}
}

.hpd-pop__flag{
	position:absolute; left:10px; top:10px; padding:4px 9px; border-radius:4px;
	background:#111; color:#fff; font:700 11px/1 system-ui,sans-serif;
	letter-spacing:.12em; text-transform:uppercase; pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
	.hpd-pop__backdrop,.hpd-pop__box,.hpd-pop__close{transition:none}
	.hpd-pop__box{transform:none}
}