@layer components {
	.booking-header > p:not(.label) {
		max-width: var(--measure);
		color: var(--color-muted);
	}

	/* "How booking works": the page's step-by-step instructions, folded away. */
	.how-to {
		max-width: var(--measure);
		margin-top: 1rem;
		border-top: 1px solid var(--color-rule);
	}

	.how-to summary {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding-block: 0.7rem;
		font-family: var(--font-sans);
		font-size: var(--text-small);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}

	.how-to summary::-webkit-details-marker {
		display: none;
	}

	.how-to summary .icon {
		width: 0.8rem;
		height: 0.8rem;
		transition: transform 0.15s;
	}

	.how-to[open] summary .icon {
		transform: rotate(180deg);
	}

	.how-to .typography {
		padding-bottom: 1rem;
		font-size: var(--text-small);
	}

	.how-to .typography > * {
		margin-top: 0.4em;
	}

	/* Form and price summary side by side on wide screens. */
	/* minmax(0, ...) stops a long file name widening the column past the screen. */
	.booking-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	@media (min-width: 64rem) {
		.booking-layout {
			grid-template-columns: minmax(0, 1fr) 19rem;
			align-items: start;
			gap: 3.5rem;
		}
	}

	.booking-steps {
		max-width: 46rem;
	}

	.booking-step {
		min-width: 0;
		margin: 0;
		border: 0;
		padding: 1.25rem 0 2rem;
	}

	.booking-step > * + * {
		margin-top: 1rem;
	}

	.booking-step-title {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		float: left;
		width: 100%;
		margin-bottom: 1.25rem;
		font-size: var(--text-h3);
		font-weight: 700;
		line-height: 1.2;
	}

	.booking-step-title + * {
		clear: both;
		margin-top: 0;
	}

	.booking-step-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		background: var(--color-ink);
		color: var(--color-paper);
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.booking-subtitle {
		font-size: var(--text-body);
	}

	.booking-field > * + * {
		margin-top: 0.5rem;
	}

	.booking-field p:not(.form-help) {
		font-size: var(--text-small);
		line-height: 1.5;
	}

	.booking-row {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem 1.5rem;
	}

	.booking-row select {
		min-width: 8rem;
	}

	/* Terms and Contact Permission: more space around each, as they hold the checkboxes. */
	.booking-consent {
		padding-block: 0.5rem;
	}

	.booking-consent + .booking-consent {
		margin-top: 1.5rem;
	}

	.check-row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	.booking-note {
		display: flex;
		gap: 0.6rem;
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.booking-note .icon {
		width: 1rem;
		height: 1rem;
		margin-top: 0.15rem;
	}

	/* Sizes and advert types as cards you can tap. */
	.choice-grid {
		display: grid;
		gap: 0.6rem;
	}

	@media (min-width: 40rem) {
		.choice-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.choice {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
		border: 1px solid var(--color-field);
		border-radius: 2px;
		background: var(--color-white);
		padding: 0.8rem 0.9rem;
		cursor: pointer;
		transition: border-color 0.15s, box-shadow 0.15s;
	}

	.choice:hover {
		border-color: var(--color-ink);
	}

	.choice:has(input:checked) {
		border-color: var(--color-ink);
		box-shadow: inset 0 0 0 1px var(--color-ink);
	}

	.choice:has(input:focus-visible) {
		outline: 2px solid var(--color-ink);
		outline-offset: 2px;
	}

	.choice input {
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		margin-top: 0.15rem;
		accent-color: var(--color-ink);
	}

	.choice-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.15rem 0.75rem;
		width: 100%;
		font-family: var(--font-sans);
	}

	.choice-title {
		font-size: var(--text-small);
		font-weight: 700;
		line-height: 1.3;
	}

	.choice-price {
		font-size: var(--text-small);
		font-weight: 700;
	}

	.choice-text {
		grid-column: 1 / -1;
		color: var(--color-muted);
		font-size: var(--text-label);
		line-height: 1.4;
	}

	/* Attachments. */
	.attachment-list:not(:empty) {
		margin-top: 1rem;
		border-top: 1px solid var(--color-rule);
	}

	.attachment-add {
		margin-top: 1rem;
	}

	.attachment-row {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		border-bottom: 1px solid var(--color-rule);
		padding-block: 0.6rem;
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.attachment-row .icon {
		flex: none;
	}

	.attachment-name {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.attachment-size {
		flex: none;
		color: var(--color-muted);
	}

	/* A quiet text button, so Add Attachment stays the main action. */
	.attachment-remove {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 0.35em;
		min-height: 2.25rem;
		padding-inline: 0.25rem;
		color: var(--color-muted);
		font-size: var(--text-label);
		text-decoration: underline;
		cursor: pointer;
	}

	.attachment-remove:hover {
		color: var(--color-ink);
	}

	/* The trash-can icon's own proportions, 448 by 512. */
	.attachment-remove .icon {
		width: 0.875em;
		height: 1em;
	}

	.attachment-error {
		margin-block: 0.6rem;
		color: var(--color-error);
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.booking-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	/* "Test booking" option, shown only to administrators while Test Bookings is on. */
	.booking-test {
		margin-bottom: 1rem;
	}

	/* Cloudflare Turnstile's security check, above the Purchase button. */
	.booking-turnstile {
		margin-bottom: 1rem;
		min-height: 65px;
	}

	/* Price summary: beside the form on wide screens, a bar along the bottom on phones. */
	.booking-summary {
		position: sticky;
		bottom: 0;
		z-index: 20;
		margin-inline: -1rem;
		border-top: 1px solid var(--color-ink);
		background: var(--color-panel);
		padding: 0.6rem 1rem 0.75rem;
		box-shadow: 0 -6px 18px rgb(0 0 0 / 0.08);
	}

	.booking-summary > .label,
	.booking-summary-help {
		display: none;
	}

	@media (min-width: 40rem) {
		.booking-summary {
			margin-inline: -1.5rem;
			padding-inline: 1.5rem;
		}
	}

	@media (min-width: 64rem) {
		.booking-summary {
			top: 1.5rem;
			bottom: auto;
			margin: 0;
			padding: 1.25rem;
			box-shadow: none;
		}

		.booking-summary > .label,
		.booking-summary-help {
			display: block;
		}

		.booking-summary > * + * {
			margin-top: 0.75rem;
		}
	}

	.booking-prices {
		width: 100%;
		border-collapse: collapse;
		font-family: var(--font-sans);
	}

	.booking-prices th {
		padding: 0.2rem 1rem 0.2rem 0;
		font-size: var(--text-small);
		font-weight: 500;
		text-align: left;
	}

	.booking-prices td {
		padding-block: 0.2rem;
		font-size: var(--text-small);
		font-weight: 700;
		text-align: right;
		white-space: nowrap;
	}

	.booking-total th,
	.booking-total td {
		border-top: 1px solid var(--color-rule);
		padding-top: 0.4rem;
	}

	.booking-total td {
		font-family: var(--font-serif);
		font-size: var(--text-h3);
	}

	.booking-price-message {
		margin-top: 0.4rem;
		color: var(--color-error);
		font-family: var(--font-sans);
		font-size: var(--text-label);
		line-height: 1.4;
	}

	@media not all and (min-width: 64rem) {
		.booking-prices tr:not(.booking-total) {
			display: none;
		}

		.booking-total th,
		.booking-total td {
			border-top: 0;
			padding-top: 0;
		}

		.booking-total td {
			font-size: var(--text-h3);
		}
	}

	.booking-hp {
		position: absolute;
		left: -10000px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* Confirm, payment and message pages. */
	.booking-message {
		max-width: var(--measure);
	}

	.booking-message > * + * {
		margin-top: 1rem;
	}

	.booking-message .panel {
		margin-top: 1.5rem;
	}

	.booking-details {
		width: 100%;
		border-collapse: collapse;
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.booking-details th,
	.booking-details td {
		padding-block: 0.3rem;
		border-bottom: 1px solid var(--color-rule);
		text-align: left;
		vertical-align: top;
	}

	.booking-details th {
		padding-right: 1rem;
		font-weight: 500;
		white-space: nowrap;
	}

	.booking-details td {
		font-weight: 700;
	}

	.booking-reference {
		font-family: var(--font-sans);
		font-size: var(--text-h3);
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	.booking-status {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.booking-status .icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.booking-status-success .icon {
		color: var(--color-success);
	}

	.booking-status-error .icon {
		color: var(--color-error);
	}
}