/*
 * The Book a space page (page-templates/book.php): the pink card, the steps,
 * the calendar of free days, the free times, the chips, the help when a
 * space is too small, the check-and-send step and the pages after sending.
 * The fields themselves use the form styles in components.css. Loaded on
 * that page only (inc/assets.php).
 *
 * Without JavaScript the form is one long page: the native date box and
 * time lists show, the steps' Continue buttons and the calendar do not.
 */

.book {
	background: var(--paper);
	color: var(--ink);
}

/* One centred column up to 1000px; two columns above it, the space on the
   left staying in view as the form scrolls, the pair centred in the page. */
.book__wrap {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	max-width: 42rem;
	margin: clamp(1.375rem, 3vw, 2.75rem) auto 0;
}

/* The page's label and its rule as wide as the form (and the space beside it), not the whole page. */
.book .section__label {
	max-width: 42rem;
	margin-inline: auto;
}

.book__aside {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.book__main {
	min-width: 0;
}

/* The space's card, as on the floor plan (sections.css: .map__card), only
   where there is room beside the form. One per space; the chosen one shows. */
.book__cards {
	display: none;
}

.book__cards .map__card:not(.is-active) {
	display: none;
}

@media (min-width: 1000px) {
	.book__wrap {
		grid-template-columns: minmax(16rem, 24rem) minmax(0, 46rem);
		justify-content: center;
		align-items: start;
		gap: clamp(2rem, 5vw, 5rem);
		max-width: none;
	}

	/* The two columns at their widest, and the gap between them. */
	.book .section__label {
		max-width: calc(70rem + clamp(2rem, 5vw, 5rem));
	}

	.book__aside {
		position: sticky;
		top: calc(var(--header) + 1.5rem);
	}

	.admin-bar .book__aside {
		top: calc(var(--header) + var(--wp-admin--admin-bar--height, 32px) + 1.5rem);
	}

	.book__cards {
		display: grid;
	}
}

/* With no space chosen: the list of spaces, each a link to the page with it chosen. */
.book-choose {
	display: grid;
	gap: 1rem;
}

/* "Not sure which space?": a day, a time and how many, then the spaces free then. */
.book-find {
	border: 1px dashed rgb(17 28 29 / 0.45);
	background: rgb(255 255 255 / 0.6);
}

.book-find[open] {
	border-style: solid;
	border-color: var(--ink);
}

.book-find summary {
	padding: 0.75rem 0.875rem;
	font: 700 1.0625rem/1.25 var(--m);
	letter-spacing: -0.015em;
	cursor: pointer;
}

.book-find summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.book-find__form,
.book-find__results {
	display: grid;
	gap: 0.75rem;
	padding: 0 0.875rem 1rem;
}

.book-find__form .book-primary {
	justify-self: start;
}

.book-find__results {
	padding-top: 1rem;
	border-top: 1px solid var(--ink-rule);
	font: 400 0.9375rem/1.45 var(--m);
}

.book-find__results:focus {
	outline: none;
}

.book-find__results h3,
.book-find__results p {
	margin: 0;
}

.book-find__results h3 {
	font: 700 1.0625rem/1.25 var(--m);
	letter-spacing: -0.015em;
}

.book-find__note {
	font: 500 0.8125rem/1.45 var(--g);
	color: var(--ink-mute);
}

/* Only one of these shows: the script's extras, or the native stand-ins. */
html:not(.js) .js-only {
	display: none;
}

.book-form.is-steps .book-native {
	display: none;
}

/* With the script, the free times have their own heading ("Free in the Kinnaird Hall on Sat 7 Nov"), so not "What time?" too. */
.book-form.is-steps #book-time-label {
	display: none;
}

/* Questions that only apply sometimes: without the script, they always show. base.css hides
   [hidden] with !important, so only !important can show them; it applies only without the script. */
html:not(.js) .book-when[hidden] {
	display: grid !important;
}

html:not(.js) label.book-when[hidden],
html:not(.js) p.book-when[hidden] {
	display: flex !important;
}

