/*
 * Grafthair Booking – step-by-step booking form (Service → Time → Details → Done).
 * Colours/fonts read the theme's --gh-* design tokens when present, with fallbacks.
 */

.ghb {
	--ghb-accent: var(--gh-color-primary, #34465d);
	--ghb-on-accent: var(--gh-color-on-primary, #fff);
	--ghb-ink: var(--gh-color-heading, #081a28);
	--ghb-text: var(--gh-color-text, #2b2b2b);
	--ghb-muted: #7c8797;
	--ghb-card: var(--gh-color-surface, #fff);
	--ghb-field: var(--gh-color-surface, #fff);
	--ghb-soft: #f0f0f0;
	--ghb-border: #c3ccd8;
	--ghb-line: #8796ab;
	--ghb-selected: #1f4b57;
	--ghb-danger: var(--gh-color-danger, #b42318);
	--ghb-radius: 8px;
	--ghb-gap: 1.5rem;

	position: relative;
	padding: 34px;
	border-radius: 12px;
	background: var(--ghb-card);
	color: var(--ghb-text);
	font-family: var(--gh-font-body, inherit);
	font-size: 1rem;
}

.ghb *,
.ghb *::before,
.ghb *::after {
	box-sizing: border-box;
}

.ghb [hidden] {
	display: none !important;
}

/* Corner mark from the design. */
.ghb::after {
	content: "";
	position: absolute;
	top: 34px;
	right: 34px;
	width: 28px;
	height: 28px;
	background: var(--ghb-ink);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.ghb__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Heading and stepper ---------- */

.ghb__form {
	display: grid;
	gap: var(--ghb-gap);
}

.ghb__title {
	margin: 0 48px 0 0;
	color: var(--ghb-ink);
	font-family: var(--gh-font-accent, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.1;
}

/* Labels over a line with a dot per step; the line darkens between reached steps. */
.ghb__stepper {
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	margin: 0.2rem 0 o.1rem;
	padding: 0;
	list-style: none;
}

.ghb__stepper li {
	position: relative;
	padding-bottom: 28px;
	color: var(--ghb-muted);
	font-size: 1.125rem;
}

.ghb__stepper li:last-child {
	padding-right: 18px;
}

.ghb__stepper li.is-done {
	color: var(--ghb-ink);
}

.ghb__stepper li.is-current {
	font-weight: 600;
}

.ghb__stepper li::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 7px;
	left: 6px;
	height: 1px;
	background: var(--ghb-line);
}

.ghb__stepper li.is-done:has(+ li.is-done)::before {
	height: 2px;
	background: var(--ghb-ink);
}

.ghb__stepper li::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 0;
	width: 12px;
	height: 12px;
	border: 1.5px solid var(--ghb-line);
	border-radius: 50%;
	background: var(--ghb-card);
}

.ghb__stepper li.is-done::after {
	border-color: var(--ghb-ink);
	background: var(--ghb-ink);
}

/* ---------- Panes and fields ---------- */

.ghb__pane {
	display: grid;
	gap: var(--ghb-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ghb__pane-title {
	margin-block: 2.25rem 1rem;
	padding: 0;
	color: var(--ghb-ink);
	font-size: 1.5rem;
}

.ghb__field {
	display: grid;
	gap: 0.5rem;
}

.ghb__label {
	color: var(--ghb-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.ghb__row {
	display: grid;
	gap: 1rem;
}

@media (min-width: 560px) {
	.ghb__row {
		grid-template-columns: 1fr 1fr;
	}
}

.ghb__control {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0.625rem 1rem;
	border: 1px solid var(--ghb-border);
	border-radius: var(--ghb-field-radius, var(--ghb-radius));
	background-color: var(--ghb-field);
	color: var(--ghb-text);
	font: inherit;
	font-size: 1.125rem;
	text-align: left;
}

.ghb__control::placeholder {
	color: var(--ghb-muted);
	opacity: 1;
}

/* A <select> shows its placeholder colour until a value is chosen. */
select.ghb__control:invalid {
	color: var(--ghb-muted);
}

.ghb__control--dropdown {
	padding-right: 2.5rem;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23081a28' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

textarea.ghb__control {
	min-height: 5rem;
	resize: vertical;
}

.ghb__phone {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
}

.ghb__phone .ghb__control:first-child {
	padding-right: 1.75rem;
	border-right: 0;
	border-radius: var(--ghb-field-radius, var(--ghb-radius)) 0 0 var(--ghb-field-radius, var(--ghb-radius));
	background-position: right 0.5rem center;
	font-size: 1rem;
}

.ghb__phone .ghb__control:last-child {
	border-radius: 0 var(--ghb-field-radius, var(--ghb-radius)) var(--ghb-field-radius, var(--ghb-radius)) 0;
}

/* Pill-shaped one-line fields and choices (the notes box keeps normal corners). */
.ghb__form {
	--ghb-field-radius: 999px;
}

.ghb__form textarea.ghb__control {
	--ghb-field-radius: var(--ghb-radius);
}

/* Consultation choice under the calendar. */
.ghb__diary + .ghb__field {
	margin-top: 1.5rem;
}

.ghb__control:focus-visible,
.ghb__choice:focus-visible,
.ghb__btn:focus-visible,
.ghb__copy:focus-visible {
	outline: 2px solid var(--ghb-accent);
	outline-offset: 2px;
}

/* Consultation type: two choice cards (video call / in person). */
.ghb__modes {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 0.75rem;
}

.ghb__mode {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 72px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ghb-border);
	border-radius: 999px;
	background: var(--ghb-field);
	color: var(--ghb-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* The real radio stays in the card (keyboard and validation work) but is visually hidden. */
.ghb__mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ghb__mode:has(input:checked) {
	border-color: var(--ghb-ink);
	box-shadow: inset 0 0 0 1px var(--ghb-ink);
}

.ghb__mode:has(input:focus-visible) {
	outline: 2px solid var(--ghb-accent);
	outline-offset: 2px;
}

.ghb__mode-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ghb-soft);
	color: var(--ghb-accent);
}

.ghb__summary {
	margin: 0;
	color: var(--ghb-text);
	line-height: 1.5;
}

.ghb__alert {
	margin: 0;
	color: var(--ghb-danger);
}

/* ---------- Calendar and times ---------- */

.ghb__diary {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid #ececec;
	border-radius: 4px;
	box-shadow: 0 12px 32px rgb(8 26 40 / 0.08);
}

.ghb__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.ghb__month {
	color: var(--ghb-ink);
	font-weight: 700;
}

.ghb__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.375rem;
	text-align: center;
}

.ghb__grid--head {
	margin-bottom: 0.375rem;
}

.ghb__grid[aria-busy="true"] {
	opacity: 0.5;
}

.ghb__muted {
	margin: 0;
	color: var(--ghb-muted);
	font-size: 0.875rem;
}

/* Selected day, shown as a small legend under the calendar. */
.ghb__picked-day {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
	color: var(--ghb-ink);
	font-size: 0.75rem;
}

.ghb__picked-day::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--ghb-ink);
}

.ghb__times {
	display: flex;
	flex-direction: column;
	padding-left: 1.25rem;
	border-left: 1px solid #ececec;
}

.ghb__times-title {
	margin: 0 0 0.75rem;
	color: var(--ghb-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ghb__time-list {
	display: grid;
	flex: 1;
	align-content: start;
	gap: 0.375rem;
	max-height: 260px;
	overflow-y: auto;
	font-size: 0.875rem;
}

/* Day and time buttons. */
.ghb__choice {
	border: 0;
	border-radius: var(--ghb-radius);
	background: var(--ghb-soft);
	color: var(--ghb-ink);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.ghb__choice:hover:not(:disabled) {
	background: #e4e3df;
}

.ghb__choice:disabled {
	color: #a9adb3;
	cursor: default;
}

.ghb__choice--icon {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: 1.125rem;
	line-height: 1;
}

.ghb__choice--icon:disabled {
	opacity: 0.4;
}

.ghb__choice--day {
	aspect-ratio: 1;
	border: 1px solid #c9d3df;
	border-radius: 50%;
	background: #e9eff5;
	color: var(--ghb-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.ghb__choice--day:hover:not(:disabled) {
	border-color: var(--ghb-accent);
	background: #dde6ef;
}

/* Days with no free times: faint and struck through. */
.ghb__choice--day:disabled {
	border-color: transparent;
	background: none;
	color: #a9adb3;
	font-weight: 400;
	text-decoration: line-through;
	opacity: 0.55;
}

.ghb__choice--day[aria-pressed="true"] {
	border-color: var(--ghb-selected);
	background: var(--ghb-selected);
	color: #fff;
}

.ghb__choice--time {
	padding: 0.5rem 0.625rem;
	border-radius: 999px;
	background: none;
	text-align: left;
}

.ghb__choice--time[aria-pressed="true"] {
	background: var(--gh-color-sand, #f2f1ed);
	font-weight: 600;
}

.ghb__mini-actions {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* ---------- Buttons ---------- */

.ghb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 128px;
	height: 52px;
	padding: 0 2.25rem;
	border: 1px solid var(--ghb-accent);
	border-radius: 999px;
	background: var(--ghb-accent);
	color: var(--ghb-on-accent);
	font: 600 1.125rem/1 var(--gh-font-body, inherit);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.ghb__btn:hover {
	opacity: 0.9;
}

.ghb__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ghb__btn--outline {
	border-color: var(--ghb-line);
	background: transparent;
	color: var(--ghb-ink);
}

.ghb__btn--sm {
	min-width: 0;
	height: 30px;
	padding: 0 1rem;
	font-size: 0.8125rem;
	font-weight: 500;
}

.ghb__mini-actions .ghb__btn:not(.ghb__btn--outline) {
	border-color: var(--ghb-accent);
}

.ghb__btn--block {
	width: 100%;
	height: 44px;
	font-size: 1rem;
}

.ghb__actions--split {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* Optional photos: dashed drop area, then thumbnails with a remove button. */
.ghb__drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	min-height: 82px;
	padding: 1rem;
	border: 1px dashed var(--ghb-border);
	border-radius: var(--ghb-radius);
	background: var(--ghb-field);
	color: var(--ghb-line);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.ghb__drop:hover,
.ghb__drop.is-over {
	border-color: var(--ghb-accent);
	background: #f6f8fb;
}

.ghb__drop:focus-within {
	outline: 2px solid var(--ghb-accent);
	outline-offset: 2px;
}

.ghb__drop-text {
	display: grid;
	gap: 0.25rem;
}

.ghb__drop-title {
	color: var(--ghb-ink);
	font-size: 0.9375rem;
}

.ghb__drop-hint {
	color: var(--ghb-line);
	font-size: 0.875rem;
}

.ghb__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ghb__thumb {
	position: relative;
}

.ghb__thumb-img {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: var(--ghb-radius);
	object-fit: cover;
}

.ghb__thumb-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid var(--ghb-card);
	border-radius: 50%;
	background: var(--ghb-ink);
	color: var(--ghb-on-accent);
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
}

.ghb__privacy {
	margin: 0;
	color: var(--ghb-text);
	font-size: 0.9375rem;
}

.ghb__privacy a {
	color: inherit;
}

/* ---------- Confirmation ---------- */

.ghb__ticket {
	gap: 1.5rem;
	outline: none;
}

.ghb__confirmed {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	padding: 0.75rem 1.25rem 0.75rem 0.75rem;
	border-radius: 999px;
	background: var(--ghb-soft);
}

.ghb__confirmed-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ghb-accent);
	color: var(--ghb-on-accent);
}

.ghb__confirmed-title {
	display: block;
	color: var(--ghb-ink);
	font-family: var(--gh-font-accent, "Cormorant Garamond", Georgia, serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}

.ghb__confirmed-text {
	display: block;
	color: var(--ghb-text);
	font-size: 0.75rem;
}

.ghb__ticket-box {
	display: grid;
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--ghb-border);
	border-radius: 4px;
}

.ghb__ticket-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1rem;
	margin: 0;
}

.ghb__ticket-wide {
	grid-column: 1 / -1;
}

.ghb__ticket-grid dt {
	color: var(--ghb-muted);
	font-size: 0.8125rem;
}

.ghb__ticket-grid dd {
	margin: 0.375rem 0 0;
	color: var(--ghb-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.ghb__ticket-ref {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ghb-border);
}

.ghb__download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ghb-ink);
	font: 600 0.875rem/1 var(--gh-font-body, inherit);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ghb__ticket .ghb__btn--block {
	height: 44px;
	font-size: 0.875rem;
}

/* ---------- Landing-page form (glass card over the hero photo) ---------- */

.ghb--landing {
	--ghb-card: rgb(31 43 57 / 0.55);
	--ghb-ink: #fff;
	--ghb-text: #fff;
	--ghb-line: #fff;
	--ghb-accent: var(--gh-color-sand, #f3f1ed);
	--ghb-on-accent: var(--gh-color-heading, #081a28);
	--ghb-field-ink: var(--gh-color-heading, #081a28);
	--ghb-placeholder: var(--gh-color-muted, #6a7b90);
	--ghb-highlight: #c9b08c;
	--ghb-gap: 20px;

	padding: 28px;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ghb--landing::after {
	top: 28px;
	right: 28px;
	width: 22px;
	height: 22px;
}

.ghb--landing .ghb__title {
	margin-right: 40px;
	font-size: 34px;
}

/* Step names spread across the line, a dot under each; the current step is gold. */
.ghb--landing .ghb__stepper {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0;
}

.ghb--landing .ghb__stepper::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4px;
	left: 0;
	height: 1px;
	background: rgb(255 255 255 / 0.7);
}

.ghb--landing .ghb__stepper li,
.ghb--landing .ghb__stepper li:last-child {
	padding: 0 4px 22px;
	color: var(--ghb-ink);
	font-size: 17px;
	font-weight: 500;
}

.ghb--landing .ghb__stepper li::before {
	content: none;
}

.ghb--landing .ghb__stepper li::after,
.ghb--landing .ghb__stepper li.is-done::after {
	bottom: 0;
	left: 50%;
	width: 9px;
	height: 9px;
	border: 0;
	background: var(--ghb-ink);
	transform: translateX(-50%);
}

.ghb--landing .ghb__stepper li.is-current {
	color: var(--ghb-highlight);
}

.ghb--landing .ghb__stepper li.is-current::after {
	bottom: -1px;
	width: 11px;
	height: 11px;
	background: var(--ghb-highlight);
}

.ghb__intro {
	margin-bottom: 20px;
	padding: 0;
	font-size: 17px;
}

.ghb--landing .ghb__pane-title {
	margin: 0 0 16px;
	font-family: var(--gh-font-accent, "Cormorant Garamond", Georgia, serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
}

.ghb--landing .ghb__label {
	font-size: 16px;
}

/* White pill fields with dark text. */
.ghb--landing .ghb__control {
	min-height: 50px;
	border-color: transparent;
	color: var(--ghb-field-ink);
	font-size: 14px;
}

.ghb--landing .ghb__control::placeholder,
.ghb--landing select.ghb__control:invalid {
	color: var(--ghb-placeholder);
}

.ghb--landing textarea.ghb__control {
	--ghb-field-radius: 4px;
}

/* Main area of concern: picture tiles, three to a row; the chosen one turns white. */
.ghb__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 13px;
}

.ghb__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 93px;
	padding: 8px;
	border: 1px solid rgb(255 255 255 / 0.75);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.ghb__tile:hover {
	background: rgb(255 255 255 / 0.1);
}

.ghb__tile:has(input:checked) {
	background: #fff;
	color: var(--ghb-field-ink);
}

.ghb__tile:has(input:focus-visible) {
	outline: 2px solid var(--ghb-highlight);
	outline-offset: 2px;
}

.ghb__tile-img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.ghb--landing .ghb__privacy a {
	text-decoration: none;
}

/* Yes / No and consultation type: white pills with a round marker. */
.ghb__options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ghb__option {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 186px;
	height: 50px;
	padding: 0 24px;
	border-radius: 999px;
	background: #fff;
	color: var(--ghb-placeholder);
	font-size: 14px;
	cursor: pointer;
}

/* Three or more answers share the row evenly. */
.ghb__options:has(> :nth-child(3)) .ghb__option {
	flex: 1 1 0;
	min-width: auto;
	padding-inline: 18px;
}

.ghb__option input {
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid #d4d8de;
	border-radius: 50%;
	appearance: none;
	cursor: pointer;
}

.ghb__option input:checked {
	border-color: var(--ghb-field-ink);
	background: var(--ghb-field-ink);
}

.ghb__option:has(input:focus-visible) {
	outline: 2px solid var(--ghb-highlight);
	outline-offset: 2px;
}

/* Times: outlined pills, two to a row; more than four rows scroll. */
.ghb__slots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	max-height: 168px;
	overflow-y: auto;
	font-size: 16px;
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 0.4) transparent;
}

.ghb--landing .ghb__choice--time {
	height: 36px;
	padding: 0 12px;
	border: 1px solid rgb(255 255 255 / 0.85);
	color: var(--ghb-ink);
	text-align: center;
}

.ghb--landing .ghb__choice--time:hover {
	background: rgb(255 255 255 / 0.1);
}

.ghb--landing .ghb__choice--time[aria-pressed="true"] {
	background: var(--ghb-accent);
	color: var(--ghb-field-ink);
	font-weight: 500;
}

.ghb--landing .ghb__summary {
	font-size: 14px;
}

.ghb--landing .ghb__drop {
	min-height: 74px;
	border-color: rgb(255 255 255 / 0.6);
	background: none;
	color: var(--ghb-ink);
}

.ghb--landing .ghb__drop:hover,
.ghb--landing .ghb__drop.is-over {
	background: rgb(255 255 255 / 0.08);
}

.ghb--landing .ghb__drop-hint {
	color: var(--ghb-ink);
}

.ghb--landing .ghb__btn {
	min-width: 106px;
	height: 44px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 500;
}

.ghb--landing .ghb__actions--split {
	margin-top: 0;
}

/* First step: no Back button, so "Continue" spans the card. */
.ghb--landing [data-ghb-step-back][hidden] + .ghb__btn {
	flex: 1;
}

/* Confirmation: a light "Booking confirmed!" bar, then the booking's details. */
.ghb--landing .ghb__confirmed {
	padding: 14px 16px;
	border-radius: 4px;
	background: var(--ghb-accent);
}

.ghb--landing .ghb__confirmed-icon {
	background: var(--gh-color-primary, #34465d);
	color: #fff;
}

.ghb--landing .ghb__confirmed-title,
.ghb--landing .ghb__confirmed-text {
	color: var(--ghb-field-ink);
}

.ghb__facts {
	display: grid;
	margin: 0;
}

.ghb__facts div {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	padding: 10px 8px;
}

.ghb__facts div + div {
	border-top: 1px solid rgb(255 255 255 / 0.2);
}

.ghb__facts dt {
	display: flex;
	align-items: center;
	align-self: start;
	gap: 12px;
}

.ghb__facts dt::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: #e6d9c3;
}

/* Download link centred under the details, then the "book again" button. */
.ghb--landing .ghb__download {
	justify-self: center;
	font-size: 15px;
}

.ghb__facts dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	white-space: pre-line;
}

/* ---------- Cancellation page (link in the confirmation email) ---------- */

.ghb-cancel {
	padding: 160px var(--gh-gutter, 24px) 80px;
	background: var(--gh-color-sand, #f3f1ed);
}

.ghb.ghb-cancel__card {
	display: grid;
	justify-items: center;
	gap: 1rem;
	max-width: 620px;
	margin-inline: auto;
	padding: 48px 40px;
	text-align: center;
}

.ghb-cancel__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.ghb-cancel__icon--ok {
	background: #e8f3ea;
	color: #2e7d32;
}

.ghb-cancel__icon--warn {
	background: #fbeceb;
	color: var(--ghb-danger);
}

.ghb-cancel__icon--info {
	background: var(--gh-mist, #e9eff3);
	color: var(--ghb-accent);
}

.ghb-cancel__title {
	margin: 0.25rem 0 0;
	color: var(--ghb-ink);
	font-family: var(--gh-font-accent, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 600;
	line-height: 1.15;
}

.ghb-cancel__text {
	max-width: 460px;
	margin: 0;
	color: var(--ghb-muted);
	line-height: 1.6;
}

.ghb-cancel__details {
	display: grid;
	width: 100%;
	margin: 0.75rem 0 0;
	border-radius: 12px;
	background: var(--gh-color-sand, #f3f1ed);
	text-align: left;
}

.ghb-cancel__details div {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 1rem;
	padding: 0.875rem 1.25rem;
}

.ghb-cancel__details div + div {
	border-top: 1px solid var(--gh-line, #e5e3df);
}

.ghb-cancel__details dt {
	color: var(--ghb-muted);
	font-size: 0.875rem;
}

.ghb-cancel__details dd {
	margin: 0;
	color: var(--ghb-ink);
	font-weight: 600;
}

.ghb-cancel__details--muted dd {
	color: var(--ghb-muted);
	text-decoration: line-through;
}

.ghb-cancel__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.ghb-cancel__actions form {
	display: contents;
}

.ghb__btn.ghb-cancel__danger {
	border-color: var(--ghb-danger);
	background: var(--ghb-danger);
}

.ghb-cancel__help {
	margin: 0.5rem 0 0;
	color: var(--ghb-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ghb-cancel__help a {
	margin-left: 0.25rem;
	white-space: nowrap;
	color: var(--ghb-accent);
	font-weight: 600;
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
	.ghb {
		padding: 16px 12px 20px;
		font-size: 0.875rem;
	}

	/* Compact form on phones (mobile design). */
	.ghb__title {
		margin-right: 32px;
		font-size: 1.75rem;
	}

	.ghb__pane-title {
		margin-block: 1.5rem 0.75rem;
		font-size: 1rem;
	}

	.ghb__label {
		font-size: 0.8125rem;
	}

	.ghb__control {
		min-height: 40px;
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
	}

	.ghb__mode {
		min-height: 48px;
		padding: 0.5rem 0.75rem;
		font-size: 0.75rem;
	}

	.ghb__privacy {
		font-size: 0.8125rem;
	}

	.ghb::after {
		top: 22px;
		right: 22px;
		width: 20px;
		height: 20px;
	}

	.ghb__stepper li {
		font-size: 0.875rem;
	}

	.ghb__diary {
		grid-template-columns: minmax(0, 1fr);
	}

	.ghb__times {
		padding: 1rem 0 0;
		border-top: 1px solid #ececec;
		border-left: 0;
	}

	.ghb__modes {
		grid-template-columns: minmax(0, 1fr);
	}

	.ghb__btn {
		min-width: 0;
		padding: 0 1.5rem;
		font-size: 1rem;
	}

	/* Landing form on phones (mobile design): solid card, two tiles to a row. */
	.ghb--landing {
		--ghb-card: var(--gh-color-primary, #34465d);
		--ghb-gap: 16px;

		padding: 20px 16px 24px;
	}

	.ghb--landing .ghb__title {
		font-size: 26px;
	}

	.ghb--landing .ghb__stepper li,
	.ghb--landing .ghb__stepper li:last-child {
		font-size: 14px;
	}

	.ghb__intro {
		font-size: 16px;
	}

	.ghb--landing .ghb__label {
		font-size: 14px;
	}

	.ghb__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ghb__option {
		min-width: 120px;
		height: 44px;
		padding: 0 18px;
	}

	.ghb__options:has(> :nth-child(3)) .ghb__option {
		flex-basis: calc(50% - 6px);
	}

	.ghb--landing .ghb__pane-title {
		font-size: 24px;
	}

	.ghb__slots {
		font-size: 13px;
	}

	.ghb__facts div {
		padding-inline: 0;
	}

	.ghb-cancel {
		padding-block: 112px 48px;
	}

	.ghb.ghb-cancel__card {
		padding: 36px 20px 28px;
	}

	.ghb-cancel__details div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.125rem;
	}

	.ghb-cancel__actions,
	.ghb-cancel__actions .ghb__btn {
		width: 100%;
	}
}