/* =============================================================================
 * Section Progress — sticky per-section indicator
 * ========================================================================== */

.exspa-section-progress {
	position: sticky;
	top: 32px;
	float: right;
	z-index: 50;
	width: 56px;
	height: 56px;
	margin: 0 32px 0 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 350ms ease;
	display: grid;
	place-items: center;
	/* Pull the indicator to the section's top edge without taking flow height */
	margin-bottom: -56px;
}

.exspa-section-progress.is-visible {
	opacity: 1;
}

/* SVG ring */
.exspa-section-progress__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.exspa-section-progress__bg,
.exspa-section-progress__fg {
	fill: none;
	stroke-width: 2.5;
}

/* On cream sections: subtle sage background ring, gold fill */
.exspa-products .exspa-section-progress__bg,
.exspa-amenities .exspa-section-progress__bg,
.exspa-founder .exspa-section-progress__bg,
.exspa-ig .exspa-section-progress__bg,
.exspa-lieu .exspa-section-progress__bg {
	stroke: rgba(57, 72, 57, 0.18);
}
.exspa-products .exspa-section-progress__fg,
.exspa-amenities .exspa-section-progress__fg,
.exspa-founder .exspa-section-progress__fg,
.exspa-ig .exspa-section-progress__fg,
.exspa-lieu .exspa-section-progress__fg {
	stroke: var(--exspa-gold, #8B6F3D);
}

/* On sage sections: cream background ring, gold fill */
.exspa-moments .exspa-section-progress__bg,
.exspa-hygiene .exspa-section-progress__bg,
.exspa-cta .exspa-section-progress__bg,
.exspa-zones .exspa-section-progress__bg,
.exspa-suite .exspa-section-progress__bg {
	stroke: rgba(239, 232, 218, 0.22);
}
.exspa-moments .exspa-section-progress__fg,
.exspa-hygiene .exspa-section-progress__fg,
.exspa-cta .exspa-section-progress__fg,
.exspa-zones .exspa-section-progress__fg,
.exspa-suite .exspa-section-progress__fg {
	stroke: var(--exspa-gold, #8B6F3D);
}

.exspa-section-progress__fg {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 120ms linear;
}

/* Optional inline label — hidden by default, surface on hover via CSS later if wanted */
.exspa-section-progress__label {
	display: none;
}

/* Mobile — smaller indicators, less margin */
@media (max-width: 640px) {
	.exspa-section-progress {
		width: 40px;
		height: 40px;
		top: 16px;
		margin-right: 16px;
		margin-bottom: -40px;
	}
}

/* Reduce-motion: keep visible but remove transitions */
@media (prefers-reduced-motion: reduce) {
	.exspa-section-progress,
	.exspa-section-progress__fg {
		transition: none;
	}
}