/**
 * Booking form. Layers keep the plugin's rules below the theme's unlayered styles where it
 * matters, and colours and fonts come from the theme.json presets with neutral fallbacks.
 *
 * Selected states use the theme's contrast/base pair (designed to be readable together)
 * instead of a primary colour of unknown contrast. Sites can override the --ncb-* tokens.
 */
@layer tokens, reset, base, components, utilities;

@layer tokens {
	.ncb-booking {
		--ncb-ink: var(--wp--preset--color--contrast, #1e1e1e);
		--ncb-paper: var(--wp--preset--color--base, #fdfdfd);
		/* Translucent, so it adapts to the real page background (themes without base preset). */
		--ncb-muted: color-mix(in srgb, var(--ncb-ink) 75%, transparent);
		--ncb-line: color-mix(in srgb, var(--ncb-ink) 25%, var(--ncb-paper));
		--ncb-soft: color-mix(in srgb, var(--ncb-ink) 6%, var(--ncb-paper));
		--ncb-error: #b3261e;
		--ncb-font: var(--wp--preset--font-family--body, inherit);
		--ncb-radius: 0.375rem;
		--ncb-gap: 1rem;
		--ncb-target: 2.75rem;
	}
}

@layer reset {
	.ncb-booking *,
	.ncb-booking *::before,
	.ncb-booking *::after {
		box-sizing: border-box;
	}

	.ncb-booking [x-cloak] {
		display: none !important;
	}
}

@layer base {
	.ncb-booking {
		container-type: inline-size;
		font-family: var(--ncb-font);
		color: var(--ncb-ink);
		max-width: 52rem;
	}

	.ncb-booking :focus-visible {
		outline: 3px solid currentColor;
		outline-offset: 2px;
	}

	/* Headings receive focus only so screen readers announce the new step; they are not
	   operable, so no focus ring (WCAG 2.4.7 applies to interactive elements). */
	.ncb-booking .ncb-heading:focus,
	.ncb-booking .ncb-subheading:focus {
		outline: none;
	}

	.ncb-booking button {
		font: inherit;
	}
}

@layer components {
	/*
	 * Layered rules lose against any unlayered theme rule, whatever their specificity. The
	 * declarations marked !important carry meaning (selected state, contrast of controls, size
	 * of touch targets, list and table resets); important declarations in a layer win against
	 * normal theme declarations, as CSS intends. Everything else stays overridable. Sites adjust
	 * colours through the --ncb-* tokens.
	 */
	.ncb-meta,
	.ncb-timezone,
	.ncb-required-note,
	.ncb-hint--small {
		color: var(--ncb-muted);
		font-size: 0.9em;
	}

	.ncb-picker {
		display: grid;
		gap: calc(var(--ncb-gap) * 1.5);
		margin-block: var(--ncb-gap);
	}

	@container (min-width: 40rem) {
		.ncb-picker {
			grid-template-columns: minmax(18rem, 1.3fr) 1fr;
			align-items: start;
		}
	}

	.ncb-month-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ncb-gap);
	}

	.ncb-month {
		margin: 0;
		font-size: 1.1em;
		text-transform: capitalize;
	}

	.ncb-icon-button,
	.ncb-day,
	.ncb-slot {
		min-width: var(--ncb-target);
		min-height: var(--ncb-target) !important;
		margin: 0 !important;
		border: 1px solid var(--ncb-line) !important;
		border-radius: var(--ncb-radius) !important;
		background: var(--ncb-paper) !important;
		color: var(--ncb-ink) !important;
		box-shadow: none !important;
		text-transform: none !important;
		cursor: pointer;
	}

	.ncb-icon-button {
		font-size: 1.4em;
		line-height: 1;
	}

	.ncb-icon-button:disabled {
		opacity: 0.35;
		cursor: not-allowed;
	}

	.ncb-month-grid {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0.25rem;
		margin-block: 0.5rem;
		table-layout: fixed;
	}

	.ncb-month-grid,
	.ncb-month-grid th,
	.ncb-month-grid td {
		border: 0 !important;
		background: transparent !important;
	}

	.ncb-month-grid th {
		padding: 0.25rem 0 !important;
		font-size: 0.8em;
		font-weight: 600;
		color: var(--ncb-muted);
		text-align: center;
	}

	.ncb-month-grid abbr {
		text-decoration: none !important;
		border: 0 !important;
		cursor: default;
	}

	.ncb-month-grid td {
		padding: 0 !important;
		text-align: center;
	}

	.ncb-day {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* Shrinks to the column on narrow screens (320 px); 44 px high stays far above 24 px. */
		min-width: 0;
		width: 100%;
		padding: 0 !important;
		font-weight: 600;
		border-color: var(--ncb-ink) !important;
	}

	.ncb-day--off {
		border-color: transparent !important;
		background: transparent !important;
		font-weight: 400;
		color: var(--ncb-muted) !important;
		cursor: default;
	}

	.ncb-day[aria-pressed="true"],
	.ncb-day:not(.ncb-day--off):hover,
	.ncb-slot:hover {
		background: var(--ncb-ink) !important;
		color: var(--ncb-paper) !important;
	}

	.ncb-status {
		min-height: 1.5em;
		color: var(--ncb-muted);
	}

	.ncb-subheading {
		margin-top: 0;
		font-size: 1.05em;
	}

	.ncb-slot-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
		gap: 0.5rem;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.ncb-slot-list li {
		margin: 0 !important;
		padding: 0 !important;
	}

	.ncb-slot-list li::before,
	.ncb-slot-list li::marker {
		content: none !important;
	}

	.ncb-slot {
		width: 100%;
		font-weight: 600;
	}

	.ncb-link-button {
		padding: 0.25rem 0 !important;
		border: 0 !important;
		background: none !important;
		color: inherit !important;
		text-decoration: underline !important;
		cursor: pointer;
		min-height: 2rem;
	}

	.ncb-summary {
		padding: var(--ncb-gap);
		border-radius: var(--ncb-radius);
		background: var(--ncb-soft);
		margin-block: var(--ncb-gap);
	}

	.ncb-summary p {
		margin: 0 0 0.5rem;
	}

	.ncb-form {
		display: grid;
		gap: var(--ncb-gap);
		max-width: 36rem;
	}

	.ncb-field label {
		display: block;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	.ncb-field input,
	.ncb-field textarea {
		width: 100%;
		min-height: var(--ncb-target);
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--ncb-muted);
		border-radius: var(--ncb-radius);
		background: var(--ncb-paper);
		color: var(--ncb-ink);
		font: inherit;
	}

	.ncb-field [aria-invalid="true"] {
		border: 2px solid var(--ncb-error);
	}

	.ncb-hint {
		margin: 0 0 0.35rem;
	}

	.ncb-error {
		margin: 0.25rem 0 0;
		color: var(--ncb-error);
		font-weight: 600;
	}

	.ncb-error:empty {
		display: none;
	}

	.ncb-alert {
		padding: 0.75rem var(--ncb-gap);
		border-left: 4px solid var(--ncb-error);
		background: var(--ncb-soft);
	}

	.ncb-privacy {
		font-size: 0.9em;
	}

	.ncb-submit {
		justify-self: start;
		min-height: var(--ncb-target);
		cursor: pointer;
	}

	.ncb-submit:disabled {
		opacity: 0.6;
		cursor: progress;
	}

	.ncb-confirmation {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 0.25rem var(--ncb-gap);
	}

	.ncb-confirmation dt {
		font-weight: 600;
	}

	.ncb-confirmation dd {
		margin: 0;
	}

	/* Cancellation page ([nc_booking_cancel]). */
	.ncb-cancel__details {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 0.25rem 1rem;
	}

	.ncb-cancel__details dt {
		font-weight: 600;
	}

	.ncb-cancel__details dd {
		margin: 0;
	}

	.ncb-notice {
		padding: 0.75rem 1rem;
		border-left: 4px solid currentColor;
	}
}

@layer utilities {
	/* Honeypot: out of sight for people, still in the DOM for bots. */
	.ncb-hp {
		position: absolute !important;
		left: -10000px !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	@media (prefers-reduced-motion: reduce) {
		.ncb-booking * {
			transition: none !important;
			animation: none !important;
		}
	}
}