/* PP Popups — modal shell + templates.
   Colours/type/spacing come from the theme's --pp-* tokens (tokens.css);
   buttons are the theme's .pp-btn. Template styles live under
   .pp-popup--tpl-{id} / their own block below the shell. */

.pp-popup {
	--pp-popup-z: 1000000;          /* above the mega menu (--pp-z-navband-mega) */
	--pp-popup-width: 460px;
	position: fixed;
	inset: 0;
	z-index: var(--pp-popup-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pp-sp-4);
	font-family: var(--pp-font);
	color: var(--pp-ink);
}
.pp-popup[hidden] { display: none; }

.pp-popup__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--pp-ink) 62%, transparent);
	opacity: 0;
	transition: opacity var(--pp-dur) var(--pp-ease);
	cursor: pointer;
}

.pp-popup__dialog {
	position: relative;
	width: min(var(--pp-popup-width), 100%);
	max-height: calc(100vh - 2 * var(--pp-sp-4));
	max-height: calc(100dvh - 2 * var(--pp-sp-4));
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--pp-bg);
	border-radius: var(--pp-r-2xl);
	box-shadow: var(--pp-shadow-mega);
	opacity: 0;
	transform: translateY(16px) scale(.97);
	transition: opacity var(--pp-dur) var(--pp-ease), transform 260ms var(--pp-ease);
}
.pp-popup__dialog:focus { outline: none; box-shadow: var(--pp-shadow-mega); }

.pp-popup.is-open .pp-popup__overlay { opacity: 1; }
.pp-popup.is-open .pp-popup__dialog { opacity: 1; transform: none; }

body.pp-popup-open { overflow: hidden; }

/* ── Close (×) — white disc so it reads on any header colour ── */
.pp-popup__close {
	position: absolute;
	top: var(--pp-sp-3);
	right: var(--pp-sp-3);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pp-bg);
	color: var(--pp-ink);
	box-shadow: var(--pp-shadow-xs);
	cursor: pointer;
	transition: background var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease), transform var(--pp-dur-fast) var(--pp-ease);
}
.pp-popup__close svg { width: 20px; height: 20px; }
.pp-popup__close:hover,
.pp-popup__close:focus { background: var(--pp-magenta-soft); color: var(--pp-magenta); }
.pp-popup__close:active { transform: scale(.94); }
.pp-popup__close:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }

/* ── Shared content pieces ── */
.pp-popup__kicker {
	margin: 0 0 var(--pp-sp-2);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-magenta);
}
.pp-popup__title {
	margin: 0;
	font-family: var(--pp-font);
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-black);
	letter-spacing: var(--pp-ls-h4);
	line-height: var(--pp-lh-tight);
	color: var(--pp-ink);
	text-wrap: balance;
}
.pp-popup__text {
	margin-top: var(--pp-sp-3);
	font-size: var(--pp-fs-body-lg);
	line-height: var(--pp-lh-loose);
	color: var(--pp-text-2);
}
.pp-popup__text p { margin: 0 0 var(--pp-sp-2); }
.pp-popup__text p:last-child { margin-bottom: 0; }
.pp-popup__text strong { color: var(--pp-ink); font-weight: var(--pp-fw-bold); }

.pp-popup__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--pp-sp-6);
}
.pp-popup__actions:empty { display: none; }
.pp-popup__cta { min-width: 220px; }

.pp-popup__fine {
	margin: var(--pp-sp-4) 0 0;
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-body);
	color: var(--pp-text-3);
}

/* ════════════════════════════════════════════════════════════════
   Template: default
   ════════════════════════════════════════════════════════════════ */
.pp-popup-card {
	--pp-popup-accent: var(--pp-magenta);
	--pp-popup-accent-ink: var(--pp-on-dark);
	text-align: center;
}
.pp-popup-card--pool { --pp-popup-accent: var(--pp-pool-dark); }
.pp-popup-card--yellow { --pp-popup-accent: var(--pp-yellow); --pp-popup-accent-ink: var(--pp-ink); }
.pp-popup-card--ink { --pp-popup-accent: var(--pp-ink); }

/* CSS-only decoration (no photography): two soft discs. The band doesn't
   clip, so the icon disc can overlap the body below. */
