/*
 * The private-course card ([ntc_privatkurs], private-course.js): people, day and time,
 * participants and "In den Warenkorb" in one white card. Tokens, fields, buttons and
 * the "Im Warenkorb" state come from ntc-ui.css, shared with the date list.
 */
.ntc-pk {
	margin-block: var(--ntc-space-m);
	color: var(--ntc-ink);
	/* The theme sizes the column beside the gallery to its content (Flatsome
	   `col-fit`). A folded participant's one-line summary made the form wider than
	   that column, which then dropped below the gallery at full width and jumped
	   back on the next click. The form takes the width it is given and asks for none
	   — which also makes it the container its parts adapt to. */
	container: ntc-pk / inline-size;
}
.ntc-pk-card {
	padding: var(--ntc-space-m) var(--ntc-space-s);
	border-radius: var(--ntc-radius);
	background: var(--ntc-surface);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
}
@container ntc-pk (min-width: 30rem) {
	.ntc-pk-card {
		padding-inline: var(--ntc-space-m);
	}
}

/* While the offer loads: a quiet card of the same size, not a jump. */
.ntc-pk .ntc-pk-loading {
	padding: var(--ntc-space-m) var(--ntc-space-s);
	border-radius: var(--ntc-radius);
	background: var(--ntc-surface-sunk);
	color: var(--ntc-muted);
}

/* One card, three parts: people, day and time, participants — then the button. */
.ntc-pk-section + .ntc-pk-section,
.ntc-pk-checkout {
	margin-block-start: var(--ntc-space-s);
	padding-block-start: var(--ntc-space-s);
	border-block-start: 1px solid var(--ntc-line);
}
.ntc-pk .ntc-pk-title {
	margin-block-end: var(--ntc-space-xs);
	font-size: var(--ntc-step-1);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ntc-ink);
}
.ntc-pk .ntc-pk-hint,
.ntc-pk-extra-label {
	color: var(--ntc-muted);
	font-size: var(--ntc-step--1);
}
.ntc-pk .ntc-pk-error {
	margin-block-start: var(--ntc-space-2xs);
	color: var(--ntc-error);
	font-size: var(--ntc-step--1);
}
.ntc-pk-error:empty {
	display: none;
}

/*
 * The card's own controls are plain buttons, which Flatsome dresses like its buttons:
 * capitals, letter spacing, a minimum height, a right margin. Every one of them is
 * reset here and given a target of at least 44 px.
 */
.ntc-pk :is(.ntc-pk-step, .ntc-pk-nav, .ntc-pk-day, .ntc-pk-time, .ntc-pk-person-toggle) {
	box-sizing: border-box;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
	font: inherit;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}
.ntc-pk :is(.ntc-pk-step, .ntc-pk-nav, .ntc-pk-day, .ntc-pk-time):focus-visible {
	outline: none;
	box-shadow: var(--ntc-focus);
}

/* 1. People */
.ntc-pk-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ntc-space-2xs) var(--ntc-space-s);
}
.ntc-pk-stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--ntc-space-xs);
}
.ntc-pk-count {
	min-inline-size: 1.5ch;
	font-size: var(--ntc-step-1);
	font-weight: 700;
	text-align: center;
}
.ntc-pk :is(.ntc-pk-step, .ntc-pk-nav) {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--ntc-line-strong);
	border-radius: 50%;
	background: var(--ntc-surface);
	color: var(--ntc-ink);
	font-size: 1.25rem;
}
.ntc-pk :is(.ntc-pk-step, .ntc-pk-nav):hover {
	border-color: var(--ntc-accent);
	color: var(--ntc-accent-ink);
}

