/* BUILD 1.0.0 — 2026-08-26 — booking picker */
.drhoda-booking { padding-block: 2rem 3rem; }
.drhoda-booking-wrap { max-width: 42rem; }
.drhoda-booking-card {
	border-radius: 2.2rem;
	border: 1px solid hsl(var(--drhoda-blush, 8 51% 87%) / 0.7);
	background: hsl(var(--drhoda-card, 0 0% 100%));
	padding: 1.75rem;
	box-shadow: 0 36px 70px -60px hsl(var(--drhoda-olive-deep, 79 13% 33%));
}
@media (min-width: 768px) { .drhoda-booking-card { padding: 2.25rem; } }
.drhoda-booking-title {
	margin: 0 0 1.5rem;
	font-size: 1.35rem;
	font-weight: 800;
	color: hsl(var(--drhoda-olive-deep, 79 13% 33%));
}
.drhoda-booking-label {
	margin: 1.5rem 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: hsl(var(--drhoda-nude, 20 33% 68%));
}
.drhoda-booking-label:first-of-type { margin-top: 0; }
.drhoda-booking-hint { margin: 0; font-size: 0.85rem; color: hsl(var(--drhoda-muted-fg, 79 8% 42%)); }
.drhoda-booking-days { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* A display value on the element beats the [hidden] attribute, which is why
 * every day's times were stacking on top of each other. Re-assert it. */
.drhoda-booking-times {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}
.drhoda-booking-times[hidden] { display: none !important; }
.drhoda-booking-day {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	border-radius: 1.2rem;
	border: 1px solid hsl(var(--drhoda-border, 20 25% 88%));
	background: hsl(var(--drhoda-warm-white, 30 50% 98%));
	padding: 0.7rem 1.1rem;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.drhoda-booking-day:hover:not(.is-disabled) { transform: translateY(-2px); background: hsl(var(--drhoda-cream, 20 43% 94%)); }
.drhoda-booking-day.is-active {
	background: hsl(var(--drhoda-blush, 8 51% 87%) / 0.75);
	border-color: hsl(var(--drhoda-nude, 20 33% 68%));
}
.drhoda-booking-day-name { font-size: 0.9rem; font-weight: 700; color: hsl(var(--drhoda-olive-deep, 79 13% 33%)); }
.drhoda-booking-day-date { font-size: 0.75rem; color: hsl(var(--drhoda-muted-fg, 79 8% 42%)); }
.drhoda-booking-time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	border-radius: 1rem;
	border: 1px solid hsl(var(--drhoda-border, 20 25% 88%));
	background: hsl(var(--drhoda-warm-white, 30 50% 98%));
	padding: 0.7rem 0.5rem;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: hsl(var(--drhoda-olive-deep, 79 13% 33%));
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.drhoda-booking-time:hover:not(.is-disabled) { transform: translateY(-2px); }
.drhoda-booking-time:hover:not(.is-disabled) { background: hsl(var(--drhoda-cream, 20 43% 94%)); }
.drhoda-booking-time.is-active {
	background: hsl(var(--drhoda-blush, 8 51% 87%) / 0.75);
	border-color: hsl(var(--drhoda-nude, 20 33% 68%));
	font-weight: 600;
}
.drhoda-booking-day.is-disabled,
.drhoda-booking-time.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: hsl(var(--drhoda-muted, 20 43% 94%) / 0.6);
	text-decoration: line-through;
}
.drhoda-booking-time-note {
	font-size: 0.68rem;
	border-radius: 9999px;
	background: hsl(var(--drhoda-olive-deep, 79 13% 33%) / 0.1);
	padding: 0.1rem 0.5rem;
	text-decoration: none;
}
.drhoda-booking-submit { margin-top: 1.75rem; }
.drhoda-booking-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Chosen slot, echoed back before payment. */
.drhoda-booking-selected {
	margin: 1.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-radius: 1.2rem;
	background: hsl(var(--drhoda-cream, 20 43% 94%));
	border: 1px solid hsl(var(--drhoda-nude, 20 33% 68%) / 0.45);
	padding: 0.85rem 1.1rem;
	font-size: 0.88rem;
}
.drhoda-booking-selected-label { color: hsl(var(--drhoda-muted-fg, 79 8% 42%)); }
.drhoda-booking-selected-value { font-weight: 700; color: hsl(var(--drhoda-olive-deep, 79 13% 33%)); }
.drhoda-booking-days {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.4rem;
	-webkit-overflow-scrolling: touch;
}
.drhoda-booking-days::-webkit-scrollbar { height: 6px; }
.drhoda-booking-days::-webkit-scrollbar-thumb {
	background: hsl(var(--drhoda-nude, 20 33% 68%) / 0.5);
	border-radius: 9999px;
}
.drhoda-booking-day { flex: 0 0 auto; scroll-snap-align: start; min-width: 6rem; }