/**
 * ICCHK Events — front-end styles.
 *
 * Built on a small set of design tokens rather than hard-coded values, so the
 * whole suite can be re-skinned from one place and every Elementor style
 * control has something meaningful to write into. Selectors stay at a single
 * class of specificity: a theme should be able to override any of this without
 * an arms race, which is why there is not an `!important` in the file.
 *
 * Three things carry most of the visual weight:
 *
 *   Elevation — surfaces are separated by layered shadows rather than borders.
 *   A single large blur reads as a smudge; a tight contact shadow under a wider,
 *   softer one reads as an object sitting above the page.
 *
 *   Motion — one easing curve, used everywhere. It starts fast and settles
 *   slowly, so things feel like they have weight instead of animating linearly.
 *
 *   Restraint — one accent colour, three text weights, a fixed spacing scale.
 *   Everything else is greyscale and geometry.
 */

/* ------------------------------------------------------------------ Tokens */

.icchk-ev {
	/* Brand. Every other accent value is mixed from this one. */
	--icchk-ev-accent: #1872f2;
	--icchk-ev-on-accent: #ffffff;

	/* Ink. Three levels is enough to build a hierarchy; more just muddles it. */
	--icchk-ev-text: #14181f;
	--icchk-ev-muted: #5b6472;
	--icchk-ev-faint: #8b95a3;

	/* Surfaces, from the page backwards. */
	--icchk-ev-surface: #ffffff;
	--icchk-ev-surface-sunken: #f7f8fa;
	--icchk-ev-surface-hover: #fbfcfd;

	/* Hairlines. The second is for dividers inside an already-bordered box. */
	--icchk-ev-border: #e3e7ec;
	--icchk-ev-border-soft: #eef1f4;

	/* Semantic. */
	--icchk-ev-positive: #0f9d63;
	--icchk-ev-warning: #c2700a;
	--icchk-ev-danger: #dc2b3d;

	/* Geometry. Radii step up with the size of the thing being rounded. */
	--icchk-ev-radius: 14px;
	--icchk-ev-radius-sm: 9px;
	--icchk-ev-radius-xs: 6px;
	--icchk-ev-radius-pill: 999px;
	--icchk-ev-gap: 24px;

	/*
	 * Elevation. Each level pairs a tight contact shadow with a wider ambient
	 * one — the same way a real object casts light — so cards read as lifted
	 * rather than blurred.
	 */
	--icchk-ev-shadow-1:
		0 1px 2px rgba(16, 24, 40, 0.05),
		0 1px 3px rgba(16, 24, 40, 0.04);
	--icchk-ev-shadow-2:
		0 1px 2px rgba(16, 24, 40, 0.06),
		0 6px 16px -4px rgba(16, 24, 40, 0.09);
	--icchk-ev-shadow-3:
		0 2px 4px rgba(16, 24, 40, 0.06),
		0 16px 32px -8px rgba(16, 24, 40, 0.16);

	/*
	 * Motion. A single curve, fast out of the gate and slow to settle, is what
	 * makes interface movement feel physical instead of mechanical.
	 */
	--icchk-ev-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--icchk-ev-fast: 140ms;
	--icchk-ev-slow: 320ms;

	/* Focus. One ring, used on everything focusable. */
	--icchk-ev-ring: 0 0 0 3px color-mix(in srgb, var(--icchk-ev-accent) 32%, transparent);

	color: var(--icchk-ev-text);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/*
 * Make `hidden` mean hidden.
 *
 * The browser's own rule is `[hidden] { display: none }` at a single element's
 * worth of weight, so *any* display declaration beats it — and nearly every
 * component here sets one. The result is markup that says hidden, JavaScript
 * that sets .hidden = true, and an element that stays on screen regardless.
 * Two classes of weight settles it for everything inside the suite.
 */
.icchk-ev [hidden],
.icchk-ev[hidden],
/*
 * The buttons name their element type to out-rank the theme, which puts them
 * above a plain `[hidden]`. Matching on the class attribute as well lifts this
 * rule over them without another round of the same escalation.
 */
.icchk-ev [hidden][class],
.icchk-ev[hidden][class] {
	display: none;
}

/*
 * Themes routinely underline every link inside post content — Astra's
 * `.ast-single-post .entry-content a` is the one on this site. That is right
 * for prose and wrong for a card title, a tab or a date row, which are
 * structure rather than running text. Those opt out here, at just enough
 * specificity to win, and links inside an event's own description are left
 * alone so writing still reads like writing.
 */
.icchk-ev .icchk-ev-card__title a,
.icchk-ev .icchk-ev-single__title a,
.icchk-ev .icchk-ev-agenda__title a,
.icchk-ev .icchk-ev-dates__item a,
.icchk-ev .icchk-ev-links a,
.icchk-ev .icchk-ev-table a,
/*
 * The anchor's own type is named here on purpose. Astra's rule carries two
 * classes and an element, so two classes alone would lose the tie-break.
 */
.icchk-ev a.icchk-ev-single__link,
.icchk-ev a.icchk-ev-card__media,
.icchk-ev a.icchk-ev-calendar__event,
.icchk-ev a.icchk-ev-nav__link,
.icchk-ev a.icchk-ev-button,
.icchk-ev a.icchk-ev-pill,
.icchk-ev a.icchk-ev-tabs__label,
.icchk-ev .icchk-ev-button,
.icchk-ev .icchk-ev-pill,
.icchk-ev .icchk-ev-tabs__label {
	text-decoration: none;
}

/*
 * Themes give paragraphs and headings a bottom margin, which is correct for
 * prose and wrong inside a component that spaces its own children with flex
 * gaps: the two compound, and a tidy 7px gap becomes a 29px hole. Every
 * container below lays its children out itself, so their margins go. An event's
 * description is deliberately absent from this list — that really is prose, and
 * it should keep the rhythm the theme gives it.
 */
.icchk-ev .icchk-ev-card__body > *,
.icchk-ev .icchk-ev-card__foot > *,
.icchk-ev .icchk-ev-ticket-row__main > *,
.icchk-ev .icchk-ev-ticket-card__body > *,
.icchk-ev .icchk-ev-agenda__body > *,
.icchk-ev .icchk-ev-week__day > *,
.icchk-ev .icchk-ev-calendar__head > *,
.icchk-ev .icchk-ev-form > *,
.icchk-ev .icchk-ev-field > *,
.icchk-ev .icchk-ev-guest > *,
.icchk-ev .icchk-ev-summary > *,
.icchk-ev .icchk-ev-meta-list > *,
.icchk-ev .icchk-ev-person > *,
.icchk-ev .icchk-ev-nav__link > *,
.icchk-ev .icchk-ev-single > *,
.icchk-ev .icchk-ev-single__value,
.icchk-ev .icchk-ev-stat-line {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * One exception. The card footer carries the price and the button, and it earns
 * its place on a common line across a row by taking up whatever vertical space
 * its card has spare -- which is exactly what an auto top margin does. The reset
 * above out-ranks the card rule that sets it, so restore it at equal weight.
 */
.icchk-ev .icchk-ev-card__foot {
	margin-top: auto;
}

/*
 * The theme's own focus styles are usually a browser default outline. Replace
 * it once, here, so every control in the suite is consistent.
 */
.icchk-ev :focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--icchk-ev-ring);
	border-radius: var(--icchk-ev-radius-xs);
}

/*
 * Dark mode re-maps the tokens and nothing else. Shadows get deeper and lose
 * their colour cast, because on a dark surface a grey shadow looks like fog.
 *
 * Deliberately *not* driven by prefers-color-scheme on its own. This suite
 * lives inside somebody else's theme, and that theme paints the page behind it.
 * A light theme viewed on a machine set to dark would end up with dark cards
 * floating on a white page, which is worse than no dark mode at all. So the
 * page has to say it has gone dark — either through one of the class names
 * themes conventionally use, or by declaring a dark color-scheme.
 */
.icchk-ev--dark,
[data-theme="dark"] .icchk-ev,
[data-color-scheme="dark"] .icchk-ev,
.dark .icchk-ev,
.dark-mode .icchk-ev,
.is-dark-theme .icchk-ev,
html[style*="color-scheme:dark"] .icchk-ev,
html[style*="color-scheme: dark"] .icchk-ev {
	--icchk-ev-text: #eef1f5;
	--icchk-ev-muted: #a2acb9;
	--icchk-ev-faint: #79838f;
	--icchk-ev-surface: #171a1f;
	--icchk-ev-surface-sunken: #12151a;
	--icchk-ev-surface-hover: #1d2127;
	--icchk-ev-border: #2b3038;
	--icchk-ev-border-soft: #22262d;
	--icchk-ev-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--icchk-ev-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
	--icchk-ev-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px -8px rgba(0, 0, 0, 0.6);
}

