/**
 * Booking widget.
 *
 * Structure (spacing, sizes) is the widget's own and fixed — a site's page
 * rhythm is fluid and would be wrong inside a compact panel. Skin (colour,
 * typeface) defers to the suite's front-end layer, which in turn defers to the
 * theme, so the widget looks native without depending on anything.
 *
 * Every value below is a token, so a Styling setting overrides one declaration
 * scoped to `.spt-book` and cannot reach any other component on the page.
 */

.spt-book {
	/* --- Structure: ours, from the suite's 8px grid --------------------- */
	--spt-space-1: var(--sp-space-1, 0.25rem);
	--spt-space-2: var(--sp-space-2, 0.5rem);
	--spt-space-3: var(--sp-space-3, 0.75rem);
	--spt-space-4: var(--sp-space-4, 1rem);
	--spt-space-5: var(--sp-space-5, 1.5rem);
	--spt-space-6: var(--sp-space-6, 2rem);
	--spt-gap: var(--spt-space-4);

	--spt-radius: var(--sp-radius-l, 0.75rem);
	--spt-radius-sm: var(--sp-radius-m, 0.5rem);
	/* Lifts the panel off the page. Settable to `none` where the design
	   wants it flush. */
	--spt-shadow: var(--sp-shadow-m, 0 4px 12px rgb(16 24 40 / 8%));

	/* --- Component sizes: only this widget's business ------------------- */
	--spt-day: 2.25rem;
	--spt-slot-min: 4rem;
	--spt-chip-h: 1.5rem;
	--spt-qty-btn: 1.5rem;

	/* --- Skin: the theme's, through the suite layer, with fallbacks ----- */
	--spt-border-color: var(--sp-border-color, #e6e8eb);
	--spt-border: 1px solid var(--spt-border-color);
	--spt-surface: var(--sp-surface, #fff);
	--spt-surface-2: var(--sp-surface-2, #f7f5f2);
	--spt-accent: var(--sp-accent, #111827);
	--spt-accent-soft: var(--sp-accent-soft, color-mix(in srgb, var(--spt-accent) 12%, #fff));
	--spt-accent-text: var(--sp-accent-text, #fff);
	--spt-text: var(--sp-text, #1f2937);
	--spt-heading: var(--sp-heading, #111827);
	--spt-muted: var(--sp-muted, #667085);
	--spt-disabled: var(--sp-disabled, #c3c7cd);
	--spt-available: var(--sp-available, #16a34a);
	--spt-summary-gap: var(--spt-space-5);

	display: grid;
	grid-template-columns: minmax(14rem, 20rem) 1fr;
	margin: var(--spt-space-6) 0;
	color: var(--spt-text);
	background: var(--spt-surface);
	border: var(--spt-border);
	border-radius: var(--spt-radius);
	overflow: hidden;
}
/* Only the panel layout is a surface; a plain widget has nothing to lift. */
.spt-book--panel {
	box-shadow: var(--spt-shadow);
}

.spt-book--plain {
	grid-template-columns: 1fr;
	border: 0;
	border-radius: 0;
	background: none;
}

/* --- Aside ---------------------------------------------------------------- */
.spt-book__aside {
	display: flex;
	flex-direction: column;
	gap: var(--spt-gap);
	padding: var(--spt-space-6);
	border-right: var(--spt-border);
}
.spt-book__title {
	margin: 0;
	color: var(--spt-heading);
	font-size: 1.5rem;
	line-height: 1.25;
}
.spt-book__subtitle,
.spt-book__footnote {
	margin: 0;
	color: var(--spt-muted);
	font-size: 0.9375rem;
}
.spt-book__footnote {
	margin-top: auto;
}
.spt-book__summary:not(:empty) {
	margin-top: var(--spt-summary-gap);
}

/* --- Main column ---------------------------------------------------------- */
.spt-book__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.spt-book__head {
	padding: var(--spt-space-4) var(--spt-space-6);
	border-bottom: var(--spt-border);
}
.spt-book__steptitle {
	margin: 0;
	color: var(--spt-heading);
	font-size: 1.0625rem;
}
.spt-book__body {
	display: flex;
	flex-direction: column;
	gap: var(--spt-gap);
	padding: var(--spt-space-6);
}
.spt-book__foot {
	margin-top: auto;
	padding: var(--spt-space-4) var(--spt-space-6);
	border-top: var(--spt-border);
}
.spt-book__back {
	padding: 0;
	color: var(--spt-heading);
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
.spt-book__back:hover {
	color: var(--spt-accent);
}

.spt-book__empty,
.spt-book__error,
.spt-book__loading,
.spt-book__summary {
	margin: 0;
	color: var(--spt-muted);
}

/* --- Running summary ------------------------------------------------------ */
/* What has been decided so far, including the steps the visitor was never
   asked because there was only one answer. */
.spt-summary {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.spt-summary--inline {
	flex-flow: row wrap;
	gap: var(--spt-space-2) var(--spt-space-5);
	padding-bottom: var(--spt-space-4);
	border-bottom: var(--spt-border);
}
.spt-summary__row {
	display: flex;
	align-items: center;
	gap: var(--spt-space-2);
	font-size: 0.9375rem;
	color: var(--spt-heading);
}
.spt-summary__icon {
	display: inline-flex;
	flex: none;
	width: 1rem;
	height: 1rem;
	color: inherit;
}
.spt-summary__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}
.spt-summary__value {
	min-width: 0;
}

/* --- Places left ---------------------------------------------------------- */
.spt-places {
	display: flex;
	align-items: center;
	gap: var(--spt-space-2);
	margin: 0;
	font-size: 0.9375rem;
	color: var(--spt-muted);
}
.spt-places__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--spt-available);
}
.spt-places.is-full .spt-places__dot {
	background: var(--spt-disabled);
}

/* --- Choice lists (venue, event) ------------------------------------------ */
.spt-book__choices {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-2);
}
.spt-choice {
	display: flex;
	align-items: center;
	gap: var(--spt-space-4);
	width: 100%;
	padding: var(--spt-space-4);
	text-align: left;
	font: inherit;
	color: inherit;
	background: var(--spt-surface);
	border: var(--spt-border);
	border-radius: var(--spt-radius-sm);
	cursor: pointer;
}
.spt-choice:hover {
	border-color: var(--spt-accent);
}
.spt-choice__info {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-1);
	min-width: 0;
}
.spt-choice__name {
	font-weight: 600;
	color: var(--spt-heading);
}
.spt-choice__meta {
	font-size: 0.875rem;
	color: var(--spt-muted);
}
.spt-choice__poster {
	width: 3rem;
	height: 4rem;
	object-fit: cover;
	border-radius: var(--spt-radius-sm);
	flex: none;
}
/* A venue without an image is a stacked name + address; with one it reads
   like the event rows. */
.spt-choice:not(.spt-choice--event):not(.spt-choice--image) {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spt-space-1);
}
.spt-choice__poster--wide {
	width: 5rem;
	height: 3.5rem;
}

/* --- Month calendar ------------------------------------------------------- */
.spt-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spt-space-4);
	margin-bottom: var(--spt-space-4);
}
.spt-cal__month {
	color: var(--spt-heading);
	font-size: 1.5rem;
}
.spt-cal__year {
	color: var(--spt-muted);
}
.spt-cal__navs {
	display: flex;
	gap: var(--spt-space-2);
}
.spt-cal__nav {
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--spt-heading);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.spt-cal__nav:hover {
	background: var(--spt-surface-2);
}

.spt-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--spt-space-2);
	justify-items: center;
}
.spt-cal__grid--dow {
	margin-bottom: var(--spt-space-2);
	padding-bottom: var(--spt-space-2);
	border-bottom: var(--spt-border);
}
.spt-cal__dow {
	font-size: 0.875rem;
	color: var(--spt-muted);
}
.spt-cal__dow.is-weekend {
	color: var(--spt-accent);
}

.spt-cal__day {
	width: var(--spt-day);
	height: var(--spt-day);
	font: inherit;
	color: var(--spt-disabled);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: default;
}
.spt-cal__day.is-outside {
	visibility: hidden;
}
/* Bookable days are the only ones that look clickable. */
.spt-cal__day.is-open {
	color: var(--spt-heading);
	background: var(--spt-surface-2);
	cursor: pointer;
}
.spt-cal__day.is-open:hover {
	background: var(--spt-accent-soft);
}
.spt-cal__day.is-today {
	box-shadow: inset 0 0 0 1px var(--spt-border-color);
}
.spt-cal__day.is-selected,
.spt-cal__day.is-selected:hover {
	color: var(--spt-accent-text);
	background: var(--spt-accent);
}

/* --- Times ---------------------------------------------------------------- */
.spt-slots__head {
	display: flex;
	align-items: center;
	gap: var(--spt-space-4);
	color: var(--spt-muted);
	font-size: 0.9375rem;
}
.spt-slots__head::before,
.spt-slots__head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--spt-border-color);
}
/* A grid rather than a wrapping row: every time reads the same width, so a
   day's slots line up in columns instead of ragging. */
.spt-slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--spt-slot-min), 1fr));
	gap: var(--spt-space-2);
}
.spt-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spt-space-1);
	padding: var(--spt-space-2) var(--spt-space-4);
	font: inherit;
	color: var(--spt-heading);
	background: var(--spt-surface-2);
	border: 1px solid transparent;
	border-radius: var(--spt-radius-sm);
	cursor: pointer;
}
.spt-slot:hover {
	border-color: var(--spt-accent);
}
.spt-slot.is-selected {
	color: var(--spt-accent-text);
	background: var(--spt-accent);
}
.spt-slot.is-soldout {
	color: var(--spt-disabled);
	cursor: not-allowed;
}
.spt-slot__time {
	font-size: 0.75rem;
	line-height: 1;
	font-weight: 600;
}
.spt-slot__meta {
	font-size: 0.6rem;
	color: var(--spt-muted);
}
.spt-slot.is-selected .spt-slot__meta {
	color: inherit;
	opacity: 0.75;
}

