/* =============================================================================
 * Custom booking modal — ExSPArience editorial
 *
 * Replaces the Amelia frontend entirely. Vanilla CSS + brand palette
 * (sage / cream / gold + Cormorant Garamond). Mounted on demand by
 * assets/js/booking-engine.js when a service card CTA is clicked.
 *
 * Architecture: full-screen overlay → centered frame → 3 step views
 * (calendar / info / confirmation). Bookings POST to Amelia's existing
 * /bookings/appointments endpoint so admin/email/payment flow is unchanged.
 * ========================================================================== */

/* --- Backdrop ---------------------------------------------------------- */
.exspa-bm__overlay {
	position: fixed;
	inset: 0;
	background: rgba(43, 37, 34, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: clamp(20px, 4vw, 64px) clamp(16px, 3vw, 48px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 360ms;
}
.exspa-bm__overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
body.exspa-bm-locked { overflow: hidden; }

/* --- Frame ------------------------------------------------------------- */
.exspa-bm {
	width: 100%;
	max-width: 720px;
	background: var(--exspa-cream, #EFE8DA);
	color: var(--exspa-sage-deep, #2B2522);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	position: relative;
	transform: translateY(28px);
	transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.5);
	max-height: calc(100svh - 8vw);
	display: flex;
	flex-direction: column;
}
.exspa-bm__overlay.is-open .exspa-bm { transform: translateY(0); }

/* --- Header (sage GREEN band with service name + price) ----------------
 * Dark green band differentiates the modal from the page (which uses
 * warm-black) and creates a clear vertical layering: page → modal → frame.
 * -------------------------------------------------------------------- */
.exspa-bm__header {
	background: var(--exspa-sage, #394839);
	color: var(--exspa-cream, #EFE8DA);
	padding: 28px 32px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
	position: relative;
}
.exspa-bm__eyebrow {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--exspa-gold, #8B6F3D);
	margin: 0 0 8px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.exspa-bm__eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--exspa-gold, #8B6F3D);
}
.exspa-bm__service {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 400;
	font-size: clamp(24px, 3vw, 36px);
	font-style: italic;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.1;
}
.exspa-bm__price {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(24px, 3vw, 36px);
	color: var(--exspa-cream);
	text-align: right;
	font-weight: 400;
	line-height: 1;
}
/* Live total > base price (extras selected) — paint the number gold so the
 * visitor sees the addon reflected immediately in the modal header. */
[data-bm-service-price].exspa-bm__price--bumped,
.exspa-bm__price [data-bm-service-price].exspa-bm__price--bumped {
	color: var(--exspa-gold, #C4A765);
	transition: color 280ms ease;
}
.exspa-bm__price-unit {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--exspa-cream);
	opacity: 0.65;
	margin-top: 4px;
}
.exspa-bm__close {
	position: absolute;
	top: 14px; right: 14px;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(239, 232, 218, 0.3);
	background: transparent;
	color: var(--exspa-cream);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: border-color 240ms ease, background 240ms ease, transform 240ms ease;
}
.exspa-bm__close:hover {
	border-color: var(--exspa-gold);
	color: var(--exspa-gold);
	transform: rotate(90deg);
}

/* --- Step progress ----------------------------------------------------- */
.exspa-bm__steps {
	display: flex;
	gap: 0;
	padding: 0 32px;
	background: rgba(43, 37, 34, 0.04);
	border-bottom: 1px solid rgba(43, 37, 34, 0.08);
}
.exspa-bm__step {
	flex: 1;
	padding: 14px 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--exspa-sage-deep);
	opacity: 0.45;
	border-bottom: 2px solid transparent;
	text-align: center;
	transition: opacity 240ms ease, border-color 240ms ease, color 240ms ease;
}
.exspa-bm__step.is-active {
	opacity: 1;
	border-bottom-color: var(--exspa-gold, #8B6F3D);
	color: var(--exspa-sage-deep);
}
.exspa-bm__step.is-done {
	opacity: 0.8;
	color: var(--exspa-gold);
}

/* --- Body (scrolls) ---------------------------------------------------- */
.exspa-bm__body {
	padding: 32px;
	overflow-y: auto;
	flex: 1;
	min-height: 320px;
}

/* --- Step views (one visible at a time) ------------------------------- */
.exspa-bm__view { display: none; animation: bm-fade 320ms ease both; }
.exspa-bm__view.is-active { display: block; }
@keyframes bm-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
 * CALENDAR — month grid + slot picker
 * ========================================================================== */
.exspa-bm__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.exspa-bm__cal-month {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 22px;
	margin: 0;
	color: var(--exspa-sage-deep);
	text-transform: capitalize;
}
.exspa-bm__cal-nav {
	display: flex;
	gap: 8px;
}
.exspa-bm__cal-btn {
	width: 36px; height: 36px;
	border: 1px solid rgba(43, 37, 34, 0.18);
	background: transparent;
	color: var(--exspa-sage-deep);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	transition: border-color 240ms ease, color 240ms ease, background 240ms ease;
}
.exspa-bm__cal-btn:hover:not(:disabled) {
	border-color: var(--exspa-gold);
	color: var(--exspa-gold);
}
.exspa-bm__cal-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.exspa-bm__cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.exspa-bm__cal-dow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--exspa-sage);
	opacity: 0.6;
	padding: 8px 0;
}
.exspa-bm__cal-day {
	aspect-ratio: 1;
	border: 1px solid transparent;
	background: transparent;
	color: var(--exspa-sage-deep);
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	font-style: italic;
	cursor: pointer;
	transition: border-color 240ms ease, background 240ms ease, color 240ms ease;
	display: flex; align-items: center; justify-content: center;
}
.exspa-bm__cal-day:hover:not(:disabled) {
	border-color: var(--exspa-gold);
	background: rgba(139, 111, 61, 0.08);
}
.exspa-bm__cal-day:disabled {
	color: var(--exspa-sage-deep);
	opacity: 0.25;
	cursor: not-allowed;
}
.exspa-bm__cal-day.is-selected {
	background: var(--exspa-sage-deep);
	color: var(--exspa-cream);
	border-color: var(--exspa-sage-deep);
}
.exspa-bm__cal-day.is-today {
	font-weight: 500;
	position: relative;
}
.exspa-bm__cal-day.is-today::after {
	content: '';
	position: absolute;
	bottom: 6px;
	width: 4px; height: 4px;
	background: var(--exspa-gold);
	border-radius: 50%;
}
.exspa-bm__cal-day.is-today.is-selected::after { background: var(--exspa-cream); }
.exspa-bm__cal-day.is-empty { cursor: default; }

/* --- Time slots -------------------------------------------------------- */
.exspa-bm__slots-wrap {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(43, 37, 34, 0.12);
	position: relative;
}
.exspa-bm__slots-wrap::before {
	content: '';
	position: absolute;
	top: -1px; left: 0;
	width: 24px; height: 1px;
	background: var(--exspa-gold);
}
.exspa-bm__slots-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--exspa-sage);
	opacity: 0.7;
	margin: 0 0 14px;
}
.exspa-bm__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}
.exspa-bm__slot {
	background: transparent;
	border: 1px solid rgba(43, 37, 34, 0.2);
	color: var(--exspa-sage-deep);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 12px 14px;
	cursor: pointer;
	transition: all 240ms ease;
}
.exspa-bm__slot:hover {
	border-color: var(--exspa-gold);
	background: rgba(139, 111, 61, 0.08);
}
.exspa-bm__slot.is-selected {
	background: var(--exspa-sage-deep);
	color: var(--exspa-cream);
	border-color: var(--exspa-sage-deep);
}
.exspa-bm__slots-empty {
	color: var(--exspa-sage-deep);
	opacity: 0.6;
	font-style: italic;
	font-family: 'Cormorant Garamond', serif;
	font-size: 17px;
}