/* ---------- The card: the space, and the choices so far ---------- */
.book-card {
	display: grid;
	gap: 0.5rem;
	padding: 1.125rem 1.25rem 1.25rem;
	background: var(--pink);
	color: var(--ink);
}

.book-card__label {
	margin: 0;
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #4a1030;
}

.book-card__title {
	margin: 0;
	font: 700 clamp(1.75rem, 5vw, 2.75rem)/1 var(--m);
	letter-spacing: -0.03em;
}

.book-card__choice {
	margin: 0;
	font: 600 0.9375rem/1.4 var(--m);
}

.book-card__choice.is-empty {
	font-weight: 500;
	color: #4a1030;
}

.book-card__choice:empty {
	display: none;
}

/* When, What and Cost: a small label, then the line, under a thin rule. */
.book-card__lines {
	display: grid;
	gap: 0.375rem;
	margin: 0.25rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid rgb(17 28 29 / 0.25);
}

.book-card__line {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: baseline;
}

.book-card__line dt {
	font: 600 0.625rem/1.6 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #4a1030;
}

.book-card__line dd {
	margin: 0;
	font: 600 0.9375rem/1.4 var(--m);
	overflow-wrap: anywhere;
}

.book-card__line dd.is-empty {
	font-weight: 500;
	color: #4a1030;
}

@media (min-width: 1000px) {
	.book-card__line dd {
		font-size: 1.0625rem;
	}
}

.book-card__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.book-card__acts:empty {
	display: none;
}

.book-linkbtn {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: 600 0.875rem/1.3 var(--m);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

/* Picking another space, inside the card. */
.book-chooser {
	display: grid;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.book-chooser button,
.book-chooser a {
	display: grid;
	gap: 0.25rem;
	width: 100%;
	padding: 0.75rem 0.875rem;
	background: rgb(255 255 255 / 0.6);
	border: 1px solid rgb(17 28 29 / 0.3);
	color: var(--ink);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.book-chooser a:hover,
.book-chooser button:hover {
	border-color: var(--ink);
}

.book-chooser button[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.book-chooser__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.125rem 1rem;
}

.book-chooser strong {
	font: 700 1.0625rem/1.2 var(--m);
	letter-spacing: -0.015em;
}

.book-chooser .cap {
	font: 600 0.75rem/1.4 var(--g);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.book-chooser small {
	display: block;
	font: 500 0.75rem/1.4 var(--g);
	opacity: 0.9;
}

/* ---------- Progress ---------- */
.book-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-steps li {
	padding-top: 0.625rem;
	border-top: 2px solid var(--ink-rule);
	font: 600 0.625rem/1.4 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.book-steps li.is-done,
.book-steps li.is-current {
	border-color: var(--ink);
}

.book-steps li.is-current {
	color: var(--ink);
}

.book-steps li button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.book-steps li button:disabled {
	cursor: default;
}

/* Green: now. */
.book-steps li.is-current button::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--green);
}

.book-steps li.is-done button::after {
	content: "✓";
}

/* ---------- Steps ---------- */
.book-form {
	gap: clamp(1.25rem, 3vw, 2rem);
}

.book-step {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.5rem);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.book-step legend {
	padding: 0;
}

/* A step just arrived at settles in, rather than the page scrolling to it (booking.js). */
@media (prefers-reduced-motion: no-preference) {
	.book-step.is-entering {
		animation: book-step-in 0.3s ease-out;
	}

	@keyframes book-step-in {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}
	}
}

.book-step__title {
	margin: 0 0 0.25rem;
	font: 700 clamp(1.5rem, 4.5vw, 2.125rem)/1.05 var(--m);
	letter-spacing: -0.03em;
}

.book-step__title:focus {
	outline: none;
}

.book-lede {
	max-width: 34rem;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-mute);
}

/* A label that heads a group rather than one box. */
.form__field .form__label {
	font: 600 0.625rem/1.5 var(--g);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* On the booking form, each question in sentence case at reading size, not the small capitals of other forms. */
.book-form .form__field > label:not(.book-check),
.book-form .form__field > .form__label {
	font: 600 1rem/1.3 var(--m);
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--ink);
}

/* Two boxes side by side (From and Until, Chairs and Tables): a little smaller. */
.book-form .form__row .form__field > label {
	font-size: 0.9375rem;
}

/* "Optional", beside the question, for everyone; a no-break space before it
   (booking-form.php) keeps it from a line of its own. */
.book-opt {
	margin-left: 0.25rem;
	font: 400 0.875rem/1 var(--m);
	color: var(--ink-mute);
}

/* Room between a question's heading, its box and the notes under it. */
.book-form .form__field {
	gap: 0.625rem;
}

/* A question that follows from the answer above it (insurance, PVG, the coach, the weeks). */
.book-follow {
	margin-top: 0.625rem;
}

/* From and Until, Chairs and Tables: side by side at every width, and only as wide as they need. */
.book-form .book-times,
.book-form .book-counts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	max-width: 28rem;
}

