/* Booking Form Frontend Styles
 *
 * Colour aware (2.2): nothing here assumes a light page. Text is the theme's own colour; surfaces,
 * lines and muted text are translucent greys, which read on light and dark pages alike; states
 * (free, full, error) are tints of their colour under the theme's text. Settings → General →
 * "Booking form colours" can force a light or dark card, and set the accent, for a theme that
 * needs it (.bf-scheme-light, .bf-scheme-dark, --bf-accent).
 */

.booking-form-wrapper,
.booking-availability,
.booking-resources,
.booking-my-bookings,
.booking-confirmation-container,
.booking-calendar-container {
	--bf-surface: rgba(128, 128, 128, 0.07);
	--bf-surface-2: rgba(128, 128, 128, 0.14);
	--bf-line: rgba(128, 128, 128, 0.35);
	--bf-line-soft: rgba(128, 128, 128, 0.2);
	--bf-good: #2e9e52;
	--bf-bad: #d63638;
	--bf-warn: #c98a00;
	--bf-info: #3a8bd6;
	--bf-accent: var(--bf-accent-colour, var(--wp--preset--color--primary, #3a8bd6));
}
/* Forced schemes, for themes whose text colour does not suit a card. */
.bf-scheme-light { color: #1d2327; background-color: #fff; }
.bf-scheme-dark { color: #f0f0f1; background-color: #1d2327; }
.bf-scheme-light :is(input, select, textarea) { color: #1d2327; background-color: #fff; }
.bf-scheme-dark :is(input, select, textarea) { color: #f0f0f1; background-color: #2c3338; }
.bf-muted, .booking-form-extra-price { opacity: 0.75; }

.booking-form-message {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 14px;
}

.booking-form-message.success {
	background-color: color-mix(in srgb, var(--bf-good) 14%, transparent);
	border-color: var(--bf-good);
}

.booking-form-message.error {
	background-color: color-mix(in srgb, var(--bf-bad) 14%, transparent);
	border-color: var(--bf-bad);
}

.booking-form-message.info {
	background-color: color-mix(in srgb, var(--bf-info) 14%, transparent);
	border-color: var(--bf-info);
}

.booking-form-message:focus {
	outline: 2px solid var(--bf-accent);
	outline-offset: 2px;
}

.booking-form-wrapper {
	max-width: 600px;
	margin: 20px auto;
	padding: 20px;
	border: 1px solid var(--bf-line);
	border-radius: 4px;
	background-color: var(--bf-surface);
}

.booking-form {
	display: flex;
	flex-direction: column;
}

.booking-form-step {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bf-line-soft);
}

.booking-form-step:last-of-type {
	border-bottom: none;
}

.booking-form-step h3 {
	margin-top: 0;
	font-size: 18px;
	font-weight: 600;
	color: inherit;
}

.form-group {
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
}

.form-group label {
	margin-bottom: 5px;
	font-weight: 500;
	color: inherit;
}

.form-group input,
.form-group select,
.form-group textarea {
	padding: 8px 12px;
	border: 1px solid var(--bf-line);
	border-radius: 3px;
	font-size: 14px;
	font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--bf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-accent) 25%, transparent);
}

.booking-form-actions {
	margin-top: 20px;
	text-align: right;
}

.booking-form-actions .button {
	padding: 10px 30px;
	font-size: 16px;
}

/* Responsive */
@media (max-width: 600px) {
	.booking-form-wrapper {
		padding: 15px;
	}

	.booking-form-step h3 {
		font-size: 16px;
	}

	.form-group {
		margin-bottom: 12px;
	}

	.booking-form-actions .button {
		width: 100%;
	}
}

/* A5 enhanced date picker (month grid) */
.bf-date-grid {
	margin-top: 10px;
	max-width: 320px;
	border: 1px solid var(--bf-line);
	border-radius: 6px;
	padding: 10px;
	background: var(--bf-surface);
}
.bf-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.bf-cal-title {
	font-weight: 600;
}
.bf-cal-prev,
.bf-cal-next {
	background: var(--bf-surface-2);
	border: 1px solid var(--bf-line);
	color: inherit;
	border-radius: 4px;
	width: 32px;
	height: 32px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.bf-cal-prev[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
.bf-cal-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.bf-cal-dow {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.7;
	padding: 4px 0;
}
.bf-cal-day,
.bf-cal-empty {
	aspect-ratio: 1 / 1;
	min-height: 34px;
}
.bf-cal-day {
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--bf-surface-2);
	color: inherit;
	cursor: pointer;
	font-size: 14px;
}
.bf-cal-day:hover:not([disabled]) {
	background: color-mix(in srgb, var(--bf-accent) 25%, transparent);
}
.bf-cal-day[disabled] {
	background: transparent;
	color: inherit;
	opacity: 0.35;
	cursor: not-allowed;
}
.bf-cal-selected {
	background: var(--bf-accent) !important;
	color: #fff;
	border-color: var(--bf-accent);
}
.bf-cal-day:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* 2.0: the session time in the calendar is a link (it works without JavaScript); keep it looking like text. */
.bf-slot-link,
.bf-slot-link:hover,
.bf-slot-link:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}
.calendar-navigation .button.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.booking-form-quote {
	margin: 0.5em 0 1em;
	font-size: 1.1em;
}
.booking-form-quote ul {
	margin: 0.25em 0 0 1.25em;
	font-size: 0.9em;
}
#days-status.bf-unavailable {
	color: var(--bf-bad);
	font-weight: 600;
}

/* 2.0: extras (12.3) */
.booking-form-extras {
	border: 0;
	padding: 0;
	margin: 0 0 1em;
}
.booking-form-extras[hidden],
.booking-form-gateways[hidden],
.booking-form-wrapper [hidden] {
	/* A theme's or this sheet's display rule (fieldset, .form-group) beats the browser's own
	   [hidden], which showed every service's "Pay with" box at once. */
	display: none !important;
}
.booking-form-extras legend {
	font-weight: 600;
	margin-bottom: 0.25em;
}
.booking-form-extras p {
	margin: 0.25em 0;
}
.booking-form-extra-price {
	font-size: 0.9em;
}

/* 2.2: the calendar picker — a week of free times to click. */
.booking-form-wrapper .bf-hide {
	display: none !important;
}
.bf-week-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin: 0 0 0.75em;
}
.bf-week-nav button,
.bf-link {
	padding: 0.35em 0.7em;
	border: 1px solid var(--bf-line);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.bf-week-nav button[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}
.bf-link {
	padding: 0;
	border: 0;
	text-decoration: underline;
}
.bf-week-grid {
	/* A whole week in one row (Monday to Sunday, or the site's week start); on a narrow screen
	   the row scrolls sideways rather than breaking the week up. */
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.35em;
	min-height: 6em;
}
.bf-week .bf-week-slot {
	font-size: 0.85em;
}
@media (max-width: 480px) {
	/* A phone: the week scrolls sideways rather than squeezing seven days into it. */
	.bf-week-grid {
		grid-template-columns: repeat(7, minmax(4.75em, 1fr));
		overflow-x: auto;
		padding-bottom: 0.25em;
	}
}
.bf-week-day.is-past,
.bf-week-day.is-closed {
	opacity: 0.55;
}
.bf-week-wait {
	margin: 0;
	opacity: 0.8;
}
.bf-week-grid.is-loading {
	position: relative;
	min-height: 140px;
}

/* While free times load (2.3): the old week fades and a spinner turns in the middle, with
   "Finding free times…" under it. The time list (list picker) gets a small one beside it. */
.bf-week-grid.is-loading > * {
	opacity: 0.35;
	transition: opacity 0.15s;
}

.bf-week-grid.is-loading::before,
#time-group.is-loading::after {
	content: "";
	box-sizing: border-box;
	border: 3px solid color-mix(in srgb, currentColor 18%, transparent);
	border-top-color: var(--bf-accent);
	border-radius: 50%;
	animation: bf-spin 0.8s linear infinite;
}

.bf-week-grid.is-loading::before {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38px;
	height: 38px;
	margin: -30px 0 0 -19px;
	z-index: 1;
}

.bf-week-grid.is-loading::after {
	content: attr(data-loading);
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: 18px;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.8;
	z-index: 1;
}

#time-group {
	position: relative;
}