/* =============================================================================
 * INFO FORM
 * ========================================================================== */
.exspa-bm__form { display: grid; gap: 20px; }
.exspa-bm__field { display: flex; flex-direction: column; gap: 8px; }
.exspa-bm__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exspa-bm__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--exspa-sage);
	opacity: 0.75;
}
.exspa-bm__input,
.exspa-bm__textarea,
.exspa-bm__qty {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(43, 37, 34, 0.2);
	border-radius: 0;
	color: var(--exspa-sage-deep);
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	padding: 14px 16px;
	transition: border-color 240ms ease, background 240ms ease;
	width: 100%;
}
.exspa-bm__input:focus,
.exspa-bm__textarea:focus,
.exspa-bm__qty:focus {
	outline: none;
	border-color: var(--exspa-gold);
	background: rgba(255, 255, 255, 0.95);
}
.exspa-bm__textarea { min-height: 90px; resize: vertical; font-family: 'Inter', sans-serif; }

/* Extras region (Suite +person) */
.exspa-bm__extras { display: flex; flex-direction: column; gap: 8px; }
.exspa-bm__extras[hidden] { display: none; }
.exspa-bm__extra-price {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 13px;
	color: var(--exspa-gold, #8B6F3D);
	text-transform: none;
	letter-spacing: 0;
	margin-left: 8px;
	opacity: 0.9;
}
.exspa-bm__extra-desc {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--exspa-sage-deep, #2B2522);
	opacity: 0.65;
	margin: 4px 0 0;
	font-style: italic;
}
.exspa-bm__summary-extra {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 14px;
	color: var(--exspa-sage, #394839);
	opacity: 0.85;
	margin-left: 6px;
}

/* Quantity stepper */
.exspa-bm__qty-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(43, 37, 34, 0.2);
}
.exspa-bm__qty-btn {
	width: 44px;
	background: transparent;
	border: none;
	color: var(--exspa-sage-deep);
	font-size: 20px;
	cursor: pointer;
	font-family: 'Cormorant Garamond', serif;
}
.exspa-bm__qty-btn:hover:not(:disabled) { background: rgba(139, 111, 61, 0.1); color: var(--exspa-gold); }
.exspa-bm__qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.exspa-bm__qty {
	width: 60px;
	border: none;
	border-left: 1px solid rgba(43, 37, 34, 0.2);
	border-right: 1px solid rgba(43, 37, 34, 0.2);
	text-align: center;
	background: transparent;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 20px;
}

/* =============================================================================
 * FOOTER (sticky CTA bar)
 * ========================================================================== */
.exspa-bm__footer {
	padding: 20px 32px;
	border-top: 1px solid rgba(43, 37, 34, 0.12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: rgba(255, 255, 255, 0.4);
}
.exspa-bm__summary {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 17px;
	color: var(--exspa-sage-deep);
	opacity: 0.85;
	flex: 1;
	min-width: 0;
}
.exspa-bm__summary strong {
	font-weight: 400;
	color: var(--exspa-gold);
	font-style: normal;
}
.exspa-bm__back,
.exspa-bm__primary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 14px 28px;
	cursor: pointer;
	border-radius: 0;
	transition: background 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms ease;
	white-space: nowrap;
}
.exspa-bm__back {
	background: transparent;
	color: var(--exspa-sage-deep);
	border: 1px solid rgba(43, 37, 34, 0.4);
}
/* Native [hidden] must beat the display: inline-flex above */
.exspa-bm [hidden] { display: none !important; }
.exspa-bm__back:hover { border-color: var(--exspa-sage-deep); background: rgba(43, 37, 34, 0.06); }
.exspa-bm__primary {
	background: var(--exspa-sage-deep);
	color: var(--exspa-cream);
	border: 1px solid var(--exspa-sage-deep);
	position: relative;
	overflow: hidden;
}
.exspa-bm__primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--exspa-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 480ms cubic-bezier(0.65, 0, 0.35, 1);
	z-index: 0;
}
.exspa-bm__primary span, .exspa-bm__primary svg { position: relative; z-index: 1; }
.exspa-bm__primary:hover:not(:disabled) { border-color: var(--exspa-gold); transform: translateY(-1px); }
.exspa-bm__primary:hover:not(:disabled)::before { transform: scaleX(1); }
.exspa-bm__primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* =============================================================================
 * CONFIRMATION VIEW
 * ========================================================================== */