.icchk-ev--dark .icchk-ev-field select,
[data-theme="dark"] .icchk-ev .icchk-ev-field select,
.dark .icchk-ev .icchk-ev-field select,
.dark-mode .icchk-ev .icchk-ev-field select,
.is-dark-theme .icchk-ev .icchk-ev-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' stroke='%23a2acb9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A theme that declares itself dark-capable gets to follow the system too. */
@media (prefers-color-scheme: dark) {
	:root[data-supports-dark] .icchk-ev {
		--icchk-ev-text: #eef1f5;
		--icchk-ev-muted: #a2acb9;
		--icchk-ev-faint: #79838f;
		--icchk-ev-surface: #171a1f;
		--icchk-ev-surface-sunken: #12151a;
		--icchk-ev-surface-hover: #1d2127;
		--icchk-ev-border: #2b3038;
		--icchk-ev-border-soft: #22262d;
		--icchk-ev-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
		--icchk-ev-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
		--icchk-ev-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px -8px rgba(0, 0, 0, 0.6);
	}
}

/* ---------------------------------------------------------------- Layouts */

.icchk-ev-grid {
	display: grid;
	grid-template-columns: repeat(var(--icchk-ev-columns, 3), minmax(0, 1fr));
	gap: var(--icchk-ev-gap);
}

.icchk-ev-list {
	display: flex;
	flex-direction: column;
	gap: var(--icchk-ev-gap);
}

@media (max-width: 1024px) {
	.icchk-ev-grid {
		grid-template-columns: repeat(var(--icchk-ev-columns-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.icchk-ev-grid {
		grid-template-columns: repeat(var(--icchk-ev-columns-mobile, 1), minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ Cards */

.icchk-ev-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--icchk-ev-surface);
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	box-shadow: var(--icchk-ev-shadow-1);
	transition:
		box-shadow var(--icchk-ev-slow) var(--icchk-ev-ease),
		transform var(--icchk-ev-slow) var(--icchk-ev-ease),
		border-color var(--icchk-ev-slow) var(--icchk-ev-ease);
	/* Promote once, up front, so the first hover is not the frame that stutters. */
	will-change: transform;
}

.icchk-ev-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--icchk-ev-shadow-3);
}

.icchk-ev-card:focus-within {
	border-color: transparent;
	box-shadow: var(--icchk-ev-shadow-2), var(--icchk-ev-ring);
}

.icchk-ev-card.is-cancelled {
	opacity: 0.66;
}

.icchk-ev-card.is-cancelled:hover {
	transform: none;
}

.icchk-ev-card.is-cancelled .icchk-ev-card__title {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.icchk-ev-card--row {
	flex-direction: row;
}

.icchk-ev-card--row .icchk-ev-card__media {
	flex: 0 0 34%;
	max-width: 300px;
	aspect-ratio: auto;
}

@media (max-width: 600px) {
	.icchk-ev-card--row {
		flex-direction: column;
	}

	.icchk-ev-card--row .icchk-ev-card__media {
		flex-basis: auto;
		max-width: none;
		aspect-ratio: var(--icchk-ev-ratio, 16 / 9);
	}
}

.icchk-ev-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--icchk-ev-ratio, 16 / 9);
	background: var(--icchk-ev-surface-sunken);
}

.icchk-ev-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 620ms var(--icchk-ev-ease);
}

.icchk-ev-card:hover .icchk-ev-card__media img {
	transform: scale(1.05);
}

/*
 * A scrim under the date stamp. Without it the stamp can land on a bright patch
 * of photograph and lose its edge entirely.
 */
.icchk-ev-card__media::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 45%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24), transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--icchk-ev-slow) var(--icchk-ev-ease);
}

.icchk-ev-card__media:has(img)::after {
	opacity: 1;
}

.icchk-ev-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--icchk-ev-accent) 26%, transparent), transparent 60%),
		linear-gradient(135deg, color-mix(in srgb, var(--icchk-ev-accent) 16%, transparent), color-mix(in srgb, var(--icchk-ev-accent) 4%, transparent));
}

.icchk-ev-card__stamp {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	padding: 7px 9px 6px;
	background: color-mix(in srgb, var(--icchk-ev-surface) 82%, transparent);
	/* Glass, where the browser can do it; a solid panel everywhere else. */
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-radius: var(--icchk-ev-radius-sm);
	box-shadow: var(--icchk-ev-shadow-2);
	line-height: 1.05;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.icchk-ev-card__stamp {
		background: var(--icchk-ev-surface);
	}
}

.icchk-ev-card__stamp-day {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--icchk-ev-accent);
}

.icchk-ev-card__stamp-month {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--icchk-ev-muted);
}

.icchk-ev-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px 22px;
}

.icchk-ev-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 650;
	line-height: 1.32;
	letter-spacing: -0.011em;
	text-wrap: balance;
}

.icchk-ev-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--icchk-ev-accent), var(--icchk-ev-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition:
		background-size var(--icchk-ev-slow) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-card__title a:hover {
	color: var(--icchk-ev-accent);
	background-size: 100% 1px;
}

.icchk-ev-card__when,
.icchk-ev-card__where {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--icchk-ev-muted);
}

.icchk-ev-card__when {
	font-weight: 600;
	color: var(--icchk-ev-accent);
	letter-spacing: -0.005em;
}

.icchk-ev-card__where {
	display: flex;
	align-items: center;
	gap: 5px;
}

.icchk-ev-card__excerpt {
	font-size: 14px;
	line-height: 1.62;
	color: var(--icchk-ev-muted);
}

.icchk-ev-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.icchk-ev-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

.icchk-ev-card__price {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ Small parts */

.icchk-ev-pill {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--icchk-ev-radius-pill);
	background: color-mix(in srgb, var(--icchk-ev-accent) 11%, transparent);
	color: color-mix(in srgb, var(--icchk-ev-accent) 88%, var(--icchk-ev-text));
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.icchk-ev-badge {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: var(--icchk-ev-radius-pill);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.icchk-ev-badge--cancelled {
	background: color-mix(in srgb, var(--icchk-ev-danger) 13%, transparent);
	color: color-mix(in srgb, var(--icchk-ev-danger) 82%, var(--icchk-ev-text));
}

.icchk-ev-badge--postponed,
.icchk-ev-badge--rescheduled {
	background: color-mix(in srgb, var(--icchk-ev-warning) 15%, transparent);
	color: color-mix(in srgb, var(--icchk-ev-warning) 82%, var(--icchk-ev-text));
}

.icchk-ev-badge--completed {
	background: color-mix(in srgb, var(--icchk-ev-muted) 14%, transparent);
	color: var(--icchk-ev-muted);
}

/* ---------------------------------------------------------------- Buttons */

/*
 * Both Astra and Elementor style every `button` on the page — Elementor's kit
 * rule is `.elementor-kit-5 button`, which carries a class and an element and
 * so outranks a lone class of ours. Naming the element type alongside our class
 * matches that weight and wins on source order, which keeps the whole file free
 * of `!important` while still surviving inside an opinionated theme.
 */
.icchk-ev-button,
.icchk-ev button.icchk-ev-button,
.icchk-ev input.icchk-ev-button,
.icchk-ev a.icchk-ev-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-accent);
	color: var(--icchk-ev-on-accent);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow:
		var(--icchk-ev-shadow-1),
		/* A hairline of light along the top edge, so the fill reads as a surface. */
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
	transition:
		background-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease),
		transform var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev .icchk-ev-button:hover:not(:disabled):not(.is-busy),
