/*
 * FXD Popup — front end.
 *
 * Built to survive CSS optimizers (WP Rocket "Remove Unused CSS" etc.):
 * the open popup is fully visible using only base rules. Entrance/exit
 * animations are extras layered on top, so if an optimizer strips them
 * the popup still looks right, it just doesn't animate.
 *
 * Width, close-button color and backdrop color are injected per site as
 * --fxdp-w, --fxdp-w-m, --fxdp-close-bg and a ::backdrop rule.
 */

.fxdp {
	position: fixed;
	width: var(--fxdp-w, 600px);
	max-width: 95vw;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	overflow: visible;
}
@media (max-width: 768px) {
	.fxdp { width: var(--fxdp-w-m, 92%); }
}

/* Default backdrop; the site's color, opacity and blur are injected inline and win. */
.fxdp::backdrop {
	background: rgba(0, 0, 0, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.fxdp__link { display: block; }

.fxdp__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 20px;
}

.fxdp .fxdp__close,
.fxdp .fxdp__close:hover,
.fxdp .fxdp__close:focus,
.fxdp .fxdp__close:active {
	background: var(--fxdp-close-bg, #f1f1ec);
	color: #0b1d3a;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}
.fxdp .fxdp__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	box-shadow: none;
	font: 700 18px/1 sans-serif;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.2s;
}
.fxdp .fxdp__close:hover { transform: scale(1.08); }
.fxdp .fxdp__close .fxdp__x { display: block; width: 14px; height: 14px; }
@media (max-width: 480px) {
	.fxdp__img { border-radius: 16px; }
	.fxdp .fxdp__close { top: 10px; right: 10px; width: 32px; height: 32px; }
}
.fxdp .fxdp__close:focus-visible {
	outline: 2px solid #0b1d3a;
	outline-offset: 2px;
}

/* Entrance animations (extras — nothing depends on them) */
.fxdp--scale[open]     { animation: fxdp-scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fxdp--slideUp[open]   { animation: fxdp-slide-up 0.4s ease; }
.fxdp--slideDown[open] { animation: fxdp-slide-down 0.4s ease; }
.fxdp--fade[open]      { animation: fxdp-fade 0.4s ease; }
.fxdp--bounce[open]    { animation: fxdp-bounce 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.fxdp[open]::backdrop  { animation: fxdp-fade 0.4s ease; }

/* Exit animation — must stay after the entrance rules */
.fxdp.is-closing,
.fxdp.is-closing::backdrop { animation: fxdp-out 0.25s ease forwards; }

@keyframes fxdp-fade       { from { opacity: 0; } }
@keyframes fxdp-scale      { from { opacity: 0; transform: scale(0.85); } }
@keyframes fxdp-slide-up   { from { opacity: 0; transform: translateY(60px); } }
@keyframes fxdp-slide-down { from { opacity: 0; transform: translateY(-60px); } }
@keyframes fxdp-bounce     { from { opacity: 0; transform: scale(0.5); } }
@keyframes fxdp-out        { to   { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.fxdp[open],
	.fxdp[open]::backdrop,
	.fxdp.is-closing,
	.fxdp.is-closing::backdrop { animation: none !important; }
	.fxdp .fxdp__close { transition: none; }
}