/* =========================================================================
   Booking Profile — frontend styles (static mockup phase, light theme)
   Visual language: near-white lavender base (#FBFAFF), indigo accent (#4A46E5),
   glassmorphism on cards, gradient text on the highlighted word.
   ========================================================================= */

.wsb-bp,
.wsb-bp * {
	box-sizing: border-box;
}

.wsb-bp {
	/* ── tokens ────────────────────────────────────────── */
	/* bg */
	--bp-bg-base:           #FBFAFF;
	--bp-bg-card:           #FFFFFF;

	/* text */
	--bp-text-primary:      #18182C;   /* near-black with a hint of indigo */
	--bp-text-secondary:    #52526E;   /* readable mid-tone */
	--bp-text-tertiary:     #9494B4;   /* labels, placeholders */

	/* accent — bridged from PHP-injected --wsb-bp-accent (falls back to indigo #4A46E5) */
	--bp-accent:            var(--wsb-bp-accent, #4A46E5);
	--bp-accent-hover:      var(--wsb-bp-accent-hover, #3C38D0);
	--bp-accent-dark:       var(--wsb-bp-accent-dark,  #3C38D0);
	/* soft tints use the RGB parts injected by PHP: rgba(R,G,B,α) */
	--bp-accent-soft:       rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.08);
	--bp-accent-soft-hover: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.14);
	--bp-accent-text:       var(--wsb-bp-accent-dark,  #2E2AA8);
	--bp-accent-bright:     var(--wsb-bp-accent,       #6B68EE);

	/* border tints */
	--bp-border:            rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.12);
	--bp-border-soft:       rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.07);

	/* status */
	--bp-online:            #10B981;

	/* shadows */
	--bp-shadow-sm:         0 1px 3px  rgba(26, 26, 46, 0.05);
	--bp-shadow-md:         0 6px 20px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.07), 0 2px 6px rgba(26, 26, 46, 0.04);
	--bp-shadow-lg:         0 20px 52px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.10), 0 4px 14px rgba(26, 26, 46, 0.05);
	--bp-shadow-cta:        0 8px 24px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.32), 0 2px 6px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.16);
	--bp-shadow-cta-hover:  0 12px 32px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.40), 0 4px 10px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.22);
	--bp-shadow-accent:     0 6px 18px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.26), 0 2px 6px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.18);

	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--bp-text-primary);
	background: var(--bp-bg-base);
	background-image:
		radial-gradient(circle at 12% 6%,  rgba(var(--wsb-bp-accent-rgb, 120,110,240), 0.13), transparent 46%),
		radial-gradient(circle at 86% 88%, rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.07),  transparent 44%);
	padding: 64px 40px;
	overflow: hidden;
	min-height: 100svh;
}

/* dot pattern overlay (faded at top/bottom edges) */
.wsb-bp::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.09) 1px, transparent 1px);
	background-size: 26px 26px;
	background-position: 0 0;
	opacity: 0.55;
	pointer-events: none;
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.wsb-bp__inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 0.9fr;
	gap: 64px;
	align-items: start;
}

/* =========================================================================
   Left column
   ========================================================================= */

.wsb-bp__profile {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.wsb-bp__avatar {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--bp-accent-bright) 0%, var(--bp-accent) 100%);
	box-shadow: 0 0 0 4px #FFFFFF, 0 6px 18px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.28);
	/* overflow: visible so the online indicator dot isn't clipped at the corner */
	overflow: visible;
}

.wsb-bp__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* clip the photo to a circle directly on the img — keeps overflow:visible on parent */
	border-radius: 50%;
}

.wsb-bp__avatar-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.02em;
}

.wsb-bp__avatar-online {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bp-online);
	border: 2.5px solid #FFFFFF;
	box-shadow: 0 1px 2px rgba(15, 15, 26, 0.10);
}

.wsb-bp__profile-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wsb-bp__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-accent);
	margin: 0;
}

.wsb-bp__name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bp-text-primary);
	margin: 0;
}

/* Hero copy */
.wsb-bp__title {
	font-size: 48px;
	line-height: 1.06;
	letter-spacing: -0.025em;
	font-weight: 700;
	color: var(--bp-text-primary);
	margin: 0 0 4px;
}

.wsb-bp__title-highlight {
	background: linear-gradient(135deg, var(--bp-accent) 0%, var(--bp-accent-bright) 55%, var(--bp-accent-soft-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

.wsb-bp__subtitle {
	font-family: 'Georgia', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--bp-text-tertiary);
	margin: 0 0 18px;
}

.wsb-bp__description {
	font-size: 15px;
	line-height: 1.65;
	color: var(--bp-text-secondary);
	margin: 0 0 24px;
	max-width: 480px;
}

/* What's included — glass panel */
.wsb-bp__included {
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.80);
	border-radius: 20px;
	padding: 18px 20px 20px;
	margin: 0 0 20px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, var(--bp-shadow-sm);
}

.wsb-bp__included-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-accent);
	margin: 0 0 14px;
}

.wsb-bp__included-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
}

.wsb-bp__included-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bp-text-primary);
}

.wsb-bp__included-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--bp-accent-soft);
	color: var(--bp-accent-text);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wsb-bp__included-icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Status pills */
.wsb-bp__pill { display: none !important; }

.wsb-bp__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wsb-bp__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: #FFFFFF;
	border: 1px solid var(--bp-border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bp-text-primary);
	box-shadow: var(--bp-shadow-sm);
}

.wsb-bp__pill--accent {
	background: var(--bp-accent-soft);
	border-color: transparent;
	color: var(--bp-accent-text);
}

.wsb-bp__pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bp-online);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
	flex-shrink: 0;
}

.wsb-bp__pill svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* =========================================================================
   Right column — booking card
   ========================================================================= */