.icchk-ev button.icchk-ev-button:hover:not(:disabled):not(.is-busy),
.icchk-ev a.icchk-ev-button:hover:not(:disabled):not(.is-busy) {
	background: color-mix(in srgb, var(--icchk-ev-accent) 88%, #000);
	color: var(--icchk-ev-on-accent);
	box-shadow: var(--icchk-ev-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* A small, quick press. Enough to feel the click without it looking like a toy. */
.icchk-ev .icchk-ev-button:active:not(:disabled):not(.is-busy) {
	transform: scale(0.978);
	box-shadow: var(--icchk-ev-shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.icchk-ev .icchk-ev-button:disabled,
.icchk-ev .icchk-ev-button.is-busy {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.icchk-ev .icchk-ev-button.is-busy {
	cursor: progress;
}

.icchk-ev .icchk-ev-button--small,
.icchk-ev button.icchk-ev-button--small,
.icchk-ev a.icchk-ev-button--small {
	min-height: 34px;
	padding: 8px 15px;
	font-size: 13px;
}

.icchk-ev .icchk-ev-button--ghost,
.icchk-ev button.icchk-ev-button--ghost,
.icchk-ev a.icchk-ev-button--ghost {
	background: transparent;
	color: var(--icchk-ev-accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icchk-ev-accent) 32%, transparent);
}

.icchk-ev .icchk-ev-button--ghost:hover:not(:disabled):not(.is-busy),
.icchk-ev button.icchk-ev-button--ghost:hover:not(:disabled):not(.is-busy),
.icchk-ev a.icchk-ev-button--ghost:hover:not(:disabled):not(.is-busy) {
	background: color-mix(in srgb, var(--icchk-ev-accent) 8%, transparent);
	color: var(--icchk-ev-accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icchk-ev-accent) 55%, transparent);
}

/* --------------------------------------------------------- Empty & notices */

.icchk-ev-empty {
	margin: 0;
	padding: 40px 24px;
	border: 1px dashed var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
	text-align: center;
	font-size: 14.5px;
	color: var(--icchk-ev-muted);
	text-wrap: balance;
}

.icchk-ev-empty.is-editor {
	background: color-mix(in srgb, var(--icchk-ev-warning) 8%, transparent);
	border-color: color-mix(in srgb, var(--icchk-ev-warning) 34%, transparent);
	color: color-mix(in srgb, var(--icchk-ev-warning) 80%, var(--icchk-ev-text));
}

.icchk-ev .icchk-ev-notice {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-radius: var(--icchk-ev-radius-sm);
	background: color-mix(in srgb, var(--icchk-ev-accent) 8%, transparent);
	box-shadow: inset 3px 0 0 var(--icchk-ev-accent);
	font-size: 14px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--icchk-ev-accent) 72%, var(--icchk-ev-text));
}

.icchk-ev-notice--success {
	--icchk-ev-accent: var(--icchk-ev-positive);
}

.icchk-ev-notice--warning {
	--icchk-ev-accent: var(--icchk-ev-warning);
}

.icchk-ev-notice--error {
	--icchk-ev-accent: var(--icchk-ev-danger);
}

.icchk-ev-js-notice {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-radius: var(--icchk-ev-radius-sm);
	background: color-mix(in srgb, var(--icchk-ev-warning) 10%, transparent);
	font-size: 14px;
	color: color-mix(in srgb, var(--icchk-ev-warning) 80%, var(--icchk-ev-text));
}

/* --------------------------------------------------------------- Calendar */

/*
 * A month grid is seven columns whatever you do to it, so its usable size is
 * set by the width it is given -- not by the width of the window. Dropped into
 * a narrow Elementor column on a wide screen, a viewport breakpoint would keep
 * the desktop sizing and squash seven 40px columns against 108px-tall cells.
 *
 * Declaring a container lets the calendar answer to its own width instead.
 * Browsers without container queries simply keep the base sizing, which is what
 * they render today, so nothing regresses.
 */
.icchk-ev-calendar {
	container-type: inline-size;
	container-name: icchk-ev-calendar;
}

.icchk-ev-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.icchk-ev-calendar__title {
	margin: 0;
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.icchk-ev-calendar__nav {
	display: flex;
	gap: 6px;
}

.icchk-ev .icchk-ev-calendar__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	color: var(--icchk-ev-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev .icchk-ev-calendar__nav button:hover {
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 40%, transparent);
	background: color-mix(in srgb, var(--icchk-ev-accent) 7%, transparent);
	color: var(--icchk-ev-accent);
}

.icchk-ev .icchk-ev-calendar__nav button:active {
	transform: scale(0.94);
}

.icchk-ev-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	overflow: hidden;
	box-shadow: var(--icchk-ev-shadow-1);
}

/*
 * The weekday letters are abbr elements so a screen reader announces "Monday"
 * rather than "M". Browsers mark those up with a dotted underline, which reads
 * as damage across a row of seven.
 */
.icchk-ev .icchk-ev-calendar__weekday abbr,
.icchk-ev .icchk-ev-week__heading abbr {
	text-decoration: none;
	border-bottom: 0;
	cursor: inherit;
}

.icchk-ev-calendar__weekday {
	padding: 11px 6px;
	background: var(--icchk-ev-surface-sunken);
	border-bottom: 1px solid var(--icchk-ev-border);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-align: center;
	color: var(--icchk-ev-faint);
}

.icchk-ev-calendar__day {
	position: relative;
	/*
	 * Grows and shrinks with the calendar. 1cqi is one percent of the container
	 * width, so a cell keeps roughly its proportions from a sidebar up to a
	 * full-width page, with hard limits at both ends.
	 */
	min-height: clamp(58px, 13cqi, 108px);
	padding: clamp(4px, 1cqi, 7px);
	border-right: 1px solid var(--icchk-ev-border-soft);
	border-bottom: 1px solid var(--icchk-ev-border-soft);
	background: var(--icchk-ev-surface);
	transition: background-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-calendar__day:hover {
	background: var(--icchk-ev-surface-hover);
}

.icchk-ev-calendar__day:nth-child(7n + 7) {
	border-right: 0;
}

.icchk-ev-calendar__day.is-outside {
	background: var(--icchk-ev-surface-sunken);
	color: var(--icchk-ev-faint);
}

.icchk-ev-calendar__day.is-today .icchk-ev-calendar__daynum {
	background: var(--icchk-ev-accent);
	color: var(--icchk-ev-on-accent);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-calendar__daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	border-radius: var(--icchk-ev-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

.icchk-ev-calendar__event {
	display: block;
	margin-top: 3px;
	padding: 3px 7px;
	border-radius: var(--icchk-ev-radius-xs);
	background: color-mix(in srgb, var(--icchk-ev-event-color, var(--icchk-ev-accent)) 12%, transparent);
	box-shadow: inset 2px 0 0 var(--icchk-ev-event-color, var(--icchk-ev-accent));
	color: inherit;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-calendar__event:hover {
	background: color-mix(in srgb, var(--icchk-ev-event-color, var(--icchk-ev-accent)) 22%, transparent);
}

.icchk-ev-calendar__more {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 500;
	color: var(--icchk-ev-faint);
}

/*
 * Narrow-ish: the grid still reads as a month, but a full event title no longer
 * fits in a cell, so the type comes down and the padding tightens.
 */
@container icchk-ev-calendar (max-width: 620px) {
	.icchk-ev-calendar__day {
		font-size: 12px;
	}

	.icchk-ev-calendar__daynum {
		min-width: 21px;
		height: 21px;
		font-size: 11px;
	}

	.icchk-ev-calendar__event {
		font-size: 10.5px;
		padding: 2px 5px;
	}

	.icchk-ev-calendar__weekday {
		padding: 8px 2px;
		font-size: 9.5px;
		letter-spacing: 0.04em;
	}
}

/*
 * Genuinely narrow -- a sidebar, or a phone. No title of any size is readable
 * in a cell this wide, so each event becomes a dot: presence, not detail.
 */
@container icchk-ev-calendar (max-width: 420px) {
	.icchk-ev-calendar__event {
		font-size: 0;
		height: 6px;
		padding: 0;
		margin-top: 3px;
		border-radius: var(--icchk-ev-radius-pill);
		box-shadow: none;
		background: var(--icchk-ev-event-color, var(--icchk-ev-accent));
	}

	.icchk-ev-calendar__more {
		font-size: 10px;
	}
}

/*
 * The same two steps by viewport, for browsers with no container queries. They
 * agree with the rules above, so where both apply nothing changes.
 */
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.icchk-ev-calendar__day {
			min-height: 62px;
			font-size: 12px;
		}

		.icchk-ev-calendar__event {
			font-size: 0;
			height: 6px;
			padding: 0;
			margin-top: 3px;
			border-radius: var(--icchk-ev-radius-pill);
			box-shadow: none;
			background: var(--icchk-ev-event-color, var(--icchk-ev-accent));
		}
	}
}

/* ------------------------------------------------------------------ Forms */

.icchk-ev-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px;
	background: var(--icchk-ev-surface);
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.icchk-ev-field > label,
.icchk-ev-field__legend {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.003em;
	color: var(--icchk-ev-text);
}

.icchk-ev-field__legend {
	display: block;
	margin-bottom: 6px;
}

/*
 * Same weighting problem as the buttons: themes style bare `input` and
 * `select`, so the field selectors name the element type to match them.
 */
.icchk-ev .icchk-ev-field input[type="text"],
.icchk-ev .icchk-ev-field input[type="email"],
.icchk-ev .icchk-ev-field input[type="tel"],
.icchk-ev .icchk-ev-field input[type="number"],
.icchk-ev .icchk-ev-field input[type="date"],
.icchk-ev .icchk-ev-field input[type="datetime-local"],
.icchk-ev .icchk-ev-field input[type="time"],
.icchk-ev .icchk-ev-field input[type="url"],
.icchk-ev .icchk-ev-field input[type="search"],
.icchk-ev .icchk-ev-field select,
.icchk-ev .icchk-ev-field textarea {
	width: 100%;
	min-height: 42px;
	padding: 10px 13px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	font: inherit;
	font-size: 15px;
	color: var(--icchk-ev-text);
	/* A whisper of inset, so a field reads as a well rather than a flat box. */
	box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease);
	appearance: none;
}

.icchk-ev .icchk-ev-field textarea {
	min-height: 96px;
	line-height: 1.6;
	resize: vertical;
}

/*
 * A drawn chevron rather than the platform arrow, so a select matches the rest
 * of the controls. Two CSS gradients make a solid triangle; a stroked SVG makes
 * the thin chevron this design actually wants.
 */
.icchk-ev .icchk-ev-field select {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' stroke='%235b6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 13px center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
}

.icchk-ev .icchk-ev-field input::placeholder,
.icchk-ev .icchk-ev-field textarea::placeholder {
	color: var(--icchk-ev-faint);
}

.icchk-ev .icchk-ev-field input:hover,
.icchk-ev .icchk-ev-field select:hover,
.icchk-ev .icchk-ev-field textarea:hover {
	border-color: color-mix(in srgb, var(--icchk-ev-text) 22%, var(--icchk-ev-border));
}

.icchk-ev .icchk-ev-field input:focus,
.icchk-ev .icchk-ev-field select:focus,
.icchk-ev .icchk-ev-field textarea:focus {
	outline: none;
	border-color: var(--icchk-ev-accent);
	box-shadow: var(--icchk-ev-ring);
}

.icchk-ev-field.has-error input,
.icchk-ev-field.has-error select,
.icchk-ev-field.has-error textarea,
.icchk-ev-field input[aria-invalid="true"],
.icchk-ev-field select[aria-invalid="true"],
.icchk-ev-field textarea[aria-invalid="true"] {
	border-color: var(--icchk-ev-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--icchk-ev-danger) 16%, transparent);
}

.icchk-ev-field--inline {
	flex-direction: row;
	align-items: center;
	gap: 9px;
}

.icchk-ev-field--inline input[type="checkbox"],
.icchk-ev-field--inline input[type="radio"] {
	width: 17px;
	height: 17px;
	accent-color: var(--icchk-ev-accent);
	flex: 0 0 auto;
}

.icchk-ev-field__hint {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--icchk-ev-muted);
}

/*
 * A group of tick boxes -- roles, mostly. Wide enough to read, packed enough
 * that a dozen of them do not become a scroll.
 */
.icchk-ev-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 6px 16px;
}

