/*
 * The date list ([ntc_termine]) and the participant form a run opens
 * (seat-booking.js). Tokens, fields and buttons come from ntc-ui.css.
 *
 * Each run is a card: the days first, then time and place, price and seats, and
 * "Buchen". Narrow, the button takes the full width under the facts — the chat
 * button floating at the right edge of the screen no longer covers it; wide enough,
 * a run is one line. The form opens inside the run's card.
 */

.ntc-termine-wrap {
	container: ntc-runs / inline-size;
	margin-block: var(--ntc-space-s) var(--ntc-space-m);
	color: var(--ntc-ink);
}
.ntc-termine-wrap .ntc-runs {
	display: grid;
	gap: var(--ntc-space-2xs);
	padding: 0;
	list-style: none;
}
.ntc-termine-wrap .ntc-run {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'when   offer'
		'action action'
		'panel  panel';
	align-items: center;
	gap: var(--ntc-space-xs) var(--ntc-space-s);
	padding: var(--ntc-space-xs) var(--ntc-space-s);
	border: 1px solid var(--ntc-line);
	border-radius: var(--ntc-radius);
	background: var(--ntc-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ntc-termine-wrap .ntc-run:has(.ntc-seat-open[aria-expanded='true']) {
	border-color: var(--ntc-accent);
	box-shadow: 0 0 0 1px var(--ntc-accent);
}
.ntc-run__when {
	grid-area: when;
	min-inline-size: 0;
}
.ntc-termine-wrap .ntc-run__days {
	font-size: var(--ntc-step-1);
	font-weight: 700;
	line-height: 1.3;
}
.ntc-termine-wrap :is(.ntc-run__details, .ntc-run__course) {
	margin-block-start: 0.125rem;
	color: var(--ntc-muted);
	font-size: var(--ntc-step--1);
	line-height: 1.4;
}
.ntc-run__offer {
	grid-area: offer;
	text-align: end;
}
.ntc-termine-wrap .ntc-run__price {
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.ntc-termine-wrap .ntc-run__seats {
	color: var(--ntc-muted);
	font-size: var(--ntc-step--1);
	line-height: 1.4;
	white-space: nowrap;
}
.ntc-termine-wrap .ntc-run.is-low .ntc-run__seats {
	color: var(--ntc-accent-ink);
	font-weight: 700;
}
.ntc-termine-wrap .ntc-run.is-full {
	background: var(--ntc-surface-sunk);
}
.ntc-termine-wrap .ntc-run.is-full :is(.ntc-run__days, .ntc-run__price) {
	color: var(--ntc-muted);
}
.ntc-run__action {
	grid-area: action;
}
.ntc-termine-wrap .ntc-run__action .ntc-btn {
	inline-size: 100%;
}
.ntc-run__panel {
	grid-area: panel;
	min-inline-size: 0;
}
.ntc-run__panel[hidden] {
	display: none;
}

@container ntc-runs (min-width: 34rem) {
	.ntc-termine-wrap .ntc-run {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			'when  offer action'
			'panel panel panel';
	}
	.ntc-termine-wrap .ntc-run__action .ntc-btn {
		inline-size: auto;
		min-inline-size: 8.5rem;
	}
}

/* --- The participant form ----------------------------------------------------- */

.ntc-termine-wrap .ntc-seat-form {
	display: grid;
	gap: var(--ntc-space-s);
	padding-block-start: var(--ntc-space-s);
	border-block-start: 1px solid var(--ntc-line);
}
.ntc-termine-wrap .ntc-seat-card {
	min-inline-size: 0;
	padding: 0;
	border: 0;
}
/* Flatsome sets a legend in capitals with 30 px of margin and a rule under it. */
.ntc-termine-wrap .ntc-seat-title {
	inline-size: 100%;
	margin: 0 0 var(--ntc-space-xs);
	padding: 0;
	border: 0;
	font-size: var(--ntc-step-0);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ntc-ink);
}
.ntc-termine-wrap .ntc-seat-submit {
	inline-size: 100%;
}
@container ntc-runs (min-width: 34rem) {
	.ntc-termine-wrap .ntc-seat-submit {
		justify-self: start;
		inline-size: auto;
	}
}
.ntc-termine-wrap .ntc-run__panel .ntc-done {
	padding-block-start: var(--ntc-space-s);
	border-block-start: 1px solid var(--ntc-line);
}

.ntc-termine-empty {
	color: var(--ntc-muted, #5f5f5f);
}

/*
 * The theme hides an inactive variation with `opacity: 0; height: 0`, so its date list
 * still overflows the zero-height container and catches the mouse: on any choice but
 * the first, the lists of the variations before it lay invisibly over the opened
 * participant form, and a click into a field landed in them. The same as the private
 * course's form (private-course.css).
 */
.shortcode-amelia-variation:not(.active) :is(.ntc-termine-wrap, .ntc-termine-empty) {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ntc-termine-wrap .ntc-run {
		transition: none;
	}
}