/**
 * Afspraakmodule (GP Bookings) in de huisstijl.
 *
 * De plugin werkt met eigen CSS-variabelen; die voeden we met het Astra global
 * color palette in plaats van overal tegen kleuren te vechten. Daarnaast krijgen
 * de kalender en de tijdsloten de vormgeving van de site: haarlijnen, goud als
 * accent, de serif voor datums en koppen.
 *
 * Alles staat onder .gfield--type-gpb_booking_time of .gpb-booking-time-picker,
 * dus buiten die module raakt dit niets.
 */

.gpb-booking-time-picker {
	--dm-goud: var(--ast-global-color-0, #957d48);
	--dm-ink: var(--ast-global-color-1, #1d1d1b);
	--dm-lijn: var(--ast-global-color-2, #e6e6e6);
	--dm-zacht: var(--ast-global-color-4, #f5f5f5);

	/* Variabelen van de plugin zelf. */
	--gpb-primary: var(--dm-goud);
	--gpb-primary-rgb: 149, 125, 72;
	--gpb-fallback-primary: var(--dm-goud);
	--gpb-fallback-primary-darker: #7d6a3d;
	--gpb-fallback-primary-rgb: 149, 125, 72;
	--gpb-background: #fff;
	--gpb-border: var(--dm-lijn);
	--gpb-text: var(--dm-ink);
	--gpb-color-available: var(--dm-goud);
	--gpb-color-booked: #b9b3a6;
	--gpb-color-unavailable: var(--dm-lijn);
	--gpb-transition: 0.2s ease;

	color: var(--dm-ink);
	font-size: 0.9375rem;
}

/* ── Kalender ─────────────────────────────────────── */

.gpb-booking-time-picker .rdp-root,
.gpb-booking-time-picker .rdp-root.rdp-root {
	/* Geen wit kader: de kalender staat op de achtergrond van het formulierblok
	   en een wit vlak daarbinnen leest als een tweede kader. */
	/* De plugin zet deze variabele zelf op haar blauw; vandaar de extra
	   specificiteit zodat het goud van de site wint. */
	--rdp-accent-color: var(--dm-goud) !important;
	--rdp-accent-background-color: rgba(149, 125, 72, 0.1) !important;
	--rdp-day-height: 42px;
	--rdp-day-width: 42px;
	--rdp-day_button-border-radius: 0;
	--rdp-selected-border: 0;

	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 0.5rem;
}

/* Maand en jaar in de serif van de site. */
.gpb-booking-time-picker .rdp-month_caption,
.gpb-booking-time-picker .rdp-caption_label {
	font-family: 'Minion-Pro', minion-pro, serif;
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: capitalize;
}

.gpb-booking-time-picker .rdp-dropdown {
	border: 1px solid var(--dm-lijn);
	background: #fff;
	color: var(--dm-ink);
	font-size: 0.875rem;
	padding: 0.25em 0.5em;
}

/* Pijltjes als dunne ronde knoppen, zoals elders op de site. */
.gpb-booking-time-picker .rdp-button_previous,
.gpb-booking-time-picker .rdp-button_next {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(149, 125, 72, 0.35);
	border-radius: 50%;
	background: #fff;
	color: var(--dm-goud);
	transition: background-color var(--gpb-transition), border-color var(--gpb-transition), color var(--gpb-transition);
}

.gpb-booking-time-picker .rdp-button_previous:hover:not([aria-disabled="true"]),
.gpb-booking-time-picker .rdp-button_next:hover:not([aria-disabled="true"]) {
	background: var(--dm-ink);
	border-color: var(--dm-ink);
	color: #fff;
}

.gpb-booking-time-picker .rdp-button_previous[aria-disabled="true"],
.gpb-booking-time-picker .rdp-button_next[aria-disabled="true"] {
	opacity: 0.3;
}

.gpb-booking-time-picker .rdp-chevron {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Dagkoppen klein en gespatieerd. */
.gpb-booking-time-picker .rdp-weekday {
	color: var(--ast-global-color-7, #424242);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-bottom: 0.5em;
}

.gpb-booking-time-picker .rdp-day_button {
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--dm-ink);
	font-size: 0.875rem;
	transition: background-color var(--gpb-transition), color var(--gpb-transition), border-color var(--gpb-transition);
}

/* Beschikbaar: geen kadertje per dag, dat maakt het raster rommelig. Enkel een
   vulling bij hover, zodat het rooster rustig blijft. */
.gpb-booking-time-picker .gpb-day--available .rdp-day_button {
	border-color: transparent;
	background: rgba(149, 125, 72, 0.07);
	color: var(--dm-ink);
	cursor: pointer;
}

.gpb-booking-time-picker .gpb-day--available .rdp-day_button:hover {
	border-color: transparent;
	background: rgba(149, 125, 72, 0.22);
	color: var(--dm-ink);
}

/* Gekozen dag: vol goud. */
.gpb-booking-time-picker .rdp-selected .rdp-day_button,
.gpb-booking-time-picker .rdp-selected .rdp-day_button:hover {
	border-color: var(--dm-goud);
	background: var(--dm-goud);
	color: #fff;
}

/* Vandaag: enkel een gouden cijfer, geen kader. */
.gpb-booking-time-picker .rdp-today:not(.rdp-selected) .rdp-day_button {
	color: var(--dm-goud);
	font-weight: 700;
}

/* Niet beschikbaar: uitgedoofd, geen kader dat aandacht trekt. */
.gpb-booking-time-picker .rdp-disabled .rdp-day_button,
.gpb-booking-time-picker .gpb-day--outside-availability .rdp-day_button,
.gpb-booking-time-picker .gpb-day--unavailable .rdp-day_button {
	border-color: transparent;
	background: transparent;
	color: #c7c7c7;
	cursor: default;
}

.gpb-booking-time-picker .rdp-day:focus-visible .rdp-day_button,
.gpb-booking-time-picker .rdp-day_button:focus-visible {
	outline: 2px solid var(--dm-goud);
	outline-offset: 1px;
}

/* ── Kop van de tijdslotweergave ──────────────────── */

.gpb-booking-time-picker__header {
	align-items: center;
	margin-bottom: 1rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--dm-lijn);
}

.gpb-booking-time-picker__header h4 {
	margin: 0;
	font-family: 'Minion-Pro', minion-pro, serif;
	font-size: 1.125rem;
	font-weight: 400;
}

/* De "terug"-knop was een zwarte knop met blauwe tekst; nu een tekstlink. */
.gpb-booking-time-picker__back {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--dm-goud) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	text-decoration: underline !important;
	text-transform: none !important;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.gpb-booking-time-picker__back:hover {
	background: none !important;
	color: var(--dm-ink) !important;
}

.gpb-booking-time-picker__duration {
	color: var(--ast-global-color-7, #424242);
	font-family: 'Roboto', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ── Tijdsloten ───────────────────────────────────── */

/* Enkel .__grid is het raster. .__slots is de wrapper eromheen: die tot grid
   maken duwt het hele raster in één kolom. */
.gpb-booking-time-picker__slots {
	margin-top: 1rem;
}

.gpb-booking-time-picker__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
	gap: 0.5rem !important;
	grid-auto-rows: 1fr;
	margin-top: 0.75rem;
}

.gpb-booking-time-picker__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.55em 0.6em !important;
	border: 1px solid var(--dm-lijn) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--dm-ink) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color var(--gpb-transition), border-color var(--gpb-transition), color var(--gpb-transition);
}

.gpb-booking-time-picker__slot:hover {
	border-color: var(--dm-goud) !important;
	background: rgba(149, 125, 72, 0.08) !important;
	color: var(--dm-ink) !important;
}

.gpb-booking-time-picker__slot--selected,
.gpb-booking-time-picker__slot--selected:hover {
	border-color: var(--dm-goud) !important;
	background: var(--dm-goud) !important;
	color: #fff !important;
}

.gpb-booking-time-picker__slot--unavailable,
.gpb-booking-time-picker__slot:disabled {
	border-color: var(--dm-lijn) !important;
	background: var(--dm-zacht) !important;
	color: #b0b0b0 !important;
	cursor: default;
}

.gpb-booking-time-picker__slot--unavailable:hover,
.gpb-booking-time-picker__slot:disabled:hover {
	border-color: var(--dm-lijn) !important;
	background: var(--dm-zacht) !important;
}

/* Lege vakjes zonder tijd horen er niet te staan. */
.gpb-booking-time-picker__slot:empty,
.gpb-booking-time-picker__slot-time:empty {
	display: none;
}

.gpb-booking-time-picker__slot-spots {
	display: block;
	margin-top: 0.15em;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	opacity: 0.75;
	text-transform: uppercase;
}

.gpb-booking-time-picker__slot--selected .gpb-booking-time-picker__slot-spots {
	color: #fff;
}

/* ── Meldingen en laadtoestand ────────────────────── */

.gpb-booking-time-picker__empty,
.gpb-booking-time-picker__message,
.gpb-booking-time-picker__error,
.gpb-booking-time-picker__loading,
.gpb-booking-time-picker__calendar-loading-text {
	padding: 1.25rem 0;
	color: var(--ast-global-color-7, #424242);
	font-size: 0.875rem;
	text-align: center;
}

.gpb-booking-time-picker__error {
	color: #a3341f;
}

.gpb-booking-time-picker__skeleton-slot,
.gpb-calendar-skeleton {
	border-radius: 0;
	background: var(--dm-zacht);
}

@media (max-width: 543px) {
	.gpb-booking-time-picker .rdp-root {
		padding: 0.75rem;
	}

	.gpb-booking-time-picker__slots,
	.gpb-booking-time-picker__grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}