/*
 * The shared look of everything NTC draws in the shop: the date list and its
 * participant form, the private-course card, the checkout hint (shop-ui.php).
 *
 * - Tokens are custom properties on :root, prefixed --ntc-, so the theme's own never
 *   collide with them.
 * - No @layer: the theme's CSS is unlayered and would beat every layered rule. The
 *   components are scoped by their root class instead and outrank the theme's
 *   element rules (Flatsome: `.button, button { margin-right: 1em; line-height:
 *   2.4em; … }`, inputs with a fixed `height: 2.507em`).
 * - Components size to the space they are given (container queries), not to the
 *   screen: on a desktop they stand in the narrow column beside the gallery, on a
 *   phone across the full width.
 */

:root {
	/* Brand orange for lines, icons and highlights. */
	--ntc-accent: #ec6608;
	/* Behind white text: 4.7:1. The brand orange itself reaches only 3.2:1. */
	--ntc-accent-strong: #bf5206;
	--ntc-accent-stronger: #a84805;
	/* Orange text on white: 5.8:1. */
	--ntc-accent-ink: #a84805;
	--ntc-accent-soft: #fdf1e8;
	--ntc-ink: #191816;
	--ntc-muted: #5f5f5f;
	--ntc-line: #e2e2e2;
	/* Field borders need 3:1 against white to be seen at all. */
	--ntc-line-strong: #8c8c8c;
	--ntc-surface: #fff;
	--ntc-surface-sunk: #f7f6f4;
	--ntc-error: #b00020;

	--ntc-radius: 10px;
	--ntc-radius-s: 6px;
	--ntc-radius-pill: 999px;
	/* Every control at least 44 px high: a finger, not a mouse pointer. */
	--ntc-control: 3rem;
	--ntc-focus: 0 0 0 3px rgb(236 102 8 / 0.35);

	/* Fluid steps (Utopia): 320 px → 1240 px. */
	--ntc-step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
	--ntc-step-0: 1rem;
	--ntc-step-1: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
	--ntc-space-3xs: 0.25rem;
	--ntc-space-2xs: 0.5rem;
	--ntc-space-xs: 0.75rem;
	--ntc-space-s: clamp(1rem, 0.93rem + 0.33vw, 1.25rem);
	--ntc-space-m: clamp(1.25rem, 1.11rem + 0.65vw, 1.75rem);
}

/* --- Layout ------------------------------------------------------------------ */

/* Every Layout's cluster: things side by side that wrap when they must. */
.ntc-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ntc-cluster-space, var(--ntc-space-xs));
}

/* The widgets set their own rhythm; the theme's paragraph and heading margins
   (`p { margin-bottom: 1.3em }`) are not part of it. */
:is(.ntc-termine-wrap, .ntc-pk) :is(p, h4, ol, ul, li, fieldset, legend) {
	margin: 0;
}

/* --- Fields ------------------------------------------------------------------- */

