/**
 * NagyonAllat Popup – front-end styles.
 * Mirrors the theme tokens (sass/_variables.scss): Rubik (inherited), near-black
 * ink #181414, accent #feb447, 24px large radius, pill buttons, soft warm shadows.
 */

.napop {
	--napop-w: 560px;
	--napop-radius: 24px;
	--napop-ink: #181414;
	--napop-ink-hover: #302c2c;
	--napop-muted: #5f5959;
	--napop-accent: #feb447;
	--napop-accent-hover: #f5a52e;
	--napop-shadow: 0 30px 80px rgba(24, 20, 20, 0.28);

	position: fixed;
	inset: 0;
	/* Just below the Complianz cookie banner (99999) so consent stays reachable. */
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: inherit;
	color: var(--napop-ink);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.napop *,
.napop *::before,
.napop *::after {
	box-sizing: border-box;
}

.napop--sm { --napop-w: 420px; }
.napop--lg { --napop-w: 760px; }

.napop--image_left { --napop-w: 760px; }
.napop--image_left.napop--sm { --napop-w: 640px; }
.napop--image_left.napop--lg { --napop-w: 900px; }

/* ── Overlay (same treatment as the theme's mobile menu) ─────────────────── */

.napop__overlay {
	position: absolute;
	inset: 0;
	background: rgba(65, 60, 60, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */

.napop__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, var(--napop-w));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	background: #fff;
	border-radius: var(--napop-radius);
	box-shadow: var(--napop-shadow);
	overflow: hidden;
	outline: none;
	opacity: 0;
	transform: translateY(24px) scale(0.97);
	transition:
		opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.napop__inner {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.napop.is-open .napop__overlay { opacity: 1; }

.napop.is-open .napop__dialog {
	opacity: 1;
	transform: none;
}

.napop.is-closing .napop__dialog {
	transform: translateY(12px) scale(0.98);
	transition-duration: 0.25s;
}

.napop--bg-paw:not(.napop--image) .napop__dialog {
	/* Theme $paw-pattern */
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='%23413C3C' fill-opacity='0.05'%3E%3Cg transform='translate(100, 100) rotate(15) scale(1.2)'%3E%3Cpath d='M39.041,36.843c2.054,3.234,3.022,4.951,3.022,6.742c0,3.537-2.627,5.252-6.166,5.252c-1.56,0-2.567-0.002-5.112-1.326c0,0-1.649-1.509-5.508-1.354c-3.895-0.154-5.545,1.373-5.545,1.373c-2.545,1.323-3.516,1.309-5.074,1.309c-3.539,0-6.168-1.713-6.168-5.252c0-1.791,0.971-3.506,3.024-6.742c0,0,3.881-6.445,7.244-9.477c2.43-2.188,5.973-2.18,5.973-2.18h1.093v-0.001c0,0,3.698-0.009,5.976,2.181C35.059,30.51,39.041,36.844,39.041,36.843z M16.631,20.878c3.7,0,6.699-4.674,6.699-10.439S20.331,0,16.631,0S9.932,4.674,9.932,10.439S12.931,20.878,16.631,20.878z M10.211,30.988c2.727-1.259,3.349-5.723,1.388-9.971s-5.761-6.672-8.488-5.414s-3.348,5.723-1.388,9.971C3.684,29.822,7.484,32.245,10.211,30.988z M32.206,20.878c3.7,0,6.7-4.674,6.7-10.439S35.906,0,32.206,0s-6.699,4.674-6.699,10.439C25.507,16.204,28.506,20.878,32.206,20.878z M45.727,15.602c-2.728-1.259-6.527,1.165-8.488,5.414s-1.339,8.713,1.389,9.972c2.728,1.258,6.527-1.166,8.488-5.414S48.455,16.861,45.727,15.602z'/%3E%3C/g%3E%3Cg transform='translate(450, 200) rotate(-20) scale(0.8)'%3E%3Cpath d='M39.041,36.843c2.054,3.234,3.022,4.951,3.022,6.742c0,3.537-2.627,5.252-6.166,5.252c-1.56,0-2.567-0.002-5.112-1.326c0,0-1.649-1.509-5.508-1.354c-3.895-0.154-5.545,1.373-5.545,1.373c-2.545,1.323-3.516,1.309-5.074,1.309c-3.539,0-6.168-1.713-6.168-5.252c0-1.791,0.971-3.506,3.024-6.742c0,0,3.881-6.445,7.244-9.477c2.43-2.188,5.973-2.18,5.973-2.18h1.093v-0.001c0,0,3.698-0.009,5.976,2.181C35.059,30.51,39.041,36.844,39.041,36.843z M16.631,20.878c3.7,0,6.699-4.674,6.699-10.439S20.331,0,16.631,0S9.932,4.674,9.932,10.439S12.931,20.878,16.631,20.878z M10.211,30.988c2.727-1.259,3.349-5.723,1.388-9.971s-5.761-6.672-8.488-5.414s-3.348,5.723-1.388,9.971C3.684,29.822,7.484,32.245,10.211,30.988z M32.206,20.878c3.7,0,6.7-4.674,6.7-10.439S35.906,0,32.206,0s-6.699,4.674-6.699,10.439C25.507,16.204,28.506,20.878,32.206,20.878z M45.727,15.602c-2.728-1.259-6.527,1.165-8.488,5.414s-1.339,8.713,1.389,9.972c2.728,1.258,6.527-1.166,8.488-5.414S48.455,16.861,45.727,15.602z'/%3E%3C/g%3E%3Cg transform='translate(200, 480) rotate(45) scale(1.5)'%3E%3Cpath d='M39.041,36.843c2.054,3.234,3.022,4.951,3.022,6.742c0,3.537-2.627,5.252-6.166,5.252c-1.56,0-2.567-0.002-5.112-1.326c0,0-1.649-1.509-5.508-1.354c-3.895-0.154-5.545,1.373-5.545,1.373c-2.545,1.323-3.516,1.309-5.074,1.309c-3.539,0-6.168-1.713-6.168-5.252c0-1.791,0.971-3.506,3.024-6.742c0,0,3.881-6.445,7.244-9.477c2.43-2.188,5.973-2.18,5.973-2.18h1.093v-0.001c0,0,3.698-0.009,5.976,2.181C35.059,30.51,39.041,36.844,39.041,36.843z M16.631,20.878c3.7,0,6.699-4.674,6.699-10.439S20.331,0,16.631,0S9.932,4.674,9.932,10.439S12.931,20.878,16.631,20.878z M10.211,30.988c2.727-1.259,3.349-5.723,1.388-9.971s-5.761-6.672-8.488-5.414s-3.348,5.723-1.388,9.971C3.684,29.822,7.484,32.245,10.211,30.988z M32.206,20.878c3.7,0,6.7-4.674,6.7-10.439S35.906,0,32.206,0s-6.699,4.674-6.699,10.439C25.507,16.204,28.506,20.878,32.206,20.878z M45.727,15.602c-2.728-1.259-6.527,1.165-8.488,5.414s-1.339,8.713,1.389,9.972c2.728,1.258,6.527-1.166,8.488-5.414S48.455,16.861,45.727,15.602z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 600px repeat;
}

/* ── Close button ────────────────────────────────────────────────────────── */

.napop__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--napop-ink);
	box-shadow: 0 4px 14px rgba(24, 20, 20, 0.16);
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.2s ease;
}

.napop__close:hover {
	background: #fff;
	transform: rotate(90deg);
}

.napop__close svg { display: block; }

.napop__close:focus-visible,
.napop__btn:focus-visible,
.napop__dismiss:focus-visible,
.napop__media-link:focus-visible {
	outline: 3px solid var(--napop-accent);
	outline-offset: 2px;
}

/* ── Media ───────────────────────────────────────────────────────────────── */

.napop picture { display: contents; }

.napop__media-link {
	display: block;
	color: inherit;
}

.napop__img {
	display: block;
	max-width: 100%;
	height: auto;
}

.napop__media .napop__img {
	width: 100%;
	max-height: 45vh;
	object-fit: cover;
}

/* Image only: the picture itself is the popup. */
.napop--image .napop__dialog {
	width: auto;
	max-width: min(100%, var(--napop-w));
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.napop--image .napop__inner { overflow: visible; }

.napop--image .napop__img {
	width: auto;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	border-radius: var(--napop-radius);
	box-shadow: var(--napop-shadow);
}

.napop--image .napop__media-link {
	border-radius: var(--napop-radius);
}

/* ── Text body ───────────────────────────────────────────────────────────── */

.napop__body {
	padding: 28px 32px 32px;
	text-align: center;
}

.napop--text .napop__body { padding-top: 44px; }

.napop .napop__title {
	margin: 0 0 0.5rem;
	padding: 0 24px;
	font-family: inherit;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--napop-ink);
}

.napop__media + .napop__body .napop__title { padding: 0; }

.napop__text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--napop-muted);
}