.exspa-bm__confirm {
	text-align: center;
	padding: 32px 0 16px;
}
.exspa-bm__confirm-mark {
	width: 64px; height: 64px;
	border: 1px solid var(--exspa-gold);
	border-radius: 50%;
	margin: 0 auto 24px;
	display: flex; align-items: center; justify-content: center;
	color: var(--exspa-gold);
}
.exspa-bm__confirm-title {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 400;
	color: var(--exspa-sage-deep);
	margin: 0 0 16px;
	line-height: 1.1;
}
.exspa-bm__confirm-body {
	font-size: 15px;
	line-height: 1.65;
	color: var(--exspa-sage-deep);
	opacity: 0.85;
	max-width: 44ch;
	margin: 0 auto 28px;
}
.exspa-bm__confirm-details {
	background: rgba(43, 37, 34, 0.04);
	border: 1px solid rgba(43, 37, 34, 0.12);
	padding: 20px 24px;
	margin: 28px auto;
	max-width: 360px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 17px;
	color: var(--exspa-sage-deep);
}
.exspa-bm__confirm-details dt {
	font-family: 'Inter', sans-serif;
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--exspa-sage);
	opacity: 0.6;
	margin-bottom: 4px;
	font-style: normal;
}
.exspa-bm__confirm-details dd { margin: 0 0 12px; }
.exspa-bm__confirm-details dd:last-child { margin-bottom: 0; }

