/**
 * BBC Appointment Picker — Calendly-style polish.
 *
 * Loaded after datelite.css (see functions.php), so all `.bbc-picker .datepicker-*`
 * selectors here override the vendor styles via the cascade. Datelite itself is
 * never modified.
 */

/* ============================================================
   1. Card surface + design tokens
   ============================================================ */
.bbc-picker {
	--bbc-card-bg: #ffffff;
	--bbc-card-border: #e5e7eb;
	--bbc-card-radius: 16px;
	--bbc-card-padding: 28px;

	--bbc-slot-radius: 12px;
	--bbc-slot-bg: transparent;
	--bbc-slot-bg-hover: color-mix(in srgb, var(--dp-primary-color, #0066ff) 6%, transparent);
	--bbc-slot-border: var(--dp-border-color, #e5e7eb);
	--bbc-slot-border-hover: var(--dp-primary-color, #0066ff);
	--bbc-slot-active-bg: var(--dp-primary-color, #0066ff);
	--bbc-slot-gap: 8px;
	--bbc-slot-min-h: 48px;

	--bbc-status-success: var(--dp-primary-color, #0066ff);
	--bbc-error: #d92d20;

	--bbc-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--bbc-dur-fast: 150ms;
	--bbc-dur-base: 200ms;

	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 100%;
	padding: var(--bbc-card-padding);
	background: var(--bbc-card-bg);
	border: 1px solid var(--bbc-card-border);
	border-radius: var(--bbc-card-radius);
	font-family: var(--dp-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif);
	font-size: var(--dp-font-size-base, 16px);
	color: var(--dp-text-primary, #0f172a);
	box-sizing: border-box;
}
.bbc-picker *,
.bbc-picker *::before,
.bbc-picker *::after { box-sizing: border-box; }

/* ============================================================
   2. Header
   ============================================================ */
.bbc-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bbc-header-title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--dp-text-primary);
}
.bbc-header-subtitle {
	margin: 0;
	font-size: 0.9375em;
	line-height: 1.5;
	color: var(--dp-text-secondary);
}

/* ============================================================
   3. Body grid (calendar + slots)
   ============================================================ */
.bbc-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.bbc-cal-host,
.bbc-slots-wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

@media (min-width: 720px) {
	.bbc-body {
		display: grid;
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}
	.bbc-slots-wrap {
		border-left: 1px solid var(--bbc-card-border);
		padding-left: 32px;
		min-height: 100%;
	}
}

/* ============================================================
   4. Datelite calendar overrides
   ============================================================ */

/* The card now owns the surface — strip Datelite's own padding/background.
   Override Datelite's `overflow: hidden` + hard `min-width` (datelite.css:143-144),
   which clipped prev/next chevrons and edge day-cell hovers when the calendar
   column was narrower than the vendor's 320px floor. */
.bbc-picker .datepicker-calendar,
.bbc-picker .datepicker-container {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

/* Header row: month + nav (year picker is hidden — see below). */
.bbc-picker .datepicker-header {
	margin-bottom: 12px;
	padding: 0;
	gap: 4px;
}
.bbc-picker .datepicker-month-year {
	gap: 2px;
	justify-content: center;
}

/* Year picker disabled — the calendar's minDate/maxDate already constrain it
   to a near-future window; jumping years adds noise without a use case. */
.bbc-picker .datepicker-year-btn,
.bbc-picker .datepicker-year-dropdown {
	display: none;
}

.bbc-picker .datepicker-month-btn,
.bbc-picker .datepicker-year-btn {
	font-size: 0.9375em;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dp-text-primary);
	padding: 6px 8px;
	border-radius: 6px;
}

/* The native <select>s ship with a heavy bordered input look that visually
   dominates the calendar grid below. Strip the chrome so they read like inline
   text with a subtle hover affordance. */
.bbc-picker .datepicker-month-dropdown,
.bbc-picker .datepicker-year-dropdown {
	background: transparent;
	border: 0;
	padding: 6px 8px;
	margin: 0;
	min-width: 0;
	font-size: 0.9375em;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dp-text-primary);
	border-radius: 6px;
	box-shadow: none;
	text-align: center;
	text-align-last: center;
	transition:
		background-color var(--bbc-dur-fast) var(--bbc-ease),
		color var(--bbc-dur-fast) var(--bbc-ease);
	/* Make the native select arrow disappear so it reads as a button. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.bbc-picker .datepicker-month-dropdown:hover,
.bbc-picker .datepicker-year-dropdown:hover {
	background: var(--dp-bg-hover);
	border: 0;
	transform: none;
	color: var(--dp-text-primary);
}
.bbc-picker .datepicker-month-dropdown:focus,
.bbc-picker .datepicker-year-dropdown:focus,
.bbc-picker .datepicker-month-dropdown:focus-visible,
.bbc-picker .datepicker-year-dropdown:focus-visible {
	border: 0;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-primary-color, #0066ff) 25%, transparent);
	outline: none;
}

.bbc-picker .datepicker-prev-btn,
.bbc-picker .datepicker-next-btn {
	background: transparent;
	width: 32px;
	height: 32px;
	border-radius: var(--dp-border-radius-md, 12px);
	color: var(--dp-text-secondary);
	flex-shrink: 0;
	transition:
		background-color var(--bbc-dur-fast) var(--bbc-ease),
		color var(--bbc-dur-fast) var(--bbc-ease),
		transform var(--bbc-dur-fast) var(--bbc-ease);
}
.bbc-picker .datepicker-prev-btn:hover,
.bbc-picker .datepicker-next-btn:hover {
	background: var(--dp-bg-hover);
	color: var(--dp-text-primary);
	transform: none;
	box-shadow: none;
}

/* Datelite's prev/next chevrons are SVGs nested in the button — without this,
   clicks landing on the SVG don't bubble up. */
.bbc-picker .datepicker-prev-btn svg,
.bbc-picker .datepicker-next-btn svg,
.bbc-picker .datepicker-prev-btn svg *,
.bbc-picker .datepicker-next-btn svg * { pointer-events: none; }

/* Weekday header row. */
.bbc-picker .datepicker-weekdays {
	gap: 2px;
	margin-bottom: 6px;
}
.bbc-picker .weekday {
	font-size: 0.8125em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dp-text-secondary);
	padding: 6px 0;
}

/* Day grid: shape driven by the "Border radius" control (--dp-border-radius-md). */
.bbc-picker .datepicker-days { gap: 2px; }
.bbc-picker .datepicker-day {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--dp-border-radius-md, 12px);
	font-size: 1em;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--dp-text-primary);
	transition:
		background-color var(--bbc-dur-fast) var(--bbc-ease),
		color var(--bbc-dur-fast) var(--bbc-ease),
		box-shadow var(--bbc-dur-fast) var(--bbc-ease),
		transform var(--bbc-dur-fast) var(--bbc-ease);
}
.bbc-picker .datepicker-day:hover:not(:disabled) {
	background: var(--dp-bg-hover);
	box-shadow: none;
	transform: none;
}

/* Today: outline ring (not filled). */
.bbc-picker .datepicker-day.today {
	background: transparent;
	color: var(--dp-primary-color);
	font-weight: 600;
	box-shadow: inset 0 0 0 1.5px var(--dp-primary-color);
}
.bbc-picker .datepicker-day.today:hover:not(:disabled) {
	background: var(--dp-bg-hover);
	box-shadow: inset 0 0 0 1.5px var(--dp-primary-color);
}

/* Selected: filled accent + tinted shadow + scale-pop animation. */
.bbc-picker .datepicker-day.selected,
.bbc-picker .datepicker-day.selected:hover,
.bbc-picker .datepicker-day.today.selected {
	background: var(--dp-primary-color);
	color: #fff;
	box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--dp-primary-color) 40%, transparent);
	animation: bbc-day-pop 220ms var(--bbc-ease);
}
@keyframes bbc-day-pop {
	0%   { transform: scale(0.85); }
	60%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Disabled: no Datelite red strikethrough. */
.bbc-picker .datepicker-day:disabled,
.bbc-picker .datepicker-day:disabled:hover {
	color: var(--dp-text-muted);
	opacity: 0.45;
	background: transparent;
	box-shadow: none;
	cursor: not-allowed;
}
.bbc-picker .datepicker-day:disabled::after { display: none; }

/* Outside-month days. */
.bbc-picker .datepicker-day.other-month { opacity: 0.35; }
.bbc-picker.bbc-hide-other-month .datepicker-day.other-month {
	visibility: hidden;
	pointer-events: none;
}

/* Datelite Clear / Today action buttons in the footer. */
.bbc-picker .datepicker-clear-btn,
.bbc-picker .datepicker-today-btn {
	font-size: 0.875em;
	font-weight: 500;
	color: var(--dp-text-secondary);
	background: transparent;
	border-radius: var(--dp-border-radius-md, 12px);
	transition:
		background-color var(--bbc-dur-fast) var(--bbc-ease),
		color var(--bbc-dur-fast) var(--bbc-ease);
}
.bbc-picker .datepicker-clear-btn:hover,
.bbc-picker .datepicker-today-btn:hover {
	background: var(--dp-bg-hover);
	color: var(--dp-text-primary);
}

/* ============================================================
   5. Slots header (shows the selected date)
   ============================================================ */
.bbc-slots-header {
	margin-bottom: 12px;
	font-size: 0.9375em;
	font-weight: 600;
	color: var(--dp-text-primary);
}
.bbc-slots-date { font-variant-numeric: tabular-nums; }

/* ============================================================
   6. Slot list (grid is the default — fills the wide right column)
   ============================================================ */

/* Default: responsive grid that yields 2-4 columns on desktop. Grid wraps
   freely; we don't impose a max-height so it never grows a scrollbar — for
   typical 8–24 slot days it stays well within the page fold. */
.bbc-picker.bbc-slots-layout-grid .bbc-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--bbc-slot-gap);
	align-content: start;
}