.book-form .book-counts {
	max-width: 20rem;
}

.book-form .book-short {
	max-width: 10rem;
}

.book-form select:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Tick boxes and chips: not the full-width boxes components.css gives inputs.
   The box is as tall as the label's first line, so the two sit level. */
.book-form .form__field > label.book-check,
.book-check {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font: 400 0.9375rem/1.375rem var(--m);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	cursor: pointer;
}

.book-form input[type="checkbox"] {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	accent-color: var(--ink);
}

/* "I would like a screen": clear of the boxes above it. */
.book-form .form__field > label.book-check--apart {
	margin-top: 0.75rem;
}

/* Questions and notes that appear after an answer fade in rather than snap (booking.js). */
@media (prefers-reduced-motion: no-preference) {
	.is-appearing {
		animation: book-appear 0.18s ease-out;
	}

	@keyframes book-appear {
		from {
			opacity: 0;
			transform: translateY(-0.25rem);
		}
	}
}

.book-step__sub {
	margin: 0;
	font: 700 1.0625rem/1.25 var(--m);
	letter-spacing: -0.015em;
}

.book-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.book-chips--grow .book-chip {
	flex: 1 1 auto;
}

.book-chip {
	position: relative;
	display: flex;
}

.book-form .book-chip input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.book-chip label {
	flex: 1 1 auto;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	background: #fff;
	border: 1px solid var(--ink-rule);
	border-bottom: 2px solid var(--ink);
	color: var(--ink);
	font: 600 0.9375rem/1.2 var(--m);
	letter-spacing: 0;
	text-transform: none;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.book-chips--grow .book-chip label {
	justify-content: center;
	text-align: center;
}

.book-chip input:checked + label {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.book-chip input:focus-visible + label {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.book-chips[aria-invalid="true"] label {
	border-color: #b3124f;
	border-bottom-width: 3px;
}

/* ---------- The calendar ---------- */
.book-cal {
	padding: 0.875rem;
	background: #fff;
	border: 1px solid var(--ink-rule);
	border-bottom: 2px solid var(--ink);
}

.book-cal:empty {
	display: none;
}

.book-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.book-cal__head h3 {
	margin: 0;
	font: 700 1.0625rem/1.2 var(--m);
	letter-spacing: -0.015em;
}

.book-cal__nav {
	display: flex;
	gap: 0.25rem;
}

.book-cal__nav button {
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: 1px solid var(--ink-rule);
	color: var(--ink);
	font: 600 1.125rem/1 var(--g);
	cursor: pointer;
}

.book-cal__nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

.book-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.25rem;
}

.book-cal__dow {
	text-align: center;
	font: 600 0.625rem/2 var(--g);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.book-cal__day {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 2.5rem;
	padding: 0 0 0.375rem;
	aspect-ratio: 1;
	background: none;
	border: 1px solid transparent;
	color: var(--ink);
	font: 500 0.9375rem/1 var(--g);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.book-cal__day.is-today {
	border-color: var(--ink-rule);
}

.book-cal__day:disabled {
	color: var(--mute);
	cursor: default;
}

.book-cal__day:disabled.is-full {
	text-decoration: line-through;
}

.book-cal__day:disabled.is-out {
	opacity: 0.4;
}

.book-cal__day[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.book-cal__day.is-empty {
	visibility: hidden;
}

/* Under each date: how much of the day is free, in green on a grey line. */
.book-cal__free {
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 0.3125rem;
	height: 3px;
	background: var(--ink-rule);
}

.book-cal__free b {
	display: block;
	height: 100%;
	background: #2b8a3e;
}

.book-cal__day[aria-pressed="true"] .book-cal__free {
	background: rgb(245 243 233 / 0.3);
}

.book-cal__day[aria-pressed="true"] .book-cal__free b {
	background: var(--green);
}

/* A fully booked day: the date struck through, and a small cross where the line would be. */
.book-cal__x {
	position: absolute;
	left: 50%;
	bottom: 0.1875rem;
	width: 7px;
	height: 7px;
	transform: translateX(-50%);
}

.book-cal__x::before,
.book-cal__x::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 1.5px;
	height: 100%;
	background: currentColor;
	transform: rotate(45deg);
}

.book-cal__x::after {
	transform: rotate(-45deg);
}

/* The key: one line each. */
.book-cal__key {
	display: grid;
	gap: 0.25rem;
	margin: 0.625rem 0 0;
	padding: 0;
	list-style: none;
	font: 500 0.75rem/1.4 var(--g);
	color: var(--ink-mute);
}

.book-cal__key li {
	display: flex;
	align-items: center;
}

.book-cal__keybar {
	flex: none;
	width: 1rem;
	height: 3px;
	margin-right: 0.375rem;
	background: #2b8a3e;
}

.book-cal__key .book-cal__x {
	position: relative;
	left: auto;
	bottom: auto;
	flex: none;
	width: 8px;
	height: 8px;
	margin: 0 0.6875rem 0 0.25rem;
	transform: none;
	color: var(--ink);
}

/* ---------- The chosen day as a bar: booked, free and the time chosen ---------- */
.book-gaps {
	display: grid;
	gap: 0.75rem;
}

.book-day {
	display: grid;
	gap: 0.375rem;
}

.book-day__bar {
	position: relative;
	height: 2.75rem;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ink-rule);
}

.book-day__booked {
	position: absolute;
	top: 0;
	bottom: 0;
	background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, #d9d5c3 6px 12px);
}

.book-day__pick {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--pink);
	border-inline: 2px solid var(--ink);
}

.book-day__scale {
	position: relative;
	height: 1rem;
	font: 500 0.6875rem/1 var(--g);
	font-variant-numeric: tabular-nums;
	color: var(--ink-mute);
}

.book-day__scale span {
	position: absolute;
	transform: translateX(-50%);
}

.book-day__scale span:first-child {
	transform: none;
}

.book-day__scale span:last-child {
	transform: translateX(-100%);
}

.book-day__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font: 500 0.75rem/1.4 var(--g);
	color: var(--ink-mute);
}

.book-day__key i {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	margin-right: 0.375rem;
	vertical-align: -2px;
	border: 1px solid var(--ink-rule);
}

.book-day__key .is-free {
	background: #fff;
}

.book-day__key .is-booked {
	background: repeating-linear-gradient(135deg, var(--paper-2) 0 3px, #d9d5c3 3px 6px);
}

.book-day__key .is-pick {
	background: var(--pink);
}

.book-cal__loading {
	margin: 0;
	padding: 0.5rem 0;
	font: 500 0.8125rem/1.4 var(--g);
	color: var(--ink-mute);
}

/* ---------- Free times ---------- */
.book-gaps:empty {
	display: none;
}

.book-gaps__none {
	margin: 0;
	padding: 0.75rem 1rem;
	background: var(--paper-2);
	font-size: 0.9375rem;
}

.book-rate {
	margin: 0;
	font: 400 0.9375rem/1.45 var(--m);
	color: var(--ink);
}

/* A time of their own: "Need a different time?", and what is free then. */
.book-own {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
}

.book-own:empty {
	display: none;
}

.book-own__panel {
	display: grid;
	gap: 0.75rem;
	justify-self: stretch;
	padding: 1rem 1.125rem;
	border: 1px solid var(--ink-rule);
}

.book-own__panel .form__hint {
	margin: 0;
}

.book-own__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

#book-own-result:empty {
	display: none;
}

.book-own__days {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Notices: the music licence, a space that is too small, a switched space ---------- */
.book-notice {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 1rem 1.125rem;
	background: var(--paper-2);
	border-left: 4px solid var(--ink);
	font: 400 0.9375rem/1.45 var(--m);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

.book-notice--pink {
	background: var(--pink);
}

/* A problem with the choice (weeks already booked, too many people, a time that's taken): all black. */
.book-notice--ink {
	background: var(--ink);
	border-left-color: var(--ink);
	color: var(--paper);
}

.book-notice--ink .book-alts li {
	background: rgb(245 243 233 / 0.1);
	border-color: rgb(245 243 233 / 0.18);
}

.book-notice--ink .book-alts small,
.book-notice--ink .book-alts .busy {
	color: rgb(245 243 233 / 0.72);
}

.book-notice--ink .book-btn-small {
	background: var(--paper);
	color: var(--ink);
}

.book-notice--ink .book-btn-small:hover {
	background: var(--cyan);
}

.book-notice--ink a,
.book-notice--ink .book-linkbtn {
	color: var(--paper);
}

.book-notice--ink :focus-visible {
	outline-color: var(--paper);
}

/* More people than the space holds: the heading and the Switch buttons in pink. */
.book-notice--cap h3 {
	color: var(--pink);
}

.book-notice--cap .book-btn-small {
	background: var(--pink);
	color: var(--ink);
}

.book-notice--cap .book-btn-small:hover {
	background: var(--paper);
}

/* The weekly check's list of days already booked. */
.book-weekly ul {
	margin: 0;
	padding-left: 1.125rem;
}

.book-notice h3,
.book-notice p {
	margin: 0;
}

.book-notice h3 {
	font: 700 1.0625rem/1.25 var(--m);
	letter-spacing: -0.015em;
}

.book-capacity:empty {
	display: none;
}

.book-alts {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-alts li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	padding: 0.625rem 0.75rem;
	background: #fff;
	border: 1px solid var(--ink-rule);
}

.book-alts strong {
	font: 700 0.9375rem/1.2 var(--m);
}

.book-alts small {
	display: block;
	font: 500 0.75rem/1.4 var(--g);
	color: var(--ink-mute);
}

.book-alts .busy {
	font: 500 0.8125rem/1.2 var(--g);
	color: var(--ink-mute);
}

.book-btn-small {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	min-height: 2.25rem;
	padding: 0.375rem 0.75rem;
	background: var(--ink);
	border: 0;
	color: var(--cyan);
	font: 700 0.8125rem/1 var(--m);
	cursor: pointer;
}

.book-btn-small:hover {
	background: var(--pink);
	color: var(--ink);
}

/* ---------- Actions at the foot of a step ----------
   On the left, in line with the questions, so they are where the eye already is after the last
   answer: a quiet Back first, then the way on (Continue, Send request) in ink. The same place
   on every step. On phones Continue is in the bar at the foot of the screen, and Back stays here. */
.book-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem 1rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--ink);
}

.book-acts .form__fine {
	flex: 1 1 100%;
}

.book-primary {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 3rem;
	padding: 1rem 1.375rem;
	background: var(--ink);
	border: 0;
	color: var(--cyan);
	font: 700 1rem/1 var(--m);
	text-decoration: none;
	cursor: pointer;
}

.book-primary:hover {
	background: var(--pink);
	color: var(--ink);
}

.book-back {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.875rem 1.125rem;
	background: transparent;
	border: 2px solid var(--ink-rule);
	color: var(--ink);
	font: 600 0.9375rem/1 var(--m);
	text-decoration: none;
	cursor: pointer;
}

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

/* ---------- Check and send, and the thank-you's summary ---------- */
.book-review {
	display: grid;
	gap: 1rem;
}

.book-review:empty {
	display: none;
}

.book-review section {
	display: grid;
	gap: 0.5rem;
	padding: 1rem 1.125rem;
	background: #fff;
	border: 1px solid var(--ink-rule);
}

.book-review header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.book-review h3 {
	margin: 0;
	font: 700 1rem/1.2 var(--m);
	letter-spacing: -0.015em;
}

.book-review dl {
	display: grid;
	grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: 0.9375rem;
}

.book-review dt {
	font: 600 0.625rem/1.9 var(--g);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.book-review dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------- After sending ---------- */
.book-after {
	display: grid;
	gap: 1.25rem;
}

.book-after__title {
	margin: 0;
	font: 700 clamp(1.5rem, 4.5vw, 2.125rem)/1.05 var(--m);
	letter-spacing: -0.03em;
}

.book-after__title:focus {
	outline: none;
}

.book-after__lede {
	max-width: 34rem;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-mute);
}

.book-after__hint {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ink-mute);
}