.wsb-bp__right {
	position: relative;
}

.wsb-bp-card {
	position: relative;
	overflow: hidden; /* clip step slide-in animations */
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 24px;
	padding: 28px 28px 24px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--bp-shadow-md);
}

/* No-service overlay — shown on frontend when no service is linked */
.wsb-bp-no-service-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.52);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 2px dashed rgba(255, 255, 255, 0.32);
	border-radius: inherit;
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
	pointer-events: none;
}

.wsb-bp-no-service-overlay svg {
	flex-shrink: 0;
	opacity: 0.65;
}

.wsb-bp-no-service-overlay__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.3;
}

.wsb-bp-no-service-overlay__hint {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.52);
	line-height: 1.5;
	max-width: 220px;
}

/* Live booking: content floats directly on section background — no glass card */
.wsb-bp-card.wsb-bp-card--live {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	overflow: visible; /* allow spring-scale effects near edges to breathe */
}

/* Floating tilted "Next slot" pill */
.wsb-bp-card__next-slot {
	position: absolute;
	top: -16px;
	right: 32px;
	background: #FFFFFF;
	color: var(--bp-accent);
	padding: 9px 16px 8px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	transform: rotate(-2deg);
	border: 1.5px solid rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.14);
	box-shadow: 0 6px 20px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.14), 0 1px 4px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.07);
}

.wsb-bp-card__next-slot-label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.92;
	margin-bottom: 1px;
}

/* Card header */
.wsb-bp-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--bp-border-soft);
}

.wsb-bp-card__title-area {
	flex: 1;
	min-width: 0;
}

.wsb-bp-card__available {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-online);
	margin-bottom: 8px;
}

.wsb-bp-card__available::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bp-online);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}

.wsb-bp-card__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--bp-text-primary);
	margin: 0 0 4px;
}

.wsb-bp-card__subtitle {
	font-size: 14px;
	color: var(--bp-text-secondary);
	line-height: 1.5;
	margin: 0;
}

.wsb-bp-card__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--bp-accent-soft);
	color: var(--bp-accent-text);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

.wsb-bp-card__meta svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Calendar section label ─────────────────────────── */
.wsb-bp-cal__section-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-text-tertiary);
	margin: 0 0 10px;
}

/* ── Nav ─────────────────────────────────────────────── */
.wsb-bp-cal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.wsb-bp-cal__nav-btn {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--bp-accent-soft);
	border: none;
	color: var(--bp-accent-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
}

.wsb-bp-cal__nav-btn:hover {
	background: var(--bp-accent-soft-hover);
	box-shadow: 0 2px 8px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.14);
	transform: scale(1.06);
}

.wsb-bp-cal__month {
	font-size: 14px;
	font-weight: 700;
	color: var(--bp-text-primary);
	letter-spacing: -0.015em;
}

.wsb-bp-cal__month-year {
	font-weight: 400;
	color: var(--bp-text-tertiary);
	margin-left: 4px;
}

/* ── Grid ────────────────────────────────────────────── */
.wsb-bp-cal__head,
.wsb-bp-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.wsb-bp-cal__head {
	margin-bottom: 4px;
}

.wsb-bp-cal__head-cell {
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bp-text-tertiary);
	text-transform: uppercase;
	padding: 0 0 2px;
}

/* ── Base cell — circular ────────────────────────────── */
.wsb-bp-cal__cell {
	aspect-ratio: 1 / 1;
	height: auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 400;
	color: var(--bp-text-tertiary);
	border-radius: 50%;
	cursor: default;
	transition: background 0.15s ease, color 0.15s ease,
	            box-shadow 0.15s ease, transform 0.12s ease;
}

/* Available — clean, just a number; circle appears on hover */
.wsb-bp-cal__cell--available {
	color: var(--bp-text-primary);
	font-weight: 600;
	cursor: pointer;
}

.wsb-bp-cal__cell--available:hover {
	background: var(--bp-accent-soft);
	color: var(--bp-accent-text);
	transform: scale(1.08);
}

/* Empty — invisible */
.wsb-bp-cal__cell--empty {
	cursor: default;
	pointer-events: none;
}

/* Muted (weekends / off-days) */
.wsb-bp-cal__cell--muted {
	color: var(--bp-text-tertiary);
	opacity: 0.5;
	cursor: default;
}

/* Today — accent-coloured number + tiny dot below */
.wsb-bp-cal__cell--today {
	color: var(--bp-accent);
	font-weight: 700;
}

.wsb-bp-cal__cell--today::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bp-accent);
}

.wsb-bp-cal__cell--today:hover {
	background: var(--bp-accent-soft);
	transform: scale(1.08);
}

/* Selected — solid accent circle, no shadow (shadow clips at grid edges) */
.wsb-bp-cal__cell--selected {
	background: var(--bp-accent);
	color: #FFFFFF !important;
	font-weight: 700;
	box-shadow: none;
}

.wsb-bp-cal__cell--selected:hover {
	background: var(--bp-accent-dark);
}

/* ── Time slots ──────────────────────────────────────── */
.wsb-bp-times {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--bp-border-soft);
}

.wsb-bp-times__date-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-text-tertiary);
	margin: 0 0 12px;
}

/* 4 columns — wide enough to read clearly, keeps rows compact */
.wsb-bp-times__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.wsb-bp-times__slot {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1.5px solid var(--bp-border);
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bp-text-primary);
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	padding: 0 8px;
	box-shadow: 0 1px 3px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.06);
	transition: background 0.14s ease, color 0.14s ease,
	            border-color 0.14s ease, box-shadow 0.14s ease,
	            transform 0.12s ease;
}