.pp-popup-card__band {
	position: relative;
	height: 112px;
	background:
		radial-gradient(circle at 12% -20%, color-mix(in srgb, var(--pp-popup-accent-ink) 14%, transparent) 0 90px, transparent 91px),
		radial-gradient(circle at 88% 130%, color-mix(in srgb, var(--pp-popup-accent-ink) 12%, transparent) 0 60px, transparent 61px),
		var(--pp-popup-accent);
	border-radius: var(--pp-r-2xl) var(--pp-r-2xl) 0 0;
}
.pp-popup-card.has-icon .pp-popup-card__band { margin-bottom: var(--pp-sp-8); }

.pp-popup-card__icon {
	position: absolute;
	left: 50%;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--pp-bg);
	color: var(--pp-magenta);
	box-shadow: var(--pp-shadow-card-hover);
	transform: translate(-50%, 50%);
}
.pp-popup-card--pool .pp-popup-card__icon { color: var(--pp-pool-dark); }
.pp-popup-card--ink .pp-popup-card__icon { color: var(--pp-ink); }
.pp-popup-card__icon svg { width: 34px; height: 34px; }

.pp-popup-card__body { padding: var(--pp-sp-6) var(--pp-sp-8) var(--pp-sp-8); }
.pp-popup-card--pool .pp-popup__kicker { color: var(--pp-pool-dark); }
.pp-popup-card--yellow .pp-popup__kicker,
.pp-popup-card--ink .pp-popup__kicker { color: var(--pp-text-3); }

/* ════════════════════════════════════════════════════════════════
   Template: registration-voucher
   ════════════════════════════════════════════════════════════════ */
.pp-popup--tpl-registration-voucher { --pp-popup-width: 480px; }

.pp-popup-voucher { text-align: center; }

.pp-popup-voucher__hero {
	position: relative;
	padding: var(--pp-sp-8) var(--pp-sp-8) var(--pp-sp-10);
	background:
		radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--pp-on-dark) 14%, transparent) 0 110px, transparent 111px),
		radial-gradient(circle at 96% 110%, color-mix(in srgb, var(--pp-yellow) 30%, transparent) 0 90px, transparent 91px),
		linear-gradient(135deg, var(--pp-magenta) 0%, var(--pp-magenta-dark) 100%);
	color: var(--pp-on-dark);
	border-radius: var(--pp-r-2xl) var(--pp-r-2xl) 0 0;
}

.pp-popup-voucher__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-sp-1);
	margin: 0 0 var(--pp-sp-5);
	padding: 6px var(--pp-sp-3);
	border-radius: var(--pp-r-pill);
	background: color-mix(in srgb, var(--pp-on-dark) 16%, transparent);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-on-dark);
}
.pp-popup-voucher__kicker svg { width: 14px; height: 14px; color: var(--pp-yellow); }

/* Ticket: yellow coupon with punched notches and a perforated stub. The
   wrapper carries the shadow because the mask would clip a box-shadow. */
.pp-popup-voucher__ticket-wrap {
	max-width: 300px;
	margin: 0 auto;
	filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--pp-ink) 30%, transparent));
	transform: rotate(-2deg);
}
.pp-popup-voucher__ticket {
	--pp-notch: 12px;
	display: flex;
	flex-direction: column;
	background: var(--pp-yellow);
	color: var(--pp-ink);
	border-radius: var(--pp-r-xl);
	-webkit-mask:
		radial-gradient(circle var(--pp-notch) at 0 calc(100% - 44px), transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--pp-notch) at 100% calc(100% - 44px), transparent 98%, #000) right / 51% 100% no-repeat;
	mask:
		radial-gradient(circle var(--pp-notch) at 0 calc(100% - 44px), transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--pp-notch) at 100% calc(100% - 44px), transparent 98%, #000) right / 51% 100% no-repeat;
}
.pp-popup-voucher__ticket-main {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: end;
	column-gap: var(--pp-sp-2);
	padding: var(--pp-sp-5) var(--pp-sp-6) var(--pp-sp-4);
}
.pp-popup-voucher__ticket-label {
	grid-column: 1 / -1;
	margin-bottom: var(--pp-sp-1);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-bold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-text-2);
}
.pp-popup-voucher__ticket-amount {
	font-size: var(--pp-fs-page);
	font-weight: var(--pp-fw-black);
	letter-spacing: var(--pp-ls-page);
	line-height: var(--pp-lh-display);
}
.pp-popup-voucher__ticket-off {
	padding-bottom: 6px;
	font-size: var(--pp-fs-h5);
	font-weight: var(--pp-fw-black);
	text-transform: uppercase;
	color: var(--pp-magenta);
}
.pp-popup-voucher__ticket-stub {
	height: 44px;
	display: grid;
	place-items: center;
	border-top: var(--pp-bw-bold) dashed color-mix(in srgb, var(--pp-ink) 28%, transparent);
	margin: 0 var(--pp-notch);
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-bold);
	color: var(--pp-ink);
}

