/* BM Therapy Pricing 2.1.1 — prices underneath the therapy photo, each price a booking link.
   Scoped to .bm-tp-* classes; loaded only on the therapies grid and therapy pages. */

:root {
	--bm-tp-gold: #ad9251;
	--bm-tp-gold-soft: rgba(173, 146, 81, 0.55);
	--bm-tp-gold-line: rgba(173, 146, 81, 0.35);
	--bm-tp-champagne: #fbf6ea;
	--bm-tp-navy: #142a36;
	--bm-tp-cream: #f9f6f1;
	--bm-tp-muted: #707070;
	--bm-tp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bm-tp-speed: 250ms;
	--bm-tp-chip-h: 68px;
}

/* ---------- Card band under the photo (therapies grid) ---------- */
.bm-tp-under {
	background: var(--bm-tp-cream);
	border: 1px solid var(--bm-tp-gold-line);
	border-top: 0;
	border-radius: 0 0 18px 18px;
	padding: 14px 16px 16px;
	margin-top: -6px;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.bm-tp-under .bm-tp-name {
	font-family: "Cormorant", serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--bm-tp-navy);
	margin: 0 0 10px;
	/* keep every card the same height even when a name wraps to two lines */
	min-height: 1.15em;
}

.bm-tp-under .bm-tp-name a {
	color: inherit;
	font: inherit;
	opacity: 1;
	text-decoration: none;
	transition: color var(--bm-tp-speed) var(--bm-tp-ease);
}

.bm-tp-under .bm-tp-name a:hover,
.bm-tp-under .bm-tp-name a:focus-visible {
	color: var(--bm-tp-gold);
}

/* The band now shows the name on every card, so the theme's hover-only title over the photo is redundant */
.service-block .inner-box:has(.bm-tp-under) .content-box {
	display: none;
}

/* The theme draws two decorative layers over the whole card: a gold hover tint (::before) and a dashed
   frame (::after). Both are absolutely positioned on top and would swallow clicks on the photo, the name
   and the price boxes. On cards with the band they stay purely visual (clicks pass through), and the band
   sits above the tint so prices stay readable on hover; the dashed frame still draws over everything. */
.service-block .inner-box:has(.bm-tp-under)::before,
.service-block .inner-box:has(.bm-tp-under)::after {
	pointer-events: none;
}

.service-block .inner-box .bm-tp-under {
	position: relative;
	z-index: 1;
}

/* ---------- Duration / price boxes (shared by grid and therapy page) ---------- */
.bm-tp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-tp-chips > li {
	/* fixed one-third width, so a therapy with fewer durations keeps the same box size */
	flex: 0 0 calc((100% - 16px) / 3);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-tp-chip {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--bm-tp-chip-h);
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	border: 1px solid var(--bm-tp-gold-soft);
	border-radius: 12px;
	padding: 6px 4px;
	color: inherit;
	text-decoration: none;
}

.bm-tp-chip .bm-tp-d {
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bm-tp-muted);
}

.bm-tp-chip .bm-tp-e {
	display: block;
	font-family: "Cormorant", serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bm-tp-gold);
}

/* Clickable price box = booking link */
a.bm-tp-chip--link {
	cursor: pointer;
	transition:
		border-color var(--bm-tp-speed) var(--bm-tp-ease),
		background-color var(--bm-tp-speed) var(--bm-tp-ease),
		box-shadow var(--bm-tp-speed) var(--bm-tp-ease),
		transform var(--bm-tp-speed) var(--bm-tp-ease);
}

a.bm-tp-chip--link:hover,
a.bm-tp-chip--link:focus-visible {
	border-color: var(--bm-tp-gold);
	background-color: var(--bm-tp-champagne);
	box-shadow: 0 6px 16px rgba(173, 146, 81, 0.18);
	transform: translateY(-2px);
	color: inherit;
	text-decoration: none;
}

a.bm-tp-chip--link:focus-visible {
	outline: 2px solid var(--bm-tp-gold);
	outline-offset: 2px;
}

a.bm-tp-chip--link:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(173, 146, 81, 0.16);
}

/* Therapies without verified prices: same band, a "View details" link instead of amounts (never a price) */
.bm-tp-more {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bm-tp-chip-h);
	box-sizing: border-box;
	border: 1px dashed var(--bm-tp-gold-soft);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bm-tp-gold) !important;
	text-decoration: none !important;
	transition:
		border-color var(--bm-tp-speed) var(--bm-tp-ease),
		background-color var(--bm-tp-speed) var(--bm-tp-ease),
		box-shadow var(--bm-tp-speed) var(--bm-tp-ease);
}

.bm-tp-more:hover,
.bm-tp-more:focus-visible {
	border-style: solid;
	border-color: var(--bm-tp-gold);
	background-color: var(--bm-tp-champagne);
	box-shadow: 0 6px 16px rgba(173, 146, 81, 0.14);
}

.bm-tp-more:focus-visible,
.bm-tp-under .bm-tp-name a:focus-visible {
	outline: 2px solid var(--bm-tp-gold);
	outline-offset: 2px;
}

/* ---------- Therapy page: panel underneath the main photo ---------- */
.bm-tp-panel {
	background: var(--bm-tp-cream);
	border: 1px solid rgba(173, 146, 81, 0.4);
	border-radius: 20px;
	padding: 20px 22px;
	margin: -8px 0 28px;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.bm-tp-panel .bm-tp-title {
	font-family: "Cormorant", serif;
	font-size: 28px;
	color: var(--bm-tp-navy);
	margin: 0 0 12px;
}

.bm-tp-panel .bm-tp-chip {
	min-height: 70px;
}

.bm-tp-panel .bm-tp-chip .bm-tp-e {
	font-size: 28px;
}

/* ---------- Gentle fade-up when a band/panel enters the viewport ----------
   The hidden state applies only after the small inline script has confirmed it can reveal it
   (html.bm-tp-anim-on), and never to elements already on screen at load. Only opacity/transform
   change, so there is no layout shift. */
@media (prefers-reduced-motion: no-preference) {
	.bm-tp-anim-on .bm-tp-under,
	.bm-tp-anim-on .bm-tp-panel {
		transition:
			opacity 300ms var(--bm-tp-ease),
			transform 300ms var(--bm-tp-ease);
	}

	.bm-tp-anim-on .bm-tp-under:not(.bm-tp-in),
	.bm-tp-anim-on .bm-tp-panel:not(.bm-tp-in) {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* ---------- Reduced motion: no movement at all; colour feedback only ---------- */
@media (prefers-reduced-motion: reduce) {
	a.bm-tp-chip--link,
	.bm-tp-more,
	.bm-tp-under .bm-tp-name a {
		transition: none;
	}

	a.bm-tp-chip--link:hover,
	a.bm-tp-chip--link:focus-visible,
	a.bm-tp-chip--link:active {
		transform: none;
	}
}