.wsb-bp-times__slot:hover {
	background: var(--bp-accent-soft);
	border-color: var(--bp-accent);
	color: var(--bp-accent-text);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.12);
}

.wsb-bp-times__slot--selected {
	background: var(--bp-accent);
	color: #FFFFFF;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.36);
}

.wsb-bp-times__slot--selected:hover {
	background: var(--bp-accent-dark);
	box-shadow: 0 6px 18px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.40);
}

/* Continue button */
.wsb-bp-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 16px;
	padding: 14px 20px;
	background: var(--bp-accent);
	color: #FFFFFF;
	border: none;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	cursor: pointer;
	font-family: inherit;
	box-shadow: var(--bp-shadow-cta);
	transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.15s ease;
}

.wsb-bp-card__cta:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--bp-shadow-cta-hover);
}

.wsb-bp-card__cta:active:not(:disabled) {
	transform: translateY(0);
	transition-duration: 0.1s;
}

.wsb-bp-cta-arrow {
	display: inline-block;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease,
	            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Only show arrow when button is active/enabled */
.wsb-bp-card__cta:not(:disabled) .wsb-bp-cta-arrow {
	opacity: 0.85;
	transform: translateX(0);
}

.wsb-bp-card__cta:hover:not(:disabled) .wsb-bp-cta-arrow {
	opacity: 1;
	transform: translateX(4px);
}

/* Bottom proof row */
.wsb-bp-card__proof {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--bp-border-soft);
}

.wsb-bp-card__avatars {
	display: flex;
}

.wsb-bp-card__avatars > * {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2.5px solid #FFFFFF;
	margin-right: -8px;
	background: linear-gradient(135deg, #C4C2F8, #7470EE);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	overflow: hidden;
}

.wsb-bp-card__avatars > *:nth-child(2) { background: linear-gradient(135deg, #D4D2FA, #9B98F8); }
.wsb-bp-card__avatars > *:nth-child(3) { background: linear-gradient(135deg, var(--bp-accent-soft-hover), var(--bp-accent-bright)); }
.wsb-bp-card__avatars > *:nth-child(4) { background: linear-gradient(135deg, var(--bp-accent-soft), var(--bp-accent)); }

.wsb-bp-card__avatars img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wsb-bp-card__proof-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--bp-text-primary);
	text-align: right;
	line-height: 1.3;
}

.wsb-bp-card__proof-text small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--bp-text-tertiary);
}

/* =========================================================================
   SOCIAL LINKS — left column
   ========================================================================= */

.wsb-bp__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

/* On desktop grid social is a 3rd direct child — pin it to col 1 (under left column) */
.wsb-bp__inner > .wsb-bp__social {
	grid-column: 1;
	margin-top: 0;
	padding-top: 0;
}

.wsb-bp__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.70);
	border: 1px solid var(--bp-border);
	color: var(--bp-text-secondary);
	text-decoration: none;
	box-shadow: var(--bp-shadow-sm);
	transition: background 0.15s ease, color 0.15s ease,
	            border-color 0.15s ease,
	            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.18s ease;
}

.wsb-bp__social-link:hover {
	background: var(--bp-accent-soft);
	border-color: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.25);
	color: var(--bp-accent-text);
	transform: translateY(-1px);
	box-shadow: var(--bp-shadow-sm);
}

/* =========================================================================
   SESSION NOTE — left column paragraph (shown when live service is linked)
   ========================================================================= */

.wsb-bp__session-note {
	font-size: 14px;
	line-height: 1.65;
	color: var(--bp-text-secondary);
	margin: 0 0 22px;
	max-width: 480px;
}

/* =========================================================================
   VIEW MORE — time slots
   2 rows visible (5-col × 2 = 10 cells): 10 real slots shown when total ≤10,
   otherwise 9 real slots + 1 "more" button in the 10th cell.
   Triggered only when total > 10 (hiding ≥2 slots is worth the button).
   ========================================================================= */

/* Hide real slots from the 10th child onward → 9 visible, button takes cell 10 */
.wsb-bp-times__grid.wsb-slot-collapsed .creavibc-slot-btn:nth-child(n+10) {
	display: none;
}

/* ── "More times" button — lives inside the grid as a slot-shaped cell ── */
.wsb-bp-view-more {
	/* reset browser button defaults */
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	/* geometry: identical to .creavibc-slot-btn so grid sizes them the same */
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 9px 4px 0;   /* matches slot padding, top offset per design */
	/* visual */
	background: none;
	border: none;
	border-radius: 7px;
	/* type */
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bp-accent-text);
	cursor: pointer;
	white-space: nowrap;
	/* motion */
	transition:
		background  0.15s ease,
		border-color 0.15s ease,
		box-shadow  0.15s ease,
		transform   0.15s ease;
}

.wsb-bp-view-more:hover {
	transform: translateY(1.5px); /* whole button — text + icon — drift down together */
	color: var(--bp-accent);
}

.wsb-bp-view-more:active {
	transform: translateY(0);
	transition-duration: 0.08s;
}