/* --- Ticket types --------------------------------------------------------- */
.spt-types {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-2);
}
.spt-type {
	display: flex;
	align-items: center;
	gap: var(--spt-space-4);
	padding: var(--spt-space-2) var(--spt-space-4);
	border: var(--spt-border);
	border-radius: var(--spt-radius-sm);
}
.spt-type__info {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-1);
	flex: 1;
	min-width: 0;
}
.spt-type__name {
	color: var(--spt-heading);
}
.spt-type__desc {
	font-size: 0.75rem;
	color: var(--spt-muted);
}
.spt-type__price {
	font-weight: 600;
	color: var(--spt-heading);
}

.spt-qty {
	display: flex;
	align-items: center;
	gap: var(--spt-space-2);
	flex: none;
}
.spt-qty__btn {
	width: var(--spt-qty-btn);
	height: var(--spt-qty-btn);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1;
	color: var(--spt-heading);
	background: var(--spt-surface-2);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.spt-qty__btn:hover:not(:disabled) {
	background: var(--spt-accent-soft);
}
.spt-qty__btn:disabled {
	color: var(--spt-disabled);
	cursor: not-allowed;
}
.spt-qty__value {
	min-width: 1.5rem;
	text-align: center;
	font-weight: 600;
}

/* --- Language picker ------------------------------------------------------
   One chip per person, added from a dropdown: nine languages as nine steppers
   filled the panel, and this stays one field however many exist. */
.spt-type__wrap {
	display: flex;
	flex-direction: column;
	border: var(--spt-border);
	border-radius: var(--spt-radius-sm);
}
.spt-type__wrap .spt-type {
	border: 0;
}
.spt-langs {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-2);
	padding: var(--spt-space-3) var(--spt-space-4);
	border-top: 1px dashed var(--spt-border-color);
}
.spt-langs__head {
	display: flex;
	align-items: baseline;
	gap: var(--spt-space-2);
}
.spt-langs__label {
	font-size: 0.875rem;
	color: var(--spt-muted);
}
.spt-langs__left {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--spt-accent);
}