/* =============================================================================
 * LOADING / ERROR
 * ========================================================================== */
.exspa-bm__loading {
	text-align: center;
	padding: 48px 16px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	color: var(--exspa-sage-deep);
	opacity: 0.7;
}
.exspa-bm__loading::before {
	content: '';
	display: block;
	width: 24px; height: 24px;
	margin: 0 auto 16px;
	border: 2px solid rgba(43, 37, 34, 0.15);
	border-top-color: var(--exspa-gold);
	border-radius: 50%;
	animation: bm-spin 0.9s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

.exspa-bm__error {
	background: rgba(180, 70, 50, 0.08);
	border-left: 2px solid #B44632;
	padding: 14px 18px;
	font-size: 13.5px;
	color: #8B3A2C;
	margin-top: 16px;
}

/* =============================================================================
 * PAYMENT STEP (Stripe)
 * ========================================================================== */
.exspa-bm__pay-lead {
	font-size: 14px;
	line-height: 1.6;
	color: #2B2522;
	margin: 0 0 18px;
}
.exspa-bm__pay-element {
	min-height: 40px;
}
.exspa-bm__pay-loading {
	font-size: 13.5px;
	color: #6b6358;
	padding: 18px 0;
	text-align: center;
}
.exspa-bm__pay-secure {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6b6358;
}
.exspa-bm__pay-secure svg { flex: none; color: #394839; }

/* =============================================================================
 * MOBILE
 * ========================================================================== */
@media (max-width: 540px) {
	.exspa-bm { max-height: calc(100svh - 16px); }
	.exspa-bm__header { padding: 22px 20px; grid-template-columns: 1fr; gap: 12px; }
	.exspa-bm__price { text-align: left; }
	.exspa-bm__body { padding: 20px; }
	.exspa-bm__footer { padding: 16px 20px; flex-direction: column; align-items: stretch; }
	.exspa-bm__footer .exspa-bm__primary { width: 100%; justify-content: center; }
	.exspa-bm__field-row { grid-template-columns: 1fr; }
	.exspa-bm__steps { padding: 0 20px; }
	.exspa-bm__step { font-size: 9px; letter-spacing: 0.18em; }
}