/* Label, control, note — the same in the participant form and the private card. */
.ntc-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--ntc-space-xs) var(--ntc-space-s);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-inline-size: 0;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field[hidden] {
	display: none;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field label {
	display: block;
	margin: 0;
	font-size: var(--ntc-step--1);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ntc-ink);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field :is(input:is([type='text'], [type='tel'], [type='email'], [type='date']), select) {
	box-sizing: border-box;
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	height: auto;
	min-block-size: var(--ntc-control);
	margin: 0;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--ntc-line-strong);
	border-radius: var(--ntc-radius-pill);
	background-color: var(--ntc-surface);
	box-shadow: none;
	color: var(--ntc-ink);
	font: inherit;
	/* Below 16 px, iOS zooms the page into the field and leaves it zoomed. */
	font-size: max(16px, 1rem);
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field select {
	/* Room for the theme's own arrow, drawn as the background image. */
	padding-inline-end: 2.75rem;
	background-position: right 1.125rem center;
	cursor: pointer;
}
/*
 * The birth date keeps the device's own picker (decided 27.10.2026). Safari draws a
 * date field centred and with a minimum width of its own, so on an iPhone it stood
 * wider than the form and its text in the middle (the PM's screenshot).
 */
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field input[type='date'] {
	-webkit-appearance: none;
	appearance: none;
	text-align: start;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field input[type='date']::-webkit-date-and-time-value {
	min-block-size: 1.5em;
	margin: 0;
	text-align: start;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field input[type='date']::-webkit-calendar-picker-indicator {
	margin-inline-start: var(--ntc-space-2xs);
	opacity: 0.6;
	cursor: pointer;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field :is(input, select):focus {
	outline: none;
	border-color: var(--ntc-accent);
	box-shadow: var(--ntc-focus);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-field :is(input, select)[aria-invalid='true'] {
	border-color: var(--ntc-error);
}
.ntc-field__note,
.ntc-form-error {
	color: var(--ntc-error);
	font-size: var(--ntc-step--1);
	line-height: 1.35;
}
:is(.ntc-field__note, .ntc-form-error):empty {
	display: none;
}

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

:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ntc-space-2xs);
	min-block-size: var(--ntc-control);
	max-inline-size: 100%;
	margin: 0;
	padding: 0.625rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--ntc-radius-s);
	box-shadow: none;
	font: inherit;
	font-size: var(--ntc-step-0);
	font-weight: 700;
	line-height: 1.2;
	/* The theme's buttons are set in capitals; ours too, so the page reads as one. */
	letter-spacing: 0.03em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* On the narrowest cards (320 px phones) "In den Warenkorb" stays on one line. */
@container (max-width: 17rem) {
	:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn {
		padding-inline: 0.75rem;
		letter-spacing: 0;
	}
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn:focus-visible {
	outline: none;
	box-shadow: var(--ntc-focus);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--primary,
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--primary:visited {
	background-color: var(--ntc-accent-strong);
	border-color: var(--ntc-accent-strong);
	color: #fff;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--primary:hover {
	background-color: var(--ntc-accent-stronger);
	border-color: var(--ntc-accent-stronger);
	color: #fff;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--secondary {
	background-color: var(--ntc-surface);
	border-color: var(--ntc-accent-strong);
	color: var(--ntc-accent-ink);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--secondary:hover,
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--secondary[aria-expanded='true'] {
	background-color: var(--ntc-accent-strong);
	color: #fff;
}
/* A second, quieter way on: underlined text, still a full-height target. */
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--link {
	padding-inline: var(--ntc-space-2xs);
	background: none;
	color: var(--ntc-accent-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-btn--link:hover {
	color: var(--ntc-accent-stronger);
}

/* --- In the cart, still on the page ---------------------------------------- */

:is(.ntc-termine-wrap, .ntc-pk) .ntc-done {
	display: grid;
	gap: var(--ntc-space-2xs);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-done__title {
	display: flex;
	align-items: center;
	gap: var(--ntc-space-2xs);
	font-size: var(--ntc-step-1);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ntc-ink);
	outline: none;
}
.ntc-done__title::before {
	content: '';
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--ntc-accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
:is(.ntc-termine-wrap, .ntc-pk) :is(.ntc-done__who, .ntc-done__summary) {
	font-weight: 600;
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-done__text {
	color: var(--ntc-muted);
}
:is(.ntc-termine-wrap, .ntc-pk) .ntc-done__actions {
	margin-block-start: var(--ntc-space-2xs);
}

/* --- Checkout ------------------------------------------------------------------ */

/* The payment window, right above "Zahlungspflichtig bestellen" (course-checkout.php). */
.ntc-payment-window {
	margin: 0 0 1em;
	padding: var(--ntc-space-xs) var(--ntc-space-s);
	border-inline-start: 4px solid var(--ntc-accent);
	border-radius: 0 var(--ntc-radius-s) var(--ntc-radius-s) 0;
	background: var(--ntc-accent-soft);
	color: var(--ntc-ink);
	font-size: var(--ntc-step--1);
	line-height: 1.5;
	/* The order summary around it is centred; a sentence reads better from the left. */
	text-align: start;
}

@media (prefers-reduced-motion: reduce) {
	:is(.ntc-termine-wrap, .ntc-pk) * {
		transition: none !important;
		animation: none !important;
	}
}