.pp-popup-voucher__body { padding: var(--pp-sp-7) var(--pp-sp-8) var(--pp-sp-8); }

.pp-popup-voucher__count {
	margin: var(--pp-sp-5) auto 0;
	max-width: 320px;
	padding: var(--pp-sp-3) var(--pp-sp-4);
	background: var(--pp-magenta-soft);
	border-radius: var(--pp-r-lg);
}
.pp-popup-voucher__count-text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-sp-2);
	margin: 0 0 var(--pp-sp-2);
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-bold);
	color: var(--pp-magenta-dark);
}
.pp-popup-voucher__count-text svg { width: 16px; height: 16px; flex: none; }
.pp-popup-voucher__bar {
	display: block;
	height: 6px;
	border-radius: var(--pp-r-pill);
	background: var(--pp-bg);
	overflow: hidden;
}
.pp-popup-voucher__bar > span {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: inherit;
	background: var(--pp-magenta);
}

/* ════════════════════════════════════════════════════════════════
   Admin preview bar (?pp_popup_preview=…) — under the open popup
   ════════════════════════════════════════════════════════════════ */
.pp-popup-preview-bar {
	position: fixed;
	left: var(--pp-sp-4);
	bottom: calc(var(--pp-sp-4) + env(safe-area-inset-bottom, 0px));
	z-index: 999999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-sp-2);
	max-width: calc(100vw - 2 * var(--pp-sp-4) - 80px); /* clear the chat launcher */
	padding: var(--pp-sp-2) var(--pp-sp-2) var(--pp-sp-2) var(--pp-sp-4);
	background: var(--pp-ink);
	color: var(--pp-on-dark);
	border-radius: var(--pp-r-pill);
	box-shadow: var(--pp-shadow-card-hover);
	font: var(--pp-fw-semibold) var(--pp-fs-sm)/var(--pp-lh-snug) var(--pp-font);
}
.pp-popup-preview-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-popup-preview-bar__btn {
	padding: 6px var(--pp-sp-3);
	border: 0;
	border-radius: var(--pp-r-pill);
	background: var(--pp-yellow);
	color: var(--pp-ink);
	font: var(--pp-fw-bold) var(--pp-fs-xs)/1 var(--pp-font);
	cursor: pointer;
}
.pp-popup-preview-bar__btn:hover { background: var(--pp-yellow-dark); color: var(--pp-ink); }
.pp-popup-preview-bar__btn:disabled { opacity: .6; cursor: wait; }
.pp-popup-preview-bar__btn:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }

/* ── Phones ── */
@media (max-width: 560px) {
	.pp-popup { align-items: flex-end; padding: 0; }
	.pp-popup__dialog {
		width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: var(--pp-r-2xl) var(--pp-r-2xl) 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		transform: translateY(40px);
	}
	.pp-popup__title { font-size: var(--pp-fs-h5); letter-spacing: var(--pp-ls-h5); }
	.pp-popup__text { font-size: var(--pp-fs-body); }
	.pp-popup__cta { width: 100%; min-width: 0; }
	.pp-popup-card__body,
	.pp-popup-voucher__body { padding: var(--pp-sp-5) var(--pp-sp-5) var(--pp-sp-6); }
	.pp-popup-voucher__hero { padding: var(--pp-sp-6) var(--pp-sp-5) var(--pp-sp-8); }
	.pp-popup-voucher__ticket-amount { font-size: var(--pp-fs-h1); }
}

@media (prefers-reduced-motion: reduce) {
	.pp-popup__overlay,
	.pp-popup__dialog { transition: none; }
}