/**
 * The theme lays out form.cart as a flex row (quantity + button sit
 * side-by-side, centered). Rather than inventing separate spacing, this
 * makes our picker take its own full-width row within that same flex
 * container (form.cart already has flex-wrap: wrap, so this is a standard
 * "break onto its own line" technique) and reuses the theme's existing
 * label/heading typography instead of redefining it.
 */
.weecapt-booking-picker {
	flex: 1 0 100%;
	width: 100%;
	margin-bottom: 20px;
}

.weecapt-booking-picker .form-field {
	margin-bottom: 10px;
}

.weecapt-booking-picker label {
	display: block;
}

.weecapt-booking-picker input#weecapt-booking-date {
	max-width: 220px;
	height: 52px;
	padding: 0 12px;
}

.weecapt-booking-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.weecapt-slot-btn {
	padding: 8px 16px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 35px;
	cursor: pointer;
	font-size: 14px;
}

.weecapt-slot-btn:hover:not(:disabled) {
	border-color: #999;
}

.weecapt-slot-selected {
	background: var( --e-global-color-primary, #2c7be5 );
	color: #fff;
	border-color: transparent;
}

.weecapt-slot-taken {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.weecapt-no-slots {
	color: #999;
	font-style: italic;
}