/**
 * Events Calendar — front-end styles.
 *
 * Self-contained and theme-agnostic. Two design goals drive this file:
 *
 *  1. Survive any theme. The calendar renders inside an arbitrary theme whose
 *     `a`, `.button`, `table`, `ul`, `h2`… rules would otherwise bleed in (e.g.
 *     coloured day numbers, themed tables). Every rule is therefore scoped under
 *     `.be-events` so it carries one extra class of specificity and reliably
 *     wins over typical theme selectors — no `!important` needed — plus a small
 *     reset neutralises inherited link/list/table styling.
 *  2. Look modern out of the box: a framed grid, today highlighted with the
 *     accent, event chips, hover affordances and a segmented view switcher.
 *
 * Palette is neutral + a single accent. Override `--bee-accent` on `.be-events`
 * (or a parent) to recolour links, today and event chips in one place.
 */
/* Shared palette. The events grid, plus the two standalone surfaces that are NOT
   nested inside .be-events (the event RSVP form, the My Appointments page), all
   need the same custom properties so an admin colour set inline as --bee-accent
   recomputes the whole derived palette (soft/strong tints, hover) on each. The
   booking widget keeps its own block below. */
.be-events,
.be-events-rsvp,
.be-myappts {
	--bee-space-1: 4px;
	--bee-space-2: 8px;
	--bee-space-3: 16px;
	--bee-space-4: 24px;
	--bee-space-5: 32px;
	--bee-radius: 10px;
	--bee-radius-sm: 6px;
	--bee-border: #e4e6ea;
	--bee-ink: #1e2327;
	--bee-muted: #5b616a;
	--bee-faint: #99a0a8;
	/* Accent: prefer the canonical Design System token (--be-color-primary) so the
	   module shares the brand colour wherever the DS tokens are loaded; then the
	   theme's brand colour (block themes / global styles); then the WordPress blue.
	   An explicit accent set in the booking settings overrides this via an inline
	   --bee-accent. */
	--bee-accent: var(--be-color-primary, var(--wp--preset--color--primary, var(--wp--preset--color--accent, #2271b1)));
	--bee-accent-soft: color-mix(in srgb, var(--bee-accent) 12%, transparent);
	--bee-accent-softer: color-mix(in srgb, var(--bee-accent) 6%, transparent);
	--bee-accent-strong: color-mix(in srgb, var(--bee-accent) 82%, #000);
	/* Hover fill + its text default to the accent, so an unset hover colour keeps
	   the current behaviour; an inline --bee-hover (from the booking settings)
	   recolours every hover/focus state. */
	--bee-hover: var(--bee-accent);
	--bee-on-hover: var(--bee-on-accent, #fff);
	/* Semantic status — defer to the Design System tokens, falling back to the
	   module's own values so the front (where the DS tokens may not load) is unchanged. */
	--bee-success: var(--be-color-success, #0a7c2f);
	--bee-success-soft: rgba(0, 163, 42, .12);
	--bee-danger: var(--be-color-danger, #b32d2e);
	--bee-danger-soft: rgba(214, 54, 56, .12);
	--bee-surface: #fff;
	--bee-surface-alt: #f6f7f8;
	--bee-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .06);
}

.be-events {
	margin: 0 0 var(--bee-space-4);
	color: var(--bee-ink);
	font-size: 15px;
	line-height: 1.5;
}

/* ---- Reset : stop the host theme from bleeding into the widget ---- */
.be-events,
.be-events * {
	box-sizing: border-box;
}

.be-events a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.be-events a:hover,
.be-events a:focus {
	text-decoration: none;
}

/* ============================ Header ============================ */
/* View switcher — a single segmented control. */
.be-events .be-events__views {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0 0 var(--bee-space-3);
	padding: 0;
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	background: var(--bee-surface);
	overflow: hidden;
}

.be-events .be-events__view-link {
	display: inline-block;
	padding: var(--bee-space-2) var(--bee-space-3);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bee-muted);
	background: transparent;
	transition: background-color .15s, color .15s;
}

.be-events .be-events__view-link + .be-events__view-link {
	border-left: 1px solid var(--bee-border);
}

.be-events .be-events__view-link:hover,
.be-events .be-events__view-link:focus {
	background: var(--bee-surface-alt);
	color: var(--bee-ink);
}

.be-events .be-events__view-link.is-active {
	background: var(--bee-ink);
	color: #fff;
}

/* Title + period navigation row. */
.be-events .be-events__toolbar {
	display: flex;
	align-items: center;
	gap: var(--bee-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--bee-space-3);
}

.be-events .be-events__period {
	order: -1;
	margin: 0 auto 0 0;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bee-ink);
	text-transform: capitalize;
}

.be-events .be-events__nav {
	display: inline-flex;
	gap: var(--bee-space-1);
}

/* Our own button look, overriding whatever .button means in the theme. */
.be-events .button {
	display: inline-flex;
	align-items: center;
	padding: var(--bee-space-1) var(--bee-space-3);
	min-height: 0;
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	background: var(--bee-surface);
	color: var(--bee-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.be-events .button:hover,
.be-events .button:focus {
	background: var(--bee-surface-alt);
	border-color: var(--bee-faint);
	color: var(--bee-ink);
}

/* ============================ Month grid ============================ */
.be-events .be-events__grid {
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	overflow: hidden;
	background: var(--bee-surface);
	box-shadow: var(--bee-shadow);
}

.be-events .be-events-month {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: var(--bee-surface);
}

.be-events .be-events-month th {
	padding: var(--bee-space-2);
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bee-muted);
	background: var(--bee-surface-alt);
	border: 0;
	border-bottom: 1px solid var(--bee-border);
}

.be-events .be-events-month__day {
	height: 104px;
	vertical-align: top;
	padding: var(--bee-space-1);
	border: 0;
	border-right: 1px solid var(--bee-border);
	border-bottom: 1px solid var(--bee-border);
	transition: background-color .12s;
}

.be-events .be-events-month__day:hover {
	background: color-mix(in srgb, var(--bee-hover) 6%, transparent);
}

.be-events .be-events-month td:last-child {
	border-right: 0;
}

.be-events .be-events-month tbody tr:last-child td {
	border-bottom: 0;
}

.be-events .be-events-month__day.is-outside {
	background: var(--bee-surface-alt);
}

.be-events .be-events-month__day.is-outside .be-events-month__daynum {
	color: var(--bee-faint);
}

.be-events .be-events-month__day.is-today {
	background: var(--bee-accent-soft);
}

.be-events .be-events-month__daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 var(--bee-space-1);
	margin-bottom: var(--bee-space-1);
	font-size: 13px;
	font-weight: 600;
	color: var(--bee-ink);
	border-radius: 999px;
	transition: background-color .12s, color .12s;
}

.be-events .be-events-month__daynum:hover {
	background: var(--bee-surface-alt);
}

.be-events .be-events-month__day.is-today .be-events-month__daynum {
	background: var(--bee-accent);
	color: var(--bee-on-accent, #fff);
}

.be-events .be-events-month__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.be-events .be-events-month__item {
	margin: 0 0 3px;
}

.be-events .be-events-month__link {
	display: block;
	padding: 3px var(--bee-space-2);
	font-size: 12px;
	line-height: 1.35;
	color: var(--bee-ink);
	background: var(--bee-accent-soft);
	border-left: 3px solid var(--bee-accent);
	border-radius: var(--bee-radius-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color .12s;
}

.be-events .be-events-month__link:hover,
.be-events .be-events-month__link:focus {
	background: color-mix(in srgb, var(--bee-hover) 20%, transparent);
}

.be-events .be-events-month__time {
	font-weight: 700;
	color: var(--bee-accent-strong);
	margin-right: var(--bee-space-1);
}

/* ============================ List view ============================ */
.be-events .be-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.be-events .be-events-list__daysep {
	margin: var(--bee-space-4) 0 var(--bee-space-2);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--bee-muted);
	padding-bottom: var(--bee-space-1);
	border-bottom: 1px solid var(--bee-border);
}

.be-events .be-events-list__daysep:first-child {
	margin-top: 0;
}

.be-events .be-events-list__item {
	display: flex;
	gap: var(--bee-space-3);
	padding: var(--bee-space-3) var(--bee-space-2);
	border-radius: var(--bee-radius);
	transition: background-color .12s;
}

.be-events .be-events-list__item:hover {
	background: var(--bee-surface-alt);
}

.be-events .be-events-list__date {
	flex: 0 0 auto;
	width: 60px;
	text-align: center;
	color: var(--bee-accent-strong);
	background: var(--bee-accent-soft);
	border-radius: var(--bee-radius-sm);
	padding: var(--bee-space-2) 0;
}

.be-events .be-events-list__d {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.be-events .be-events-list__m {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.be-events .be-events-list__title {
	margin: 0 0 var(--bee-space-1);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.be-events .be-events-list__title a {
	color: var(--bee-ink);
	transition: color .12s;
}

.be-events .be-events-list__title a:hover,
.be-events .be-events-list__title a:focus {
	color: var(--bee-hover);
}

.be-events .be-events-list__meta {
	margin: 0;
	color: var(--bee-muted);
	font-size: 14px;
}

.be-events .be-events-list__meta > span + span::before {
	content: " · ";
}

/* ============================ Week view ============================ */
.be-events .be-events-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--bee-space-2);
}

.be-events .be-events-week__col {
	display: flex;
	flex-direction: column;
	min-height: 140px;
	background: var(--bee-surface);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	overflow: hidden;
	box-shadow: var(--bee-shadow);
}

.be-events .be-events-week__col.is-today {
	border-color: var(--bee-accent);
	box-shadow: 0 0 0 1px var(--bee-accent), var(--bee-shadow);
}

.be-events .be-events-week__head {
	text-align: center;
	padding: var(--bee-space-2);
	border-bottom: 1px solid var(--bee-border);
	background: var(--bee-surface-alt);
}

.be-events .be-events-week__col.is-today .be-events-week__head {
	background: var(--bee-accent-soft);
}

.be-events .be-events-week__head a {
	color: var(--bee-ink);
}

.be-events .be-events-week__dow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--bee-muted);
}

.be-events .be-events-week__num {
	display: block;
	font-size: 20px;
	font-weight: 700;
}

.be-events .be-events-week__body {
	flex: 1;
	padding: var(--bee-space-2);
}

.be-events .be-events-week__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.be-events .be-events-week__item {
	display: block;
	padding: var(--bee-space-1) var(--bee-space-2);
	margin-bottom: var(--bee-space-1);
	font-size: 12px;
	line-height: 1.35;
	color: var(--bee-ink);
	background: var(--bee-accent-soft);
	border-left: 3px solid var(--bee-accent);
	border-radius: var(--bee-radius-sm);
	transition: background-color .12s;
}

.be-events .be-events-week__item:hover,
.be-events .be-events-week__item:focus {
	background: color-mix(in srgb, var(--bee-hover) 20%, transparent);
}

.be-events .be-events-week__time {
	display: block;
	font-weight: 700;
	color: var(--bee-accent-strong);
}

.be-events .be-events-week__empty {
	margin: var(--bee-space-2) 0;
	text-align: center;
	font-size: 12px;
	color: var(--bee-faint);
}

/* ============================ Shared ============================ */
.be-events .be-events__empty {
	padding: var(--bee-space-5) var(--bee-space-4);
	text-align: center;
	color: var(--bee-muted);
	background: var(--bee-surface-alt);
	border: 1px dashed var(--bee-border);
	border-radius: var(--bee-radius);
}

.be-events .be-events__pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--bee-space-2);
	margin-top: var(--bee-space-4);
}

/* ============================ Single event ============================ */
.be-events-single__meta {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-2);
	margin: var(--bee-space-3) 0;
	padding: var(--bee-space-3) var(--bee-space-4);
	background: var(--bee-surface-alt, #f6f7f8);
	border: 1px solid var(--bee-border, #e4e6ea);
	border-radius: var(--bee-radius, 10px);
	color: var(--bee-ink, #1e2327);
}

.be-events-single__row {
	display: flex;
	gap: var(--bee-space-2);
	align-items: flex-start;
}

.be-events-single__icon {
	color: var(--bee-accent, #2271b1);
	flex: 0 0 auto;
}

.be-events-single__cta {
	margin-top: var(--bee-space-1);
}

.be-events-single__cta a {
	color: var(--bee-accent, #2271b1);
	font-weight: 600;
}

/* ============================ Responsive ============================ */
@media (max-width: 782px) {
	.be-events .be-events-week {
		grid-template-columns: 1fr;
	}
	.be-events .be-events-week__col {
		min-height: 0;
	}
	.be-events .be-events-week__head {
		display: flex;
		gap: var(--bee-space-2);
		align-items: baseline;
		text-align: left;
	}
}

@media (max-width: 600px) {
	.be-events .be-events__period {
		font-size: 20px;
	}
	.be-events .be-events-month__day {
		height: auto;
		min-height: 68px;
	}
	.be-events .be-events-month__link {
		white-space: normal;
	}
	.be-events .be-events-month th {
		font-size: 10px;
		padding: var(--bee-space-1);
	}
}

/* ============================ RSVP ============================ */
.be-events-rsvp {
	margin: var(--bee-space-4, 24px) 0;
	padding: var(--bee-space-3, 16px) var(--bee-space-4, 24px);
	background: var(--bee-surface, #fff);
	border: 1px solid var(--bee-border, #e4e6ea);
	border-radius: var(--bee-radius, 10px);
	box-shadow: var(--bee-shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .06));
}

.be-events-rsvp__title {
	margin-top: 0;
}

.be-events-rsvp__count {
	color: var(--bee-muted, #5b616a);
	font-size: 14px;
}

.be-events-rsvp__field {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-1, 4px);
	margin-bottom: var(--bee-space-2, 8px);
	max-width: 360px;
}

.be-events-rsvp__field input[type="text"],
.be-events-rsvp__field input[type="email"],
.be-events-rsvp__field input[type="number"] {
	padding: var(--bee-space-1, 4px) var(--bee-space-2, 8px);
}

.be-events-rsvp__consent {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--bee-space-2, 8px);
	max-width: 480px;
}

.be-events-rsvp__notice {
	padding: var(--bee-space-2, 8px) var(--bee-space-3, 16px);
	border-radius: var(--bee-radius, 10px);
	margin-bottom: var(--bee-space-3, 16px);
}

.be-events-rsvp__notice--success {
	background: var(--bee-success-soft);
	color: var(--bee-success);
}

.be-events-rsvp__notice--error {
	background: var(--bee-danger-soft);
	color: var(--bee-danger);
}

.be-events-rsvp__full {
	font-weight: 600;
	color: var(--bee-danger);
}

/* ============================ Upcoming-events widget ============================ */
.be-events-widget {
	list-style: none;
	margin: 0;
	padding: 0;
}

.be-events-widget__item {
	padding: var(--bee-space-1, 4px) 0;
	border-bottom: 1px solid var(--bee-border, #e4e6ea);
}

.be-events-widget__item a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.be-events-widget__title {
	font-weight: 600;
}

.be-events-widget__date {
	font-size: 12px;
	color: var(--bee-muted, #5b616a);
}

/* ============================ Appointment booking picker ============================ */
.be-booking {
	--bee-space-2: 8px;
	--bee-space-3: 16px;
	--bee-radius: 10px;
	--bee-radius-sm: 6px;
	--bee-border: #e4e6ea;
	--bee-ink: #1e2327;
	--bee-muted: #5b616a;
	/* Inherit the theme's brand colour when it exposes one (block themes /
	   global styles), else fall back to the WordPress blue. An explicit accent
	   set in the booking settings overrides this via an inline --bee-accent. */
	--bee-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #2271b1));
	--bee-accent-soft: color-mix(in srgb, var(--bee-accent) 12%, transparent);
	/* Darkened accent for text on a soft-accent fill: keeps the brand hue while
	   lifting the slot labels and duration badge to a legible contrast. */
	--bee-accent-strong: color-mix(in srgb, var(--bee-accent) 82%, #000);
	--bee-success: #0a7c2f;
	--bee-success-soft: rgba(0, 163, 42, .12);
	--bee-danger: #b32d2e;
	--bee-danger-soft: rgba(214, 54, 56, .12);
	--bee-bg-soft: #f6f7f9;
	/* Text colours composited over the accent fill and the background panel.
	   Overridden inline by the booking settings (manual choice, else a readable
	   black/white auto-derived in PHP); these are the no-custom-colour defaults. */
	--bee-on-accent: #fff;
	--bee-on-bg: var(--bee-ink);
	--bee-on-bg-muted: var(--bee-muted);
	/* Hover fill + its text. Default to the accent so an unset hover colour keeps
	   the current behaviour; an explicit hover colour set in the booking settings
	   overrides via an inline --bee-hover (with --bee-on-hover derived/chosen). */
	--bee-hover: var(--bee-accent);
	--bee-on-hover: var(--bee-on-accent);
	max-width: 720px;
	/* Centre the widget in its container: without this the capped-width widget is
	   pinned to the left of a wider column, leaving a lopsided empty band on the
	   right ("everything on the side"). */
	margin-inline: auto;
	color: var(--bee-on-bg);
	font-size: 15px;
	line-height: 1.5;
}

/* Opt-in solid background (Settings → Appearance): the transparent default
   sits flush on the page, so a filled widget needs its own padding and rounded
   corners to read as a self-contained panel. */
.be-booking--has-bg {
	/* Generous padding all around so the content never touches the panel edges
	   (≈32px, responsive down on narrow screens). */
	padding: clamp(var(--bee-space-3), 5%, calc(var(--bee-space-3) * 2));
	background: var(--bee-bg);
	border-radius: var(--bee-radius);
	/* Keep the muted labels distinct from the main text on any panel colour by
	   fading the resolved on-bg colour toward the background itself. */
	--bee-on-bg-muted: color-mix(in srgb, var(--bee-on-bg) 72%, var(--bee-bg));
}

/* When the accent is inherited from the theme (no colour set in the booking
   settings) its hex is unknown server-side, so on-accent can't be pre-computed.
   Where supported, derive a readable text colour from the resolved accent;
   older browsers keep the white default above. */
@supports (color: contrast-color(white)) {
	.be-booking {
		--bee-on-accent: contrast-color(var(--bee-accent));
	}
}

/* Loading state: a centred spinner while a step's content is fetched, and an
   inline spinner ahead of the status line's "Loading…" on form submissions. */
.be-booking__loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bee-space-2);
	min-height: 160px;
	color: var(--bee-on-bg-muted);
}

.be-booking__spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--bee-accent-soft);
	border-top-color: var(--bee-accent);
	border-radius: 50%;
	animation: be-booking-spin .7s linear infinite;
}

.be-booking__status--loading {
	display: flex;
	align-items: center;
	gap: var(--bee-space-2);
}

.be-booking__status--loading::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border: 2px solid var(--bee-accent-soft);
	border-top-color: var(--bee-accent);
	border-radius: 50%;
	animation: be-booking-spin .7s linear infinite;
}

@keyframes be-booking-spin {
	to { transform: rotate(360deg); }
}

/* Keep the motion as a slow turn rather than a freeze, so the wait still reads
   as "working" for visitors who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.be-booking__spinner,
	.be-booking__status--loading::before {
		animation-duration: 1.6s;
	}
}

.be-booking__heading {
	margin: 0 0 var(--bee-space-3);
	font-size: 16px;
	font-weight: 600;
}

.be-booking__options {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-2);
}

/* Week calendar picker (service -> week -> details). */
.be-booking__weekmeta {
	display: flex;
	align-items: baseline;
	gap: var(--bee-space-2);
	margin: 0 0 var(--bee-space-2);
}

.be-booking__weekmeta-service {
	font-weight: 600;
}

.be-booking__weekmeta-duration {
	padding: 1px var(--bee-space-2);
	font-size: 12px;
	color: var(--bee-accent-strong);
	background: var(--bee-accent-soft);
	border-radius: 999px;
}

.be-booking__weeknav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bee-space-2);
	margin-bottom: var(--bee-space-3);
}

.be-booking__weeknav-label {
	font-weight: 600;
}

.be-booking__weeknav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	background: #fff;
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	font: inherit;
	font-size: 18px;
	line-height: 1;
	color: var(--bee-ink);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.be-booking__weeknav-btn:hover:not(:disabled),
.be-booking__weeknav-btn:focus:not(:disabled) {
	border-color: var(--bee-hover);
	background: color-mix(in srgb, var(--bee-hover) 12%, #fff);
	color: var(--bee-ink);
	outline: none;
}

.be-booking__weeknav-btn:disabled {
	opacity: .4;
	cursor: default;
}

.be-booking__week {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.be-booking__day {
	display: flex;
	flex: 1 0 64px;
	flex-direction: column;
	gap: 6px;
	min-width: 64px;
}

.be-booking__day-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--bee-border);
}

.be-booking__day-dow {
	color: var(--bee-on-bg-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.be-booking__day-num {
	font-size: 18px;
	font-weight: 600;
}

.be-booking__day.is-today .be-booking__day-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--bee-accent);
	color: var(--bee-on-accent, #fff);
}

.be-booking__day-slots {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Midday divider between the morning and afternoon runs of slots. */
.be-booking__slot-sep {
	height: 1px;
	margin: 2px 6px;
	background: var(--bee-border);
}

.be-booking__slot {
	padding: 6px 4px;
	background: var(--bee-accent-soft);
	border: 1px solid transparent;
	border-radius: var(--bee-radius-sm);
	font: inherit;
	font-size: 13px;
	color: var(--bee-accent-strong);
	text-align: center;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.be-booking__slot:hover,
.be-booking__slot:focus {
	border-color: var(--bee-hover);
	background: var(--bee-hover);
	color: var(--bee-on-hover, #fff);
	outline: none;
}

/* Group slot: the time label sits above a small seats-left line. */
.be-booking__slot--group {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.be-booking__slot-seats {
	font-size: 11px;
	opacity: .8;
}

/* Few seats left: a subtle warning tint so visitors notice the scarcity. */
.be-booking__slot--low {
	background: var(--bee-warning-soft, #fef3cd);
	color: var(--bee-warning-strong, #8a6d00);
}

/* Group seats picker on the details step. */
.be-booking__seats {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
}

.be-booking__seats-input {
	width: 5em;
}

/* Unavailable time on a given day: holds the row height so columns stay aligned. */
.be-booking__slot--empty {
	visibility: hidden;
	pointer-events: none;
}

.be-booking__day-empty {
	color: var(--bee-on-bg-muted);
	text-align: center;
}

/* Closed day inside an otherwise-open week: centre the marker over the spacers. */
.be-booking__day-empty--overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.be-booking__weekempty {
	margin-top: var(--bee-space-3);
	margin-bottom: var(--bee-space-3);
	text-align: center;
}

.be-booking__next {
	margin-top: var(--bee-space-2);
	padding: var(--bee-space-2) var(--bee-space-3);
	background: var(--bee-accent);
	border: 0;
	border-radius: var(--bee-radius-sm);
	font: inherit;
	font-weight: 600;
	color: var(--bee-on-accent, #fff);
	cursor: pointer;
}

.be-booking__next:hover,
.be-booking__next:focus {
	background: var(--bee-hover);
	color: var(--bee-on-hover, #fff);
	filter: brightness(.94);
	outline: none;
}

.be-booking__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bee-space-3);
	padding: var(--bee-space-2) var(--bee-space-3);
	background: #fff;
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	font: inherit;
	color: var(--bee-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.be-booking__option:hover,
.be-booking__option:focus {
	border-color: var(--bee-hover);
	/* A solid tint over white (not the transparent accent-soft) so the label stays
	   readable on any page background, and an explicit ink colour so an aggressive
	   theme button:hover rule can't repaint it white-on-white. */
	background: color-mix(in srgb, var(--bee-hover) 12%, #fff);
	color: var(--bee-ink);
	outline: none;
}

.be-booking__option-label {
	font-weight: 600;
}

.be-booking__option-meta {
	color: var(--bee-muted);
	font-size: 13px;
}

.be-booking__back {
	margin-bottom: var(--bee-space-3);
	padding: 0;
	background: none;
	border: 0;
	color: var(--bee-accent);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color .15s;
}

.be-booking__back:hover,
.be-booking__back:focus {
	color: var(--bee-hover);
}

.be-booking__form {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-3);
	/* No own max-width: the form fills the widget (itself capped at 720 and
	   centred), so every step is the same width and the fields never stretch to
	   the full page. */
}

.be-booking__field {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-2);
	margin: 0;
}

.be-booking__field input,
.be-booking__field textarea {
	width: 100%;
	padding: var(--bee-space-2);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	font: inherit;
	color: var(--bee-ink);
	box-sizing: border-box;
}

/* Tie the focused field to your brand colour without overriding its resting,
   theme-inherited look: an accent ring (kept as the visible focus indicator in
   place of the default outline) on the fields and the returning-client email. */
.be-booking__field input:focus,
.be-booking__field textarea:focus,
.be-booking__returning-email:focus {
	border-color: var(--bee-accent);
	box-shadow: 0 0 0 1px var(--bee-accent);
	outline: none;
}

.be-booking__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--bee-space-2);
}

.be-booking__submit {
	align-self: flex-start;
	padding: var(--bee-space-2) var(--bee-space-3);
	background: var(--bee-accent);
	color: var(--bee-on-accent, #fff);
	border: 0;
	border-radius: var(--bee-radius-sm);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.be-booking__submit:disabled {
	opacity: .6;
	cursor: default;
}

.be-booking__status {
	margin-bottom: var(--bee-space-3);
	color: var(--bee-on-bg-muted);
}

.be-booking__status--error {
	padding: var(--bee-space-2) var(--bee-space-3);
	background: var(--bee-danger-soft);
	color: var(--bee-danger);
	border-radius: var(--bee-radius-sm);
}

.be-booking__success {
	padding: var(--bee-space-3);
	background: var(--bee-success-soft);
	color: var(--bee-success);
	border-radius: var(--bee-radius);
	font-weight: 600;
}

.be-booking__empty {
	color: var(--bee-muted);
}

/* Waitlist sign-up shown when a service is fully booked. Sits inside the
   centered empty state; the form itself reads left-aligned like the booking form. */
.be-booking__waitlist {
	max-width: 420px;
	margin: var(--bee-space-3) auto 0;
	text-align: left;
}

.be-booking__waitlist-prompt {
	margin: 0 0 var(--bee-space-3);
	color: var(--bee-muted);
}

.be-booking__waitlist-form {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-3);
}

/* Earlier-slot opt-in on the booking form: same row layout as the consent line. */
.be-booking__earlier {
	display: flex;
	align-items: flex-start;
	gap: var(--bee-space-2);
}

/* ---- Self-service "my appointments" page ---- */

.be-myappts__identity {
	color: var(--bee-muted);
	margin-bottom: var(--bee-space-4);
}

.be-myappts__logout {
	margin-left: var(--bee-space-2);
}

.be-myappts__section-title {
	margin: var(--bee-space-4) 0 var(--bee-space-2);
}

.be-myappts__hint {
	color: var(--bee-muted);
	margin-top: 0;
}

.be-myappts__list {
	list-style: none;
	margin: 0 0 var(--bee-space-4);
	padding: 0;
}

.be-myappts__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bee-space-2);
	align-items: baseline;
	padding: var(--bee-space-2) var(--bee-space-3);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	margin-bottom: var(--bee-space-2);
	background: var(--bee-surface);
}

.be-myappts__when {
	font-weight: 600;
	color: var(--bee-ink);
}

.be-myappts__service {
	color: var(--bee-muted);
}

.be-myappts__contact {
	margin-top: var(--bee-space-4);
	padding: var(--bee-space-3);
	background: var(--bee-surface-alt);
	border-radius: var(--bee-radius);
}

/* Honeypot: visually and from assistive tech, but still in the DOM for bots. */
.be-myappts__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Returning-visitor "already a client?" affordance on the details step. */
.be-booking__returning {
	margin-bottom: var(--bee-space-3);
	padding: var(--bee-space-2) var(--bee-space-3);
	background: var(--bee-accent-soft);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	font-size: 14px;
}

/* Accordion header: the prompt is a bold, full-width control that expands the
   email panel. It is not a navigation link, so no underline or accent colour —
   the caret carries the "expandable" affordance. */
.be-booking__returning-toggle {
	display: flex;
	align-items: center;
	gap: var(--bee-space-2);
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: var(--bee-ink);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.be-booking__returning-label {
	flex: 1 1 auto;
}

/* Right-pointing triangle when collapsed; rotates to point down when expanded. */
.be-booking__returning-caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid currentColor;
	transition: transform var(--bee-duration, 150ms) ease;
}

.be-booking__returning-toggle[aria-expanded="true"] .be-booking__returning-caret {
	transform: rotate(90deg);
}

/* Neutralise theme button styling on the header's interactive states (some themes
   paint a solid accent background on button:focus), and give a discreet, on-brand
   keyboard focus ring instead. */
.be-booking__returning-toggle:hover,
.be-booking__returning-toggle:focus,
.be-booking__returning-toggle:active {
	background: none;
	color: var(--bee-ink);
	box-shadow: none;
}

.be-booking__returning-toggle:focus {
	outline: none;
}

.be-booking__returning-toggle:focus-visible {
	outline: 2px solid var(--bee-accent-strong);
	outline-offset: 2px;
}

/* "Not you?" reset stays a discreet inline link next to the welcome-back note. */
.be-booking__returning-reset {
	width: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--bee-accent-strong);
	font: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
}

.be-booking__returning-note {
	margin: 0;
}

.be-booking__returning-panel {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-2);
	margin-top: var(--bee-space-2);
}

/* The flex display above outranks the UA [hidden] rule (equal specificity, author
   wins on source order), so the collapsed panel would stay visible. Re-assert the
   hide with a (0,2,0) selector so the accordion actually closes. */
.be-booking__returning-panel[hidden] {
	display: none;
}

.be-booking__returning-hint {
	margin: 0;
	color: var(--bee-muted);
}

.be-booking__returning-email {
	max-width: 320px;
}

.be-booking__returning-send {
	align-self: flex-start;
	/* Secondary action: keep it shrink-to-fit so a theme that stretches buttons
	   full width can't make it compete with the primary "Book" button. */
	width: auto;
}

/* Rental & reservation — public reservation form (scoped like the rest). */
.be-events .be-resource-form {
	max-width: 32rem;
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-3);
}
.be-events .be-resource-field {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-1);
	margin: 0;
}
.be-events .be-resource-field > label {
	font-weight: 600;
	color: var(--bee-ink);
}
.be-events .be-resource-field input,
.be-events .be-resource-field select {
	padding: var(--bee-space-2);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
}
.be-events .be-resource-consent label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--bee-space-2);
	font-weight: 400;
}
.be-events .be-resource-notice {
	padding: var(--bee-space-2) var(--bee-space-3);
	border-radius: var(--bee-radius-sm);
	margin-bottom: var(--bee-space-3);
}
.be-events .be-resource-notice--success {
	background: var(--bee-success-soft);
	color: var(--bee-success);
}
.be-events .be-resource-notice--error {
	background: var(--bee-danger-soft);
	color: var(--bee-danger);
}

/* Contact step rendered by the shared Forms engine: the bef-* fields are styled
   by forms-frontend.css; here we only tie them to the booking's accent and
   rhythm so they sit seamlessly inside the picker panel. */
.be-booking__fields {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-3);
}

