/*
 * 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;
}

.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;
	}

	.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;
}

/* 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;
}

/* Questions that only apply sometimes: without the script, they always show. */
html:not(.js) .book-when[hidden] {
	display: grid;
}

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

/* ---------- 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.05em;
}

.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.02em;
}

.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.125rem, 2vw, 1.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.045em;
}

.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);
}

/* Tick boxes and chips: not the full-width boxes components.css gives inputs. */
.book-check {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font: 400 0.9375rem/1.45 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.1rem 0 0;
	padding: 0;
	border: 0;
	accent-color: var(--ink);
}

.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.02em;
}

.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 {
	display: grid;
	place-items: center;
	min-height: 2.5rem;
	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;
}

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

.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: 500 0.8125rem/1.45 var(--g);
	color: var(--ink-mute);
}

/* ---------- 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);
}

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

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

.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 {
	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: the main one bottom right, a quiet Back beside it ---------- */
.book-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem 1rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--ink);
}

.book-acts .book-back {
	order: 1;
}

.book-acts .book-primary {
	order: 2;
}

.book-acts .form__fine {
	order: 3;
	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.02em;
}

.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.045em;
}

.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.04em;
}

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

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

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