/* Tijdslot-pillen. De select blijft de datadrager (GF-validatie, ordermeta);
   .bd-ds-enhanced verbergt hem zodra JS de pillen rendert. Zonder JS blijft
   de gewone dropdown gewoon staan.

   Het grid heeft 6 vaste kolommen (:00 t/m :50); elke rij is één uur. JS zet
   per pil de kolom op basis van de minuten, zodat tijden verticaal uitlijnen
   en een rij in één blik als uurband leest. */

.bd-dinner-slot.bd-ds-enhanced select {
	display: none;
}

.bd-ds-pills {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	max-width: 430px;
	margin-top: 4px;
}

.bd-ds-hint {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	color: #555;
	font-style: italic;
}

.bd-ds-pill {
	min-height: 44px;
	padding: 8px 4px;
	border: 1px solid #767676;
	border-radius: 5px;
	background: #fff;
	color: #333;
	font: inherit;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

.bd-ds-pill:hover,
.bd-ds-pill:focus-visible {
	border-color: #26a1ff;
	color: #0b6dbd;
}

.bd-ds-pill[aria-pressed="true"] {
	background: #26a1ff;
	border-color: #26a1ff;
	color: #fff;
}

.bd-ds-pill--taken,
.bd-ds-pill--taken:hover {
	background: #f2f2f2;
	border-color: #ddd;
	color: #aaa;
	text-decoration: line-through;
	cursor: not-allowed;
}

.bd-ds-chosen {
	margin: 8px 0 0;
	font-weight: 600;
}