/* MBF booking form, following the Figma booking pages (7-A2, 5-B).
   Colours and sizes are variables so they can be tuned in one place. */

.mbf-booking-root {
	--mbf-text: #737373;
	--mbf-muted: #959595;
	--mbf-line: #d9d9d9;
	--mbf-button: #fbfbfb;
	--mbf-selected: #353765;
	--mbf-selected-text: #fff;
	--mbf-accent: #ff66c4;
	--mbf-box-height: 57px;
	--mbf-width: 1000px;

	color: var(--mbf-text);
	font-family: Montserrat, Helvetica, Arial, Lucida, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	transition: opacity 0.15s;
}

.mbf-booking-root *,
.mbf-booking-root *::before,
.mbf-booking-root *::after {
	box-sizing: border-box;
}

.mbf-booking-root[aria-busy="true"] {
	opacity: 0.7;
}

/* Divi's `#left-area` / `.entry-content` / `.et-l--body` list and paragraph
   rules load later and tie with a single class, so the class is doubled. */
.mbf-booking-root.mbf-booking-root p,
.mbf-booking-root.mbf-booking-root ul,
#left-area .mbf-booking-root p,
#left-area .mbf-booking-root ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbf-booking-root fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mbf-booking-root legend {
	padding: 0;
}

/* Back link and title */
.mbf-header {
	max-width: var(--mbf-width);
	margin: 0 auto 40px;
	text-align: center;
}

.mbf-header--back {
	margin-bottom: 0;
}

/* On Divi service pages the back link and studio sit in their own rows; drop
   the row padding between them so the spacing matches the booking page. */
.et_pb_row.et_pb_row:has(.mbf-header--back) {
	padding-bottom: 0;
}

.et_pb_row.et_pb_row:has(> .et_pb_column > .et_pb_code [data-mbf-studio]),
.et_pb_row.et_pb_row:has(.mbf-header--back) + .et_pb_row {
	padding-top: 0;
}

/* Same below the studio: the studio's own margin sets the gap, and it goes
   away with the studio when none is chosen yet. */
.et_pb_row.et_pb_row:has(> .et_pb_column > .et_pb_code [data-mbf-studio]) {
	padding-bottom: 0;
}

.et_pb_row.et_pb_row:has(> .et_pb_column > .et_pb_code [data-mbf-studio]) + .et_pb_row {
	padding-top: 0;
}

.et_pb_code .mbf-studio {
	margin-bottom: 48px;
}

.mbf-back {
	display: block;
	margin-bottom: 24px;
	color: var(--mbf-accent);
	font-size: 16px;
	text-align: left;
	text-decoration: underline;
	text-transform: uppercase;
}

.mbf-header .mbf-title {
	margin: 0;
	padding: 0;
	color: var(--mbf-text);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Layout */
.mbf-booking {
	display: grid;
	gap: 24px;
	max-width: var(--mbf-width);
	margin: 0 auto;
}

.mbf-main,
.mbf-client,
.mbf-addons,
.mbf-appointment,
.mbf-summary {
	display: grid;
	gap: 24px;
}

.mbf-main {
	gap: 48px;
}

.mbf-client {
	gap: 16px;
}

.mbf-addons {
	margin-top: 32px;
}

.mbf-client + .mbf-client {
	padding-top: 48px;
	border-top: 1px solid var(--mbf-line);
}

.mbf-heading,
.mbf-booking-root h2.mbf-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--mbf-text);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
}

.mbf-icon {
	flex: none;
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.mbf-text {
	color: var(--mbf-text);
	font-size: 18px;
}

.mbf-step {
	display: grid;
	gap: 16px;
}

/* Centred boxes: fixed service / style, and dropdowns */
.mbf-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--mbf-box-height);
	padding: 0 56px;
	border: 1px solid var(--mbf-line);
	border-radius: 0;
	background: #fff;
	color: var(--mbf-text);
	font: inherit;
	font-size: 18px;
	text-align: center;
	text-transform: uppercase;
}

.mbf-box--fixed {
	font-weight: 600;
}

.mbf-select {
	text-align-last: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='19' viewBox='0 0 38 19'%3E%3Cpath d='M1 1l18 17L37 1' fill='none' stroke='%23d9d9d9' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 20px center / 30px 15px;
}

/* Option buttons (radios) and toggle buttons (checkboxes) */
.mbf-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.mbf-option,
.mbf-toggle {
	position: relative;
	cursor: pointer;
}