.wsb-bp-view-more__label {
	flex: 1;
	font-size: 11px !important;
	text-align: center;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wsb-bp-view-more__chevron {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* no independent transform — moves with the button as one unit */
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 900px) {
	.wsb-bp { padding: 48px 24px; }
	.wsb-bp__inner { grid-template-columns: 1fr; gap: 0; }
	.wsb-bp__title { font-size: 40px; }
	.wsb-bp__subtitle { font-size: 24px; }
	.wsb-bp-card { padding: 24px 22px 20px; }

	/* ── Read-more toggle button ── */
	.wsb-bp-readmore-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		background: none;
		border: none;
		font-size: 12px;
		font-weight: 600;
		color: var(--bp-accent-text);
		cursor: pointer;
		opacity: 0.72;
		transition: opacity 0.15s ease;
		font-family: inherit;
	}
	.wsb-bp-readmore-btn:hover { opacity: 1; }
	.wsb-bp-rm-icon {
		width: 13px;
		height: 13px;
		stroke: currentColor;
		fill: none;
		stroke-width: 2.2;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex-shrink: 0;
		vertical-align: middle;
	}

	/* Inline variant — sits inside the label row */
	.wsb-bp-readmore-btn--inline {
		margin-top: 0;
		margin-left: auto;
	}

	/* ── Description: remove bottom margin when toggle button is present ── */
	.wsb-bp__description.wsb-bp-desc--has-btn {
		margin-bottom: 0;
	}

	/* ── Description: clamp to 2 lines ── */
	.wsb-bp__description.wsb-bp-desc--clamped {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 0;
	}

	/* ── Included grid: show 2 rows (2-col → 4 items visible, nothing hidden) ── */
	.wsb-bp__included-grid.wsb-bp-included--closed .wsb-bp__included-item:nth-child(n+5) {
		display: none;
	}
	.wsb-bp__included-label {
		display: flex;
		align-items: center;
	}

	/* ── Social reordered to bottom — full-width centred ── */
	.wsb-bp__inner > .wsb-bp__social {
		margin-top: 0;
		padding-top: 20px;
		border-top: 1px solid var(--bp-border-soft, rgba(0, 0, 0, 0.08));
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 540px) {
	.wsb-bp { padding: 36px 16px; }
	.wsb-bp__title { font-size: 34px; }
	.wsb-bp__subtitle { font-size: 20px; }
	.wsb-bp__included { padding: 16px 18px; }
	.wsb-bp__included-grid { grid-template-columns: 1fr; gap: 10px; }
	/* 1-col grid → 2 rows = 2 items visible */
	.wsb-bp__included-grid.wsb-bp-included--closed .wsb-bp__included-item:nth-child(n+3) {
		display: none;
	}
	.wsb-bp-card { padding: 20px 18px; border-radius: 18px; }
	.wsb-bp-card__header { flex-direction: column; align-items: flex-start; }
	.wsb-bp-booking .wsb-bp-times__grid { grid-template-columns: repeat(4, 1fr) !important; }
	.wsb-bp-booking .creavibc-slot-btn { height: 30px; font-size: 11px; }
}

/* =========================================================================
   LIVE BOOKING CARD — booking.js integration styles
   Two-column layout: calendar left, slots right.
   All scoped inside .wsb-bp-booking to avoid touching global plugin CSS.
   ========================================================================= */

/* ── Step transition animations ───────────────────────── */
@keyframes wsbShake {
	0%,100% { transform: translateX(0); }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX(6px); }
	60%      { transform: translateX(-4px); }
	80%      { transform: translateX(4px); }
}