.icchk-ev .icchk-ev-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

.icchk-ev .icchk-ev-check input {
	flex: none;
	margin: 0;
}

.icchk-ev-field__error {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--icchk-ev-danger);
}

.icchk-ev-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

/* Response choice */

.icchk-ev-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.icchk-ev-choice {
	flex: 1 1 auto;
	position: relative;
}

.icchk-ev-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.icchk-ev .icchk-ev-choice span {
	display: block;
	padding: 11px 14px;
	min-height: 42px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	text-align: center;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		background-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease),
		transform var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-choice span:hover {
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 40%, transparent);
}

.icchk-ev-choice span:active {
	transform: scale(0.98);
}

.icchk-ev-choice input:checked + span {
	border-color: var(--icchk-ev-accent);
	background: color-mix(in srgb, var(--icchk-ev-accent) 9%, transparent);
	color: var(--icchk-ev-accent);
	box-shadow: inset 0 0 0 1px var(--icchk-ev-accent);
}

.icchk-ev-choice input:focus-visible + span {
	box-shadow: var(--icchk-ev-ring);
}

/* Guests */

.icchk-ev-guests {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.icchk-ev-guest {
	padding: 16px;
	border: 1px dashed var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface-sunken);
	transition: border-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-guest:focus-within {
	border-style: solid;
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 40%, transparent);
}

.icchk-ev-guest__label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--icchk-ev-faint);
}

/* Capacity meter */

.icchk-ev-meter {
	height: 7px;
	border-radius: var(--icchk-ev-radius-pill);
	background: color-mix(in srgb, var(--icchk-ev-text) 9%, transparent);
	overflow: hidden;
}

.icchk-ev-meter__fill {
	height: 100%;
	border-radius: var(--icchk-ev-radius-pill);
	background: var(--icchk-ev-accent);
	transition: width 620ms var(--icchk-ev-ease), background-color var(--icchk-ev-slow) var(--icchk-ev-ease);
}

.icchk-ev-meter__fill.is-full {
	background: var(--icchk-ev-danger);
}

.icchk-ev .icchk-ev-stat-line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--icchk-ev-muted);
}

/* --------------------------------------------------------------- Tickets */

.icchk-ev-ticket-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 17px 18px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-ticket-row:hover {
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 30%, transparent);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-ticket-row + .icchk-ev-ticket-row {
	margin-top: 10px;
}

.icchk-ev-ticket-row.is-unavailable {
	opacity: 0.55;
}

.icchk-ev-ticket-row.is-unavailable:hover {
	border-color: var(--icchk-ev-border);
	box-shadow: none;
}

.icchk-ev-ticket-row__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.icchk-ev-ticket-row__name {
	margin: 0;
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: -0.008em;
}

.icchk-ev-ticket-row__desc,
.icchk-ev-ticket-row__meta {
	font-size: 13px;
	line-height: 1.5;
	color: var(--icchk-ev-muted);
}

.icchk-ev-ticket-row__price {
	flex: 0 0 auto;
	text-align: right;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
	white-space: nowrap;
}

.icchk-ev-ticket-row__was {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--icchk-ev-faint);
	text-decoration: line-through;
}

.icchk-ev-qty {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	overflow: hidden;
	background: var(--icchk-ev-surface);
}

.icchk-ev .icchk-ev-qty button {
	width: 36px;
	height: 40px;
	border: 0;
	background: var(--icchk-ev-surface-sunken);
	color: var(--icchk-ev-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev .icchk-ev-qty button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--icchk-ev-accent) 12%, transparent);
	color: var(--icchk-ev-accent);
}

.icchk-ev .icchk-ev-qty button:active:not(:disabled) {
	background: color-mix(in srgb, var(--icchk-ev-accent) 20%, transparent);
}

.icchk-ev .icchk-ev-qty button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.icchk-ev .icchk-ev-qty input {
	width: 48px;
	height: 40px;
	border: 0;
	border-left: 1px solid var(--icchk-ev-border);
	border-right: 1px solid var(--icchk-ev-border);
	background: var(--icchk-ev-surface);
	text-align: center;
	font: inherit;
	font-weight: 650;
	color: var(--icchk-ev-text);
	-moz-appearance: textfield;
	appearance: textfield;
}

.icchk-ev-qty input::-webkit-outer-spin-button,
.icchk-ev-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.icchk-ev-summary {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--icchk-ev-border);
	font-size: 14px;
}

.icchk-ev-summary__line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	color: var(--icchk-ev-muted);
}

.icchk-ev-summary__line--total {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--icchk-ev-border);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--icchk-ev-text);
}

.icchk-ev-summary__line--discount {
	color: var(--icchk-ev-positive);
	font-weight: 500;
}

/* ---------------------------------------------------------------- Filters */

.icchk-ev-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 24px;
	padding: 18px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
}

.icchk-ev-filters .icchk-ev-field {
	flex: 1 1 170px;
	min-width: 0;
}

/*
 * The keyword box carries most of the bar. Everything beside it is a short
 * dropdown, and giving them equal shares left a search field you could not read
 * a title in. It still wraps to full width when the bar gets narrow.
 */
.icchk-ev-filters .icchk-ev-field--wide {
	flex: 1 1 70%;
}

