/* Carousel wrapper around the shared stepper. On mobile the funnel step circles
   exceed a phone width, so the viewport scrolls horizontally and two arrows let
   the user peek at the steps around the current one — without changing step
   (real navigation stays on the funnel's Previous/Next buttons). On desktop the
   wrapper is inert: the arrows are hidden and every step shows at once.

   Scoped to `.stepper-carousel`, a class only the creation funnels render, so the
   shared stepper stays untouched on every other screen that includes it. */
.stepper-carousel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.stepper-carousel__viewport {
	min-width: 0;
}

.stepper-carousel__arrow {
	display: none;
}

@media screen and (max-width: 719px) {
	/* `flex-basis: 0` (not `auto`) so the viewport never claims its content's
	   width as its base size — otherwise the strip's intrinsic width leaks up the
	   flex ancestor chain (row `main`) and widens the page instead of scrolling
	   here. Paired with `min-width: 0`, this pins the viewport to the space left
	   between the arrows and lets the overflow scroll. */
	.stepper-carousel__viewport {
		flex: 1 1 0;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.stepper-carousel__viewport::-webkit-scrollbar {
		display: none;
	}

	/* Left-align the strip ONLY when it overflows, so the controller can center the
	   current step by scroll offset (centering an overflowing flex row would clip
	   its start). When the steps fit, the base `.step-container` centering stands,
	   keeping a short funnel visually centered. */
	.stepper-carousel--scrollable .stepper-carousel__viewport .step-container {
		justify-content: flex-start;
	}

	/* Keep the circles at their natural size so the row overflows and scrolls,
	   rather than shrinking to fit and never triggering the arrows. */
	.stepper-carousel__viewport .step {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	/* Arrows surface only when the strip overflows (class toggled by the
	   stepper-carousel controller); a short funnel that fits keeps them hidden. */
	.stepper-carousel--scrollable .stepper-carousel__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--color-raspberry);
		cursor: pointer;
	}

	.stepper-carousel__arrow[disabled] {
		color: var(--color-caramel);
		cursor: default;
	}

	/* Chevron drawn from two borders of a rotated square — no icon asset needed. */
	.stepper-carousel__arrow::before {
		content: "";
		width: 8px;
		height: 8px;
		border-style: solid;
		border-width: 2px 2px 0 0;
		border-color: currentColor;
	}

	.stepper-carousel__arrow--previous::before {
		transform: rotate(-135deg);
		margin-left: 4px;
	}

	.stepper-carousel__arrow--next::before {
		transform: rotate(45deg);
		margin-right: 4px;
	}
}