@keyframes wsbFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wsbFadeDown {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wsbSlideFromRight {
	from { opacity: 0; transform: translateX(56px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wsbSlideFromLeft {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Step 1 / Step 2 — booking.js controls display via inline style.
   We must NOT override with !important — that would prevent booking.js
   from hiding steps. We only add directional slide animations. */
.wsb-bp-booking .creavibc-step-1[style*="display: block"],
.wsb-bp-booking .creavibc-step-1[style*="display:block"] {
	animation: wsbSlideFromLeft 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Step 2: slide in from right (slot was picked) */
.wsb-bp-booking .creavibc-step-2[style*="display: block"],
.wsb-bp-booking .creavibc-step-2[style*="display:block"] {
	animation: wsbSlideFromRight 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Calendar section ────────────────────────────────────── */
.wsb-bp-booking .wsb-bp-cal {
	/* padding: 0 18px 14px; */
}

.wsb-bp-booking .wsb-bp-cal .wsb-bp-cal__section-label,
.wsb-bp-booking .wsb-bp-times__date-label {
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 600;
	text-transform: none;
	margin-bottom: 10px;
	color: var(--bp-text-secondary);
}

/* Constrain calendar to ~48% of card width (20% smaller than before) — all cells scale down with it.
   Centered so the narrower calendar feels intentional, not left-stranded. */
.wsb-bp-booking .wsb-bp-fp {
	max-width: 48%;
	margin-left: auto;
	margin-right: auto;
}

/* Hide last-row next-month overflow days to reduce calendar height */
.wsb-bp .flatpickr-day.nextMonthDay {
	display: none !important;
}

/* Shrink the day-cell gap slightly for a tighter calendar */
.wsb-bp-booking .dayContainer {
	gap: 4px !important;
}

.wsb-bp-booking .flatpickr-weekdaycontainer {
	gap: 4px !important;
}

/* ── Time slots section ──────────────────────────────────── */
.wsb-bp-booking .wsb-bp-times {
	margin-top: 0;
	padding-top: 14px;
	border-top: 0.5px solid var(--bp-border-soft);
}

.wsb-bp-booking .wsb-bp-times__date-label {
	margin-bottom: 10px;
}

/* 5-column grid — compact slot buttons */
.wsb-bp-booking .wsb-bp-times__grid {
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 2px !important;
	align-content: start;
}

/* ── CTA button — force colours over plugin defaults ──── */
/* Plugin CSS (creavibc) may override; we use !important here deliberately */
.wsb-bp-booking .creavibc-next,
.wsb-bp-booking .wsb-bp-card__cta {
	background: var(--bp-accent) !important;
	color: #FFFFFF !important;
	border: none !important;
	outline: none !important;
}

/* Generic disabled: muted */
.wsb-bp-card__cta:disabled,
.wsb-bp-booking .creavibc-next:disabled {
	opacity: 0.36;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* Step-1 disabled CTA: solid, inviting — waiting for slot selection */
.wsb-bp-booking:has(.creavibc-back:disabled) .wsb-bp-card__footer .wsb-bp-card__cta:disabled {
	opacity: 0.58;
	box-shadow: 0 3px 14px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.22) !important;
	cursor: default;
}

/* ── Footer bar ────────────────────────────────────────── */
.wsb-bp-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0 0;
	border-top: none;
	background: transparent;
	box-shadow: none !important; /* override global .creavibc-popup-footer shadow */
	margin-top: 0;
}

/* ── Footer button group ───────────────────────────────── */
/* Default: pass-through (step-1 full-width CTA handled by :has rule) */
.wsb-bp-footer-btns {
	display: contents;
}

/* ── Back button ───────────────────────────────────────── */
.wsb-bp-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 16px;
	height: 44px;
	border-radius: 14px;
	border: 1.5px solid var(--bp-border);
	background: transparent;
	color: var(--bp-text-secondary);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity 0.2s ease, width 0.2s ease, padding 0.2s ease,
	            background 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
	            color 0.15s ease,
	            border-color 0.15s ease,
	            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Default state: accent-soft tint — always clearly interactive, matches the block palette */
.wsb-bp-booking .wsb-bp-back-btn:not(:disabled) {
	background: var(--bp-accent-soft) !important;
	color: var(--bp-accent-text) !important;
	border-color: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.22) !important;
}

/* Hover: slightly deeper tint + leftward nudge — spatially signals "go back" */
.wsb-bp-back-btn:hover:not(:disabled) {
	background: var(--bp-accent-soft-hover) !important;
	color: var(--bp-accent-text) !important;
	border-color: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.38) !important;
	transform: translateX(-3px);
	box-shadow: none;
}

.wsb-bp-back-btn:active:not(:disabled) {
	transform: translateX(-1px);
	transition-duration: 0.08s;
}

/* Collapsed/invisible in step 1 (booking.js sets disabled) */
.wsb-bp-back-btn:disabled {
	opacity: 0;
	pointer-events: none;
	width: 0;
	padding: 0;
	border-width: 0;
	overflow: hidden;
}

/* ── Summary chips (inside footer) ────────────────────── */
.wsb-bp-summary {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	margin: 0;
}

.wsb-bp-summary .creavibc-summary-date,
.wsb-bp-summary .creavibc-summary-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--bp-accent-soft);
	border-radius: 99px;
	font-size: 11px;
	font-weight: 600;
	color: var(--bp-accent-text);
}

.wsb-bp-summary .creavibc-summary-date svg,
.wsb-bp-summary .creavibc-summary-time svg {
	flex-shrink: 0;
	stroke: var(--bp-accent-text);
}

/* booking.js toggles date-hidden / time-hidden */
.wsb-bp-summary .date-hidden,
.wsb-bp-summary .time-hidden { display: none; }

/* ─────────────────────────────────────────────────────────
   STEP-1 FOOTER  — no date/time chosen yet
   Hide summary + back, show a solid full-width CTA
   ───────────────────────────────────────────────────────── */
.wsb-bp-booking:has(.creavibc-back:disabled) .wsb-bp-card__footer {
	background: transparent;
	border-top: none;
	padding: 14px 0 0;
	gap: 0;
}

.wsb-bp-booking:has(.creavibc-back:disabled) .wsb-bp-summary,
.wsb-bp-booking:has(.creavibc-back:disabled) .wsb-bp-back-btn {
	display: none !important;
}

.wsb-bp-booking:has(.creavibc-back:disabled) .wsb-bp-footer-btns {
	display: flex;
	width: 100%;
}

.wsb-bp-booking:has(.creavibc-back:disabled) .wsb-bp-card__footer .wsb-bp-card__cta {
	flex: 1;
	padding: 0;
	height: 50px;
	font-size: 15px;
	border-radius: 16px;
	margin-top: 0;
	letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────
   STEP-2 FOOTER  — date + time chosen, form visible
   Summary header on top, then Back | Book row below
   ───────────────────────────────────────────────────────── */
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-card__footer {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 14px 0 0;
	border-top: none;
	background: transparent;
}

/* Summary row — clean icon-in-rounded-box treatment, mirroring
   the "What's included" item style (.wsb-bp__included-item).
   No colored container bar — just two icon+text rows side by side. */
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary {
	flex: none;
	flex-wrap: nowrap;
	background: transparent;
	border-radius: 0;
	padding: 2px 0 6px;
	gap: 22px;
	justify-content: center;
}

.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary .creavibc-summary-date,
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary .creavibc-summary-time {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border-radius: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--bp-text-primary);
}

/* Date / time value text */
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary .creavibc-summary-date-text,
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary .creavibc-summary-time-text {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Icon tile — matches .wsb-bp__included-icon size and shape */
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary .creavibc-summary-date svg,
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-summary .creavibc-summary-time svg {
	width: 28px;
	height: 28px;
	padding: 7px;
	box-sizing: border-box;
	background: var(--bp-accent-soft);
	color: var(--bp-accent-text);
	stroke: var(--bp-accent-text);
	border-radius: 8px;
	flex-shrink: 0;
	overflow: visible;
}

/* Buttons row */
.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-footer-btns {
	display: flex;
	gap: 8px;
	align-items: center;
}

.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-footer-btns .wsb-bp-card__cta {
	flex: 1;
	padding: 0;
	height: 50px;
	font-size: 15px;
	border-radius: 16px;
	margin-top: 0;
	width: auto;
}

.wsb-bp-booking:has(.creavibc-back:not(:disabled)) .wsb-bp-back-btn {
	flex-shrink: 0;
}

/* =========================================================================
   FLATPICKR — circular cells, clean minimal design
   Scoped to .wsb-bp so it only affects the block, not other flatpickrs.
   ========================================================================= */

/* ── Container reset ──────────────────────────────────── */
.wsb-bp .flatpickr-calendar.inline {
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit !important;
}

.wsb-bp .flatpickr-innerContainer,
.wsb-bp .flatpickr-rContainer {
	width: 100% !important;
}

.wsb-bp .flatpickr-days,
.wsb-bp .dayContainer {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
}

/* ── Month navigation ─────────────────────────────────── */
.wsb-bp .flatpickr-months {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 14px !important;
	padding: 0 !important;
	height: auto !important;
}

.wsb-bp .flatpickr-month {
	flex: 1;
	background: transparent !important;
	height: auto !important;
	line-height: 1 !important;
	overflow: visible !important;
}

.wsb-bp .flatpickr-current-month {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	padding: 0 !important;
	position: static !important;
	width: 100% !important;
	left: auto !important;
}

.wsb-bp .flatpickr-current-month .flatpickr-monthDropdown-months {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	border: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--bp-text-primary) !important;
	letter-spacing: -0.015em !important;
	cursor: default !important;
	pointer-events: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Year */
.wsb-bp .flatpickr-current-month .numInputWrapper {
	display: inline-flex !important;
	width: auto !important;
}

.wsb-bp .flatpickr-current-month input.numInput.cur-year {
	display: inline !important;
	width: 44px !important;
	background: transparent !important;
	border: none !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--bp-text-tertiary) !important;
	padding: 0 0 0 3px !important;
	margin: 0 !important;
	pointer-events: none !important;
	-moz-appearance: textfield !important;
}

.wsb-bp .flatpickr-current-month input.numInput.cur-year::-webkit-outer-spin-button,
.wsb-bp .flatpickr-current-month input.numInput.cur-year::-webkit-inner-spin-button {
	display: none !important;
}

/* Prev / Next buttons */
.wsb-bp .flatpickr-prev-month,
.wsb-bp .flatpickr-next-month {
	position: static !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--bp-accent-soft) !important;
	color: var(--bp-accent-text) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background 0.14s ease, transform 0.12s ease !important;
}

.wsb-bp .flatpickr-prev-month:hover,
.wsb-bp .flatpickr-next-month:hover {
	background: var(--bp-accent-soft-hover) !important;
	transform: scale(1.08) !important;
}

.wsb-bp .flatpickr-prev-month svg,
.wsb-bp .flatpickr-next-month svg {
	fill: var(--bp-accent-text) !important;
	stroke: none !important;
	width: 14px !important;
	height: 14px !important;
}

/* ── Weekday headers ──────────────────────────────────── */
.wsb-bp .flatpickr-weekdays {
	background: transparent !important;
	height: auto !important;
	margin-bottom: 4px !important;
}

.wsb-bp .flatpickr-weekdaycontainer {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 6px !important;
}

.wsb-bp .flatpickr-weekday {
	background: transparent !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	color: var(--bp-text-tertiary) !important;
	text-transform: uppercase !important;
	text-align: center !important;
	padding: 0 0 2px !important;
	cursor: default !important;
	line-height: 1 !important;
}

/* ── Day cells — circular, clean, minimal ─────────────── */
.wsb-bp .dayContainer {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 6px !important;
	padding: 0 !important;
	align-items: center !important;
}

.wsb-bp .flatpickr-day {
	/* Reset all flatpickr sizing */
	max-width: none !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	margin: 0 !important;
	border: none !important;

	/* Circular */
	aspect-ratio: 1 / 1;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--bp-text-tertiary) !important;
	cursor: default;
	/* iOS spring easing on transform */
	transition: background 0.15s ease, color 0.15s ease,
	            box-shadow 0.18s ease,
	            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Available day — clean number, circle on hover */
.wsb-bp .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.today) {
	color: var(--bp-text-primary) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	background: transparent !important;
	box-shadow: none !important;
}