@media (max-width: 700px) {
	.icchk-ev-filters .icchk-ev-field--wide {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------------- Countdown */

.icchk-ev-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.icchk-ev-countdown__unit {
	/* Sized to the longest label so the row reads as one instrument, not four. */
	flex: 0 0 auto;
	min-width: 88px;
	padding: 15px 12px 12px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
	text-align: center;
}

.icchk-ev-countdown__value {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--icchk-ev-accent);
	font-variant-numeric: tabular-nums;
}

.icchk-ev-countdown__label {
	display: block;
	margin-top: 5px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--icchk-ev-faint);
}

.icchk-ev-countdown__done {
	font-size: 15px;
	font-weight: 600;
	color: var(--icchk-ev-accent);
}

/* ------------------------------------------------------------ Single bits */

.icchk-ev-meta-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.icchk-ev-meta-list li {
	display: flex;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
}

.icchk-ev-meta-list dt,
.icchk-ev-meta-key {
	flex: 0 0 110px;
	color: var(--icchk-ev-faint);
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-top: 2px;
}

.icchk-ev-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.icchk-ev-gallery {
	display: grid;
	grid-template-columns: repeat(var(--icchk-ev-columns, 3), minmax(0, 1fr));
	gap: 10px;
}

.icchk-ev-gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--icchk-ev-radius-sm);
	display: block;
	transition: transform var(--icchk-ev-slow) var(--icchk-ev-ease), box-shadow var(--icchk-ev-slow) var(--icchk-ev-ease);
}

.icchk-ev-gallery img:hover {
	transform: scale(1.02);
	box-shadow: var(--icchk-ev-shadow-2);
}

.icchk-ev-people {
	display: grid;
	grid-template-columns: repeat(var(--icchk-ev-columns, 3), minmax(0, 1fr));
	gap: 20px;
}

.icchk-ev-person {
	text-align: center;
}

.icchk-ev-person img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--icchk-ev-radius-pill);
	margin: 0 auto 10px;
	display: block;
	box-shadow: var(--icchk-ev-shadow-2);
}

.icchk-ev-person__name {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.008em;
}

.icchk-ev .icchk-ev-person__role {
	margin-top: 3px;
	font-size: 13px;
	color: var(--icchk-ev-muted);
}

.icchk-ev-map {
	width: 100%;
	border: 0;
	border-radius: var(--icchk-ev-radius);
	aspect-ratio: var(--icchk-ev-ratio, 16 / 9);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--icchk-ev-radius);
	overflow: hidden;
	background: var(--icchk-ev-surface-sunken);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------- Single-event bits */

.icchk-ev-single__title {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.icchk-ev-single__title a,
.icchk-ev-single__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-single__title a:hover,
.icchk-ev-single__link:hover {
	color: var(--icchk-ev-accent);
}

.icchk-ev-single__label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* Reads as part of the fact it labels, not as a watermark behind it. */
	color: var(--icchk-ev-text);
}

.icchk-ev-single__value {
	display: block;
	font-size: 16px;
	line-height: 1.5;
}

.icchk-ev-single__price {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.024em;
	color: var(--icchk-ev-accent);
}

.icchk-ev .icchk-ev-single__venue-name {
	margin: 0 0 5px;
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -0.012em;
}

.icchk-ev-single__excerpt,
.icchk-ev-single__content {
	margin: 0;
	line-height: 1.72;
}

.icchk-ev-single__excerpt {
	font-size: 17px;
	color: var(--icchk-ev-muted);
}

.icchk-ev-single__content > *:first-child {
	margin-top: 0;
}

.icchk-ev-single__content > *:last-child {
	margin-bottom: 0;
}

.icchk-ev-single__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--icchk-ev-radius);
	box-shadow: var(--icchk-ev-shadow-2);
}

/* Dates list */

.icchk-ev-dates {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	overflow: hidden;
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-dates__item + .icchk-ev-dates__item {
	border-top: 1px solid var(--icchk-ev-border-soft);
}

.icchk-ev-dates__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 17px;
	color: inherit;
	text-decoration: none;
	transition:
		background-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-dates__item a:hover {
	background: color-mix(in srgb, var(--icchk-ev-accent) 6%, transparent);
	color: var(--icchk-ev-accent);
}

.icchk-ev-dates__item.is-current {
	background: color-mix(in srgb, var(--icchk-ev-accent) 9%, transparent);
	box-shadow: inset 3px 0 0 var(--icchk-ev-accent);
}

.icchk-ev-dates__item.is-current a {
	font-weight: 650;
}

.icchk-ev-dates__when {
	font-variant-numeric: tabular-nums;
}

/* FAQ */

.icchk-ev-faq__item {
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	margin-bottom: 8px;
	background: var(--icchk-ev-surface);
	transition: box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-faq__item[open] {
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-faq__item summary {
	position: relative;
	padding: 15px 48px 15px 18px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-faq__item summary:hover {
	color: var(--icchk-ev-accent);
}

.icchk-ev-faq__item summary::-webkit-details-marker {
	display: none;
}

/*
 * A plus that rotates into a minus, rather than swapping one glyph for another
 * — the movement tells you the panel is the same one opening and closing.
 */
.icchk-ev-faq__item summary::before,
.icchk-ev-faq__item summary::after {
	content: '';
	position: absolute;
	right: 19px;
	top: 50%;
	width: 11px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--icchk-ev-accent);
	transform: translateY(-50%);
	transition: transform var(--icchk-ev-slow) var(--icchk-ev-ease);
}

.icchk-ev-faq__item summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.icchk-ev-faq__item[open] summary::after {
	transform: translateY(-50%) rotate(0deg);
}

.icchk-ev-faq__answer {
	padding: 0 18px 17px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--icchk-ev-muted);
}

/* Previous / next */

.icchk-ev-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.icchk-ev-nav__link {
	flex: 1 1 240px;
	padding: 15px 18px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--icchk-ev-fast) var(--icchk-ev-ease),
		box-shadow var(--icchk-ev-fast) var(--icchk-ev-ease),
		transform var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-nav__link:hover {
	border-color: color-mix(in srgb, var(--icchk-ev-accent) 34%, transparent);
	box-shadow: var(--icchk-ev-shadow-2);
	transform: translateY(-1px);
	color: inherit;
}

.icchk-ev-nav__link--next {
	text-align: right;
}

.icchk-ev-nav__link span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--icchk-ev-faint);
}

.icchk-ev .icchk-ev-nav__link strong {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.icchk-ev-single-blocks {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 36px;
}

/* ------------------------------------------------------------------ Table */

.icchk-ev-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.icchk-ev-table th,
.icchk-ev-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--icchk-ev-border-soft);
	text-align: left;
}

.icchk-ev-table th {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--icchk-ev-faint);
	border-bottom-color: var(--icchk-ev-border);
}

.icchk-ev-table tbody tr {
	transition: background-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-table tbody tr:hover {
	background: var(--icchk-ev-surface-hover);
}

.icchk-ev-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ Tabs */

.icchk-ev-tabs__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--icchk-ev-border);
}

.icchk-ev-tabs__label {
	padding: 11px 18px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--icchk-ev-muted);
	cursor: pointer;
	white-space: nowrap;
	transition:
		color var(--icchk-ev-fast) var(--icchk-ev-ease),
		border-color var(--icchk-ev-slow) var(--icchk-ev-ease);
}

.icchk-ev-tabs__label:hover {
	color: var(--icchk-ev-accent);
}

.icchk-ev-tabs__panel {
	display: none;
}

/*
 * Each radio precedes every panel, so the nth panel can be revealed by the nth
 * radio being checked. Keeps the tabs working without any JavaScript.
 */
.icchk-ev-tabs__radio:nth-of-type(1):checked ~ .icchk-ev-tabs__panel[data-index="0"],
.icchk-ev-tabs__radio:nth-of-type(2):checked ~ .icchk-ev-tabs__panel[data-index="1"],
.icchk-ev-tabs__radio:nth-of-type(3):checked ~ .icchk-ev-tabs__panel[data-index="2"],
.icchk-ev-tabs__radio:nth-of-type(4):checked ~ .icchk-ev-tabs__panel[data-index="3"],
.icchk-ev-tabs__radio:nth-of-type(5):checked ~ .icchk-ev-tabs__panel[data-index="4"],
.icchk-ev-tabs__radio:nth-of-type(6):checked ~ .icchk-ev-tabs__panel[data-index="5"] {
	display: block;
}

.icchk-ev-tabs__radio:nth-of-type(1):checked ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label:nth-child(1),
.icchk-ev-tabs__radio:nth-of-type(2):checked ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label:nth-child(2),
.icchk-ev-tabs__radio:nth-of-type(3):checked ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label:nth-child(3),
.icchk-ev-tabs__radio:nth-of-type(4):checked ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label:nth-child(4),
.icchk-ev-tabs__radio:nth-of-type(5):checked ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label:nth-child(5),
.icchk-ev-tabs__radio:nth-of-type(6):checked ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label:nth-child(6) {
	color: var(--icchk-ev-accent);
	border-bottom-color: var(--icchk-ev-accent);
}