/* Vertical-list alternative (one slot per row, full-width). This layout DOES
   cap height + scroll because the list grows linearly with slot count.
   `scrollbar-gutter: stable` reserves the scrollbar lane so adding/removing
   the bar never reflows the layout (no jump on click). */
.bbc-picker.bbc-slots-layout-list .bbc-slots {
	display: flex;
	flex-direction: column;
	gap: var(--bbc-slot-gap);
	max-height: 420px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}
.bbc-picker.bbc-slots-layout-list .bbc-slots::-webkit-scrollbar { width: 6px; }
.bbc-picker.bbc-slots-layout-list .bbc-slots::-webkit-scrollbar-thumb {
	background: var(--dp-bg-hover);
	border-radius: 999px;
}

.bbc-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: var(--bbc-slot-min-h);
	padding: 10px 14px;
	background: var(--bbc-slot-bg);
	color: inherit;
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border: 1.5px solid var(--bbc-slot-border);
	border-radius: var(--bbc-slot-radius);
	cursor: pointer;
	text-align: center;
	transition:
		border-color var(--bbc-dur-fast) var(--bbc-ease),
		background-color var(--bbc-dur-fast) var(--bbc-ease),
		color var(--bbc-dur-fast) var(--bbc-ease),
		box-shadow var(--bbc-dur-fast) var(--bbc-ease),
		transform var(--bbc-dur-fast) var(--bbc-ease);
}

