/**
 * HWBW Booking widget.
 *
 * Styling is Bootstrap 5 (site-wide) + the theme's brand overrides
 * (.btn-primary, .btn-outline-primary, .text-primary, headings in Domine).
 * This file holds ONLY what Bootstrap has no equivalent for: the calendar
 * day grid, the chooser hero gradient, a full-bleed helper, and a few
 * sizing details for the senior-friendly targets.
 */

.hwbwb-widget { font-size: 1.125rem; }
.hwbwb-widget .btn { min-height: 48px; }
.hwbwb-widget .btn-link { min-height: 0; }

/* Full-bleed bands on the clinic-chooser step */
.hwbwb-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.hwbwb-hero { background: linear-gradient(180deg, #e9f4fb 0%, #fff 100%); }

/* Letter-spacing for uppercase labels (no Bootstrap utility exists) */
.hwbwb-tracking { letter-spacing: 0.12em; }

/* Brand-light tint (theme $color-primary-light) */
.hwbwb-tint { background-color: #e6f2fa; }

/* Clickable cards */
.hwbwb-pick { transition: border-color 0.15s ease; }
.hwbwb-pick:hover, .hwbwb-pick:focus-visible { border-color: #2d96d3; }

/* Open/closed dot */
.hwbwb-dot { width: 8px; height: 8px; flex: 0 0 8px; }

/* Calendar day grid */
.hwbwb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}
.hwbwb-cal-dow {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bs-secondary-color);
	text-transform: uppercase;
	padding: 0.4rem 0;
}
.hwbwb-cal-day {
	aspect-ratio: 1;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #e6f2fa;
	color: #1a84b2;
	font-weight: 600;
}
.hwbwb-cal-day:hover:not(.is-off), .hwbwb-cal-day:focus-visible { background: #2d96d3; color: #fff; }
.hwbwb-cal-day.is-selected { background: #1a84b2; color: #fff; }
.hwbwb-cal-day.is-off { background: none; color: var(--bs-secondary-color); font-weight: 400; cursor: default; }

/* Long time lists scroll instead of stretching the page */
.hwbwb-times-scroll { max-height: 520px; overflow-y: auto; }

/* Confirmation check circle */
.hwbwb-check { width: 64px; height: 64px; font-size: 2rem; }

/* Honeypot */
.hwbwb-hp { position: absolute !important; left: -9999px !important; width: 0; height: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.hwbwb-widget * { transition: none !important; }
}