.icchk-ev-tabs__radio:focus-visible ~ .icchk-ev-tabs__labels .icchk-ev-tabs__label {
	box-shadow: var(--icchk-ev-ring);
	border-radius: var(--icchk-ev-radius-xs);
}

/* --------------------------------------------------------- Week / Agenda */

.icchk-ev-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--icchk-ev-border);
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	overflow: hidden;
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-week__day {
	min-height: 140px;
	padding: 12px;
	background: var(--icchk-ev-surface);
}

.icchk-ev-week__day.is-today {
	background: color-mix(in srgb, var(--icchk-ev-accent) 6%, var(--icchk-ev-surface));
}

.icchk-ev .icchk-ev-week__heading {
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--icchk-ev-faint);
}

.icchk-ev-week__heading strong {
	display: block;
	margin-top: 2px;
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--icchk-ev-text);
	text-transform: none;
}

@media (max-width: 900px) {
	.icchk-ev-week {
		grid-template-columns: 1fr;
	}

	.icchk-ev-week__day {
		min-height: 0;
	}
}

.icchk-ev-agenda {
	display: flex;
	flex-direction: column;
}

.icchk-ev-agenda__row {
	display: flex;
	gap: 18px;
	padding: 15px 6px;
	border-bottom: 1px solid var(--icchk-ev-border-soft);
	transition: background-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-agenda__row:hover {
	background: var(--icchk-ev-surface-hover);
}

.icchk-ev-agenda__time {
	flex: 0 0 110px;
	font-size: 14px;
	font-weight: 650;
	color: var(--icchk-ev-accent);
	font-variant-numeric: tabular-nums;
}

.icchk-ev-agenda__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.icchk-ev-agenda__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.icchk-ev-agenda__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-agenda__title a:hover {
	color: var(--icchk-ev-accent);
}

.icchk-ev-agenda__meta {
	font-size: 13px;
	color: var(--icchk-ev-muted);
}

.icchk-ev .icchk-ev-agenda__date {
	margin: 22px 0 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--icchk-ev-faint);
}

.icchk-ev-agenda__date:first-child {
	margin-top: 0;
}

.icchk-ev .icchk-ev-heading {
	margin: 0 0 20px;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

/* ------------------------------------------------------------ My tickets */

.icchk-ev-ticket-card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 20px 22px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-ticket-card + .icchk-ev-ticket-card {
	margin-top: 12px;
}

.icchk-ev-ticket-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.icchk-ev-ticket-card__qr {
	flex: 0 0 auto;
	line-height: 0;
	padding: 8px;
	border-radius: var(--icchk-ev-radius-sm);
	background: #ffffff;
	box-shadow: var(--icchk-ev-shadow-1);
}

.icchk-ev-ticket-card__qr svg {
	display: block;
	width: 120px;
	height: 120px;
}

/*
 * A ticket is often opened on a phone at a door, where the scanner needs the
 * code big and the surrounding text out of the way.
 */
@media (max-width: 600px) {
	.icchk-ev-ticket-card {
		flex-direction: column-reverse;
		text-align: center;
	}

	.icchk-ev-ticket-card__qr svg {
		width: 190px;
		height: 190px;
	}
}

@media print {
	.icchk-ev-ticket-card {
		break-inside: avoid;
		border-color: #000;
		box-shadow: none;
	}
}

/*
 * Giving a place back. Deliberately quiet: a ghost button that sits under the
 * ticket rather than competing with it, because cancelling is the rarer thing
 * somebody came here to do.
 */
.icchk-ev-cancel {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--icchk-ev-border);
}

.icchk-ev-cancel__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.icchk-ev-cancel__panel[hidden] {
	display: none;
}

.icchk-ev-cancel__terms {
	margin: 0;
	color: var(--icchk-ev-muted);
	font-size: 0.9em;
	line-height: 1.5;
}

.icchk-ev-cancel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

@media print {
	.icchk-ev-cancel {
		display: none;
	}
}

/*
 * What you already hold, on the event's own page. Set apart from the tickets
 * on sale beneath it, because it answers a different question: not "what can I
 * buy" but "what do I have, and can I change it".
 */
.icchk-ev-mybooking {
	margin-bottom: 18px;
	padding: 16px 18px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-alt, var(--icchk-ev-surface));
}

.icchk-ev .icchk-ev-mybooking__head {
	margin: 0 0 10px;
	font-size: 1rem;
}

.icchk-ev .icchk-ev-mybooking__seats {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.icchk-ev .icchk-ev-mybooking__seat {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--icchk-ev-border);
}

.icchk-ev .icchk-ev-mybooking__seat:last-child {
	border-bottom: 0;
}

.icchk-ev .icchk-ev-mybooking__who {
	font-weight: 600;
}

.icchk-ev .icchk-ev-mybooking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.icchk-ev .icchk-ev-mybooking__note {
	margin: 10px 0 0;
	color: var(--icchk-ev-muted);
	font-size: 0.9em;
	line-height: 1.5;
}

/* --------------------------------------------------------- The archive */

/*
 * Themes drop this into whatever wrapper their archive uses -- Astra's is a
 * flex container -- so claim the full width of it rather than being sized by
 * the content, or the inner block has nothing to centre itself within.
 */
.icchk-ev-archive {
	flex: 1 1 auto;
	width: 100%;
	padding: 40px 20px 64px;
}

.icchk-ev-archive__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.icchk-ev-archive__title {
	margin: 0 0 8px;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.icchk-ev-archive__intro {
	max-width: 70ch;
	margin: 0 0 28px;
	color: var(--icchk-ev-muted);
	line-height: 1.6;
}

/* ------------------------------------------------------- Already booked */

/* What you booked, shown in place of the empty form. */
.icchk-ev-booked {
	padding: 18px 20px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
}

.icchk-ev .icchk-ev-booked__lead {
	margin: 0 0 4px;
	font-size: 15px;
}

.icchk-ev .icchk-ev-booked__detail {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--icchk-ev-muted);
}

.icchk-ev-manage-prompt {
	margin-top: 14px;
}

/*
 * A quiet link rather than a button: it is the way out for the few people who
 * have already booked, not something to compete with the form itself.
 */
.icchk-ev .icchk-ev-link-button {
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--icchk-ev-accent);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icchk-ev .icchk-ev-link-button:hover {
	text-decoration-thickness: 2px;
}

.icchk-ev-manage-prompt .icchk-ev-form {
	margin-top: 12px;
	padding: 16px 18px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
}

/* --------------------------------------------------------------- Scanner */

.icchk-ev-scan-result {
	margin-top: 16px;
	padding: 18px;
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
	text-align: center;
}

.icchk-ev-scan-name {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.018em;
}

/*
 * The two door actions on one line, sized to the words rather than the column.
 * They wrap to full width only when there is genuinely no room for both.
 */
.icchk-ev-scan__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.icchk-ev-scan__actions .icchk-ev-button {
	flex: 0 1 auto;
}

@media (max-width: 420px) {
	.icchk-ev-scan__actions .icchk-ev-button {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/*
 * The camera view. A door is used one-handed at arm's length, so the frame is
 * generous and the picture fills it rather than letterboxing.
 */
.icchk-ev-scan-camera {
	position: relative;
	margin-top: 16px;
	overflow: hidden;
	border-radius: var(--icchk-ev-radius);
	background: #000;
}

.icchk-ev-scan-camera video {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	/* Front cameras mirror; the rear one this asks for does not. */
	background: #000;
}

/*
 * A target to aim at. Purely a guide, so it never intercepts a tap.
 */
.icchk-ev-scan-camera::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(58%, 230px);
	aspect-ratio: 1;
	translate: -50% -50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 14px;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.icchk-ev .icchk-ev-scan-hint {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 10px 14px;
	font-size: 13.5px;
	color: #fff;
	text-align: center;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.68));
	pointer-events: none;
}

/* ---------------------------------------------------------------- Utility */