.wsb-bp .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.today):hover {
	background: var(--bp-accent-soft) !important;
	color: var(--bp-accent-text) !important;
	transform: scale(1.06) !important;
	box-shadow: none !important;
}

/* Disabled (not in enable array / before minDate) */
.wsb-bp .flatpickr-day.flatpickr-disabled,
.wsb-bp .flatpickr-day.notAllowed {
	background: transparent !important;
	color: var(--bp-text-tertiary) !important;
	font-weight: 400 !important;
	opacity: 0.4 !important;
	cursor: default !important;
	pointer-events: none !important;
	box-shadow: none !important;
}

/* Prev/next month overflow */
.wsb-bp .flatpickr-day.prevMonthDay,
.wsb-bp .flatpickr-day.nextMonthDay {
	background: transparent !important;
	color: var(--bp-text-tertiary) !important;
	opacity: 0.2 !important;
	cursor: default !important;
	pointer-events: none !important;
	box-shadow: none !important;
}

/* Today — accent colour + dot below */
.wsb-bp .flatpickr-day.today:not(.selected) {
	background: transparent !important;
	color: var(--bp-accent) !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.wsb-bp .flatpickr-day.today:not(.selected)::after {
	content: '' !important;
	position: absolute !important;
	bottom: 3px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: var(--bp-accent) !important;
}

.wsb-bp .flatpickr-day.today:not(.selected):hover {
	background: var(--bp-accent-soft) !important;
	transform: none !important;
}

/* Selected — solid accent circle, no box-shadow (shadow gets clipped by grid overflow) */
.wsb-bp .flatpickr-day.selected,
.wsb-bp .flatpickr-day.startRange,
.wsb-bp .flatpickr-day.endRange {
	background: var(--bp-accent) !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.wsb-bp .flatpickr-day.selected:hover {
	background: var(--bp-accent-dark) !important;
	box-shadow: none !important;
}

/* =========================================================================
   TIME SLOT BUTTONS — booking.js renders .creavibc-slot-btn
   Compact rounded-rect buttons for the sidebar 2-column grid.
   ========================================================================= */

.wsb-bp-booking .creavibc-slot-btn {
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.84);
	border: 1.5px solid var(--bp-border);
	border-radius: 7px;
	font-size: 11px;
	font-weight: 600;
	color: var(--bp-text-primary);
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	padding: 0 4px;
	box-shadow: none;
	transition: background 0.14s ease,
	            color 0.14s ease,
	            border-color 0.14s ease,
	            opacity 0.2s ease;
	opacity: 0; /* stagger-in via .show */
}

.wsb-bp-booking .creavibc-slot-btn.show {
	opacity: 1;
}

.wsb-bp-booking .creavibc-slot-btn:hover:not(:disabled):not(.creavibc-slot-disabled) {
	background: var(--bp-accent-soft);
	border-color: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.35);
	color: var(--bp-accent-text);
	transform: none;
	box-shadow: none;
}

