/**
 * Komorebi Reservation (km-reservation): Figma "Reservation / Reserve · Details · Error ·
 * Unavailable · Success" (18:6883 …) at 1440, 834 and 390.
 *
 * Paper, padding 80 / 56 / 32. Marker 12, title 64 (44 on phone), line 15 muted, 32 apart.
 * Then the form and the "Visit details" column: 620 + 48 + 532 at 1440, 462 + 48 + 260 at
 * 834 (one width for every state, PLAN.md Q15d), stacked 48 apart at 390. On desktop the
 * visit photo grows with the form (420 / 447 / 638 high, Q15 "Visit details"); it is 320 at
 * 834 and 240 at 390. Chips, fields, buttons and the error summary come from main.css.
 */

/* ------------------------------------------------------------------ */
/* Heading                                                            */
/* ------------------------------------------------------------------ */

.km-reservation__marker {
	color: var(--km-heading);
}

.km .km-reservation__head > * + * {
	margin-top: 32px;
}

.km-reservation__lead {
	color: var(--km-muted);
	font-size: var(--km-fs-button);
	line-height: var(--km-lh-text);
}

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

.km-reservation__layout {
	display: grid;
	grid-template-columns: minmax(0, 620fr) minmax(0, 532fr);
	gap: 48px;
	align-items: stretch;
	margin-top: 32px;
}

.km-reservation__form,
.km-reservation__result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.km-reservation__form > *,
.km-reservation__result > * {
	max-width: 100%;
}

.km-reservation__form > .km-reservation__errors,
.km-reservation__form > .km-reservation__fields,
.km-reservation__form > .km-reservation__group {
	align-self: stretch;
}

/* "01 / Choose your visit", "Try another day": Shippori 24/110; "Your booking request" 36. */
.km-reservation__step {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
}

.km-reservation__step--large {
	font-size: 36px;
}

/* ------------------------------------------------------------------ */
/* Step 1: chips                                                      */
/* ------------------------------------------------------------------ */

.km-reservation__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Field label 8 above its chips (24 above the meal groups). */
.km-reservation__legend {
	display: block;
	margin: 0 0 8px;
	padding: 0;
}

.km-reservation__group--times .km-reservation__legend {
	margin-bottom: 24px;
}

.km-reservation__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.km-reservation__chips--party {
	gap: 8px;
}

.km-reservation__meal + .km-reservation__meal {
	margin-top: 16px;
}

.km-reservation__meal-label {
	margin-bottom: 8px;
}

.km-reservation__option {
	position: relative;
	display: inline-flex;
}

/* The radio stays in the accessibility tree and takes the focus; the chip shows its state. */
.km-reservation__radio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.km-reservation__radio:disabled {
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Step 2: booking lines, fields, error summary                       */
/* ------------------------------------------------------------------ */

/* "Friday 16 October · 18:00" / "2 guests · Counter seats · 60 minutes": 16/150 muted, 4 apart. */
.km-reservation__booking {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
}

/* Booked: 17/150 ink. */
.km-reservation__booking--done {
	color: var(--km-heading);
	font-size: 17px;
}

.km-reservation__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.km-reservation__errors-title {
	color: var(--km-heading);
}

.km .km-reservation__errors-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.km-reservation__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Links of this section: Noto Sans 14 ("Back to available times", "Get directions"). */
.km .km-reservation__link {
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Visit details                                                      */
/* ------------------------------------------------------------------ */

.km-reservation__visit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.km-reservation__visit > * {
	max-width: 100%;
}

/* Square corners, as in Figma; at least 420 high, growing with the form beside it. */
.km-reservation__visit-photo {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-height: 420px;
	overflow: hidden;
	background: var(--km-c-sage);
}

.km .km-reservation__visit-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.km-reservation__visit-name {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: 28px;
	line-height: 1.1;
}

.km-reservation__visit-text {
	font-size: var(--km-fs-button);
	line-height: var(--km-lh-text);
}

/* ------------------------------------------------------------------ */
/* Tablet (834) and phone (390)                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.km-reservation__layout {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.km-reservation__visit-photo {
		flex: none;
		height: 320px;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.km-reservation__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.km-reservation__visit-photo {
		height: 240px;
	}

	/* Main buttons run the full 350 width (PLAN.md Q15e); the Try again / example pair shares it. */
	.km-reservation__actions {
		align-self: stretch;
	}

	.km-reservation__actions .km-reservation__button {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 12px;
	}
}