.ticketshop {
	--ticketshop-accent: #ea580c;
	--ticketshop-accent-dark: #c2410c;
	--ticketshop-surface: #ffffff;
	--ticketshop-soft: #fff7ed;
	--ticketshop-text: #111827;
	color: var(--ticketshop-text);
}

.ticketshop__catalog {
	display: grid;
	gap: 32px;
}

.ticketshop-event {
	overflow: hidden;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: 24px;
	background: linear-gradient( 180deg, #ffffff, #fffaf5 );
	box-shadow: 0 18px 40px rgba( 17, 24, 39, 0.08 );
}

.ticketshop-event__media img {
	display: block;
	width: 100% !important;
	height: 280px !important;
	max-width: none !important;
	object-fit: cover;
}

.ticketshop-event__header {
	padding: 24px 24px 8px;
}

.ticketshop-event__title {
	margin: 0 0 12px;
	font-size: clamp( 1.8rem, 3vw, 2.4rem );
	line-height: 1.1;
}

.ticketshop-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.ticketshop-event__description {
	margin: 0;
	max-width: 70ch;
	color: #374151;
}

.ticketshop-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--ticketshop-soft);
	color: var(--ticketshop-accent-dark);
	font-size: 0.85rem;
	font-weight: 700;
}

.ticketshop-pill.is-danger {
	background: #fef2f2;
	color: #b91c1c;
}

.ticketshop-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	padding: 0 24px 24px;
}

.ticketshop-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-card-radius, 20px );
	background: #fff;
	box-shadow: 0 16px 30px rgba( 17, 24, 39, 0.06 );
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ticketshop-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 26px 46px rgba( 17, 24, 39, 0.14 );
}