.be-booking__fields .bef-form__field {
	margin: 0;
}

.be-booking__fields .bef-form__control:focus,
.be-booking__fields .bef-form__control:focus-visible {
	border-color: var(--bee-accent);
	box-shadow: 0 0 0 1px var(--bee-accent);
	outline: none;
}

.be-booking__fields .bef-form__choice input:checked + *,
.be-booking__fields .bef-form__consent input:checked {
	accent-color: var(--bee-accent);
}

/* Self-service cancel control on the My Appointments list (E6). */
.be-myappts__cancel {
	display: inline;
	margin: 0 0 0 var(--bee-space-2);
}

.be-myappts__cancel-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--bee-danger);
	cursor: pointer;
	text-decoration: underline;
}

.be-myappts__cancel-btn:hover,
.be-myappts__cancel-btn:focus {
	color: var(--bee-danger);
	text-decoration: none;
}

/* Timezone note under the week grid (E1). */
.be-booking__tznote {
	margin: var(--bee-space-2) 0 0;
	font-size: 0.85em;
	color: var(--bee-muted, #646970);
}

/* Booking recap above the contact fields (E3). */
.be-booking__recap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bee-space-2);
	margin: 0 0 var(--bee-space-3);
	padding: var(--bee-space-2) var(--bee-space-3);
	background: var(--bee-accent-soft);
	border-left: 3px solid var(--bee-accent);
	border-radius: var(--bee-radius-sm);
}