.wsb-bp-booking .creavibc-slot-btn:active:not(:disabled):not(.creavibc-slot-disabled) {
	background: var(--bp-accent-soft-hover);
	transition-duration: 0.08s;
}

.wsb-bp-booking .creavibc-slot-btn.selected {
	background: #FFFFFF;
	color: var(--bp-accent-text);
	border-color: var(--bp-accent);
	box-shadow: none;
	opacity: 1;
}

.wsb-bp-booking .creavibc-slot-btn.creavibc-slot-disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
	background: transparent;
	border-style: dashed;
	box-shadow: none;
}

/* Container fade while refreshing */
.wsb-bp-booking .creavibc-time-slots.fade-out {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* "No slots" text from booking.js */
.wsb-bp-booking .creavibc-time-slots > p {
	font-size: 12px;
	color: var(--bp-text-tertiary);
	font-style: italic;
	margin: 6px 0;
	grid-column: 1 / -1;
}

/* =========================================================================
   BOOKING FORM — step 2 — booking.js renders label/input/textarea here
   ========================================================================= */

/* Form sits transparent on the section — the live booking card itself is now
   transparent, so the form follows suit. No glass card, no extra borders;
   the inputs alone carry the visual weight. */
.wsb-bp-form {
	padding: 4px 0 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Section heading — matches "Select a Date" / "Available times" style */
.wsb-bp-form .creavibc-form-heading {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--bp-text-secondary);
	margin: 0 0 14px;
	opacity: 1;
}

.wsb-bp-form .creavibc-form-heading strong {
	font-weight: inherit;
}

/* Labels — matched to block visual language */
.wsb-bp-form label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--bp-text-secondary);
	margin-bottom: 12px;
	line-height: 1.4;
}

.wsb-bp-form label br { display: none; }

/* Inputs — transparent with accent-tinted border.
   Use both .wsb-bp-booking .creavibc-step-2 and .wsb-bp-form paths so specificity
   beats the global .creavibc-step-2 input[type="text"] { background:#fff } rule. */
.wsb-bp-form label input,
.wsb-bp-form label textarea,
.wsb-bp-booking .creavibc-step-2 label input,
.wsb-bp-booking .creavibc-step-2 label textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 7px;
	padding: 11px 15px;
	border-radius: 12px;
	border: 1.5px solid rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.22) !important;
	background: transparent !important;
	background-color: transparent !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--bp-text-primary) !important;
	box-shadow: none !important;
	outline: none;
	transition: border-color 0.2s ease,
	            box-shadow 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
	            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Required fields — stronger border */
.wsb-bp-booking .creavibc-step-2 label input[required],
.wsb-bp-booking .creavibc-step-2 label textarea[required] {
	border-color: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.42) !important;
}

/* Focus state */
.wsb-bp-form label input:focus,
.wsb-bp-form label textarea:focus,
.wsb-bp-booking .creavibc-step-2 label input:focus,
.wsb-bp-booking .creavibc-step-2 label textarea:focus {
	border-color: var(--bp-accent) !important;
	background: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.03) !important;
	background-color: rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.03) !important;
	box-shadow: 0 0 0 3px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.12) !important;
	color: var(--bp-text-primary) !important;
	transform: translateY(-1px);
	outline: none !important;
}

.wsb-bp-form label textarea {
	resize: vertical;
	min-height: 72px;
	line-height: 1.55;
}

/* Placeholder */
.wsb-bp-form label input::placeholder,
.wsb-bp-form label textarea::placeholder {
	color: var(--bp-text-tertiary);
	opacity: 0.55;
}

/* Error states */
.wsb-bp-form label input.creavibc-field-error,
.wsb-bp-form label textarea.creavibc-field-error {
	border-color: #f43f5e;
	background: rgba(244, 63, 94, 0.03);
	box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}

