/**
 * booking-form-vue3-multistaff.css — Multi-Staff Vue 3 booking-form styles.
 *
 * MS-B.1: scoped rules for the instructional "select exactly N" notice banner
 * rendered by the Pro Staff step (generic `.bpa-front-staff-step-notice` seam
 * node), laid out as message (left) + a live "Selected X/N" count (right, in the
 * staff-step header area). The clubbed-staff card "selected" visuals reuse the
 * Pro Staff step's existing `__bpa-is-selected` / `__bpa-is-active` classes, so no
 * extra card styling is needed here. Scoped under the Vue 3 root so it only ever
 * affects the new form.
 */

.bpa-frontend-vue3-root .bpa-front-staff-step-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 4px 0 12px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #535d71;
	background: #f4f6fb;
	border: 1px solid #cfd6e6;
	border-radius: 6px;
}

.bpa-frontend-vue3-root .bpa-front-staff-step-notice .bpa-ms-notice__msg {
	flex: 1 1 auto;
	min-width: 0;
}

.bpa-frontend-vue3-root .bpa-front-staff-step-notice .bpa-ms-notice__count {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 600;
	color: #2c3e50;
}