.be-booking__recap-item {
	font-size: 0.95em;
}

.be-booking__recap-item + .be-booking__recap-item::before {
	content: "·";
	margin-right: var(--bee-space-2);
	color: var(--bee-muted, #646970);
}

.be-booking__recap-service {
	font-weight: 600;
	color: var(--bee-accent-strong);
}

/* Full postal address sits on its own line under the inline recap row. */
.be-booking__recap-address {
	flex-basis: 100%;
	font-size: 0.9em;
	color: var(--bee-muted, #646970);
}

/* RSVP and resource forms embed the same engine fields; give them the same
   rhythm + accent so the three front forms read identically. */
.be-events-rsvp__fields,
.be-resource__fields {
	display: flex;
	flex-direction: column;
	gap: var(--bee-space-3);
	margin: var(--bee-space-3) 0;
}

.be-events-rsvp__fields .bef-form__field,
.be-resource__fields .bef-form__field {
	margin: 0;
}

.be-events-rsvp__fields .bef-form__control:focus,
.be-events-rsvp__fields .bef-form__control:focus-visible,
.be-resource__fields .bef-form__control:focus,
.be-resource__fields .bef-form__control:focus-visible {
	border-color: var(--bee-accent);
	box-shadow: 0 0 0 1px var(--bee-accent);
	outline: none;
}

/* Featured events — highlighted across every calendar view (honours the
   "Highlight in calendar views" option on the event editor). */
.be-events {
	--bee-featured: var(--be-color-warning, #b8860b);
}

.be-events .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}

.be-events__featured-star {
	color: var(--bee-featured);
	font-size: 0.9em;
	line-height: 1;
}

.be-events__featured-badge {
	display: inline-block;
	margin-left: var(--bee-space-2);
	padding: 1px var(--bee-space-2);
	border-radius: var(--bee-radius-sm);
	background: color-mix(in srgb, var(--bee-featured) 14%, transparent);
	color: var(--bee-featured);
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
}

.be-events-month__item.is-featured,
.be-events-week__list .is-featured {
	border-left: 2px solid var(--bee-featured);
	padding-left: var(--bee-space-1);
}

.be-events-list__item.is-featured {
	border-left: 3px solid var(--bee-featured);
}

/* Self-service reschedule picker (no-JS slot grid on the My Appointments page). */
.be-myappts__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--bee-space-2);
	margin-left: var(--bee-space-2);
}