#time-group.is-loading::after {
	position: absolute;
	right: 38px;
	bottom: 9px;
	width: 20px;
	height: 20px;
}

@keyframes bf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bf-week-grid.is-loading::before,
	#time-group.is-loading::after {
		animation-duration: 2.4s;
	}
}
.bf-week-day {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
}
.bf-week-head {
	padding: 0.35em 0;
	border-bottom: 1px solid var(--bf-line);
	font-weight: 600;
	text-align: center;
}
.bf-week-head span + span {
	display: block;
	font-weight: 400;
	opacity: 0.75;
	font-size: 0.9em;
}
.bf-week-slot {
	padding: 0.5em 0.4em;
	border: 1px solid var(--bf-line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--bf-good) 14%, transparent);
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	line-height: 1.25;
	cursor: pointer;
	text-align: center;
	overflow-wrap: anywhere;
}
.bf-week-slot:hover {
	border-color: var(--bf-accent);
}
.bf-week-slot:focus-visible {
	outline: 2px solid var(--bf-accent);
	outline-offset: 2px;
}
/* Chosen: a strong outline and tint in the accent, text in the theme's colour (white text
   would fail on a light accent such as yellow), and a tick, so it is never colour alone. */
.bf-week-slot[aria-pressed="true"] {
	background: color-mix(in srgb, var(--bf-accent) 30%, transparent);
	border: 2px solid var(--bf-accent);
	font-weight: 700;
}
.bf-week-slot[aria-pressed="true"]::before {
	content: "\2713\00a0";
}
.bf-week-slot.is-full {
	background: transparent;
	border-style: dashed;
}
.bf-week-full {
	font-size: 0.85em;
	opacity: 0.8;
}
.bf-week-none {
	margin: 0.25em 0;
	opacity: 0.6;
	font-size: 0.9em;
	text-align: center;
}
.bf-week-empty,
.bf-week-chosen {
	grid-column: 1 / -1;
	margin: 0.5em 0 0;
}
.bf-week-chosen {
	font-weight: 600;
}
.bf-week-switch {
	margin: 0.75em 0 0;
	font-size: 0.9em;
}

