/*
 * Festival de la Plume house style: white cards with large rounded corners, display headings in capitals
 * (the "clivver" font of the theme), Noto Serif buttons with 8px corners, yellow accent, indigo text.
 * Override these variables in your theme to adjust.
 */
:root {
	--ftp-bg: #fff;
	--ftp-ink: #221e52;
	--ftp-accent: #ffd036;
	--ftp-radius: 30px;
	--ftp-button-radius: 8px;
	--ftp-backdrop: rgba(34, 30, 82, 0.72);
	--ftp-heading-font: "clivver", "Noto Serif", serif;
	--ftp-button-font: "Noto Serif", serif;
}

html.ftp-popup-open {
	overflow: hidden;
}

.ftp-popup {
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 620px;
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: var(--ftp-radius);
	background: var(--ftp-bg);
	color: var(--ftp-ink);
	font-family: inherit;
	box-shadow: 0 24px 70px rgba(34, 30, 82, 0.45);
}

.ftp-popup[open] {
	animation: ftp-in 0.22s ease-out;
}

.ftp-popup::backdrop {
	background: var(--ftp-backdrop);
}

.ftp-popup__inner {
	position: relative;
	padding: 2.5rem 2rem 1.75rem;
}

.ftp-popup__title {
	margin: 0 2rem 1rem 0;
	font-family: var(--ftp-heading-font);
	font-weight: 400;
	font-size: clamp(1.9rem, 6vw, 2.6rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ftp-ink);
}

.ftp-popup__body {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ftp-ink);
}

.ftp-popup__body > :first-child {
	margin-top: 0;
}

.ftp-popup__body > :last-child {
	margin-bottom: 0;
}

.ftp-popup__body img,
.ftp-popup__body iframe {
	max-width: 100%;
	height: auto;
}

.ftp-popup__status {
	margin: 1rem 0 0;
	padding: 0.65rem 0.9rem;
	border-radius: var(--ftp-button-radius);
	background: #fbe9e4;
	color: #7a2a12;
	font-size: 0.95rem;
}

.ftp-popup__status[hidden] {
	display: none;
}

.ftp-popup__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 2rem;
	line-height: 1;
	color: var(--ftp-ink);
	cursor: pointer;
}

.ftp-popup__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

/* Main button: the site's button style (yellow, Noto Serif, bold capitals), indigo text for readable contrast. */
.ftp-popup__add {
	padding: 15px 22px;
	border: 3px solid var(--ftp-accent);
	border-radius: var(--ftp-button-radius);
	background: var(--ftp-accent);
	color: var(--ftp-ink);
	font-family: var(--ftp-button-font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ftp-popup__add:hover {
	filter: brightness(0.94);
}

.ftp-popup__add[hidden] {
	display: none;
}

/* Skip: deliberately quiet, a text link in the same type family. */
.ftp-popup__skip {
	padding: 0.6rem;
	border: 0;
	background: none;
	color: var(--ftp-ink);
	font-family: var(--ftp-button-font);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	opacity: 0.7;
	cursor: pointer;
}

.ftp-popup__skip:hover {
	opacity: 1;
}

.ftp-popup button:focus-visible {
	outline: 3px solid var(--ftp-ink);
	outline-offset: 3px;
}

/* Quantity picker of the other show (pop-up on "In winkelmand"). */
.ftp-popup__tickets {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.ftp-ticket {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name ctl" "price ctl";
	align-items: center;
	gap: 0.1rem 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid rgba(34, 30, 82, 0.15);
}

.ftp-ticket:last-child {
	border-bottom: 1px solid rgba(34, 30, 82, 0.15);
}

.ftp-ticket__name {
	grid-area: name;
	font-weight: 700;
	line-height: 1.3;
}

.ftp-ticket__price {
	grid-area: price;
	font-size: 0.9rem;
	opacity: 0.75;
}

.ftp-ticket__ctl {
	grid-area: ctl;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ftp-ticket__btn {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 2px solid var(--ftp-ink);
	border-radius: var(--ftp-button-radius);
	background: none;
	color: var(--ftp-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.ftp-ticket__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.ftp-ticket__qty {
	min-width: 2rem;
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
}

.ftp-ticket.is-zero .ftp-ticket__name,
.ftp-ticket.is-zero .ftp-ticket__price {
	opacity: 0.55;
}

/* One ticket type only: nothing to choose, just show the number. */
.ftp-popup__tickets.is-single .ftp-ticket__btn {
	display: none;
}

.ftp-popup__tickets.is-single .ftp-ticket__qty::after {
	content: "\00d7";
}

/* The ticket row the main button just raised. */
.tribe-tickets__tickets-item.ftp-flash {
	border-radius: 12px;
	box-shadow: 0 0 0 4px var(--ftp-accent);
	transition: box-shadow 0.4s ease;
}

/* Package badge on a cart line. */
.ftp-badge {
	color: var(--ftp-ink);
	font-weight: 700;
}

@keyframes ftp-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 601px) {
	.ftp-popup__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 1.5rem;
	}
}

/* Bottom sheet on phones. */
@media (max-width: 600px) {
	.ftp-popup {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		border-radius: var(--ftp-radius) var(--ftp-radius) 0 0;
	}

	.ftp-popup__inner {
		padding: 2rem 1.25rem 1.25rem;
	}

	.ftp-popup__actions {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ftp-popup[open] {
		animation: none;
	}

	.tribe-tickets__tickets-item.ftp-flash {
		transition: none;
	}
}