.napop__text p { margin: 0 0 0.75rem; }
.napop__text > :last-child { margin-bottom: 0; }

.napop__text a {
	color: var(--napop-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.napop__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 1.5rem;
}

/* ── Buttons (theme: pill, 600 weight, lift on hover) ────────────────────── */

.napop .napop__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	margin: 0;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 100px;
	background: var(--napop-ink);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.3s ease;
}

.napop .napop__btn:hover {
	background: var(--napop-ink-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(24, 20, 20, 0.18);
}

.napop--btn-accent .napop__btn,
.napop--btn-accent .napop__btn:hover {
	color: var(--napop-ink);
}

.napop--btn-accent .napop__btn { background: var(--napop-accent); }
.napop--btn-accent .napop__btn:hover { background: var(--napop-accent-hover); }

.napop .napop__dismiss {
	margin: 0;
	padding: 6px 10px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--napop-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.napop .napop__dismiss:hover { color: var(--napop-ink); }

/* ── Image left + text (side by side from tablet up) ─────────────────────── */

@media (min-width: 640px) {
	.napop--center.napop--image_left .napop__inner {
		display: grid;
		grid-template-columns: 45% 1fr;
	}

	.napop--center.napop--image_left .napop__media .napop__img {
		height: 100%;
		max-height: none;
	}

	.napop--center.napop--image_left .napop__media-link { height: 100%; }

	.napop--center.napop--image_left .napop__body {
		align-self: center;
		padding: 48px 40px;
		text-align: left;
	}

	.napop--center.napop--image_left .napop__actions { align-items: flex-start; }
	.napop--center.napop--image_left .napop__dismiss { padding-left: 0; padding-right: 0; }
}

/* ── Corner (non-blocking slide-in) ──────────────────────────────────────── */

.napop--corner {
	--napop-w: 380px;
	inset: auto 24px 24px auto;
	display: block;
	padding: 0;
	pointer-events: none;
}

.napop--corner.napop--sm { --napop-w: 320px; }
.napop--corner.napop--lg { --napop-w: 460px; }

.napop--corner .napop__dialog {
	width: min(var(--napop-w), calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	box-shadow: 0 20px 50px rgba(24, 20, 20, 0.22);
	pointer-events: auto;
}

.napop--corner.napop--image .napop__dialog {
	width: auto;
	max-width: min(var(--napop-w), calc(100vw - 32px));
}

.napop--corner .napop__body { padding: 24px; }
.napop--corner.napop--text .napop__body { padding-top: 36px; }

@media (max-width: 575px) {
	.napop--corner { inset: auto 16px 16px 16px; }
	.napop--corner .napop__dialog { width: 100%; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
	.napop { --napop-radius: 20px; }
	.napop__body { padding: 24px 20px 24px; }
	.napop--text .napop__body { padding-top: 40px; }
}

/* ── Scroll lock while a modal popup is open ─────────────────────────────── */

html.napop-lock { overflow: hidden; }
html.napop-lock body { padding-right: var(--napop-sbw, 0px); }

@media (prefers-reduced-motion: reduce) {
	.napop__overlay,
	.napop__dialog,
	.napop__close,
	.napop .napop__btn {
		transition: opacity 0.2s linear;
	}

	.napop__dialog,
	.napop.is-closing .napop__dialog { transform: none; }
}