.icchk-ev-is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.icchk-ev-slider {
	display: flex;
	gap: var(--icchk-ev-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for the cards' hover lift and shadow, which would otherwise clip. */
	padding: 4px 4px 14px;
	margin: -4px -4px -14px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.icchk-ev-slider > * {
	flex: 0 0 calc((100% - (var(--icchk-ev-columns, 3) - 1) * var(--icchk-ev-gap)) / var(--icchk-ev-columns, 3));
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	.icchk-ev-slider > * {
		flex-basis: 82%;
	}
}

/*
 * Anyone who has asked their system to calm movement down gets stillness, not a
 * shorter version of the same animation.
 */
@media (prefers-reduced-motion: reduce) {
	.icchk-ev *,
	.icchk-ev *::before,
	.icchk-ev *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		scroll-behavior: auto;
	}

	.icchk-ev-card:hover,
	.icchk-ev-nav__link:hover {
		transform: none;
	}

	.icchk-ev-card:hover .icchk-ev-card__media img,
	.icchk-ev-gallery img:hover {
		transform: none;
	}
}

/* ------------------------------------------------- The whole event page */

/*
 * One widget renders the entire event. Its blocks are the same atomic widgets
 * used elsewhere, so the work here is arrangement and rhythm rather than
 * appearance: a hero, two columns that collapse to one, and a single spacing
 * variable so the whole page can be tightened or opened up at once.
 */
.icchk-ev-event {
	--icchk-ev-block-gap: 34px;

	display: flex;
	flex-direction: column;
	gap: var(--icchk-ev-block-gap);
}

.icchk-ev-event.is-cancelled .icchk-ev-event__title,
.icchk-ev-event.is-postponed .icchk-ev-event__title {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.icchk-ev-event__hero {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.icchk-ev-event__media {
	position: relative;
	overflow: hidden;
	height: 380px;
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
	box-shadow: var(--icchk-ev-shadow-2);
}

.icchk-ev-event__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.icchk-ev-event__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.icchk-ev .icchk-ev-event__flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.icchk-ev .icchk-ev-event__title {
	margin: 0;
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.icchk-ev .icchk-ev-event__subtitle {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
	color: var(--icchk-ev-muted);
	text-wrap: balance;
}

.icchk-ev .icchk-ev-event__when {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.005em;
	color: var(--icchk-ev-accent);
}

/*
 * The sidebar is a fixed track rather than a fraction, so the reading column
 * keeps a sensible measure however wide the page gets.
 */
.icchk-ev-event__layout {
	--icchk-ev-aside: 320px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--icchk-ev-aside);
	gap: var(--icchk-ev-block-gap);
	align-items: start;
}

.icchk-ev-event--stacked .icchk-ev-event__layout {
	grid-template-columns: minmax(0, 1fr);
}

.icchk-ev-event__main,
.icchk-ev-event__aside {
	display: flex;
	flex-direction: column;
	gap: var(--icchk-ev-block-gap);
	min-width: 0;
}

/* An aside with nothing switched on should not leave a gap behind it. */
.icchk-ev-event__aside:empty {
	display: none;
}

.icchk-ev-event__layout:has(.icchk-ev-event__aside:empty) {
	grid-template-columns: minmax(0, 1fr);
}

.icchk-ev-event__facts {
	display: grid;
	/*
	 * The row is always the same four facts, so they get weights rather than
	 * equal shares: a date and a price are short, an address is not. Equal
	 * columns forced the address to wrap and made its cell twice the height of
	 * its neighbours, which is what made the panel look half empty.
	 *
	 * The weights carry no minimum on purpose: this widget can be dropped into a
	 * narrow column, and a floor would make it overflow rather than shrink.
	 */
	grid-template-columns:
		minmax(0, 0.8fr)
		minmax(0, 0.95fr)
		minmax(0, 1.4fr)
		minmax(0, 1.05fr);
	align-items: start;
	gap: 20px 24px;
	padding: 22px 24px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
}

/*
 * An event carries its own colour on the article as --icchk-ev-accent. Every
 * atomic widget inside the page opens a fresh .icchk-ev root, and that root
 * re-declares the token -- which quietly threw the event's colour away and left
 * the date green while the price beside it stayed default blue. Inheriting
 * instead of re-declaring keeps one colour across the whole page.
 */
.icchk-ev-event .icchk-ev {
	--icchk-ev-accent: inherit;
}

/* Inside the facts row each atomic widget is a cell, not a block of its own. */
.icchk-ev-event__facts .icchk-ev {
	min-width: 0;
}

/*
 * The four facts read as one row, so they share a baseline grid: label, then
 * value, then anything extra. Tightening the internal spacing here rather than
 * in each widget keeps them free to be taller when used on their own.
 */
.icchk-ev-event__facts .icchk-ev-single__value,
.icchk-ev-event__facts .icchk-ev-single__venue-name {
	line-height: 1.45;
}

.icchk-ev-event__facts .icchk-ev-links {
	margin-top: 2px;
}

/*
 * A time range and a money amount are each one value. Left to wrap they split
 * across lines mid-figure -- "From HKD" over "2,200.00" -- so they only break
 * where there is genuinely no room.
 */
.icchk-ev-event__facts .icchk-ev-single__price,
.icchk-ev-event__facts .icchk-ev-single__value {
	text-wrap: pretty;
}

/*
 * A time reads badly split across lines, so it keeps nowrap. A price does not:
 * "From HKD 250.00" at 24px is wider than the column it sits in, and holding it
 * on one line pushed it straight through the right edge of the panel. It wraps
 * at its spaces instead, and the cell is allowed to shrink around it.
 */
.icchk-ev-event__facts .icchk-ev-single__time {
	display: inline-block;
	text-wrap: nowrap;
}

.icchk-ev-event__facts .icchk-ev-single__price {
	display: block;
	max-width: 100%;
	white-space: normal;
	text-wrap: balance;
	overflow-wrap: break-word;
	/*
	 * The same size as the date beside it. At 24px the fee shouted over every
	 * other fact in the row and still did not fit its column; a price is one
	 * fact among four, not a headline.
	 */
	font-size: 16px;
}

/*
 * A ghost button inside a fact cell is too much furniture for a row of four.
 * Compact mode swaps it for a link, styled to match the other accents.
 */
.icchk-ev .icchk-ev-single__directions {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--icchk-ev-accent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--icchk-ev-accent) 35%, transparent);
	transition: border-color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev .icchk-ev-single__directions:hover {
	border-bottom-color: var(--icchk-ev-accent);
}

.icchk-ev-event__related {
	padding-top: 6px;
	border-top: 1px solid var(--icchk-ev-border);
}

@media (max-width: 900px) {
	.icchk-ev-event__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.icchk-ev-event__media {
		height: 260px;
	}
}

/*
 * On a page this plugin has taken over, the theme's post byline reports the
 * publish date and the author of the event *record* — neither of which is what
 * a visitor is looking for, and the date in particular reads as though the
 * event already happened. Scoped to our own body class so nothing else moves.
 */
.icchk-ev-single-page .entry-meta,
.icchk-ev-single-page .post-meta,
.icchk-ev-single-page .ast-blog-meta-container {
	display: none;
}

/* ------------------------------------------- Party size and guest blocks */

/*
 * The party stepper is the quantity control from the ticket rows, sized to sit
 * on its own rather than inside a row, and never stretched to the full width of
 * the form — a control for numbers one to four should look like one.
 */
.icchk-ev .icchk-ev-qty--party {
	align-self: flex-start;
}

.icchk-ev .icchk-ev-guest__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/*
 * Remove sits quietly until the block is being worked on. It is destructive and
 * one of several on the page, so it should not compete with the guest's name.
 */
.icchk-ev .icchk-ev-guest__remove {
	padding: 2px 6px;
	border: 0;
	border-radius: var(--icchk-ev-radius-xs);
	background: transparent;
	color: var(--icchk-ev-faint);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--icchk-ev-fast) var(--icchk-ev-ease), color var(--icchk-ev-fast) var(--icchk-ev-ease);
}

.icchk-ev .icchk-ev-guest:hover .icchk-ev-guest__remove,
.icchk-ev .icchk-ev-guest:focus-within .icchk-ev-guest__remove,
.icchk-ev .icchk-ev-guest__remove:focus-visible {
	opacity: 1;
}

.icchk-ev .icchk-ev-guest__remove:hover {
	color: var(--icchk-ev-danger);
	background: color-mix(in srgb, var(--icchk-ev-danger) 10%, transparent);
}

/* Touch has no hover, so the control has to be there all along. */
@media (hover: none) {
	.icchk-ev .icchk-ev-guest__remove {
		opacity: 1;
	}
}

.icchk-ev [data-add-guest] {
	align-self: flex-start;
}

/*
 * When this plugin renders the whole event page itself, nothing upstream has
 * set a content width — the theme's single template is built for a post body it
 * is no longer printing. Left alone the page runs the full width of the display,
 * which on a wide monitor puts eighty words on a line and is unreadable.
 *
 * Only applied on pages we took over. Inside Elementor the container owns the
 * width and this must not fight it.
 */
.icchk-ev-single-page .icchk-ev-event {
	--icchk-ev-page-max: 1180px;

	max-width: var(--icchk-ev-page-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
	padding-block: clamp(20px, 4vw, 40px);
	box-sizing: border-box;
}

/* The hero image may still run wider than the text, which reads as deliberate. */
.icchk-ev-single-page .icchk-ev-event__hero {
	margin-block-end: 4px;
}

/*
 * Phones. The sidebar has already collapsed under the main column by this
 * width; what is left is to stop the facts row squeezing four columns into a
 * handspan, and to let the booking button span the thumb.
 */
@media (max-width: 600px) {
	.icchk-ev-event__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 18px;
	}

	.icchk-ev .icchk-ev-event__title {
		font-size: clamp(26px, 7vw, 34px);
	}

	.icchk-ev-event__media {
		height: 200px;
	}

	/* A row of three answers does not fit; stack them. */
	.icchk-ev-choices {
		flex-direction: column;
	}

	.icchk-ev-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.icchk-ev .icchk-ev-form {
		padding: 18px;
	}

	.icchk-ev .icchk-ev-button {
		width: 100%;
	}

	/* Except the steppers, which are controls rather than actions. */
	.icchk-ev .icchk-ev-qty button,
	.icchk-ev .icchk-ev-calendar__nav button,
	.icchk-ev [data-add-guest] {
		width: auto;
	}

	.icchk-ev-ticket-row {
		flex-wrap: wrap;
	}

	.icchk-ev-ticket-row__price {
		text-align: left;
	}
}

/* --------------------------------------------------- The event manager */

.icchk-ev-manager {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.icchk-ev-manager__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.icchk-ev-manager__bar .icchk-ev-field {
	flex: 1 1 260px;
	max-width: 360px;
}

.icchk-ev-manager__more {
	display: flex;
	justify-content: center;
}

/*
 * The event editor, as a dialog.
 *
 * It sits above the page rather than pushing it down: opening a form that then
 * needs to be scrolled to is the thing this replaces. The sheet is the scroll
 * container, so the heading and the save buttons stay put however long the form
 * gets, and the page behind it is frozen so a scroll gesture cannot wander off
 * onto the list underneath.
 */
.icchk-ev-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(15, 20, 28, 0.55);
	overscroll-behavior: contain;
}

.icchk-ev-modal[hidden] {
	display: none;
}

.icchk-ev-modal__sheet {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 780px;
	max-height: 100%;
	overflow: hidden;
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface);
	box-shadow: 0 24px 60px rgba(15, 20, 28, 0.35);
}