/* List variant aligns slot label to the start so the layout reads as a list. */
.bbc-picker.bbc-slots-layout-list .bbc-slot {
	justify-content: space-between;
	text-align: left;
}

.bbc-slot:hover:not([disabled]) {
	border-color: var(--bbc-slot-border-hover);
	background: var(--bbc-slot-bg-hover);
}
.bbc-slot:active:not([disabled]) {
	transform: translateY(1px);
}
.bbc-slot:focus-visible {
	outline: none;
	border-color: var(--bbc-slot-border-hover);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-primary-color, #0066ff) 25%, transparent);
}

.bbc-slot.is-selected,
.bbc-slot.is-selected:hover {
	background: var(--bbc-slot-active-bg);
	color: #fff;
	border-color: var(--bbc-slot-active-bg);
}

.bbc-slot-time {
	font-size: 0.9375em;
	letter-spacing: 0;
}

.bbc-slot .bbc-remaining {
	font-size: 0.75em;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 10%, transparent);
	white-space: nowrap;
}

/* ============================================================
   7. Loading skeleton
   ============================================================ */
.bbc-slots.is-loading {
	display: flex;
	flex-direction: column;
	gap: var(--bbc-slot-gap);
	max-height: none;
	overflow: visible;
	pointer-events: none;
}
.bbc-slots.is-loading > .bbc-skeleton {
	height: var(--bbc-slot-min-h);
	border-radius: var(--bbc-slot-radius);
	background: linear-gradient(
		90deg,
		var(--dp-bg-hover, #f1f5f9) 25%,
		color-mix(in srgb, var(--dp-bg-hover, #f1f5f9) 60%, white) 50%,
		var(--dp-bg-hover, #f1f5f9) 75%
	);
	background-size: 200% 100%;
	animation: bbc-shimmer 1.4s linear infinite;
	opacity: 1;
}
@keyframes bbc-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* ============================================================
   8. Empty state
   ============================================================ */
.bbc-empty {
	/* When the slots wrapper is in grid mode, force the empty state to span all
	   columns so the title doesn't end up squeezed into one ~120px cell. */
	grid-column: 1 / -1;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 24px;
	text-align: center;
	color: var(--dp-text-secondary);
	opacity: 1;
	animation: bbc-fade-in 220ms var(--bbc-ease);
}
@keyframes bbc-fade-in {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}
.bbc-empty-icon {
	width: 44px;
	height: 44px;
	color: var(--dp-text-muted);
	flex-shrink: 0;
	margin-bottom: 4px;
}
.bbc-empty-title {
	font-size: 1.0625em;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dp-text-primary);
}
.bbc-empty-sub {
	font-size: 0.9375em;
	max-width: 36ch;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ============================================================
   9. Status bar
   ============================================================ */
.bbc-status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9375em;
	min-height: 1.5em;
	color: var(--dp-text-secondary);
	padding-top: 16px;
	border-top: 1px solid var(--bbc-card-border);
}

.bbc-status-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--bbc-status-success);
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity var(--bbc-dur-base) var(--bbc-ease),
		transform var(--bbc-dur-base) var(--bbc-ease);
}
.bbc-status.is-confirmed .bbc-status-icon {
	opacity: 1;
	transform: scale(1);
}
.bbc-status.is-confirmed .bbc-status-text {
	color: var(--dp-text-primary);
	font-weight: 500;
}
.bbc-status.is-error {
	color: var(--bbc-error);
	border-top-color: color-mix(in srgb, var(--bbc-error) 30%, transparent);
}
.bbc-status.is-error .bbc-status-icon { display: none; }

/* ============================================================
   10. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.bbc-picker *,
	.bbc-picker *::before,
	.bbc-picker *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.bbc-slot { opacity: 1; transform: none; }
}