/**
 * Nice Popups — style frontu.
 * Wszystko sterowane zmiennymi CSS ustawianymi inline przez PHP,
 * dzieki czemu jeden arkusz obsluguje dowolna liczbe popupow.
 */

.np-popups {
	--np-z: 99999;
}

.np-popup {
	position: fixed;
	inset: 0;
	z-index: var(--np-z, 99999);
	display: none;
	font-family: inherit;
}

.np-popup.is-mounted {
	display: block;
}

/* ---------- Tlo ---------- */

.np-popup__overlay {
	position: absolute;
	inset: 0;
	background: var(--np-overlay, rgba(11, 16, 32, 0.72));
	opacity: 0;
	transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.np-popup__overlay {
		-webkit-backdrop-filter: blur(var(--np-blur, 0px));
		backdrop-filter: blur(var(--np-blur, 0px));
	}
}

.np-popup.is-open .np-popup__overlay {
	opacity: 1;
}

/* ---------- Uklad ---------- */

.np-popup__wrap {
	position: absolute;
	inset: 0;
	display: flex;
	padding: clamp(16px, 4vw, 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* "safe" chroni przed ucieciem gory, gdy grafika jest wyzsza od ekranu. */
.np-pos-center .np-popup__wrap {
	align-items: center;
	align-items: safe center;
	justify-content: center;
}

.np-pos-top .np-popup__wrap {
	align-items: flex-start;
	justify-content: center;
}

.np-pos-bottom .np-popup__wrap {
	align-items: flex-end;
	justify-content: center;
}

.np-pos-bottom-right .np-popup__wrap {
	align-items: flex-end;
	justify-content: flex-end;
}

.np-pos-bottom-left .np-popup__wrap {
	align-items: flex-end;
	justify-content: flex-start;
}

/* ---------- Pudelko ---------- */

/**
 * Szerokosc pudelka jest definitywna, a nie wyliczana z obrazka —
 * inaczej "obrazek szeroki na 100% pudelka, pudelko szerokie na obrazek"
 * zapada sie do zera. Trzeci skladnik min() pilnuje, zeby wysoka grafika
 * zmiescila sie w ekranie: proporcje przychodza z PHP jako --np-ratio.
 */
.np-popup__box {
	position: relative;
	width: min(var(--np-width, 640px), 100%, calc(82vh * var(--np-ratio, 1.5)));
	width: min(var(--np-width, 640px), 100%, calc(82svh * var(--np-ratio, 1.5)));
	border-radius: var(--np-radius, 18px);
	opacity: 0;
	outline: none;
	transition:
		opacity 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.np-popup.is-open .np-popup__box {
	opacity: 1;
	transform: none;
}

.np-has-shadow .np-popup__box {
	filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

/* ---------- Grafika ---------- */

.np-popup__media {
	display: block;
	position: relative;
	border-radius: inherit;
	overflow: hidden;
	line-height: 0;
	background: rgba(255, 255, 255, 0.04);
	-webkit-tap-highlight-color: transparent;
}

a.np-popup__media {
	cursor: pointer;
	transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
	a.np-popup__media:hover {
		transform: translateY(-2px);
	}
}

.np-popup__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/* ---------- Animacje ---------- */

.np-anim-zoom .np-popup__box {
	transform: scale(0.92);
}

.np-anim-fade .np-popup__box {
	transform: none;
}

.np-anim-slide-up .np-popup__box {
	transform: translateY(32px);
}

.np-anim-slide-down .np-popup__box {
	transform: translateY(-32px);
}

.np-anim-none .np-popup__box,
.np-anim-none .np-popup__overlay {
	transition: none;
}

.np-anim-none .np-popup__box {
	transform: none;
}

/* ---------- Przycisk zamkniecia ---------- */

.np-popup__close {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8);
	transition:
		opacity 220ms ease,
		transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
		visibility 220ms,
		background-color 200ms ease;
}

.np-popup.is-closable .np-popup__close {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.np-popup__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
	.np-popup__close:hover svg {
		transform: rotate(90deg);
	}
}

.np-popup__close:focus-visible {
	outline: 3px solid #4c8dff;
	outline-offset: 3px;
}

/* Pozycje przycisku */

.np-close-outside .np-popup__close {
	top: -14px;
	right: -14px;
}

.np-close-inside .np-popup__close {
	top: 12px;
	right: 12px;
}

/* Warianty kolorystyczne */

.np-close-theme-light .np-popup__close {
	background: rgba(255, 255, 255, 0.94);
	color: #11151f;
}

.np-close-theme-light .np-popup__close:hover {
	background: #ffffff;
}

.np-close-theme-dark .np-popup__close {
	background: rgba(17, 21, 31, 0.86);
	color: #ffffff;
}

.np-close-theme-dark .np-popup__close:hover {
	background: #11151f;
}

/* Wariant podpisu pod grafika */

.np-popup__close--below {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 14px auto 0;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	box-shadow: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.np-popup__close--below:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* ---------- Blokada przewijania strony ---------- */

html.np-locked,
html.np-locked body {
	overflow: hidden !important;
}

/* ---------- Male ekrany ---------- */

@media (max-width: 600px) {
	.np-popup__wrap {
		padding: 20px 16px;
	}

	/* Na waskich ekranach X na zewnatrz uciekalby poza kadr. */
	.np-close-outside .np-popup__close {
		top: 10px;
		right: 10px;
	}

	/* Na telefonie moze obowiazywac inna grafika, wiec i inne proporcje. */
	.np-popup__box {
		width: min(var(--np-width, 640px), 100%, calc(76vh * var(--np-ratio-m, var(--np-ratio, 1.5))));
		width: min(var(--np-width, 640px), 100%, calc(76svh * var(--np-ratio-m, var(--np-ratio, 1.5))));
	}

	.np-pos-bottom-right .np-popup__wrap,
	.np-pos-bottom-left .np-popup__wrap {
		align-items: flex-end;
		justify-content: center;
	}
}

/* ---------- Dostepnosc: ograniczony ruch ---------- */

@media (prefers-reduced-motion: reduce) {
	.np-popups.np-respect-motion .np-popup__box,
	.np-popups.np-respect-motion .np-popup__overlay,
	.np-popups.np-respect-motion .np-popup__close,
	.np-popups.np-respect-motion .np-popup__close svg,
	.np-popups.np-respect-motion a.np-popup__media {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	.np-popups.np-respect-motion .np-popup__box {
		transform: none !important;
	}
}

/* ---------- Druk ---------- */

@media print {
	.np-popup {
		display: none !important;
	}
}