/**
 * HappyForms+ Step Styles
 * All selectors are scoped to forms enhanced by the companion plugin.
 */

.hfplus-enhanced .hfplus-progress,
.hfplus-enhanced .hfplus-progress * {
	box-sizing: border-box;
}

/* Keep the original HappyForms indicator as a safe fallback. */
.hfplus-enhanced .hfplus-progress {
	display: none;
}

.hfplus-enhanced.hfplus-style--progress .hfplus-progress,
.hfplus-enhanced.hfplus-style--milestones .hfplus-progress,
.hfplus-enhanced.hfplus-style--segments .hfplus-progress,
.hfplus-enhanced.hfplus-style--compact .hfplus-progress {
	display: block;
}

.hfplus-enhanced.hfplus-style--progress .happyforms-form__progress.happyforms-form-progress,
.hfplus-enhanced.hfplus-style--milestones .happyforms-form__progress.happyforms-form-progress,
.hfplus-enhanced.hfplus-style--segments .happyforms-form__progress.happyforms-form-progress,
.hfplus-enhanced.hfplus-style--compact .happyforms-form__progress.happyforms-form-progress {
	display: none !important;
}

.hfplus-progress {
	--hfplus-current-text: var(--happyforms-color-multistep-info-text-color, #0f172a);
	--hfplus-back-text: var(--happyforms-color-multistep-info-back-color, #0f172a);
	--hfplus-back-text-hover: var(--happyforms-color-multistep-info-back-color-hover, #0f172a);
	position: relative;
	width: 98%;
	margin: 0 1% var(--hfplus-spacing, 20px);
	color: var(--hfplus-current-text);
	font-family: inherit;
	font-size: var(--happyforms-part-value-font-size, 16px);
	line-height: 1.45;
}

.hfplus-progress__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.hfplus-progress__summary-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.hfplus-progress__eyebrow {
	display: block;
	margin: 0 0 2px;
	color: var(--hfplus-color-upcoming, #64748b);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.hfplus-progress__current {
	display: block;
	min-width: 0;
	margin: 0;
	color: var(--hfplus-current-text);
	font-size: clamp(1.05em, 2vw, 1.25em);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.hfplus-progress__current:focus {
	outline: 2px solid var(--hfplus-color-accent, #2563eb);
	outline-offset: 4px;
}

.hfplus-progress__percentage {
	display: none;
	flex: 0 0 auto;
	color: var(--hfplus-color-accent, #2563eb);
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	font-weight: 750;
}

.hfplus-show-percentage .hfplus-progress__percentage {
	display: inline-block;
}

.hfplus-progress__bar {
	position: relative;
	height: 10px;
	margin-block-start: 12px;
	overflow: hidden;
	border-radius: max(5px, var(--hfplus-radius, 12px));
	background: var(--hfplus-color-track, #e2e8f0);
}

.hfplus-progress__bar-value {
	display: block;
	width: var(--hfplus-progress-value, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--hfplus-color-complete, #0f766e), var(--hfplus-color-accent, #2563eb));
	transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hfplus-progress__ring,
.hfplus-progress__steps-scroll {
	display: none;
}

.hfplus-progress__actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-block-start: 12px;
}

.hfplus-progress button.hfplus-progress__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	width: auto !important;
	margin: 0;
	padding: 8px 12px;
	gap: 7px;
	appearance: none;
	border: 1px solid transparent !important;
	border-radius: min(var(--hfplus-radius, 12px), 10px);
	background: transparent;
	box-shadow: none;
	color: var(--hfplus-back-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	font-weight: 650;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* HappyForms checks event.target instead of currentTarget; descendants must not become click targets. */
.hfplus-progress button.submit > *,
.hfplus-progress button.submit > * * {
	pointer-events: none;
}

.hfplus-back--soft .hfplus-progress button.hfplus-progress__back {
	background: var(--hfplus-color-surface, #f8fafc);
}

.hfplus-back--outline .hfplus-progress button.hfplus-progress__back {
	border-color: var(--hfplus-color-track, #e2e8f0) !important;
}

.hfplus-back--link .hfplus-progress button.hfplus-progress__back {
	min-height: 32px;
	padding: 3px 0;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.hfplus-progress button.hfplus-progress__back:hover {
	border-color: var(--hfplus-color-track, #e2e8f0) !important;
	background: var(--hfplus-color-surface, #f8fafc);
	color: var(--hfplus-back-text-hover);
}

.hfplus-progress button.hfplus-progress__back:focus,
.hfplus-progress button.hfplus-progress__back:focus-visible,
.hfplus-step__control:is(button):focus,
.hfplus-step__control:is(button):focus-visible {
	outline: 3px solid var(--hfplus-color-accent, #2563eb);
	outline-offset: 3px;
	color: var(--hfplus-back-text-hover);
}

.hfplus-progress:dir(rtl) .hfplus-progress__back svg {
	transform: rotate(180deg);
}

.hfplus-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* Milestones ------------------------------------------------------------ */

.hfplus-style--milestones .hfplus-progress__bar,
.hfplus-style--segments .hfplus-progress__bar,
.hfplus-style--compact .hfplus-progress__bar {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.hfplus-style--milestones .hfplus-progress__steps-scroll,
.hfplus-style--segments .hfplus-progress__steps-scroll {
	display: block;
	width: 100%;
	margin-block-start: var(--hfplus-spacing, 20px);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
}

.hfplus-progress__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--hfplus-step-count), minmax(90px, 1fr));
	min-width: min(100%, calc(var(--hfplus-step-count) * 112px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hfplus-step {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0 5px;
	list-style: none;
}

.hfplus-style--milestones .hfplus-step:not(:first-child)::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: calc(var(--hfplus-marker-size, 36px) / 2 - 1px);
	inset-inline-end: 50%;
	width: 100%;
	height: 2px;
	background: var(--hfplus-color-track, #e2e8f0);
}

.hfplus-style--milestones .hfplus-step--complete::before,
.hfplus-style--milestones .hfplus-step--current::before {
	background: var(--hfplus-color-complete, #0f766e);
}

.hfplus-step__control {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	color: var(--hfplus-color-upcoming, #64748b);
	font: inherit;
	line-height: 1.3;
	text-align: center;
}

.hfplus-step__control:is(button) {
	width: 100%;
	padding: 0;
	appearance: none;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.hfplus-style--milestones .hfplus-step__control {
	flex-direction: column;
	gap: 8px;
}

.hfplus-step__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--hfplus-marker-size, 36px);
	width: var(--hfplus-marker-size, 36px);
	height: var(--hfplus-marker-size, 36px);
	border: 2px solid var(--hfplus-color-track, #e2e8f0);
	border-radius: 999px;
	background: #fff;
	color: var(--hfplus-color-upcoming, #64748b);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	font-weight: 750;
	transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.hfplus-step--complete .hfplus-step__marker {
	border-color: var(--hfplus-color-complete, #0f766e);
	background: var(--hfplus-color-complete, #0f766e);
	color: #fff;
}

.hfplus-step--current .hfplus-step__marker {
	border-color: var(--hfplus-color-accent, #2563eb);
	background: var(--hfplus-color-accent, #2563eb);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hfplus-color-accent, #2563eb) 18%, transparent);
	color: #fff;
}

.hfplus-step__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
	max-width: 100%;
	color: inherit;
	font-size: 0.8em;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hfplus-show-labels .hfplus-step__label {
	position: static !important;
	display: block;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}

.hfplus-step--complete .hfplus-step__control,
.hfplus-step--complete .hfplus-step__label {
	color: var(--hfplus-color-complete, #0f766e);
}

.hfplus-step--current .hfplus-step__control,
.hfplus-step--current .hfplus-step__label {
	color: var(--hfplus-current-text);
	font-weight: 700;
}

.hfplus-step__control:is(button):hover .hfplus-step__marker {
	transform: translateY(-2px);
}

.hfplus-step__control:is(button):hover .hfplus-step__label {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Segmented tracker ----------------------------------------------------- */

.hfplus-style--segments .hfplus-progress__steps {
	gap: 8px;
	min-width: min(100%, calc(var(--hfplus-step-count) * 132px));
}

.hfplus-style--segments .hfplus-step {
	padding: 0;
}

.hfplus-style--segments .hfplus-step__control {
	align-items: center;
	width: 100%;
	min-height: 62px;
	padding: 10px;
	gap: 9px;
	border: 1px solid var(--hfplus-color-track, #e2e8f0);
	border-radius: var(--hfplus-radius, 12px);
	background: var(--hfplus-color-surface, #f8fafc);
	text-align: start;
}

.hfplus-style--segments .hfplus-step--current .hfplus-step__control {
	border-color: var(--hfplus-color-accent, #2563eb);
	box-shadow: inset 0 3px 0 var(--hfplus-color-accent, #2563eb);
}

.hfplus-style--segments .hfplus-step--complete .hfplus-step__control {
	border-color: var(--hfplus-color-complete, #0f766e);
}

.hfplus-style--segments .hfplus-step__marker {
	flex-basis: min(var(--hfplus-marker-size, 36px), 32px);
	width: min(var(--hfplus-marker-size, 36px), 32px);
	height: min(var(--hfplus-marker-size, 36px), 32px);
}

.hfplus-style--segments .hfplus-step__label {
	flex: 1 1 auto;
}

/* Compact card ---------------------------------------------------------- */

.hfplus-style--compact .hfplus-progress {
	padding: 14px;
	border: 1px solid var(--hfplus-color-track, #e2e8f0);
	border-radius: var(--hfplus-radius, 12px);
	background: var(--hfplus-color-surface, #f8fafc);
}

.hfplus-style--compact .hfplus-progress__summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
}

.hfplus-style--compact .hfplus-progress__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: max(var(--hfplus-marker-size, 36px), 46px);
	height: max(var(--hfplus-marker-size, 36px), 46px);
	border-radius: 50%;
	background: conic-gradient(var(--hfplus-color-accent, #2563eb) var(--hfplus-progress-angle, 0deg), var(--hfplus-color-track, #e2e8f0) 0);
}

.hfplus-style--compact .hfplus-progress__ring::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: inherit;
	background: var(--hfplus-color-surface, #f8fafc);
}

.hfplus-style--compact .hfplus-progress__ring span {
	position: relative;
	z-index: 1;
	color: var(--hfplus-current-text);
	font-size: 0.72em;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.hfplus-style--compact .hfplus-progress__percentage {
	display: none !important;
}

.hfplus-style--compact .hfplus-progress__actions {
	margin-block-start: 10px;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--hfplus-color-track, #e2e8f0);
}

/* Responsive, accessibility, and print -------------------------------- */

@media (max-width: 600px) {
	.hfplus-progress {
		margin-block-end: max(16px, var(--hfplus-spacing, 20px));
	}

	.hfplus-progress__current {
		font-size: 1.05em;
	}

	.hfplus-progress__steps {
		min-width: calc(var(--hfplus-step-count) * 104px);
	}

	.hfplus-style--segments .hfplus-progress__steps {
		min-width: calc(var(--hfplus-step-count) * 122px);
	}

	.hfplus-progress button.hfplus-progress__back {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hfplus-progress *,
	.hfplus-progress *::before,
	.hfplus-progress *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (forced-colors: active) {
	.hfplus-progress__bar,
	.hfplus-style--compact .hfplus-progress,
	.hfplus-style--segments .hfplus-step__control {
		border: 1px solid CanvasText;
	}

	.hfplus-progress__bar-value,
	.hfplus-step--complete .hfplus-step__marker {
		background: CanvasText;
		color: Canvas;
	}

	.hfplus-step--current .hfplus-step__marker {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}
}

@media print {
	.hfplus-progress__actions {
		display: none !important;
	}
}