/* 2. Day and time */
.ntc-pk-month {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ntc-space-2xs);
	margin-block-end: var(--ntc-space-xs);
}
.ntc-pk-month strong {
	font-size: var(--ntc-step-0);
}
.ntc-pk-month .is-hidden {
	visibility: hidden;
}
.ntc-pk-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.3rem;
	text-align: center;
}
.ntc-pk-weekday {
	padding-block: 0.25rem;
	color: var(--ntc-muted);
	font-size: var(--ntc-step--1);
}
.ntc-pk .ntc-pk-day {
	display: grid;
	place-items: center;
	min-block-size: 2.75rem;
	border-radius: var(--ntc-radius-s);
	font-variant-numeric: tabular-nums;
}
.ntc-pk-day.is-off {
	color: #b3b3b3;
}
.ntc-pk :is(button.ntc-pk-day, .ntc-pk-time) {
	border: 1px solid var(--ntc-accent);
	background: var(--ntc-surface);
	color: var(--ntc-accent-ink);
	font-weight: 700;
}
.ntc-pk :is(button.ntc-pk-day, .ntc-pk-time):hover {
	background: var(--ntc-accent-soft);
}
.ntc-pk :is(.ntc-pk-day, .ntc-pk-time).is-selected {
	border-color: var(--ntc-accent-strong);
	background: var(--ntc-accent-strong);
	color: #fff;
}
.ntc-pk-times {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ntc-space-2xs);
	margin-block-start: var(--ntc-space-s);
}
.ntc-pk .ntc-pk-time {
	min-block-size: 2.75rem;
	padding: 0.5rem 1rem;
	border-radius: var(--ntc-radius-s);
	font-variant-numeric: tabular-nums;
}

/* 3. Participants */
.ntc-pk-people {
	display: grid;
	gap: var(--ntc-space-xs);
}
.ntc-pk .ntc-pk-person {
	min-inline-size: 0;
	padding: var(--ntc-space-xs) var(--ntc-space-s);
	border: 1px solid var(--ntc-line);
	border-radius: var(--ntc-radius-s);
}
.ntc-pk-person-fields[hidden] {
	display: none;
}
.ntc-pk-person-fields {
	margin-block-start: var(--ntc-space-xs);
}
.ntc-pk-parent {
	display: contents;
}
.ntc-pk-parent[hidden] {
	display: none;
}
/* A row to click, not one of the theme's buttons: Flatsome's capitals and letter
   spacing turned the summary into "FAWEF FWAFEWF". */
.ntc-pk .ntc-pk-person-toggle {
	display: flex;
	align-items: baseline;
	gap: var(--ntc-space-2xs);
	inline-size: 100%;
	min-block-size: 2.75rem;
	border: 0;
	background: none;
	color: inherit;
	text-align: start;
}
.ntc-pk-person-name {
	font-weight: 700;
}
.ntc-pk-person-summary {
	min-inline-size: 0;
	color: var(--ntc-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ntc-pk-person.is-closed .ntc-pk-person-toggle::after {
	content: 'Ändern';
	margin-inline-start: auto;
	color: var(--ntc-accent-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The line above the button: what goes into the cart, at what price. Beside the
   button when there is room, above it when there is not. */
.ntc-pk-checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ntc-space-xs) var(--ntc-space-s);
}
.ntc-pk .ntc-pk-summary {
	flex: 1 1 16rem;
	font-weight: 700;
}
.ntc-pk-checkout .ntc-pk-error {
	flex: 1 1 100%;
	order: 3;
	margin: 0;
}
.ntc-pk-actions {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}
.ntc-pk .ntc-pk-next {
	inline-size: 100%;
}
@container ntc-pk (min-width: 30rem) {
	.ntc-pk .ntc-pk-next {
		inline-size: auto;
	}
}

/*
 * The theme renders every variation's form and hides the inactive ones with
 * `opacity: 0; height: 0` rather than `display: none`. They therefore keep their
 * place in the layout, still catch the mouse and are still reachable by tab — which
 * is why clicking the visible form's first field did nothing: the click landed in a
 * form nobody can see. Each also kept its margin, which collapses through the
 * zero-height container: 24 px of white space per variation under the dropdowns
 * (26.10.2026: ~900 px on "Familienkurs Ski"), and every hidden form inside the
 * viewport loaded its offer. The theme is not ours to change, so the forms leave the
 * layout altogether while their variation is not the chosen one.
 */
.shortcode-amelia-variation:not(.active) .ntc-pk {
	display: none;
}

.ntc-pk-unmapped {
	margin: 1em 0;
	color: var(--ntc-muted, #5f5f5f);
}