.be-myappts__actions .be-myappts__cancel {
	display: inline;
	margin: 0;
}

.be-myappts__resched-day {
	margin: 0 0 var(--bee-space-3);
}

.be-myappts__resched-slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bee-space-2);
}

.be-myappts__resched-slot {
	margin: 0;
}

.be-myappts__back {
	display: inline-block;
	margin-top: var(--bee-space-3);
}

/* Venue map (Leaflet/OpenStreetMap) on the single event page. */
.be-event-map {
	height: 300px;
	margin-top: var(--bee-space-3);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	overflow: hidden;
	z-index: 0; /* keep Leaflet panes under sticky theme headers */
}

.be-event-map .leaflet-container {
	font: inherit;
}

/* Recurring-series step in the booking picker. */
.be-booking__recurring {
	margin: var(--bee-space-3) 0;
	padding: var(--bee-space-3);
	background: var(--bee-surface-alt);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
}
.be-booking__recurring-label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--bee-space-1);
}
.be-booking__recurring-freq {
	width: 100%;
}
.be-booking__recurring-count {
	display: block;
	margin-top: var(--bee-space-2);
}
.be-booking__recurring-count input {
	width: 6em;
	margin-left: var(--bee-space-1);
}
.be-booking__recurring-hint {
	margin: var(--bee-space-2) 0 0;
	color: var(--bee-on-bg-muted);
	font-size: 0.9em;
}