/* Chips and the dropdown share one frame, so it reads as a single field. */
.spt-langfield {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spt-space-1);
	padding: var(--spt-space-1) var(--spt-space-2);
	background: var(--spt-surface);
	border: var(--spt-border);
	border-radius: var(--spt-radius-sm);
}
.spt-langfield:focus-within {
	border-color: var(--spt-accent);
}
/* Chips and the dropdown share one height, so the field does not resize as
   the last chip is added and the dropdown disappears. */
.spt-langchip {
	display: inline-flex;
	align-items: center;
	gap: var(--spt-space-1);
	height: var(--spt-chip-h);
	padding: 0 var(--spt-space-1) 0 var(--spt-space-2);
	font-size: 0.75rem;
	background: var(--spt-surface-2);
	border-radius: 999px;
}
.spt-langchip__x {
	width: 1rem;
	height: 1rem;
	font-size: 0.875rem;
	font: inherit;
	line-height: 1;
	color: var(--spt-muted);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.spt-langchip__x:hover {
	color: var(--spt-heading);
	background: rgb(0 0 0 / 6%);
}
.spt-langfield__select {
	flex: 1;
	min-width: 8rem;
	height: var(--spt-chip-h);
	padding: 0 var(--spt-space-1);
	font: inherit;
	font-size: 0.75rem;
	line-height: var(--spt-chip-h);
	color: var(--spt-muted);
	background: none;
	border: 0;
}
.spt-langfield__select:focus {
	outline: none;
}
.spt-langs__fill {
	align-self: flex-start;
	padding: 0;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--spt-accent);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* --- Notes and confirmations ---------------------------------------------
   What the event warns about, and what the buyer must agree to. */
.spt-notes {
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-1);
	padding: var(--spt-space-3) var(--spt-space-4);
	background: var(--spt-surface-2);
	border-radius: var(--spt-radius-sm);
}
.spt-notes--door {
	background: none;
	border: 1px dashed var(--spt-border-color);
}
.spt-notes__title {
	font-size: var(--spt-text-xs, 0.75rem);
	font-weight: 600;
	color: var(--spt-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.spt-notes__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spt-space-1);
}
.spt-note {
	display: flex;
	align-items: baseline;
	gap: var(--spt-space-2);
	font-size: 0.875rem;
}
.spt-note__icon {
	flex: none;
}
.spt-confirm {
	display: flex;
	align-items: center;
	gap: var(--spt-space-2);
	font-size: 0.875rem;
	cursor: pointer;
}