/* Shake the footer when form submitted with empty fields */
.wsb-bp-booking.wsb-form-error .wsb-bp-card__footer {
	animation: wsbShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.wsb-bp-form .creavibc-error-msg {
	display: block;
	font-size: 11px;
	color: #f43f5e;
	margin-top: 4px;
	font-weight: 500;
}

.wsb-bp-form .creavibc-required { color: #f43f5e; }

/* =========================================================================
   THANK-YOU — full-screen clean layout
   When .creavibc-thankyou is present, hide the left column and centre
   the booking card so it becomes the sole focus of the screen.
   ========================================================================= */

/* Hide the profile/left column when thank-you is shown */
.wsb-bp:has(.creavibc-thankyou) .wsb-bp__left {
	display: none !important;
}

/* Collapse the 2-column grid to a single centered column */
.wsb-bp:has(.creavibc-thankyou) .wsb-bp__inner {
	grid-template-columns: 1fr;
	max-width: 580px;
}

/* Remove glass card background — content floats on section bg */
.wsb-bp:has(.creavibc-thankyou) .wsb-bp-card {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* Also hide the footer nav (back/next buttons, summary chips) */
.wsb-bp:has(.creavibc-thankyou) .wsb-bp-card__footer {
	display: none !important;
}

/* ── Thank-you content itself ── */
.wsb-bp-booking .creavibc-thankyou {
	text-align: center;
	padding: 4px 0;
	animation: wsbFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Illustration container — Google-style centered character above title */
.wsb-bp-booking .wsb-bp-thankyou-illus {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 24px;
}
.wsb-bp-booking .wsb-bp-thankyou-svg {
	width: 140px;
	height: auto;
	filter: drop-shadow(0 8px 24px rgba(var(--wsb-bp-accent-rgb, 74,70,229), 0.14));
}

/* Title: mirrors left-column .wsb-bp__title — same size, weight, line-height, gradient */
.wsb-bp-booking .creavibc-thankyou-title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.06;
	margin: 0 0 10px;
	/* Wide-range gradient: dark indigo → main accent → light lavender — clearly visible */
	background: linear-gradient(125deg,
		var(--bp-accent-dark, #2826B8) 0%,
		var(--bp-accent, #4A46E5)      42%,
		#B8B6FF                        100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Meta: date + time on one row — icon tiles + text, centered */
.wsb-bp-booking .creavibc-thankyou-meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
	width: 100%;
}


.wsb-bp-booking .creavibc-thankyou-meta-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bp-accent) !important;
	background: transparent;
	padding: 0;
	border-radius: 0;
	line-height: 1.2;
}
/* Icon tile — same language as .wsb-bp__included-icon on the left column */
.wsb-bp-booking .creavibc-thankyou-meta-row .dashicons {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	font-size: 14px !important;
	line-height: 28px !important;
	text-align: center !important;
	border-radius: 8px !important;
	background: var(--bp-accent-soft) !important;
	color: var(--bp-accent-text) !important;
	flex-shrink: 0;
}

/* ── Meeting / Link-to-join ── */
.wsb-bp-booking .creavibc-thankyou-meeting {
	margin-top: 6px;
	width: 100%;
}
.wsb-bp-booking .creavibc-thankyou-meeting-subtitle {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(74,70,229,.45);
	margin: 0 0 8px;
}
.wsb-bp-booking .creavibc-linkpill {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 14px !important;
	background: rgba(255,255,255,.88) !important;
	border: 1px solid rgba(74,70,229,.12) !important;
	box-shadow: 0 2px 12px rgba(74,70,229,.08) !important;
	padding: 9px 12px !important;
}
.wsb-bp-booking .creavibc-linkpill-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--bp-accent) !important;
	font-size: 13px !important;
	font-weight: 600;
	text-decoration: none;
}

/* ── Copy button ── */
.wsb-bp-booking .creavibc-copy-btn {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: none;
	background: var(--bp-accent-soft);
	color: var(--bp-accent-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .14s;
}
.wsb-bp-booking .creavibc-copy-btn:hover { background: var(--bp-accent-soft-hover); }
.wsb-bp-booking .creavibc-ico-check { display: none; }
.wsb-bp-booking .creavibc-copy-btn.is-copied .creavibc-ico-copy  { display: none; }
.wsb-bp-booking .creavibc-copy-btn.is-copied .creavibc-ico-check { display: block; }

/* ── Make new booking button ── */
.wsb-bp .wsb-bp-new-booking-btn {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 28px;
	background: var(--bp-accent) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: var(--bp-shadow-cta);
	transition: background .15s, box-shadow .15s, transform .08s;
}
.wsb-bp .wsb-bp-new-booking-btn:hover {
	background: var(--bp-accent-hover) !important;
	box-shadow: var(--bp-shadow-cta-hover);
	transform: translateY(-1px);
}

/* =========================================================================
   TIMES HEADER — "Available times" label + timezone badge in one row
   ========================================================================= */

.wsb-bp-times__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

/* =========================================================================
   TIMES HEADER — label + timezone badge row
   ========================================================================= */

.wsb-bp-times__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.wsb-bp-times__header .wsb-bp-times__date-label {
	margin: 0;
}

/* =========================================================================
   TIMEZONE BADGE — sits in .wsb-bp-times__header, right-aligned
   ========================================================================= */

.wsb-bp-tz-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: var(--bp-text-secondary) !important;
	letter-spacing: 0;
	cursor: default;
	position: relative;
	transition: none;
	flex-shrink: 0;
	white-space: nowrap;
}
.wsb-bp-tz-badge:hover { background: transparent; }

/* ── Icon tile — matches .wsb-bp__included-icon exactly ── */
.wsb-bp-tz-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--bp-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* ── Globe SVG — matches .wsb-bp__included-icon svg stroke style ── */
.wsb-bp-tz-globe {
	display: block;
	width: 15px !important;
	height: 15px !important;
	stroke: var(--bp-accent);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/* ── Timezone text ── */
.wsb-bp-tz-text {
	font-size: 11px !important;
	font-weight: 600;
	color: var(--bp-text-secondary);
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Tooltip ── */
.wsb-bp-tz-tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	right: 0;
	background: var(--bp-accent);
	color: #fff;
	font-size: 11px !important;
	font-weight: 400;
	line-height: 1.4;
	padding: 5px 9px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.wsb-bp-tz-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 10px;
	border: 5px solid transparent;
	border-top-color: var(--bp-accent);
}
.wsb-bp-tz-badge:hover .wsb-bp-tz-tooltip {
	display: block;
}