/**
 * Booking page shell layout — mobile-first, no horizontal scroll at any
 * width, works inside an arbitrary theme content container (does not
 * assume a specific max-width from Astra/Elementor; sets its own sane
 * max-width instead so it looks correct regardless of the surrounding
 * page-builder container width).
 */

.tsc-booking-app {
	width: 100%;
	max-width: 860px;
	min-width: 0;
	margin-inline: auto;
	/* The page's own column already has side padding; padding again here
	   only squeezed the fields on phones. */
	padding-inline: 0;
	padding-block: var(--tscb-space-4);
	/* The form lays itself out by the width of the space it is placed in
	   (a full page, or a side column of the theme), not by the screen width,
	   and its contents (a drop-down sizes itself to its longest service
	   name) can never widen that space: no sideways scrolling on phones. */
	container-type: inline-size;
	container-name: tscb;
}

.tscb-header {
	margin-bottom: var(--tscb-space-6);
	text-align: left;
}

.tscb-header__intro {
	color: var(--tscb-color-text-muted);
	max-width: 60ch;
}

/* --- Single-page form sections (single-page form redesign) --- */
.tscb-section {
	background: var(--tscb-color-surface);
	border: 1px solid var(--tscb-color-border);
	border-radius: var(--tscb-radius-lg);
	padding: var(--tscb-space-5) var(--tscb-space-4);
	scroll-margin-top: var(--tscb-space-6);
}

.tscb-section + .tscb-section {
	margin-top: var(--tscb-space-4);
}

.tscb-section > h2 {
	font-size: var(--tscb-font-size-xl);
	margin: 0 0 var(--tscb-space-3);
}

.tscb-section:focus {
	outline: none;
}

.tscb-section--submit {
	background: var(--tscb-color-background);
	border-width: 2px;
	border-color: var(--tscb-color-primary);
}

@container tscb (min-width: 520px) {
	.tscb-section {
		padding: var(--tscb-space-6);
	}
}

/* Sections are the boxes; groups inside them are not boxed again. */
.tscb-section fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.tscb-section fieldset + fieldset {
	margin-top: var(--tscb-space-2);
}

/* Two fields per row on wider screens (name/email/phone, suburb/state/postcode). */
@container tscb (min-width: 520px) {
	.tscb-grid-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--tscb-space-4);
	}

	.tscb-grid-2 > .tscb-field--wide {
		grid-column: 1 / -1;
	}
}

/* Service search results (a long catalogue). */
.tscb-service-matches {
	list-style: none;
	margin: var(--tscb-space-2) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tscb-space-2);
}

.tscb-service-match {
	width: 100%;
	min-height: 44px;
	text-align: left;
	padding: var(--tscb-space-2) var(--tscb-space-3);
	border: 1px solid var(--tscb-color-border-strong);
	border-radius: var(--tscb-radius-md);
	background: var(--tscb-color-background);
	color: var(--tscb-color-text);
	font: inherit;
	cursor: pointer;
}

.tscb-service-match small {
	color: var(--tscb-color-text-muted);
}

.tscb-service-match:hover,
.tscb-service-match:focus-visible {
	border-color: var(--tscb-color-focus-ring);
	box-shadow: var(--tscb-shadow-focus);
	outline: none;
}

/* Extras without a photo: no empty picture box (keeps the page short). */
.tscb-onepage .tscb-card__media--empty {
	display: none;
}

.tscb-subheading {
	font-size: var(--tscb-font-size-lg);
	margin: 0 0 var(--tscb-space-2);
}

/* Optional, collapsed-by-default extras inside a section. */
.tscb-more {
	margin-top: var(--tscb-space-4);
	border: 1px solid var(--tscb-color-border);
	border-radius: var(--tscb-radius-md);
	background: var(--tscb-color-background);
	padding: var(--tscb-space-3) var(--tscb-space-4);
}

.tscb-more > summary {
	cursor: pointer;
	font-weight: var(--tscb-font-weight-medium);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.tscb-more > summary:focus-visible {
	outline: none;
	box-shadow: var(--tscb-shadow-focus);
	border-radius: var(--tscb-radius-sm);
}

.tscb-summary--compact {
	margin-top: 0;
	margin-bottom: var(--tscb-space-4);
}


/* --- Add-on grid (Stage 3, Prompt 4) --- */
.tscb-addon-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tscb-space-4);
}

@container tscb (min-width: 520px) {
	.tscb-addon-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Room/area priority grid (Stage 3, Prompt 7) --- */
.tscb-preference-section {
	margin-top: var(--tscb-space-5);
}

.tscb-preference-section + .tscb-preference-section {
	margin-top: var(--tscb-space-6);
}

.tscb-priority-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tscb-space-3);
	margin-top: var(--tscb-space-3);
}

@container tscb (min-width: 520px) {
	.tscb-priority-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tscb-priority-grid__item {
	border: 1px solid var(--tscb-color-border);
	border-radius: var(--tscb-radius-md);
	padding: var(--tscb-space-3);
}

/* --- Summary shell --- */
.tscb-summary {
	border: 1px dashed var(--tscb-color-border-strong);
	border-radius: var(--tscb-radius-md);
	padding: var(--tscb-space-4);
	background: var(--tscb-color-background);
}

.tscb-summary + .tscb-summary {
	margin-top: var(--tscb-space-4);
}

.tscb-summary__details {
	margin: var(--tscb-space-4) 0 0;
	display: grid;
	/* A long label ("How often would you like this service?") may take at
	   most 40% of the row; it never pushes the answers off the card. */
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	gap: var(--tscb-space-1) var(--tscb-space-3);
}

.tscb-summary__details dt,
.tscb-summary__details dd {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Narrow (phones, or a narrow column): each label on its own line, its
   answer under it. Placed after the rule above so it always wins. */
@container tscb (max-width: 519px) {
	.tscb-summary__details {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.tscb-summary__details dt {
		font-size: var(--tscb-font-size-sm);
		margin-top: var(--tscb-space-2);
	}

	.tscb-summary__details dd {
		padding-bottom: var(--tscb-space-2);
		border-bottom: 1px solid var(--tscb-color-border);
	}
}

.tscb-summary__details > div {
	display: contents;
}

.tscb-summary__details dt {
	color: var(--tscb-color-text-muted);
	font-weight: var(--tscb-font-weight-medium);
}

.tscb-summary__details dd {
	margin: 0;
}