/* On-site booking calendar (PRD 008). Rules ported from ../healthdoers-wp/assets/css/main.css (.bbp-booking-cal__*),
   recoloured to the redesign tokens; layout below is ours (HealthDoers sets it per host block). */
.osy-cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font-family: 'DM Sans', sans-serif; text-align: left; }
/* Side by side only when the host gives the calendar room (the funnel column is 600 px, so it stacks there). */
*:has(> .osy-cal) { container-type: inline-size; }
@container (min-width: 720px) { .osy-cal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.osy-cal[hidden] { display: none; }
.osy-cal__slots { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.osy-cal__confirm { width: 100%; height: 54px; border: 0; border-radius: 6px; background: #F59B1C; color: #012E50; font: 800 16px/1 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
.osy-cal__confirm:disabled { opacity: .5; cursor: default; }
@keyframes osy-cal-spin { to { transform: rotate(360deg); } }
@keyframes osy-cal-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.osy-cal__panel,
.osy-cal__slots-panel {
	background: #ffffff;
	border: 1px solid rgba(15, 27, 45, 0.12);
	border-radius: 1rem;
	box-shadow: 0 12px 30px -24px rgba(15, 27, 45, 0.25);
	padding: 1.25rem;
}
.osy-cal__slots-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* Specialist portrait atop the calendar panel — the "who you'll meet" cue from
   the Lovable design. Only rendered when a host passes opts.avatar (the
   free-consultation funnel); the extra height is matched on the times panel by
   view.js syncSlotsHeight(), so both columns stay level. */
.osy-cal__avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	text-align: center;
}
.osy-cal__avatar-ring {
	flex: 0 0 auto;
	width: 7rem;
	height: 7rem;
	border-radius: 999px;
	overflow: hidden;
	background: #E6EDF3;
	border: 4px solid #ffffff;
	box-shadow: 0 0 0 1px rgba(1, 76, 133, 0.2), 0 14px 30px -18px rgba(15, 27, 45, 0.45);
}
.osy-cal__avatar-ring img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.osy-cal__avatar-cap {
	margin: 0;
}
.osy-cal__avatar-name {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--ink,#0E1B2A);
}
.osy-cal__avatar-role {
	margin: 0.1rem 0 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2,#3A5771);
}
.osy-cal__empty {
	margin: 0;
	padding: 1rem 0;
	color: var(--ink-2,#3A5771);
	font-size: 0.9375rem;
}
/* Branded loading state — teal spinner + message, centered. Spans both
   calendar columns on first mount and the grid width on month navigation. */
.osy-cal__loading {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	min-height: 16rem;
	padding: 2rem 1rem;
	color: var(--ink-2,#3A5771);
	font-family: 'DM Sans', sans-serif;
	font-size: 0.9375rem;
	text-align: center;
}
.osy-cal__spinner {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 3px solid rgba(1, 76, 133, 0.18);
	border-top-color: #014C85;
	animation: osy-cal-spin 0.8s linear infinite;
}
.osy-cal__loading-text {
	font-weight: 600;
	color: var(--ink,#0E1B2A);
}
@media (prefers-reduced-motion: reduce) {
	.osy-cal__spinner { animation: osy-cal-pulse 1.2s ease-in-out infinite; border-top-color: rgba(1, 76, 133, 0.18); }
}
/* Month header + nav */
.osy-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}
.osy-cal__month {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--ink,#0E1B2A);
}
.osy-cal__nav {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(15, 27, 45, 0.16);
	border-radius: 999px;
	background: #ffffff;
	color: var(--ink,#0E1B2A);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.osy-cal__nav:hover:not(:disabled) {
	border-color: #014C85;
	background: rgba(1, 76, 133, 0.06);
}
.osy-cal__nav:disabled {
	opacity: 0.35;
	cursor: default;
}
/* Weekday header + day grid */
.osy-cal__weekdays,
.osy-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
}
.osy-cal__weekdays {
	margin-bottom: 0.375rem;
}
.osy-cal__weekdays span {
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-2,#3A5771);
}
.osy-cal__day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0.625rem;
	background: transparent;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink,#0E1B2A);
}
.osy-cal__day--empty {
	visibility: hidden;
}
.osy-cal__day--muted {
	color: rgba(88, 98, 115, 0.5);
}
.osy-cal__day--available {
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.osy-cal__day--available:hover {
	background: rgba(1, 76, 133, 0.08);
}
.osy-cal__day--selected,
.osy-cal__day--selected:hover {
	background: #014C85;
	color: #ffffff;
	font-weight: 700;
}
.osy-cal__dot {
	position: absolute;
	bottom: 0.375rem;
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 999px;
	background: #014C85;
}
.osy-cal__day--selected .osy-cal__dot {
	background: #ffffff;
}
/* Slots panel */
.osy-cal__slots-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
}
.osy-cal__slots-title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink,#0E1B2A);
}
.osy-cal__tz {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.6875rem;
}
.osy-cal__tz-label {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-2,#3A5771);
}
.osy-cal__tz-select {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.875rem; /* 14px floor */
	height: 38px;
	/* Inset chevron instead of the native arrow (as the salary role picker): 12 px from the edge, matching the 12 px text inset. */
	padding: 0 36px 0 12px;
	--select-inset: 12px; /* css/redesign.css dropdown token, which wins on redesign pages */
	--select-icon: 14px;
	border: 1px solid rgba(15, 27, 45, 0.18);
	border-radius: 0.5rem;
	background: #ffffff url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E1B2A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 12px center / 14px;
	-webkit-appearance: none;
	appearance: none;
	color: var(--ink,#0E1B2A);
	cursor: pointer;
	max-width: 14rem;
}
/* The slot list fills the space between the (fixed) head and Confirm button and
   scrolls when a day has more times than fit — so a busy day never stretches the
   times panel taller than the calendar beside it. Its height is bounded by the
   panel, which view.js caps to the calendar panel's height on the two-column
   layout. */
.osy-cal__slots-head,
.osy-cal__confirm {
	flex-shrink: 0;
}
.osy-cal__slots {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.osy-cal__slot-group-label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-2,#3A5771);
}
.osy-cal__slot-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.5rem;
}
.osy-cal__slot {
	padding: 0.625rem 0.5rem;
	border: 1px solid rgba(15, 27, 45, 0.18);
	border-radius: 0.625rem;
	background: #ffffff;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink,#0E1B2A);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.osy-cal__slot:hover {
	border-color: #014C85;
	background: rgba(1, 76, 133, 0.06);
}
.osy-cal__slot--selected,
.osy-cal__slot--selected:hover {
	border-color: #014C85;
	background: #014C85;
	color: #ffffff;
}
.osy-cal__confirm {
	width: 100%;
	justify-content: center;
}
/* The class sets display:flex, which would otherwise beat the [hidden]
   attribute's display:none — so hide it explicitly when there's no message. */
.osy-cal__error[hidden] {
	display: none;
}
.osy-cal__error {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 0.75rem;
	background: #fbf3e2;
	border: 1px solid rgba(201, 168, 76, 0.45);
	border-radius: 0.625rem;
	color: #7a5a12;
	font-size: 0.875rem; /* 14px floor */
	font-weight: 600;
	line-height: 1.35;
}
.osy-cal__error-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: 0.05rem;
}
.osy-cal__nav,
	.osy-cal__day--available,
	.osy-cal__slot {
		transition: none;
	}