/**
 * Styling voor de boekingswidget ([optima_booking]-shortcode). De plugin
 * levert alleen semantische, BEM-achtige markup; alle vormgeving hier houdt
 * de widget consistent met de rest van de huisstijl.
 */

.optima-booking {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: var(--space-md);
	max-width: 640px;
}

.optima-booking__date-picker {
	margin-bottom: var(--space-sm);
}

.optima-booking__slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-sm);
}

.optima-booking__slot {
	padding: var(--space-2xs) var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg);
	cursor: pointer;
	font-size: 0.9rem;
	transition: background-color var(--duration-fast) var(--ease-calm);
}

.optima-booking__slot:hover,
.optima-booking__slot:focus-visible {
	background-color: var(--color-accent-light);
}

.optima-booking__slot.is-selected {
	background-color: var(--color-accent);
	color: var(--color-text-on-accent);
	border-color: var(--color-accent-dark);
}

.optima-booking__slot[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.optima-booking__details {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
	margin-top: var(--space-sm);
}

.optima-booking__details[hidden] {
	display: none;
}