/* Highlighted "Meest gekozen" ticket: accent ring + corner flag. */
.ticketshop-card.is-featured {
	border-color: var( --ticketshop-accent, #ea580c );
	box-shadow: 0 0 0 1px var( --ticketshop-accent, #ea580c ), 0 22px 44px rgba( 17, 24, 39, 0.14 );
}

.ticketshop-card__flag {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 6px 14px;
	border-bottom-left-radius: 14px;
	background: var( --ticketshop-accent, #ea580c );
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.ticketshop-card.is-sold-out {
	opacity: 0.75;
}

.ticketshop-card.is-sold-out:hover {
	transform: none;
	box-shadow: 0 16px 30px rgba( 17, 24, 39, 0.06 );
}

.ticketshop-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	padding: 30px 26px;
	text-align: center;
}

/* Ticket icon in a soft accent circle at the top of the card. */
.ticketshop-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --ticketshop-soft, #fff7ed );
	color: var( --ticketshop-accent, #ea580c );
}

.ticketshop-card__icon svg {
	width: 28px;
	height: 28px;
}

.ticketshop-card__eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ticketshop-accent-dark, #9a3412 );
}

.ticketshop-card__title {
	margin: 4px 0 0;
	font-size: 1.35rem;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Description clamped to a fixed height so the price lines up across the row. */
.ticketshop-card__description {
	margin: 0;
	color: #6b7280;
	font-size: 0.9rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.ticketshop-card__price {
	margin: 12px 0;
	font-size: 2.1rem;
	font-weight: 800;
	color: var( --ticketshop-text, #111827 );
}

/* Feature checklist: left-aligned rows with an accent check icon. */
.ticketshop-card__features {
	list-style: none;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	display: grid;
	gap: 12px;
	text-align: left;
}

.ticketshop-card__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var( --ticketshop-text, #111827 );
}

.ticketshop-card__check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var( --ticketshop-accent, #ea580c );
}

.ticketshop-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/* Availability ("x beschikbaar" / "Onbeperkt") temporarily hidden on request;
   sold-out is still conveyed by the disabled "Uitverkocht" button. */
.ticketshop-card__meta {
	display: none;
}

.ticketshop-card__button,
.ticketshop-checkout__submit,
.ticketshop-status__retry {
	border: 0;
	border-radius: var( --ticketshop-btn-radius, 999px );
	font: inherit;
	cursor: pointer;
}

.ticketshop-card__button,
.ticketshop-checkout__submit,
.ticketshop-status__retry {
	padding: 12px 18px;
	/* !important keeps the brand fill against themes that recolour buttons. */
	background: var(--ticketshop-accent) !important;
	color: #ffffff !important;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.1s ease;
}

.ticketshop-card__button:hover,
.ticketshop-card__button:focus,
.ticketshop-checkout__submit:hover,
.ticketshop-checkout__submit:focus,
.ticketshop-status__retry:hover,
.ticketshop-status__retry:focus {
	background: var(--ticketshop-accent-dark) !important;
	color: #ffffff !important;
}

.ticketshop-card__button:active,
.ticketshop-checkout__submit:active {
	transform: scale( 0.98 );
}

/* Card CTA: full-width, sitting at the bottom so the buttons line up across a
   row of cards. Solid accent by default (the highlighted ticket); the regular
   tickets use the outlined variant. */
.ticketshop-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: auto;
	border-radius: var( --ticketshop-btn-radius, 12px );
	padding: 13px 18px;
}

.ticketshop-card__button svg {
	width: 18px;
	height: 18px;
}

/* Outline variant (non-highlighted tickets). The !important restores it over
   the branded fill above, which itself uses !important against theme buttons. */
.ticketshop-card__button.is-outline {
	background: #fff !important;
	color: var( --ticketshop-text, #111827 ) !important;
	border: 1px solid rgba( 17, 24, 39, 0.18 );
}

.ticketshop-card__button.is-outline:hover,
.ticketshop-card__button.is-outline:focus {
	background: #f9fafb !important;
	color: var( --ticketshop-text, #111827 ) !important;
}

/* Sold-out / disabled ticket button: greyed and non-interactive. */
.ticketshop-card__button:disabled,
.ticketshop-card__button.is-unavailable {
	background: #e5e7eb !important;
	color: #9ca3af !important;
	border: 1px solid rgba( 17, 24, 39, 0.10 );
	cursor: not-allowed;
	box-shadow: none;
}

.ticketshop-field {
	display: grid;
	gap: 6px;
}

.ticketshop-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Postcode | Huisnummer | Toevoeging — postcode gets the extra width. */
.ticketshop-field-row--triple {
	grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 480px) {
	.ticketshop-field-row,
	.ticketshop-field-row--triple {
		grid-template-columns: 1fr;
	}
}

.ticketshop-field span {
	font-weight: 600;
}

.ticketshop-field input,
.ticketshop-field select {
	width: 100%;
	/* Most themes set this globally, but not all: without it a full-width field
	   grows past its card by its own padding, and the gate page shows it. */
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	background: #ffffff;
	font: inherit;
}

.ticketshop-field__error {
	min-height: 1em;
	color: #b91c1c;
	font-size: 0.85rem;
}

/* Explains that filling in a visitor's e-mail sends them the ticket directly. */
.ticketshop-holders__hint {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.85rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba( 37, 99, 235, 0.25 );
	border-radius: 8px;
	background: rgba( 37, 99, 235, 0.06 );
	color: #334155;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ticketshop-holders__hint-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-shrink: 0;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: #2563eb;
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ticketshop-holders__hint-badge svg {
	width: 0.85rem;
	height: 0.85rem;
}

/* A rejected required field gets a red outline, not just the message below it. */
.ticketshop-field.is-invalid input,
.ticketshop-field.is-invalid select {
	border-color: #dc2626;
	box-shadow: 0 0 0 1px #dc2626;
}

/* A field filled from a confirmed PDOK match gets a green outline. */
.ticketshop-field.is-verified input {
	border-color: #16a34a;
	box-shadow: 0 0 0 1px #16a34a;
}

/* "✓ Adres gevonden" confirmation under the address search. */
.ticketshop-address-found {
	margin: -4px 0 0;
	color: #15803d;
	font-size: 0.85rem;
	font-weight: 600;
}

.ticketshop-address-found[hidden] {
	display: none;
}

.ticketshop-field--address-search {
	position: relative;
}

.ticketshop-address-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: var( --ticketshop-surface, #ffffff );
	border: 1px solid #d1d5db;
	border-radius: 14px;
	box-shadow: 0 18px 36px rgba( 17, 24, 39, 0.16 );
	max-height: 260px;
	overflow-y: auto;
}

.ticketshop-address-suggestions[hidden] {
	display: none;
}

.ticketshop-address-suggestions__item {
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.9rem;
}

.ticketshop-address-suggestions__item:hover {
	background: var( --ticketshop-soft, #fff7ed );
	color: var( --ticketshop-accent-dark, #c2410c );
}

.ticketshop-cart-toggle {
	position: fixed;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ticketshop-accent, #ea580c );
	color: #ffffff;
	box-shadow: 0 14px 30px rgba( 17, 24, 39, 0.24 );
	cursor: pointer;
}

.ticketshop-cart-toggle[hidden] {
	display: none;
}

.ticketshop-cart-toggle svg {
	width: 26px;
	height: 26px;
}

/* Corner placement, driven by the position class on the cart root. */
.ticketshop-cart-root.is-bottom-right .ticketshop-cart-toggle {
	right: 24px;
	bottom: 24px;
}

.ticketshop-cart-root.is-bottom-left .ticketshop-cart-toggle {
	left: 24px;
	bottom: 24px;
}

.ticketshop-cart-root.is-top-right .ticketshop-cart-toggle {
	right: 24px;
	top: 24px;
}

.ticketshop-cart-root.is-top-left .ticketshop-cart-toggle {
	left: 24px;
	top: 24px;
}

.ticketshop-cart-toggle__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #111827;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ticketshop-cart-toggle__count[hidden] {
	display: none;
}

.ticketshop-cart[hidden] {
	display: none;
}

.ticketshop-cart__overlay {
	position: fixed;
	inset: 0;
	background: rgba( 15, 23, 42, 0.45 );
	backdrop-filter: blur( 2px );
}

.ticketshop-cart__panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 41;
	display: flex;
	flex-direction: column;
	width: min( 520px, 100vw );
	height: 100vh;
	background: #fffaf7;
	box-shadow: -18px 0 40px rgba( 17, 24, 39, 0.16 );
	transform: translateX( 100% );
	transition: transform 0.2s ease;
}

.ticketshop-cart.is-open .ticketshop-cart__panel {
	transform: translateX( 0 );
}

.ticketshop-cart__header,
.ticketshop-checkout__footer {
	padding: 20px 22px;
}

.ticketshop-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba( 17, 24, 39, 0.08 );
}

.ticketshop-cart__header h2 {
	margin: 0;
}

.ticketshop-cart__close {
	border: 0;
	background: transparent;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.ticketshop-cart__body {
	flex: 1;
	overflow: auto;
	padding: 20px 22px 32px;
}

.ticketshop-cart__empty {
	margin: 0;
	padding: 18px;
	border-radius: 18px;
	background: #ffffff;
	color: #4b5563;
}

.ticketshop-cart__items {
	display: grid;
	gap: 14px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.ticketshop-cart__item {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 14px;
	padding: 16px;
	border-radius: 18px;
	background: #ffffff;
}

.ticketshop-cart__item-copy {
	display: grid;
	gap: 4px;
}

.ticketshop-cart__item-copy span,
.ticketshop-cart__item-copy small {
	color: #6b7280;
}

.ticketshop-cart__item-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

/* Price sits right above the quantity/remove buttons. */
.ticketshop-cart__item-controls .ticketshop-cart__item-price {
	margin: 0;
	color: var( --ticketshop-accent-dark, #c2410c );
	font-size: 1.05rem;
	font-weight: 700;
	white-space: nowrap;
}

.ticketshop-cart__item-buttons {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Quantity stepper: minus / count / plus grouped in one rounded pill. */
/* Warm, soft, rounded to match the filled accent buttons (Afrekenen, close):
 * a cream pill holding raised white +/- keys, so it reads as part of the same
 * system rather than a thin form control. */
.ticketshop-cart__stepper {
	display: inline-flex;
	align-items: stretch;
	height: 34px;
	gap: 3px;
	padding: 3px;
	border-radius: var( --ticketshop-btn-radius, 999px ) !important;
	background: var( --ticketshop-soft, #fff7ed );
}

.ticketshop-cart__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 100%;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: calc( var( --ticketshop-btn-radius, 999px ) - 3px ) !important;
	/* !important throughout: themes love to restyle bare <button>s. */
	background: #fff !important;
	color: var( --ticketshop-accent-dark, #c2410c ) !important;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 17, 24, 39, 0.1 );
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ticketshop-cart__qty-btn svg {
	width: 16px;
	height: 16px;
}

.ticketshop-cart__qty-btn:hover:not( :disabled ),
.ticketshop-cart__qty-btn:focus:not( :disabled ) {
	background: var( --ticketshop-accent, #ea580c ) !important;
	color: #fff !important;
}

.ticketshop-cart__qty-btn:disabled {
	opacity: 0.45;
	box-shadow: none;
	cursor: not-allowed;
}

.ticketshop-cart__qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	color: #1f2937;
}

/* Remove: same warm pill, sized to match the stepper; turns red on hover. */
.ticketshop-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 9px !important;
	border: 0 !important;
	border-radius: var( --ticketshop-btn-radius, 999px ) !important;
	background: var( --ticketshop-soft, #fff7ed ) !important;
	color: #9ca3af !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ticketshop-cart__remove svg {
	width: 16px;
	height: 16px;
}

.ticketshop-cart__remove:hover,
.ticketshop-cart__remove:focus {
	background: #fef2f2 !important;
	color: #dc2626 !important;
}

/* Two columns: buyer details/holders on the left, order summary on the right.
 * The left blocks live in one wrapper so the sticky summary shares a single grid
 * row with them — it sticks for exactly the wrapper's height (no phantom rows,
 * no trailing whitespace) instead of spanning an arbitrary row count. */
.ticketshop-checkout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 280px, 360px );
	gap: 22px 28px;
	align-items: start;
	margin-bottom: 32px;
}

/* Both columns are pinned to row 1 explicitly. Without this, grid's sparse
 * auto-placement bumps the left wrapper (column 1) to row 2 because its column
 * sits before the summary's (column 2) — which left a summary-sized gap above
 * the left block. */
.ticketshop-checkout__main {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	gap: 22px;
	align-content: start;
}

.ticketshop-checkout__summary {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	/* Clear a fixed theme header; height is configurable under Nexware > Weergave. */
	top: var( --ticketshop-sticky-top, 24px );
}

@media ( max-width: 820px ) {
	.ticketshop-checkout {
		grid-template-columns: 1fr;
	}

	.ticketshop-checkout__main,
	.ticketshop-checkout__summary {
		grid-column: 1;
		grid-row: auto;
	}

	/* Stack buyer details first, order summary (cart) below them. */
	.ticketshop-checkout__main {
		order: 1;
	}

	.ticketshop-checkout__summary {
		order: 2;
		position: static;
	}
}

/* Each checkout block (buyer details, holders, summary) is a clean white card. */
.ticketshop-checkout__summary,
.ticketshop-checkout__section {
	padding: 22px;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: var( --ticketshop-card-radius, 16px );
	background: var( --ticketshop-surface, #fff );
	box-shadow: 0 2px 10px rgba( 17, 24, 39, 0.05 );
}

.ticketshop-checkout__section {
	display: grid;
	gap: 14px;
	align-content: start;
}

/* The holders section is filled by JS; hide its empty card when unused. */
.ticketshop-checkout__section:empty {
	display: none;
}

.ticketshop-checkout__summary > h3,
.ticketshop-checkout__section h3 {
	margin: 0 0 4px;
	font-size: 1.1rem;
}

.ticketshop-checkout__holders-group {
	display: grid;
	gap: 12px;
	padding: 14px;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: calc( var( --ticketshop-card-radius, 16px ) - 4px );
	background: #fafafa;
}

.ticketshop-checkout__holders-group legend {
	padding: 0 6px;
	font-weight: 700;
}

/* Footer sits inside the summary card: divider, big total, full-width button. */
.ticketshop-checkout__footer {
	display: grid;
	gap: 12px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba( 17, 24, 39, 0.1 );
}

.ticketshop-checkout__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 1.05rem;
}

.ticketshop-checkout__total strong {
	font-size: 1.5rem;
	color: var( --ticketshop-accent-dark, #c2410c );
}

.ticketshop-checkout__submit {
	width: 100%;
	padding: 14px 18px;
	font-size: 1.02rem;
}

.ticketshop-checkout__notice,
.ticketshop__hint {
	margin: 0;
	color: #6b7280;
}

.ticketshop-checkout__message {
	margin: 0;
	padding: 12px 14px;
	/* Match the submit button below it so the checkout reads as one system. */
	border-radius: var( --ticketshop-btn-radius, 999px );
	background: #fef2f2;
	color: #b91c1c;
}

.ticketshop-program {
	padding: 0 24px 24px;
}

.ticketshop-program summary {
	cursor: pointer;
	font-weight: 700;
}

.ticketshop-program__list {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.ticketshop-program__item {
	display: grid;
	gap: 4px;
	padding: 14px;
	border-radius: 16px;
	background: #ffffff;
}

.ticketshop-notice {
	padding: 18px 20px;
	border-radius: 16px;
}

.ticketshop-notice.is-error {
	background: #fef2f2;
	color: #b91c1c;
}

.ticketshop-notice.is-info {
	background: var(--ticketshop-soft);
	color: var(--ticketshop-accent-dark);
}

.ticketshop-status {
	max-width: 760px;
	margin: 0 auto;
}

.ticketshop-status__card {
	padding: 28px;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: 24px;
	background: linear-gradient( 180deg, #ffffff, #fffaf5 );
	box-shadow: 0 18px 40px rgba( 17, 24, 39, 0.08 );
}

.ticketshop-status__content h2 {
	margin-top: 0;
}

.ticketshop-status__content.is-paid h2 {
	color: #15803d;
}

.ticketshop-status__content.is-failed h2 {
	color: #b91c1c;
}

.ticketshop-status__content.is-warning h2 {
	color: #b45309;
}

.ticketshop-status__note {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ticketshop-status__order-number {
	font-size: 1rem;
}

.ticketshop-status__tickets {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ticketshop-status__tickets li {
	display: grid;
	gap: 4px;
	padding: 14px;
	border-radius: 16px;
	background: #ffffff;
}

.ticketshop-status__loader {
	display: grid;
	gap: 12px;
}

.ticketshop-status__skeleton {
	height: 16px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #f3f4f6, #e5e7eb, #f3f4f6 );
	background-size: 200% 100%;
	animation: ticketshop-shimmer 1.2s infinite linear;
}

.ticketshop-status__skeleton--title {
	width: 48%;
	height: 26px;
}

.ticketshop-status__skeleton--line.short {
	width: 62%;
}

.ticketshop-status__message {
	margin: 0;
	padding: 14px 16px;
	border-radius: 16px;
	background: #fef2f2;
	color: #b91c1c;
}

@keyframes ticketshop-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* Events overview shortcode [nexware_events] */
.nexware-events {
	display: grid;
	gap: 28px;
}

.nexware-events.is-horizontal {
	grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) );
	align-items: stretch;
}

.nexware-events__item {
	display: grid;
	/* Cards stay plain white regardless of the surface tint, so they read clean
	   against a warm/muted site palette and the tag pills stay visible. */
	background: #fff;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: var( --ticketshop-card-radius, 18px );
	overflow: hidden;
}

.nexware-events.is-vertical .nexware-events__item {
	grid-template-columns: minmax( 0, 320px ) 1fr;
}

/* Horizontal: media on top, body fills the rest so cards in a row match height. */
.nexware-events.is-horizontal .nexware-events__item {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}

.nexware-events__item.is-highlight {
	border-color: var( --ticketshop-accent, #ea580c );
	box-shadow: 0 0 0 1px var( --ticketshop-accent, #ea580c );
}

.nexware-events__media {
	position: relative;
}

.nexware-events__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 240px;
	object-fit: cover;
	display: block;
	/* Softened just a touch so the cover photo sits gently on the white card. */
	opacity: 0.9;
}

/* Activity icon on a photo: bottom-left corner, primary background, white icon. */
.nexware-events__emblem {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var( --ticketshop-card-radius, 12px );
	color: #fff;
	background: var( --ticketshop-accent, #ea580c );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.22 );
}

.nexware-events__emblem svg {
	width: 23px;
	height: 23px;
}

.nexware-events.is-horizontal .nexware-events__media img {
	min-height: 0;
	height: 210px !important;
}

.nexware-events__placeholder {
	width: 100%;
	height: 100%;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --ticketshop-soft, #fff7ed );
	color: var( --ticketshop-accent, #ea580c );
}

.nexware-events__placeholder svg {
	width: 64px;
	height: 64px;
	opacity: 0.5;
}

.nexware-events.is-horizontal .nexware-events__placeholder {
	min-height: 210px;
}

.nexware-events__body {
	padding: 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nexware-events__heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.nexware-events__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.nexware-events__badge {
	font-size: 13px;
	font-weight: 600;
	padding: 4px 13px;
	border-radius: 999px;
	white-space: nowrap;
}

.nexware-events__badge.is-accent {
	background: var( --ticketshop-badge, var( --ticketshop-accent, #ea580c ) );
	color: #fff;
}

.nexware-events__badge.is-muted {
	background: var( --ticketshop-muted, #e5e7eb );
	color: #374151;
}

.nexware-events__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.nexware-events__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	color: rgba( 17, 24, 39, 0.82 );
}

.nexware-events__meta-item svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var( --ticketshop-accent, #ea580c );
}

.nexware-events__description {
	margin: 0;
	color: rgba( 17, 24, 39, 0.75 );
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nexware-events__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.nexware-events__tag {
	background: var( --ticketshop-muted, #f3f4f6 );
	color: var( --ticketshop-text, #374151 );
	font-size: 13px;
	padding: 3px 10px;
	border-radius: 7px;
}

.nexware-events__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.nexware-events__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 9px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.nexware-events__button svg {
	width: 18px;
	height: 18px;
}

.nexware-events__button.is-primary {
	background: var( --ticketshop-accent, #ea580c );
	color: #fff;
}

.nexware-events__button.is-primary:hover {
	background: var( --ticketshop-accent-dark, #c2410c );
}

.nexware-events__button.is-outline {
	background: #fff;
	color: var( --ticketshop-text, #111827 );
	border: 1px solid rgba( 17, 24, 39, 0.16 );
}

.nexware-events__button.is-outline:hover {
	background: #f9fafb;
}

@media ( max-width: 720px ) {
	.nexware-events.is-vertical .nexware-events__item {
		grid-template-columns: 1fr;
	}

	.nexware-events__media img {
		min-height: 0;
		height: 210px !important;
	}

	.nexware-events__placeholder {
		min-height: 180px;
	}

	.nexware-events__body {
		padding: 22px 22px;
	}

	.nexware-events__title {
		font-size: 22px;
	}
}

/* Single-event programme, grouped per day as activity cards [nexware_program] */
.nexware-programme {
	display: grid;
	gap: 26px;
}

.nexware-programme__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.nexware-programme__title {
	margin: 0;
	font-size: 22px;
}

/* Date range badge in the header — made to stand out with the accent colour. */
.nexware-programme__daterange {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: var( --ticketshop-badge-radius, 999px );
	font-size: 14px;
	font-weight: 700;
	color: var( --ticketshop-accent-dark, #c2410c );
	background: var( --ticketshop-soft, #fff7ed );
	border: 1px solid rgba( 234, 88, 12, 0.28 );
}

.nexware-programme__daterange svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var( --ticketshop-accent, #ea580c );
}

.nexware-programme__day {
	display: grid;
	gap: 16px;
}

.nexware-programme__day-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ticketshop-accent-dark, #c2410c );
}

/* Collapsible day (multi-day programme): a card-like panel whose title is a
   clickable header that reveals its cards with a small slide/fade. */
.nexware-programme__day.is-collapsible {
	display: block;
	background: var( --ticketshop-surface, #fff );
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: var( --ticketshop-card-radius, 16px );
	padding: 14px 16px;
}

.nexware-programme__day.is-collapsible > summary.nexware-programme__day-title {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.nexware-programme__day.is-collapsible > summary.nexware-programme__day-title::-webkit-details-marker {
	display: none;
}

.nexware-programme__day-name {
	flex: 1 1 auto;
}

/* "Afgelopen" flag shown on a past (collapsed by default) day. */
.nexware-programme__day-flag {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 9px;
	border-radius: var( --ticketshop-badge-radius, 999px );
	color: #fff;
	background: #4b5563;
}

.nexware-programme__day-title svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var( --ticketshop-accent-dark, #c2410c );
	transition: transform 0.2s ease;
}

.nexware-programme__day.is-collapsible[open] > summary svg {
	transform: rotate( 180deg );
}

/* Open: divide the header from its cards and slide them in. */
.nexware-programme__day.is-collapsible[open] > summary.nexware-programme__day-title {
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba( 17, 24, 39, 0.08 );
}

.nexware-programme__day.is-collapsible[open] > .nexware-programme__cards {
	animation: nexware-day-reveal 0.28s ease;
}

/* Past day: white panel (consistent with the cards); only the header text is
   muted so it still reads as "over" without a grey wash. */
.nexware-programme__day.is-collapsible.is-past {
	background: #fff;
	border-color: rgba( 17, 24, 39, 0.12 );
}

.nexware-programme__day.is-collapsible.is-past > summary.nexware-programme__day-title {
	color: #4b5563;
}

.nexware-programme__day.is-collapsible.is-past > summary.nexware-programme__day-title svg {
	color: #6b7280;
}

@keyframes nexware-day-reveal {
	from {
		opacity: 0;
		transform: translateY( -8px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.nexware-programme__cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 20px;
	align-items: stretch;
}

.nexware-programme__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var( --ticketshop-surface, #fff );
	border: 1px solid rgba( 17, 24, 39, 0.06 );
	border-radius: var( --ticketshop-card-radius, 16px );
	overflow: hidden;
	box-shadow: 0 2px 10px rgba( 17, 24, 39, 0.08 ), 0 1px 3px rgba( 17, 24, 39, 0.06 );
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.nexware-programme__card:hover {
	box-shadow: 0 8px 22px rgba( 17, 24, 39, 0.13 ), 0 2px 6px rgba( 17, 24, 39, 0.08 );
	transform: translateY( -2px );
}

.nexware-programme__card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var( --ticketshop-soft, #fff7ed );
}

/* Absolute fill so the photo always covers the media box, whatever height the
   card's flex layout resolves to (the vertical row variant has no aspect-ratio).
   The !important values override themes that force `img { height: auto }`, which
   would otherwise defeat object-fit: cover. */
.nexware-programme__card-media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

.nexware-programme__card-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ticketshop-accent, #ea580c );
}

.nexware-programme__card-placeholder svg {
	width: 48px;
	height: 48px;
	opacity: 0.5;
}

/* Ticket marker: inline next to the title by default; the vertical variant
   lifts it to the card's top-right corner (see the .is-vertical rules). */
.nexware-programme__card-ticket {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	color: #fff;
	background: var( --ticketshop-accent, #ea580c );
}

.nexware-programme__card-ticket svg {
	width: 14px;
	height: 14px;
}

/* Clickable ticket marker: links straight to the shop for this part. */
a.nexware-programme__card-ticket.is-link {
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

a.nexware-programme__card-ticket.is-link:hover,
a.nexware-programme__card-ticket.is-link:focus-visible {
	filter: brightness( 1.08 );
	transform: translateY( -1px );
}

/* Activity icon on a photo: bottom-left corner, primary background, white icon,
   using the configured card radius (square-ish) rather than a circle. */
.nexware-programme__card-emblem {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var( --ticketshop-card-radius, 12px );
	color: #fff;
	background: var( --ticketshop-accent, #ea580c );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.18 );
}

.nexware-programme__card-emblem svg {
	width: 19px;
	height: 19px;
}

.nexware-programme__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 16px 18px 18px;
}

.nexware-programme__card-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.nexware-programme__card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.nexware-programme__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.nexware-programme__card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ticketshop-accent-dark, #c2410c );
}

.nexware-programme__card-meta-item svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.nexware-programme__card-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba( 17, 24, 39, 0.72 );
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nexware-programme__card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.nexware-programme__card-tag {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	color: rgba( 17, 24, 39, 0.75 );
	background: rgba( 17, 24, 39, 0.06 );
}

.nexware-programme__empty {
	margin: 0;
	color: rgba( 17, 24, 39, 0.7 );
}

@media ( max-width: 782px ) {
	.ticketshop-grid {
		grid-template-columns: 1fr;
	}

	.ticketshop-event__media img {
		height: 220px !important;
	}

	.ticketshop-cart-root.is-bottom-right .ticketshop-cart-toggle,
	.ticketshop-cart-root.is-top-right .ticketshop-cart-toggle {
		right: 16px;
	}

	.ticketshop-cart-root.is-bottom-left .ticketshop-cart-toggle,
	.ticketshop-cart-root.is-top-left .ticketshop-cart-toggle {
		left: 16px;
	}

	.ticketshop-cart-root.is-bottom-right .ticketshop-cart-toggle,
	.ticketshop-cart-root.is-bottom-left .ticketshop-cart-toggle {
		bottom: 16px;
	}

	.ticketshop-cart-root.is-top-right .ticketshop-cart-toggle,
	.ticketshop-cart-root.is-top-left .ticketshop-cart-toggle {
		top: 16px;
	}

	.ticketshop-cart__item {
		grid-template-columns: 1fr;
	}

	.nexware-events__item {
		grid-template-columns: 1fr;
	}
}

/* Past events / programme parts stay on a clean white card like the rest; being
   finished is signalled by the grayscaled photo, the "Afgelopen" marker and a
   muted "Meer informatie" button rather than a grey card wash. */
.nexware-events__item.is-past,
.nexware-programme__card.is-past {
	background: #fff;
	border-color: rgba( 17, 24, 39, 0.12 );
}

.nexware-events__item.is-past .nexware-events__media img,
.nexware-programme__card.is-past .nexware-programme__card-media img {
	filter: grayscale( 0.5 );
	opacity: 0.9;
}

.nexware-events__badge.is-past {
	background: #4b5563;
	color: #fff;
}

/* Finished events: the "Meer informatie" button becomes a plain white outlined
   button (dropping the accent fill), so a past card reads as done while the
   "Afgelopen" label carries the state. */
.nexware-events__item.is-past .nexware-events__button.is-primary {
	background: #fff;
	color: var( --ticketshop-text, #111827 );
	border: 1px solid rgba( 17, 24, 39, 0.16 );
}

.nexware-events__item.is-past .nexware-events__button.is-primary:hover {
	background: #f9fafb;
}

.nexware-programme__card-past {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
	color: #fff;
	background: #4b5563;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
}

/* Vertical programme: a single column of list-style cards (image left). The
   default (.is-horizontal) keeps the card grid defined above. */
.nexware-programme.is-vertical .nexware-programme__cards {
	grid-template-columns: 1fr;
	gap: 16px;
}

.nexware-programme.is-vertical .nexware-programme__card {
	flex-direction: row;
	align-items: stretch;
	min-height: 150px;
}

/* A fixed-width column that stretches to the card's height; the absolutely
   positioned img then covers it whatever that height turns out to be. */
.nexware-programme.is-vertical .nexware-programme__card-media {
	flex: 0 0 220px;
	align-self: stretch;
	aspect-ratio: auto;
}

.nexware-programme.is-vertical .nexware-programme__card-body {
	flex: 1 1 auto;
	padding-right: 96px;
}

/* Vertical: lift the ticket marker out of the heading to the card's corner. */
.nexware-programme.is-vertical .nexware-programme__card-ticket {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
}

@media ( max-width: 640px ) {
	.nexware-programme.is-vertical .nexware-programme__card {
		flex-direction: column;
	}

	.nexware-programme.is-vertical .nexware-programme__card-media {
		flex: none;
		aspect-ratio: 16 / 10;
	}
}

/* Compact programme: one connected card per day, activities as dense two-line
   rows (small thumbnail · time + title on line one · one-line description on
   line two) separated by dashed dividers. */
.nexware-programme.is-compact .nexware-programme__cards {
	display: block;
	background: var( --ticketshop-surface, #fff );
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-card-radius, 16px );
	overflow: hidden;
	box-shadow: 0 2px 10px rgba( 17, 24, 39, 0.08 ), 0 1px 3px rgba( 17, 24, 39, 0.06 );
}

.nexware-programme.is-compact .nexware-programme__card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	box-shadow: none;
}

.nexware-programme.is-compact .nexware-programme__card:hover {
	transform: none;
	box-shadow: none;
	background: rgba( 17, 24, 39, 0.02 );
}

/* Dashed divider between consecutive rows, never above the first. */
.nexware-programme.is-compact
	.nexware-programme__card
	+ .nexware-programme__card {
	border-top: 1px dashed rgba( 17, 24, 39, 0.18 );
}

/* Small square thumbnail instead of the full media box. */
.nexware-programme.is-compact .nexware-programme__card-media {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	aspect-ratio: 1;
	border-radius: 10px;
	align-self: center;
}

.nexware-programme.is-compact .nexware-programme__card-emblem,
.nexware-programme.is-compact .nexware-programme__card-past {
	display: none;
}

.nexware-programme.is-compact .nexware-programme__card-placeholder svg {
	width: 22px;
	height: 22px;
}

.nexware-programme.is-compact .nexware-programme__card-body {
	gap: 2px;
	padding: 0;
	min-width: 0;
}

/* Line 1: time + title on a single line, the title truncated with an ellipsis. */
.nexware-programme.is-compact .nexware-programme__card-compact-top {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.nexware-programme.is-compact .nexware-programme__card-compact-time {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var( --ticketshop-accent-dark, #9a3412 );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nexware-programme.is-compact .nexware-programme__card-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nexware-programme.is-compact .nexware-programme__card-ticket {
	flex: 0 0 auto;
	padding: 3px 8px;
	font-size: 11px;
}

/* Line 2: one-line description with an ellipsis. */
.nexware-programme.is-compact .nexware-programme__card-desc {
	-webkit-line-clamp: 1;
	line-clamp: 1;
	font-size: 12.5px;
	line-height: 1.4;
}

/* Configurable corner radius for buttons and badges (Nexware settings), applied
   last so it overrides the per-element defaults above. */
.ticketshop-card__button,
.ticketshop-checkout__submit,
.ticketshop-status__retry,
.nexware-events__button {
	border-radius: var( --ticketshop-btn-radius, 10px );
}

.ticketshop-pill,
.nexware-events__badge,
.nexware-events__tag,
.nexware-programme__card-ticket,
.nexware-programme__card-tag,
.nexware-programme__card-past {
	border-radius: var( --ticketshop-badge-radius, 999px );
}

/* Events overview: status marker on the photo (horizontal), stacked meta,
   full-width title with ellipsis. */
.nexware-events__meta {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.nexware-events__heading {
	flex-wrap: nowrap;
}

.nexware-events__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nexware-events__media {
	position: relative;
}

.nexware-events__media-badge {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: var( --ticketshop-badge-radius, 999px );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	white-space: nowrap;
}

.nexware-events__media-badge.is-accent {
	background: var( --ticketshop-badge, var( --ticketshop-accent, #ea580c ) );
	color: #fff;
}

.nexware-events__media-badge.is-muted {
	background: #fff;
	color: #374151;
}

.nexware-events__media-badge.is-past {
	background: var( --ticketshop-muted, #f3f4f6 );
	color: var( --ticketshop-text, #374151 );
}

/* In the horizontal layout the marker lives on the photo, freeing the heading
   so the title can use the full width. */
.nexware-events.is-horizontal .nexware-events__media-badge {
	display: inline-flex;
}

.nexware-events.is-horizontal .nexware-events__heading .nexware-events__badge {
	display: none;
}

/* Event cards: resting shadow for contrast + a lift/press effect on interaction. */
.nexware-events__item {
	box-shadow: 0 2px 10px rgba( 17, 24, 39, 0.08 ), 0 1px 3px rgba( 17, 24, 39, 0.06 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nexware-events__item:hover {
	transform: translateY( -3px );
	box-shadow: 0 14px 30px rgba( 17, 24, 39, 0.16 );
}

.nexware-events__item:active {
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 17, 24, 39, 0.12 );
}

.nexware-events__item.is-past:hover {
	transform: translateY( -3px );
}

/* Badges get a touch of shadow so even the muted variant stays legible. */
.nexware-events__badge {
	box-shadow: 0 1px 2px rgba( 17, 24, 39, 0.12 );
}

.nexware-events__badge.is-muted {
	color: #1f2937;
}

/* Lean tickets-only widget: the grid without the event-card side padding. */
.nexware-tickets__grid {
	padding: 0;
}

/* Cart above the theme header, a fading overlay, and a livelier toggle. */
.ticketshop-cart__overlay {
	z-index: 100000;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ticketshop-cart.is-open .ticketshop-cart__overlay {
	opacity: 1;
}

.ticketshop-cart__panel {
	z-index: 100001;
}

.ticketshop-cart-toggle {
	z-index: 99990;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ticketshop-cart-toggle:hover {
	transform: scale( 1.06 );
	box-shadow: 0 18px 38px rgba( 17, 24, 39, 0.3 );
}

.ticketshop-cart-toggle:active {
	transform: scale( 0.96 );
}

/* Force the round accent FAB with a black count badge, even against themes that
   style all <button> elements. Scoped by the cart root for higher specificity. */
.ticketshop-cart-root .ticketshop-cart-toggle,
.ticketshop-cart-root .ticketshop-cart-toggle:hover,
.ticketshop-cart-root .ticketshop-cart-toggle:focus,
.ticketshop-cart-root .ticketshop-cart-toggle:active {
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* !important beats themes that recolour every <button> on hover/focus. */
	background: var( --ticketshop-accent, #ea580c ) !important;
	color: #fff !important;
}

.ticketshop-cart-root .ticketshop-cart-toggle__count {
	background: #000;
	color: #fff;
}

/* Cart line with optional thumbnail */
.ticketshop-cart__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Keep the thumbnail square: never let the flex row squeeze it. */
.ticketshop-cart__item-media {
	flex-shrink: 0;
}

.ticketshop-cart__item-media img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* No image on a line: an accent gradient tile with a ticket icon. */
.ticketshop-cart__item-media.is-placeholder,
.ticketshop-summary__media.is-placeholder {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: linear-gradient( 135deg, var( --ticketshop-accent, #ea580c ), var( --ticketshop-accent-dark, #c2410c ) );
	color: #fff;
}

.ticketshop-summary__media.is-placeholder {
	width: 44px;
	height: 44px;
}

.ticketshop-cart__item-media.is-placeholder svg,
.ticketshop-summary__media.is-placeholder svg {
	width: 22px;
	height: 22px;
}

.ticketshop-cart__item-copy {
	flex: 1 1 auto;
	min-width: 0;
}

/* Cart footer: total + Afrekenen link */
.ticketshop-cart__foot {
	padding: 16px 22px 22px;
	border-top: 1px solid rgba( 17, 24, 39, 0.08 );
	background: #fff;
	display: grid;
	gap: 12px;
}

.ticketshop-cart__total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.ticketshop-cart__total-row strong {
	font-size: 20px;
}

.ticketshop-cart__checkout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	border-radius: var( --ticketshop-btn-radius, 10px );
	background: var( --ticketshop-accent, #ea580c );
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.ticketshop-cart__checkout[hidden] {
	display: none;
}

.ticketshop-cart__checkout:hover {
	background: var( --ticketshop-accent-dark, #c2410c );
	color: #fff;
}

.ticketshop-cart__hint {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

/* Dedicated checkout page */
.nexware-checkout {
	max-width: 1040px;
	margin: 0 auto;
}

.ticketshop-checkout__summary {
	margin-bottom: 20px;
}

.ticketshop-summary {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ticketshop-summary__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: var( --ticketshop-card-radius, 12px );
	background: var( --ticketshop-surface, #fff );
}

.ticketshop-summary__media img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.ticketshop-summary__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ticketshop-summary__copy {
	min-width: 0;
	display: grid;
	gap: 2px;
}

.ticketshop-summary__copy span {
	color: #6b7280;
	font-size: 13px;
}

/* Controls row under each summary line: stepper left, price + trash right. */
.ticketshop-summary__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ticketshop-summary__price {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

.ticketshop-checkout__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 56px 24px;
	border: 1px solid rgba( 17, 24, 39, 0.08 );
	border-radius: var( --ticketshop-card-radius, 16px );
	background: var( --ticketshop-surface, #fff );
	box-shadow: 0 2px 10px rgba( 17, 24, 39, 0.05 );
	text-align: center;
}

/* The flex display above beats the [hidden] UA rule, so restore it explicitly. */
.ticketshop-checkout__empty[hidden] {
	display: none;
}

.ticketshop-checkout__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var( --ticketshop-soft, #fff7ed );
	color: var( --ticketshop-accent, #ea580c );
}

.ticketshop-checkout__empty-icon svg {
	width: 34px;
	height: 34px;
}

.ticketshop-checkout__empty h3 {
	margin: 6px 0 0;
	font-size: 1.35rem;
}

.ticketshop-checkout__empty p {
	margin: 0;
	max-width: 44ch;
	color: #6b7280;
	line-height: 1.5;
}

.ticketshop-checkout__empty-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 13px 24px;
	border-radius: var( --ticketshop-btn-radius, 999px );
	background: var( --ticketshop-accent, #ea580c ) !important;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.1s ease;
}

.ticketshop-checkout__empty-button:hover,
.ticketshop-checkout__empty-button:focus {
	background: var( --ticketshop-accent-dark, #c2410c ) !important;
	color: #fff !important;
}

.ticketshop-checkout__empty-button:active {
	transform: scale( 0.98 );
}

.ticketshop-checkout__empty-button svg {
	width: 18px;
	height: 18px;
}

/* Beat themes that force a fixed radius on every button
   (e.g. `[type="button"], [type="submit"], button { border-radius: 3px }`).
   Higher specificity + !important so plugin buttons keep their own shape. */
.ticketshop .ticketshop-card__button,
.ticketshop .ticketshop-checkout__submit,
.ticketshop .ticketshop-status__retry {
	border-radius: var( --ticketshop-btn-radius, 12px ) !important;
}

.ticketshop-cart-root .ticketshop-cart-toggle {
	border-radius: 50% !important;
}

/* The reset also constrains button width; force the full-width CTA back. */
.ticketshop .ticketshop-card__button {
	width: 100% !important;
}

/* Cart close button: solid accent, follows the button radius (beats the theme
   button reset). */
.ticketshop-cart-root .ticketshop-cart__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0 !important;
	border-radius: var( --ticketshop-btn-radius, 10px ) !important;
	background: var( --ticketshop-accent, #ea580c ) !important;
	color: #fff !important;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ticketshop-cart-root .ticketshop-cart__close:hover,
.ticketshop-cart-root .ticketshop-cart__close:focus {
	background: var( --ticketshop-accent-dark, #c2410c ) !important;
	color: #fff !important;
}

/* Richer cart/summary line: larger header thumbnail, ticket-type description,
   accent price — so an order reads clearly for the buyer. */
.ticketshop-cart__item-media img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: 10px;
}

.ticketshop-summary__media img {
	/* Match the cart thumbnail exactly (size + radius) so both sections read the same. */
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: 10px;
}

.ticketshop-cart__item-copy {
	display: grid;
	gap: 3px;
}

.ticketshop-cart__item-desc,
.ticketshop-summary__desc {
	color: #6b7280;
	font-size: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ticketshop-cart__item-price {
	color: var( --ticketshop-accent-dark, #c2410c ) !important;
	font-weight: 700;
}

.ticketshop .ticketshop-checkout__lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 10px 0;
	padding-top: 10px;
	border-top: 1px solid var( --ticketshop-soft, rgba( 0, 0, 0, 0.08 ) );
}

.ticketshop .ticketshop-checkout__line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.9em;
	/* Use the plugin text colour (not --ticketshop-muted, which is a light surface
	   colour and made these lines near-invisible); slightly dimmed so it reads as a
	   secondary breakdown line while staying legible. */
	color: var( --ticketshop-text, #111827 );
	opacity: 0.8;
}

/* Spinner shown in the total field while the quote (incl. fees) is loading. */
.ticketshop-total-spinner {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
	border: 2px solid var( --ticketshop-soft, rgba( 17, 24, 39, 0.15 ) );
	border-top-color: var( --ticketshop-accent, #ea580c );
	border-radius: 50%;
	animation: ticketshop-spin 0.6s linear infinite;
}

@keyframes ticketshop-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* --------------------------------------------------------------------------
   Customer portal ([nexware_account]): sign-in form + dashboard
   -------------------------------------------------------------------------- */
.ticketshop-account {
	max-width: 640px;
	margin: 0 auto;
	color: var( --ticketshop-text, #111827 );
}

.ticketshop-account__loader {
	background: var( --ticketshop-surface, #fff );
	border-radius: var( --ticketshop-card-radius, 16px );
	padding: 1.75rem;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.08 );
}

.ticketshop-account__login,
.ticketshop-account__dashboard {
	background: var( --ticketshop-surface, #fff );
	border-radius: var( --ticketshop-card-radius, 16px );
	padding: 1.75rem;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.08 );
}

.ticketshop-account__title {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
}

.ticketshop-account__intro {
	margin: 0 0 1.25rem;
	color: rgba( 17, 24, 39, 0.65 );
}

.ticketshop-account__field {
	display: block;
	margin-bottom: 1rem;
}

.ticketshop-account__field > span {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.ticketshop-account__field input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba( 17, 24, 39, 0.18 );
	border-radius: var( --ticketshop-btn-radius, 10px );
	font-size: 1rem;
}

.ticketshop-account__field input:focus {
	outline: none;
	border-color: var( --ticketshop-accent, #ea580c );
	box-shadow: 0 0 0 3px rgba( 234, 88, 12, 0.15 );
}

.ticketshop-account__submit,
.ticketshop-account__signout {
	cursor: pointer;
	font-weight: 600;
	border: none;
	border-radius: var( --ticketshop-btn-radius, 10px );
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ticketshop-account__submit {
	width: 100%;
	padding: 0.8rem 1rem;
	font-size: 1rem;
	color: #fff;
	background: var( --ticketshop-accent, #ea580c );
}

.ticketshop-account__submit:hover {
	background: var( --ticketshop-accent-dark, #c2410c );
}

.ticketshop-account__submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.ticketshop-account__error {
	margin-bottom: 1rem;
	padding: 0.75rem 0.9rem;
	border-radius: var( --ticketshop-btn-radius, 10px );
	background: #fef2f2;
	color: #b91c1c;
	font-size: 0.92rem;
}

.ticketshop-account__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.ticketshop-account__signout {
	padding: 0.5rem 0.9rem;
	font-size: 0.88rem;
	color: var( --ticketshop-accent, #ea580c );
	background: var( --ticketshop-soft, #fff7ed );
}

.ticketshop-account__signout:hover {
	background: var( --ticketshop-muted, #f3f4f6 );
}

.ticketshop-account__tabs {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid rgba( 17, 24, 39, 0.1 );
}

.ticketshop-account__tab {
	cursor: pointer;
	border: none;
	background: none;
	padding: 0.6rem 0.9rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba( 17, 24, 39, 0.55 );
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.ticketshop-account__tab.is-active {
	color: var( --ticketshop-accent, #ea580c );
	border-bottom-color: var( --ticketshop-accent, #ea580c );
}

.ticketshop-account__profile {
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.ticketshop-account__profile > div {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 0.75rem;
}

.ticketshop-account__profile dt {
	margin: 0;
	font-weight: 600;
	color: rgba( 17, 24, 39, 0.6 );
}

.ticketshop-account__profile dd {
	margin: 0;
}

.ticketshop-account__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.ticketshop-account__row {
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-btn-radius, 10px );
	padding: 0.85rem 1rem;
}

.ticketshop-account__row-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}

.ticketshop-account__row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	color: rgba( 17, 24, 39, 0.65 );
	font-size: 0.9rem;
}

.ticketshop-account__row-meta code {
	font-size: 0.82rem;
	background: var( --ticketshop-muted, #f3f4f6 );
	padding: 0.1rem 0.4rem;
	border-radius: 6px;
}

.ticketshop-account__badge {
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: var( --ticketshop-badge-radius, 999px );
	background: var( --ticketshop-muted, #f3f4f6 );
	color: rgba( 17, 24, 39, 0.7 );
	white-space: nowrap;
}

.ticketshop-account__badge.is-paid,
.ticketshop-account__badge.is-valid {
	background: #dcfce7;
	color: #15803d;
}

.ticketshop-account__badge.is-pending {
	background: #fef9c3;
	color: #a16207;
}

.ticketshop-account__badge.is-failed,
.ticketshop-account__badge.is-expired,
.ticketshop-account__badge.is-cancelled,
.ticketshop-account__badge.is-void {
	background: #fee2e2;
	color: #b91c1c;
}

.ticketshop-account__empty,
.ticketshop-account__loading {
	margin: 0;
	padding: 1.25rem 0;
	text-align: center;
	color: rgba( 17, 24, 39, 0.55 );
}

/* --- Sponsor claim: the code field in the checkout, and the claim page ---- */

/* The code sits under the price breakdown, apart from the buyer's own details:
   it belongs to the order, not to the person filling the form in. */
.ticketshop .ticketshop-checkout__code {
	margin-top: 14px;
}

/* What the code takes off reads as a credit, not as another cost. */
.ticketshop .ticketshop-checkout__line--claim {
	color: var( --ticketshop-accent-dark, #c2410c );
	opacity: 1;
	font-weight: 600;
}

.ticketshop-claim {
	display: grid;
	gap: 18px;
	max-width: 520px;
}

.ticketshop-claim__form {
	display: grid;
	gap: 12px;
	padding: 22px;
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-card-radius, 20px );
	background: var( --ticketshop-surface, #ffffff );
}

.ticketshop-claim__form h3 {
	margin: 0;
}

.ticketshop-claim__form p {
	margin: 0;
	opacity: 0.75;
}

/* A code is read back character by character over the phone, so it is set in a
   monospaced face with room between the letters. */
.ticketshop-claim__form input[ name='claim_code' ] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Not a warning and not an error: a note about how the code behaves, in the
   shop's own colour so it reads as help rather than trouble. */
.ticketshop-claim__info {
	align-items: flex-start;
	/* Plain first, tinted second: a browser without color-mix keeps the box. */
	background: rgba( 127, 127, 127, 0.08 );
	background: color-mix( in srgb, var(--ticketshop-accent) 8%, transparent );
	border: 1px solid rgba( 127, 127, 127, 0.28 );
	border: 1px solid color-mix( in srgb, var(--ticketshop-accent) 35%, transparent );
	border-radius: 10px;
	display: flex;
	gap: 10px;
	margin: 4px 0 2px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.55;
}

.ticketshop-claim__info svg {
	color: var(--ticketshop-accent);
	flex: none;
	height: 18px;
	margin-top: 1px;
	width: 18px;
}

.ticketshop-claim__info strong {
	display: block;
	font-weight: 700;
	margin-bottom: 2px;
}

/* A refused code is the answer to what was just asked, so it is shown as a
   notice rather than a grey line under the field. */
.ticketshop-claim__notice {
	align-items: flex-start;
	background: rgba( 239, 68, 68, 0.08 );
	border: 1px solid rgba( 239, 68, 68, 0.4 );
	border-radius: 10px;
	display: flex;
	gap: 10px;
	margin: 12px 0 0;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
}

.ticketshop-claim__notice[ hidden ] {
	display: none;
}

.ticketshop-claim__notice svg {
	color: #ef4444;
	flex: none;
	height: 18px;
	margin-top: 1px;
	width: 18px;
}

/* Waiting is shown in the button that was pressed. */
.ticketshop-checkout__submit.is-loading {
	cursor: progress;
	opacity: 0.85;
	padding-left: 42px;
	position: relative;
}

.ticketshop-checkout__submit.is-loading::before {
	animation: ticketshop-spin 0.7s linear infinite;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 50%;
	border-top-color: #ffffff;
	content: '';
	height: 16px;
	left: 18px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	width: 16px;
}

@keyframes ticketshop-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ticketshop-checkout__submit.is-loading::before {
		animation-duration: 2.4s;
	}
}

/* Only a site administrator ever sees this line: what to fill in, and where. */
.ticketshop-claim__admin-hint {
	border: 1px dashed rgba( 245, 158, 11, 0.5 );
	background: rgba( 245, 158, 11, 0.08 );
	border-radius: 8px;
	font-size: 13px;
	margin-top: 10px;
	padding: 10px 12px;
}

.ticketshop-claim__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.65;
}

/* These three take a display of their own, which beats the [hidden] UA rule -
   the same trap the checkout's empty state ran into. Restore it explicitly. */
.ticketshop-claim__form[hidden],
.ticketshop-claim__checked[hidden],
.ticketshop-claim__result[hidden] {
	display: none;
}

/* Once a code is checked the form folds away into this bar: the code that is in
   play, and the way back to another one. */
.ticketshop-claim__checked {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-card-radius, 20px );
	background: var( --ticketshop-surface, #ffffff );
}

.ticketshop-claim__checked-label {
	font-size: 0.85em;
	opacity: 0.7;
}

.ticketshop-claim__checked-code {
	flex: 1 1 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.16em;
}

/* The way back to another code: the same rounding and height as the buttons
   around it, but quiet - it is a correction, not a second call to action. Turns
   red only when you are on it, so what it does is unmistakable. */
.ticketshop-claim__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba( 17, 24, 39, 0.12 );
	border-radius: var( --ticketshop-btn-radius, 999px );
	background: var( --ticketshop-surface, #ffffff );
	color: #6b7280;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ticketshop-claim__reset:hover,
.ticketshop-claim__reset:focus-visible {
	border-color: rgba( 185, 28, 28, 0.35 );
	background: #fef2f2;
	color: #b91c1c;
}

.ticketshop-claim__reset:active {
	transform: scale( 0.94 );
}

.ticketshop-claim__reset svg {
	width: 17px;
	height: 17px;
}

/* Every part a passe-partout opens, named. */
.ticketshop-claim__events {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: -8px 0 0;
	padding: 0;
	list-style: none;
}

.ticketshop-claim__events li {
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 17, 24, 39, 0.05 );
	font-size: 0.85em;
}

.ticketshop-claim__result {
	display: grid;
	gap: 18px;
	padding: 24px;
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-card-radius, 20px );
	background: var( --ticketshop-surface, #ffffff );
}

/* Logo beside the greeting rather than stacked above it, so the card opens with
   one line instead of three. */
.ticketshop-claim__head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	flex-wrap: wrap;
}

.ticketshop-claim__head-copy {
	flex: 1 1 240px;
	display: grid;
	gap: 4px;
}

.ticketshop-claim__result h3 {
	margin: 0;
	font-size: 1.35em;
}

.ticketshop-claim__company {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.7;
}

.ticketshop-claim__lead {
	margin: 6px 0 0;
	font-size: 0.95em;
	opacity: 0.85;
}

/* The number is the answer to "how many", so it gets to be the biggest thing on
   the card; what it buys stands next to it. */
.ticketshop-claim__entitlement {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var( --ticketshop-soft, #fff7ed );
}

.ticketshop-claim__count {
	font-size: 2.4em;
	font-weight: 700;
	line-height: 1;
	color: var( --ticketshop-accent-dark, #c2410c );
}

.ticketshop-claim__what {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ticketshop-claim__what strong {
	font-size: 1.05em;
}

.ticketshop-claim__what span {
	font-size: 0.9em;
	opacity: 0.75;
}

.ticketshop-claim__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 0;
}

.ticketshop-claim__facts div {
	display: grid;
	gap: 2px;
}

.ticketshop-claim__facts dt {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

.ticketshop-claim__facts dd {
	margin: 0;
	font-weight: 600;
}

.ticketshop-claim__steps {
	display: grid;
	gap: 8px;
	padding-top: 4px;
	border-top: 1px solid rgba( 17, 24, 39, 0.08 );
}

.ticketshop-claim__steps h4 {
	margin: 12px 0 0;
	font-size: 0.95em;
}

.ticketshop-claim__steps ol {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 6px;
	font-size: 0.95em;
	opacity: 0.85;
}

/* An anchor styled as the primary button: same block, same centring. */
.ticketshop-claim__continue {
	display: block;
	text-align: center;
	text-decoration: none;
}

/* Where that button leads, spelled out under it. */
.ticketshop-claim__destination {
	margin: -8px 0 0;
	text-align: center;
	font-size: 0.82em;
	opacity: 0.6;
	word-break: break-word;
}

.ticketshop-claim__note {
	margin: -6px 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

.ticketshop-claim__notice {
	margin: 0;
	font-size: 0.95em;
}

/* The sponsor's own logo on the claim page: their mark, not the shop's. */
.ticketshop-claim__logo {
	display: block;
	flex: 0 0 auto;
	max-width: 150px;
	max-height: 70px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 480px) {
	.ticketshop-claim__entitlement {
		gap: 12px;
	}

	.ticketshop-claim__count {
		font-size: 2em;
	}
}

/* What the sponsor's code covers, in the slide-in cart: a credit line above the
   total, so the decision to add a sixth ticket is made with the real price in
   view rather than two pages later. */
.ticketshop .ticketshop-cart__claim {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	font-size: 0.9em;
	font-weight: 600;
	color: var( --ticketshop-accent-dark, #c2410c );
}

/* The placeholder of the card that is coming, for a code that arrived in the
   link: the page opens on this instead of on a form that jumps away. Built in
   the shape of the real card so nothing visibly moves when the answer lands. */
.ticketshop-claim__loading {
	display: grid;
	gap: 18px;
}

.ticketshop-claim__loading-head,
.ticketshop-claim__loading-entitlement {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ticketshop-claim__loading-entitlement {
	padding: 16px 18px;
	border-radius: 14px;
	background: var( --ticketshop-soft, #fff7ed );
}

.ticketshop-claim__loading-copy {
	flex: 1 1 auto;
	display: grid;
	gap: 8px;
	min-width: 0;
}

.ticketshop-claim__loading-facts {
	display: flex;
	gap: 32px;
}

.ticketshop-claim__loading-facts .ticketshop-claim__bar {
	width: 120px;
}

.ticketshop-claim__loading-logo {
	flex: 0 0 auto;
	width: 96px;
	height: 48px;
	border-radius: 10px;
}

.ticketshop-claim__loading-count {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 10px;
}

/* Enough contrast to read as "loading" on a white card; the status page's
   skeleton is nearly invisible there. */
.ticketshop-claim__bar,
.ticketshop-claim__loading-logo,
.ticketshop-claim__loading-count {
	background: linear-gradient( 90deg, rgba( 17, 24, 39, 0.06 ), rgba( 17, 24, 39, 0.14 ), rgba( 17, 24, 39, 0.06 ) );
	background-size: 200% 100%;
	animation: ticketshop-shimmer 1.2s infinite linear;
}

.ticketshop-claim__bar {
	height: 12px;
	border-radius: 999px;
}

.ticketshop-claim__bar--title {
	height: 20px;
	width: 62%;
}

.ticketshop-claim__bar--short {
	width: 42%;
}

.ticketshop-claim__loading-note {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * Quick order page ([nexware_quick]) -- one screen at the gate.
 * Sized for a phone held in one hand in a queue: big taps, no columns.
 * ------------------------------------------------------------------ */

.nexware-quick {
	max-width: 34rem;
	margin: 0 auto;
}

/* The whole page is one card, like every other surface in the shop. */
/* Every ticket its own card, the details card under them. */
.nexware-quick__content.is-shop {
	display: grid;
	gap: 0.9rem;
}

.nexware-quick__card {
	overflow: hidden;
	border: 1px solid rgba( 17, 24, 39, 0.1 );
	border-radius: var( --ticketshop-card-radius, 20px );
	background: #fff;
	box-shadow: 0 16px 30px rgba( 17, 24, 39, 0.06 );
}

.nexware-quick__body {
	padding: 1.25rem 1.15rem 1.35rem;
}

/* The evening's photo with its name over it. A picture of any shape is shown
   whole over a blurred copy of itself, so the card keeps one rectangle no
   matter what was uploaded. */
.nexware-quick__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 11rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111827;
}

.nexware-quick__hero.is-plain {
	background: linear-gradient(
		135deg,
		var( --ticketshop-accent, #ea580c ),
		var( --ticketshop-accent-dark, #c2410c )
	);
}

.nexware-quick__hero-blur,
.nexware-quick__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	max-width: none;
}

.nexware-quick__hero-blur {
	object-fit: cover;
	transform: scale( 1.15 );
	filter: blur( 22px ) saturate( 140% );
}

.nexware-quick__hero-image {
	object-fit: contain;
}

/* Keeps the name readable over a bright sky as well as a dark stage. */
.nexware-quick__hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.88 ) 0%,
		rgba( 0, 0, 0, 0.45 ) 45%,
		rgba( 0, 0, 0, 0.05 ) 100%
	);
}

.nexware-quick__hero-body {
	position: relative;
	padding: 1.15rem 1.15rem 1.05rem;
	color: #fff;
}

.nexware-quick__hero-meta {
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.78 );
}

.nexware-quick__event {
	margin: 0;
	font-size: 1.55rem;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.45 );
}

/* The price, under the name of the ticket. */
.nexware-quick__offer {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	color: rgba( 255, 255, 255, 0.85 );
}

.nexware-quick__badge {
	display: inline-block;
	margin: 0.65rem 0 0;
	padding: 0.25rem 0.65rem;
	border-radius: var( --ticketshop-badge-radius, 999px );
	background: rgba( 255, 255, 255, 0.16 );
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	backdrop-filter: blur( 4px );
}

@media ( max-width: 480px ) {
	.nexware-quick__hero {
		aspect-ratio: 5 / 3;
		min-height: 9.5rem;
	}

	.nexware-quick__body {
		padding: 1.1rem 0.95rem 1.25rem;
	}

	.nexware-quick__event {
		font-size: 1.35rem;
	}
}

/* Sold out, but still on the door: the card stays so the sign matches what was
   put on it, greyed out so it reads as gone at a glance. */
.nexware-quick__card.is-sold-out .nexware-quick__hero-image,
.nexware-quick__card.is-sold-out .nexware-quick__hero-blur {
	filter: grayscale( 1 );
}

.nexware-quick__card.is-sold-out .nexware-quick__ticket-info strong {
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}

/* How many of this ticket. The card around it is the frame already, so this
   is only a line: what it says on the left, the counter on the right. */
.nexware-quick__choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.nexware-quick__ticket-info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.nexware-quick__ticket-info strong {
	font-size: 1rem;
}

.nexware-quick__ticket-info small {
	color: #6b7280;
	font-size: 0.8rem;
}

.nexware-quick__stepper {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
}

.nexware-quick__stepper button {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid #e5e7eb;
	border-radius: var( --ticketshop-btn-radius, 10px );
	background: var( --ticketshop-surface, #ffffff );
	color: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

/* The tap target answers in the shop's own colour, so + and - feel like the
   pay button they lead to rather than like two grey boxes. */
.nexware-quick__stepper button:hover:not( :disabled ),
.nexware-quick__stepper button:focus-visible:not( :disabled ) {
	border-color: var( --ticketshop-accent, #ea580c );
	background: var( --ticketshop-accent, #ea580c );
	color: #ffffff;
	outline: none;
}

.nexware-quick__stepper button:active:not( :disabled ) {
	background: var( --ticketshop-accent-dark, #c2410c );
	border-color: var( --ticketshop-accent-dark, #c2410c );
}

.nexware-quick__stepper button:disabled {
	opacity: 0.35;
	cursor: default;
}

.nexware-quick__stepper output {
	min-width: 2rem;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The details card is the frame here, so the form is only a stack of fields -
   it used to borrow the checkout's boxed section, which inside a card of its
   own drew a second box around the same thing. */
.nexware-quick__form {
	display: grid;
	gap: 14px;
	align-content: start;
}

.nexware-quick__form h3 {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.nexware-quick__form h4 {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}

/* First and last name share a line; on a narrow phone they stack. */
.nexware-quick__names {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 0.6rem;
}

@media ( max-width: 380px ) {
	.nexware-quick__names {
		grid-template-columns: 1fr;
	}
}

.nexware-quick__address {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 0.6rem;
}

.nexware-quick__holders {
	margin-top: 1rem;
}

/* One ticket's name: which ticket it is, then the two halves side by side. */
.nexware-quick__holder-title {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	opacity: 0.75;
}

.nexware-quick__footer {
	margin-top: 1.25rem;
}

.nexware-quick__lines {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	display: grid;
	gap: 0.25rem;
	font-size: 0.85rem;
	color: #6b7280;
}

.nexware-quick__lines li {
	display: flex;
	justify-content: space-between;
}

/* While the new price is being worked out: two grey bars where the amounts
   were, so the old total cannot be mistaken for the new one. */
.nexware-quick__lines.is-loading li {
	align-items: center;
	gap: 0.75rem;
}

.nexware-quick__lines.is-loading span {
	display: block;
	height: 0.65rem;
	border-radius: 999px;
}

.nexware-quick__lines.is-loading span:first-child {
	width: 7rem;
}

.nexware-quick__lines.is-loading span:last-child {
	width: 3.5rem;
	margin-left: auto;
}

.nexware-quick__total.is-loading {
	align-items: center;
	gap: 0.75rem;
	min-height: 1.9rem;
}

.nexware-quick__total.is-loading span {
	display: block;
	height: 0.85rem;
	border-radius: 999px;
}

.nexware-quick__total.is-loading span:first-child {
	width: 5rem;
}

.nexware-quick__total.is-loading span:last-child {
	width: 4.5rem;
	margin-left: auto;
}

.nexware-quick__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-size: 1.15rem;
}

.nexware-quick__total strong {
	font-size: 1.4rem;
}

.nexware-quick__notice {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.9rem;
	border-radius: var( --ticketshop-card-radius, 16px );
	background: var( --ticketshop-muted, #f3f4f6 );
	font-size: 0.9rem;
}

.nexware-quick__notice.is-error {
	background: #fef2f2;
	color: #991b1b;
}

.nexware-quick__done {
	padding: 1.6rem 1.25rem 1.4rem;
	text-align: center;
}

.nexware-quick__done h2 {
	margin: 0 0 0.35rem;
	font-size: 1.3rem;
}

.nexware-quick__done p {
	margin: 0 auto 1.25rem;
	max-width: 26rem;
	color: #6b7280;
}

.nexware-quick__ticket-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	margin-bottom: 1rem;
	padding: 1.25rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: var( --ticketshop-card-radius, 16px );
	background: var( --ticketshop-surface, #ffffff );
}

.nexware-quick__ticket-count {
	margin-bottom: 0.5rem;
	color: #6b7280;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* White plate under the code: a scanner needs the quiet zone, whatever
   theme the site around it uses. */
.nexware-quick__qr {
	display: block;
	width: min( 15rem, 70vw );
	height: auto;
	margin-bottom: 0.75rem;
	padding: 0.75rem;
	border-radius: 12px;
	background: #ffffff;
}

.nexware-quick__ticket-card small {
	color: #6b7280;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.nexware-quick__order-number {
	color: #6b7280;
	font-size: 0.85rem;
}

.nexware-quick__again {
	margin-top: 0.5rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid #e5e7eb;
	border-radius: var( --ticketshop-btn-radius, 10px );
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* The address confirmation sits under its row, not floating between fields. */
.nexware-quick__form .ticketshop-address-found {
	margin: 0.15rem 0 0;
}

/* The suggestion list hangs off the search field, so that one needs to be the
   positioning context -- and to sit above the fields it fills in. */
.nexware-quick__form .ticketshop-field--address-search {
	position: relative;
	z-index: 2;
}

@media ( max-width: 480px ) {
	.nexware-quick__address {
		grid-template-columns: 1fr 1fr;
	}

	.nexware-quick__address label:first-child {
		grid-column: 1 / -1;
	}
}