/* --- Call to action ------------------------------------------------------- */
.spt-book__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spt-space-4);
	flex-wrap: wrap;
	padding-top: var(--spt-space-4);
	border-top: var(--spt-border);
}
.spt-book__total {
	display: flex;
	align-items: baseline;
	gap: var(--spt-space-2);
}
.spt-book__totallabel {
	color: var(--spt-muted);
}
.spt-book__totalvalue {
	color: var(--spt-heading);
	font-size: 1.25rem;
}
.spt-book__submit {
	padding: var(--spt-space-3) var(--spt-space-5);
	font: inherit;
	font-weight: 600;
	color: var(--spt-accent-text);
	background: var(--spt-accent);
	border: 0;
	border-radius: var(--spt-radius-sm);
	cursor: pointer;
}
.spt-book__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* --- Narrow screens ------------------------------------------------------- */
@media (max-width: 48rem) {
	.spt-book {
		grid-template-columns: 1fr;
	}
	.spt-book__aside {
		padding: var(--spt-space-5);
		border-right: 0;
		border-bottom: var(--spt-border);
	}
	.spt-book__head,
	.spt-book__body,
	.spt-book__foot {
		padding-left: var(--spt-space-4);
		padding-right: var(--spt-space-4);
	}
	.spt-book {
		--spt-day: 2.25rem;
	}
}