/* Themes style every <button> (Kapow's theme switcher with a long, very specific selector), which
   would make every time look like the page's main call to action. The picker's look carries
   meaning (free, full, chosen), so its few colour properties win with !important. */
.booking-form-wrapper .bf-week button {
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: inherit !important;
	font-weight: 600 !important;
}
.booking-form-wrapper .bf-week .bf-week-slot {
	background: color-mix(in srgb, var(--bf-good) 14%, transparent) !important;
	border: 1px solid var(--bf-line) !important;
	padding: 0.5em 0.4em !important;
}
.booking-form-wrapper .bf-week .bf-week-slot:hover {
	border-color: var(--bf-accent) !important;
}
.booking-form-wrapper .bf-week .bf-week-slot.is-full {
	background: transparent !important;
	border-style: dashed !important;
	font-weight: 400 !important;
}
/* Nearly gone (2.3): the "Limited availability" colour, Settings → General. */
.booking-form-wrapper .bf-week .bf-week-slot.is-limited {
	background: color-mix(in srgb, var(--bf-limited, #f5c400) 22%, transparent) !important;
	border-color: var(--bf-limited, #f5c400) !important;
}
.bf-week-limited {
	display: block;
	font-size: 0.75em;
	font-weight: 600;
	margin-top: 0.15em;
}
.booking-form-wrapper .bf-week .bf-week-slot[aria-pressed="true"] {
	background: color-mix(in srgb, var(--bf-accent) 30%, transparent) !important;
	border: 2px solid var(--bf-accent) !important;
	font-weight: 700 !important;
}
.booking-form-wrapper .bf-week-nav button {
	background: transparent !important;
	border: 1px solid var(--bf-line) !important;
	padding: 0.35em 0.7em !important;
}
.booking-form-wrapper .bf-link {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-weight: 400 !important;
	text-decoration: underline !important;
}

/* The month grid (the list picker's date) gets the same protection: a themed <button> is a
   call to action, which made every day a yellow block of a different size. */
.booking-form-wrapper .bf-date-grid button {
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	line-height: 1 !important;
	font-weight: 600 !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	background: var(--bf-surface-2) !important;
}
.booking-form-wrapper .bf-date-grid .bf-cal-prev,
.booking-form-wrapper .bf-date-grid .bf-cal-next {
	width: 32px !important;
	height: 32px !important;
	border-color: var(--bf-line) !important;
	font-size: 18px !important;
}
.booking-form-wrapper .bf-date-grid .bf-cal-day {
	height: auto !important;
	min-height: 34px !important;
}
.booking-form-wrapper .bf-date-grid .bf-cal-day:hover:not([disabled]) {
	border-color: var(--bf-accent) !important;
}
.booking-form-wrapper .bf-date-grid button[disabled] {
	background: transparent !important;
	opacity: 0.35 !important;
}
.booking-form-wrapper .bf-date-grid .bf-cal-selected {
	background: color-mix(in srgb, var(--bf-accent) 30%, transparent) !important;
	border: 2px solid var(--bf-accent) !important;
	font-weight: 700 !important;
}

/* 2.0: [booking_availability] (12.6) */
.booking-availability {
	margin: 1em 0;
}
.booking-availability-nav {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	margin-bottom: 0.5em;
}
.booking-availability-scroll {
	overflow-x: auto;
	max-width: 100%;
}
.booking-availability-grid {
	border-collapse: collapse;
	width: 100%;
	min-width: 32em;
	font-size: 0.9em;
}
.booking-availability-grid th,
.booking-availability-grid td {
	border: 1px solid var(--bf-line);
	padding: 0.35em 0.5em;
	text-align: center;
	white-space: nowrap;
}
.booking-availability-grid thead th span {
	font-weight: normal;
	opacity: 0.75;
}
.booking-availability-grid tbody th {
	text-align: right;
	font-weight: 600;
}
.booking-availability-grid .is-free {
	background: color-mix(in srgb, var(--bf-good) 18%, transparent);
}
.booking-availability-grid .is-free a {
	color: inherit;
	font-weight: 600;
}
.booking-availability-grid .is-full {
	background: color-mix(in srgb, var(--bf-bad) 14%, transparent);
}
.booking-availability-grid .is-closed {
	background: var(--bf-surface);
	opacity: 0.6;
}

/* 2.0: [booking_resources] (12.26) */
.booking-resources {
	display: grid;
	grid-template-columns: repeat(var(--bf-columns, 3), minmax(0, 1fr));
	gap: 1.25em;
	margin: 1em 0;
}
@media (max-width: 782px) {
	.booking-resources {
		grid-template-columns: repeat(min(var(--bf-columns, 3), 2), minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.booking-resources {
		grid-template-columns: 1fr;
	}
}
.booking-resource-card {
	border: 1px solid var(--bf-line);
	border-radius: 6px;
	overflow: hidden;
	background: var(--bf-surface);
	display: flex;
	flex-direction: column;
}
.booking-resource-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.booking-resource-body {
	padding: 0.75em 1em 1em;
}
.booking-resource-body h3 {
	margin: 0 0 0.35em;
}
.booking-resource-price {
	font-weight: 600;
}

/* 2.0: waiting list (12.10) */
.booking-form-waitlist-note {
	margin: 0.25em 0 1em;
	padding: 0.6em 0.8em;
	border-left: 4px solid var(--bf-warn);
	background: color-mix(in srgb, var(--bf-warn) 14%, transparent);
}
.booking-form-waitlist-note[hidden],
fieldset.bf-booking-only[hidden] {
	display: none;
}
fieldset.bf-booking-only {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
/* Themes (Storefront among them) give fieldsets a background; these are only groupings. */
.booking-form-wrapper fieldset.bf-booking-only,
.booking-form-wrapper fieldset.booking-form-extras {
	background: transparent;
}
.booking-form-wrapper fieldset.booking-form-gateways {
	background: var(--bf-surface);
	border-color: var(--bf-line);
}
.slot-waitlist {
	display: block;
	font-size: 0.85em;
	text-decoration: underline;
	color: inherit;
}
.booking-waitlist-form {
	margin-top: 1.5em;
}
.booking-form-login-note {
	margin: 0.25em 0 1em;
	padding: 0.6em 0.8em;
	border-left: 4px solid var(--bf-info);
	background: color-mix(in srgb, var(--bf-info) 14%, transparent);
}
.booking-form-login-note[hidden] {
	display: none;
}

/* Visually hidden, read by screen readers (12.24). Themes usually define this; not all do. */
.booking-form-wrapper .screen-reader-text,
.booking-confirmation-container .screen-reader-text,
.booking-availability .screen-reader-text,
.booking-resources .screen-reader-text,
.booking-calendar-container .screen-reader-text,
.booking-my-bookings .screen-reader-text,
.time-slot .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}