.mbf-option input,
.mbf-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.mbf-option span,
.mbf-toggle span,
button.mbf-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--mbf-box-height);
	padding: 0 20px;
	border: 1px solid var(--mbf-line);
	background: var(--mbf-button);
	color: var(--mbf-text);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.mbf-toggle {
	justify-self: start;
	min-width: 240px;
}

.mbf-toggle span {
	text-transform: uppercase;
}

.mbf-option:hover span,
.mbf-toggle:hover span {
	border-color: var(--mbf-selected);
}

.mbf-option input:checked + span,
.mbf-toggle input:checked + span {
	border-color: var(--mbf-selected);
	background: var(--mbf-selected);
	color: var(--mbf-selected-text);
}

.mbf-option input:focus-visible + span,
.mbf-toggle input:focus-visible + span,
.mbf-select:focus-visible {
	outline: 2px solid var(--mbf-selected);
	outline-offset: 2px;
}

/* "Add a bike" opens the second-bike steps: chevron instead of a fill. */
.mbf-toggle--disclosure span::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-left: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

.mbf-toggle--disclosure input:checked + span {
	border-color: var(--mbf-line);
	background: var(--mbf-button);
	color: var(--mbf-text);
}

.mbf-toggle--disclosure input:checked + span::after {
	transform: translateY(3px) rotate(-135deg);
}

/* Summary */
.mbf-summary__client {
	margin: 0;
	padding: 0;
	color: var(--mbf-text);
	font-size: 18px;
	font-weight: 600;
}

.mbf-summary__lines {
	display: grid;
	gap: 20px;
}

.mbf-summary__line,
.mbf-summary__total,
.mbf-summary__meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.mbf-summary__label {
	font-size: 20px;
}

.mbf-summary__label small {
	display: block;
	color: var(--mbf-accent);
	font-size: 16px;
}

.mbf-summary__price {
	font-size: 20px;
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.mbf-summary__price del {
	display: block;
	font-size: 16px;
	font-weight: 400;
}

.mbf-summary__total {
	margin-top: 8px;
	font-size: 20px;
	font-weight: 600;
}

.mbf-summary__total strong {
	font-weight: 600;
}

.mbf-summary__meta {
	margin-top: -12px;
	font-size: 16px;
}

.mbf-summary__savings {
	color: var(--mbf-accent);
}

.mbf-summary__note,
.mbf-summary__empty {
	font-size: 13px;
}

.mbf-summary__note a {
	display: block;
	margin: 4px 0 0 20px;
	color: inherit;
	text-decoration: underline;
}

/* Calendar */
.mbf-calendar {
	border: 1px solid var(--mbf-line);
}

.mbf-calendar iframe {
	display: block;
	width: 100%;
	min-height: 760px;
	border: 0;
}

.mbf-calendar__empty {
	display: grid;
	place-content: center;
	gap: 8px;
	min-height: 320px;
	padding: 32px;
	text-align: center;
}

.mbf-calendar__empty li {
	color: var(--mbf-muted);
}

/* Service pages: studio, bike-style picker, unavailable cards */
.mbf-studio,
.mbf-bike-style {
	display: grid;
	gap: 16px;
	max-width: var(--mbf-width);
	margin: 0 auto;
	padding: 0;
	border: 0;
}

.mbf-studio[hidden] {
	display: none;
}

/* Same type and spacing as the booking page title, so the text and the field
   sit in exactly the same place on every page. */
.mbf-studio {
	gap: 40px;
}

.mbf-studio__title {
	color: var(--mbf-text);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.mbf-label {
	color: var(--mbf-text);
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
}

.mbf-error {
	color: var(--mbf-accent);
	font-size: 16px;
}

.mbf-unavailable {
	opacity: 0.45;
	transition: opacity 0.15s;
}

.mbf-unavailable a[aria-disabled] {
	pointer-events: none;
	cursor: not-allowed;
	filter: grayscale(1);
}

.mbf-card-note {
	margin: 10px 0 0;
	padding: 0;
	color: var(--mbf-text, #737373);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 600px) {
	.mbf-heading,
	.mbf-booking-root h2.mbf-heading,
	.mbf-header .mbf-title,
	.mbf-studio__title {
		font-size: 22px;
	}

	.mbf-options {
		grid-template-columns: 1fr;
	}

	.mbf-toggle {
		justify-self: stretch;
	}

	.mbf-box {
		padding: 0 48px;
		font-size: 16px;
	}

	.mbf-summary__label,
	.mbf-summary__price,
	.mbf-summary__total {
		font-size: 17px;
	}
}