.book-after__resend {
	display: contents;
}

.book-ref {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	background: var(--ink);
	color: var(--green);
	font: 700 1.125rem/1 var(--g);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.book-next {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-next li {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.book-next b {
	display: grid;
	place-items: center;
	min-height: 2.5rem;
	padding: 0.5rem;
	background: var(--ink);
	color: var(--green);
	font: 700 1.25rem/1 var(--m);
	letter-spacing: -0.025em;
}

.book-next p {
	margin: 0;
	line-height: 1.45;
}

.book-next p strong {
	display: block;
}

/* The booking code box: the question at reading size as on the form, the box only as wide as six digits need. */
.book-code {
	gap: 1rem;
	max-width: 34rem;
}

.book-code p {
	margin: 0;
}

.book-code .form__field {
	gap: 0.625rem;
}

.book-code .form__field > label {
	font: 600 1rem/1.3 var(--m);
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--ink);
}

.book-code .book-code__input {
	max-width: 12rem;
	font: 700 1.5rem/1 var(--g);
	letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums;
}

.book-after__hint + .book-after__hint {
	margin-top: -0.75rem;
}

/* ---------- Phones: the choices so far and Continue, at the foot of the screen ----------
   Under 1000px the card is above the form and scrolls away, so a slim bar keeps the space,
   day, time and cost in sight with the step's Continue (booking.js fills it). It stands
   aside while the on-screen keyboard is up (.is-typing), and the step's own Continue stays
   hidden, so nothing moves under a finger or pointer as a box loses focus. */
.book-bar {
	display: none;
}

@media (max-width: 999px) {
	.book-form.is-steps .book-bar:not([hidden]) {
		position: sticky;
		bottom: 0;
		z-index: 5;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.75rem;
		align-items: center;
		margin-inline: calc(-1 * var(--pad));
		padding: 0.75rem var(--pad) calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--ink);
		color: var(--paper);
	}

	.book-form.is-steps .book-bar.is-typing {
		display: none;
	}

	.book-form.is-steps:has(.book-bar:not([hidden])) .book-acts--step .book-primary {
		display: none;
	}

	.book-bar__sum {
		display: grid;
		min-width: 0;
		margin: 0;
		font: 500 0.8125rem/1.3 var(--m);
	}

	.book-bar__sum > * {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.book-bar__sum strong {
		font-size: 0.9375rem;
	}

	.book-bar__sum span {
		color: var(--soft);
	}

	.book-bar__sum span:empty {
		display: none;
	}

	.book-bar .book-primary {
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0.75rem 1rem;
		background: var(--cyan);
		color: var(--ink);
	}
}

/* The script scrolls to a step or to the free times; base.css's scroll-padding keeps them clear of the sticky header. */

/* "Not sure? Just phone us and ask" (template-parts/phone-ask.php), under the card. */
.book__phone {
	padding-inline: 0.25rem;
}