/*
 * WooCommerce Appointments (BookingWP): the booking form shown by the
 * "Booking calendar" block, the [appointment_form] shortcode and appointable
 * product pages.
 *
 * Loaded only while the plugin is active (inc/integrations.php). The rules are
 * scoped to the plugin's classes and change colours, type and spacing only; the
 * calendar keeps its own layout and behaviour.
 *
 * Tip: to adjust a detail, inspect the calendar in the browser and add the rule
 * at the end of this file (or in Site Editor > Styles > Additional CSS).
 */

.wc-appointments-appointment-form-wrap,
.wp-block-brillancourt-booking form.cart {
	--bc-slot-bg: var(--wp--preset--color--base);
	--bc-slot-line: var(--wp--custom--line--faint);
	--bc-selected: var(--wp--preset--color--primary);
	--bc-selected-text: var(--wp--preset--color--base-2);

	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
}

.wp-block-brillancourt-booking form.cart {
	box-sizing: border-box; /* The plugin sets width: 100%: keep the padding inside it. */
	max-width: 100%;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	border: 1px solid var(--wp--custom--line--soft);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--wp--preset--shadow--brass);
}

/* Field labels (staff, duration, add-ons) ---------------------------------- */

.wc-appointments-appointment-form :is(label, legend),
.wc-appointments-appointment-form .form-field > label {
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-appointments-appointment-form :is(select, input[type="text"], input[type="number"], textarea),
#wc_appointments_field_staff {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--custom--line--faint);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wc-appointments-appointment-form fieldset {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

/* Calendar (jQuery UI datepicker) ------------------------------------------ */

.wc-appointments-appointment-form .ui-datepicker {
	width: 100%;
	max-width: 26rem;
	padding: 0;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: 0;
	background: var(--wp--preset--color--base-2);
	font-family: var(--wp--preset--font-family--body);
}

.wc-appointments-appointment-form .ui-datepicker-header {
	padding: 0.75rem 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--wp--custom--line--faint);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wc-appointments-appointment-form .ui-datepicker-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.wc-appointments-appointment-form .ui-datepicker-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.wc-appointments-appointment-form :is(.ui-datepicker-prev, .ui-datepicker-next) {
	order: 1;
	cursor: pointer;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

.wc-appointments-appointment-form .ui-datepicker-prev {
	order: 0;
}

.wc-appointments-appointment-form .ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 3px;
}

.wc-appointments-appointment-form .ui-datepicker-calendar td {
	padding: 0;
}

.wc-appointments-appointment-form .ui-datepicker-calendar td :is(a, span) {
	display: block;
	padding: 0.4rem 0;
	text-decoration: none;
}

.wc-appointments-appointment-form .ui-datepicker-calendar th {
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-transform: uppercase;
}

.wc-appointments-appointment-form .ui-datepicker-calendar td :is(a, span) {
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

/* Days that can be booked. */
.wc-appointments-appointment-form .ui-datepicker-calendar td:not(.ui-state-disabled) a {
	border-color: var(--bc-slot-line);
	background: var(--bc-slot-bg);
}

.wc-appointments-appointment-form .ui-datepicker-calendar td:not(.ui-state-disabled) a:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Days that are fully booked or closed. */
.wc-appointments-appointment-form .ui-datepicker-calendar td.ui-state-disabled :is(a, span) {
	color: var(--wp--preset--color--contrast-2);
	opacity: 0.45;
}

.wc-appointments-appointment-form .ui-datepicker-calendar td.ui-datepicker-today :is(a, span) {
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

.wc-appointments-appointment-form .ui-datepicker-calendar :is(td.ui-datepicker-current-day a, td a.ui-state-active) {
	border-color: var(--bc-selected);
	background: var(--bc-selected);
	color: var(--bc-selected-text);
}

/* Time slots --------------------------------------------------------------- */

.wc-appointments-appointment-form :is(.slot-picker, .time-picker) ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-appointments-appointment-form :is(.slot-picker, .time-picker) li :is(a, button) {
	display: inline-block;
	min-width: 4.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--bc-slot-line);
	border-radius: 0;
	background: var(--bc-slot-bg);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.wc-appointments-appointment-form :is(.slot-picker, .time-picker) li :is(a, button):hover {
	border-color: var(--wp--preset--color--accent);
}

.wc-appointments-appointment-form :is(.slot-picker, .time-picker) li:is(.selected, .ui-state-active) :is(a, button) {
	border-color: var(--bc-selected);
	background: var(--bc-selected);
	color: var(--bc-selected-text);
}

.wc-appointments-appointment-form :is(.slot-picker, .time-picker) li:is(.fully_scheduled, .not_bookable) :is(a, button) {
	opacity: 0.45;
	text-decoration: line-through;
}

/* Remaining places on a slot. */
.wc-appointments-appointment-form :is(.slot-picker, .time-picker) .slot-count,
.wc-appointments-appointment-form :is(.slot-picker, .time-picker) .slot_count {
	display: block;
	color: inherit;
	font-size: 0.7rem;
	opacity: 0.75;
}

/* Price, errors and the "Book" button -------------------------------------- */

.wc-appointments-appointment-cost {
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
}

.wc-appointments-appointment-form .appointment-error,
.wc-appointments-appointment-cost .appointment-error {
	color: var(--wp--preset--color--carmine);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

.wc-appointments-appointment-form-button,
.wc-appointments-appointment-form-wrap .single_add_to_cart_button {
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--hairline);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.wc-appointments-appointment-form-button:hover,
.wc-appointments-appointment-form-wrap .single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--contrast);
}

.wc-appointments-appointment-form-button:is(.disabled, :disabled) {
	cursor: not-allowed;
	opacity: 0.5;
}

/*
 * Players field (Brillancourt Core labels the quantity field): label on its own
 * line, then a wide field and the booking button side by side, the hint below.
 */
.wp-block-brillancourt-booking form.cart:has(.brillancourt-players) {
	display: flex !important; /* The plugin sets display: block !important on the form. */
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.wp-block-brillancourt-booking form.cart:has(.brillancourt-players) > :not(.brillancourt-players, .wc-appointments-appointment-form-button) {
	flex: 1 0 100%;
}

.brillancourt-players {
	display: contents;
}

.brillancourt-players .brillancourt-players__label {
	flex: 1 0 100%;
	margin-top: 1.5rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.2;
}

.brillancourt-players .quantity {
	margin: 0;
}

.brillancourt-players .quantity .qty {
	box-sizing: border-box;
	width: 7rem;
	min-height: 3rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 600;
	text-align: center;
}

.brillancourt-players .quantity .qty:focus {
	border-color: var(--wp--preset--color--primary);
}

.brillancourt-players__hint {
	flex: 1 0 100%;
	order: 1;
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wp-block-brillancourt-booking form.cart:has(.brillancourt-players) .wc-appointments-appointment-form-button {
	min-height: 3rem;
	margin-top: 0;
	padding-inline: 1.75rem;
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * While the price is recalculated (new number of players, new slot), the plugin
 * hides the price block for a moment and the whole form jumps up and down. Keep
 * the last price in place until the new one arrives.
 */
.wc-appointments-appointment-form-wrap:is(:has(.wca-loading-bar.is-active), :has(.slot.selected)) .wc-appointments-appointment-cost:not(:empty) {
	display: block !important;
}

/* Keyboard focus, everywhere in the form. */
.wc-appointments-appointment-form-wrap :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wc-appointments-appointment-form-wrap * {
		transition: none !important;
	}
}

/* Booking page: the calendar fills its column (larger dates, easier to tap) */

.wp-block-brillancourt-booking .wc-appointments-appointment-form {
	display: block;
	width: 100%;
}

.wp-block-brillancourt-booking .wc-appointments-appointment-form .ui-datepicker {
	max-width: none;
}