/* "Series" marker + bulk-cancel in the self-service appointment list. */
.be-myappts__series-badge {
	display: inline-block;
	margin-left: var(--bee-space-1);
	padding: 0 var(--bee-space-1);
	font-size: 0.8em;
	background: var(--bee-accent-soft);
	color: var(--bee-accent-strong);
	border-radius: var(--bee-radius-sm);
}
.be-myappts__cancel-series {
	display: inline;
}

/* Multi-tier ticket picker + promo code on the event sign-up form. */
.be-events-rsvp__tickets {
	margin: var(--bee-space-3) 0;
	padding: var(--bee-space-2) var(--bee-space-3);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
}
.be-events-rsvp__tickets legend {
	font-weight: 600;
	padding: 0 var(--bee-space-1);
}
.be-events-rsvp__ticket {
	display: flex;
	align-items: center;
	gap: var(--bee-space-2);
	padding: var(--bee-space-1) 0;
}
.be-events-rsvp__ticket-price {
	margin-left: auto;
	font-weight: 600;
	color: var(--bee-accent-strong);
}
.be-events-rsvp__promo {
	margin: var(--bee-space-3) 0;
}
.be-events-rsvp__promo-label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--bee-space-1);
}
.be-events-rsvp__promo-row {
	display: flex;
	gap: var(--bee-space-2);
}
.be-events-rsvp__promo-input {
	flex: 1 1 auto;
}
.be-events-rsvp__promo-status {
	margin: var(--bee-space-1) 0 0;
	color: var(--bee-on-bg-muted);
	min-height: 1.4em;
}