.icchk-ev-modal__sheet > form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
}

.icchk-ev-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 18px 22px;
	border-bottom: 1px solid var(--icchk-ev-border);
}

.icchk-ev .icchk-ev-modal__head .icchk-ev-heading {
	margin: 0;
}

.icchk-ev .icchk-ev-modal__close {
	flex: 0 0 auto;
	padding: 0 6px;
	border: 0;
	background: none;
	color: var(--icchk-ev-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.icchk-ev .icchk-ev-modal__close:hover,
.icchk-ev .icchk-ev-modal__close:focus {
	color: var(--icchk-ev-text);
}

/*
 * The form's own spacing comes from a flex gap on .icchk-ev-form. Moving the
 * fields inside this scroller put a plain block between the two, and every
 * field lost its gap -- so the body carries the same layout the form does.
 */
.icchk-ev-modal__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 22px;
}

/* Section headings need air above them, not just the shared gap. */
.icchk-ev .icchk-ev-modal__body > .icchk-ev-heading {
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--icchk-ev-border);
}

.icchk-ev .icchk-ev-modal__body > .icchk-ev-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.icchk-ev-modal__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 0 0 auto;
	padding: 16px 22px;
	border-top: 1px solid var(--icchk-ev-border);
	background: var(--icchk-ev-surface);
}

/* The page behind a dialog does not scroll. */
body.icchk-ev-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.icchk-ev-modal {
		padding: 0;
	}

	.icchk-ev-modal__sheet {
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
}


/*
 * A tick list behind a dropdown. It reads as the select beside it -- same
 * height, same border, same chevron -- so a form of dropdowns stays a form of
 * dropdowns, but choosing several is a matter of ticking rather than knowing
 * to hold Cmd.
 */
.icchk-ev-picker {
	position: relative;
}

.icchk-ev .icchk-ev-picker__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.icchk-ev .icchk-ev-picker__toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.55;
	transform: translateY(-2px) rotate(45deg);
}

.icchk-ev .icchk-ev-picker__toggle[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(225deg);
}

.icchk-ev .icchk-ev-picker__toggle span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.icchk-ev-picker__menu {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 260px;
	overflow-y: auto;
	padding: 8px 12px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	box-shadow: 0 12px 28px rgba(15, 20, 28, 0.18);
}

.icchk-ev-picker__menu[hidden] {
	display: none;
}

.icchk-ev-picker__menu .icchk-ev-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}

.icchk-ev .icchk-ev-picker__empty {
	margin: 4px 0;
	color: var(--icchk-ev-muted);
	font-size: 0.9em;
}

/*
 * Buttons that open somebody else's service, wearing that service's mark.
 *
 * The mark keeps its brand colour while the label keeps the page's, so a row
 * of them is recognisable at a glance without five different button colours
 * fighting the design.
 */
.icchk-ev .icchk-ev-button--brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Logo only: a square button the size of the mark, plus its padding. */
.icchk-ev .icchk-ev-button--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
}

.icchk-ev .icchk-ev-button--icon .icchk-ev-mark {
	width: 20px;
	height: 20px;
}

.icchk-ev .icchk-ev-mark {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* The event photo, in the front-end editor. */
.icchk-ev-photo__preview {
	max-width: 320px;
	margin-bottom: 10px;
	overflow: hidden;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
}

.icchk-ev-photo__preview img {
	display: block;
	width: 100%;
	height: auto;
}

.icchk-ev .icchk-ev-photo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}

/*
 * The file input is hidden inside its own label, so the label has to behave
 * like the button it is dressed as.
 */
.icchk-ev .icchk-ev-photo__actions label.icchk-ev-button {
	cursor: pointer;
}

/* The guest list, opened from a row rather than living on the page. */
.icchk-ev-manager__guests {
	margin-top: 16px;
	padding: 18px 20px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius);
	background: var(--icchk-ev-surface-sunken);
}

/* A long list scrolls inside its panel instead of stretching the page. */
.icchk-ev-manager__guests .icchk-ev-table-wrap {
	max-height: 420px;
	overflow: auto;
	border-radius: var(--icchk-ev-radius-sm, 8px);
	background: var(--icchk-ev-surface);
}

.icchk-ev-manager__guests .icchk-ev-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--icchk-ev-surface);
}

/* Arrived / not, at a glance. */
.icchk-ev .icchk-ev-guest-in {
	font-weight: 600;
	color: var(--icchk-ev-success, #0f9d63);
}

.icchk-ev .icchk-ev-guest-out {
	color: var(--icchk-ev-faint);
}

/* Each tier is a small card so a list of them does not read as one long form. */
.icchk-ev-manager__ticket {
	padding: 14px 16px;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface-sunken);
}

.icchk-ev-manager__ticket + .icchk-ev-manager__ticket {
	margin-top: 10px;
}

.icchk-ev-manager__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--icchk-ev-border);
}

/*
 * The action column should not stretch with the table, and its buttons should
 * stay side by side rather than wrapping under each other on a narrow screen.
 */
.icchk-ev-manager .icchk-ev-table td:last-child:not([colspan]) {
	white-space: nowrap;
	text-align: right;
}

@media (max-width: 600px) {
	.icchk-ev-manager__bar .icchk-ev-field {
		max-width: none;
	}

	.icchk-ev-manager__actions .icchk-ev-button {
		width: 100%;
	}
}

/*
 * A colour input is a swatch. Stretched to the width of a text field it reads
 * as a broken image, so it keeps its own size and sits with the label.
 */
.icchk-ev .icchk-ev-field input[type="color"] {
	width: 64px;
	min-height: 42px;
	padding: 4px;
	align-self: flex-start;
	border: 1px solid var(--icchk-ev-border);
	border-radius: var(--icchk-ev-radius-sm);
	background: var(--icchk-ev-surface);
	cursor: pointer;
}