/**
 * booking-form-vue3-waiting-list.css — isolated styling for the Waiting List
 * integration of the Vue 3 booking form. Scoped to add-on classes only; no Lite
 * selectors are overridden. The colour is driven by the `--bpa-waiting-color`
 * CSS variable, which the add-on's JS sets from the customizable
 * `waiting_list_text_color` setting (default #F5AE41).
 */

/* A full timeslot re-surfaced as a selectable waiting slot. The Lite component
   adds `__bpa-is-disabled` only when a slot is NOT selectable; a waiting slot is
   selectable, so it renders like a normal slot but tinted with the waiting
   colour and bordered to read as "waiting", not "available". */
.bpa-front--dt__ts-body--item.bpa-is-waiting-slot {
	color: var(--bpa-waiting-color, #F5AE41);
	border-color: var(--bpa-waiting-color, #F5AE41);
	cursor: pointer;
	opacity: 1;
}

.bpa-front--dt__ts-body--item.bpa-is-waiting-slot.__bpa-is-selected {
	background-color: var(--bpa-waiting-color, #F5AE41);
	border-color: var(--bpa-waiting-color, #F5AE41);
	color: #fff;
}

/* The badge text rendered inside a waiting slot. */
.bpa-front--dt__ts-body--item.bpa-is-waiting-slot .bpa-front--ts-slot-badge {
	display: block;
	font-size: 11px;
	line-height: 1.2;
	margin-top: 2px;
	color: var(--bpa-waiting-color, #F5AE41);
}

.bpa-front--dt__ts-body--item.bpa-is-waiting-slot.__bpa-is-selected .bpa-front--ts-slot-badge {
	color: #fff;
}

/* Summary "Waiting List" notice row. */
.bpa-is-waiting-module-enable .bpa-is-waiting-applied {
	color: var(--bpa-waiting-color, #F5AE41);
	font-weight: 600;
}