/* Progress Timeline for Elementor
   The whole component is driven by CSS variables so the Elementor style tab
   can repaint it without touching these rules. */

.ept-timeline {
	--ept-dot: 56px;
	--ept-icon: 24px;
	--ept-line: 2px;
	--ept-gap: 0px;
	--ept-stack-gap: 26px;
	--ept-label-gap: 14px;
	--ept-dot-border-width: 1px;
	--ept-duration: 2000ms;
	--ept-start-delay: 200ms;

	--ept-line-color: #ececec;
	--ept-line-color-active: #ef4056;
	--ept-dot-bg: #fff;
	--ept-dot-bg-active: #ef4056;
	--ept-dot-border: #ededed;
	--ept-dot-border-active: #ef4056;
	--ept-icon-color: #d2d2d2;
	--ept-icon-color-active: #fff;
	--ept-label-color: #bfbfbf;
	--ept-label-color-active: #1f1f1f;

	position: relative;
	width: 100%;
}

.ept-timeline *,
.ept-timeline *::before,
.ept-timeline *::after {
	box-sizing: border-box;
}

.ept-timeline.ept-rtl {
	direction: rtl;
}

.ept-timeline.ept-ltr {
	direction: ltr;
}

/* --- steps row --------------------------------------------------------- */

.ept-steps {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: var(--ept-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ept-step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
	padding: 0;
}

.ept-step::marker {
	content: "";
}

.ept-step__dot {
	flex: 0 0 auto;
	width: var(--ept-dot);
	height: var(--ept-dot);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ept-dot-bg);
	color: var(--ept-icon-color);
	border: var(--ept-dot-border-width) solid var(--ept-dot-border);
	transform: scale(0.94);
	transition:
		background-color 0.45s ease,
		border-color 0.45s ease,
		color 0.45s ease,
		box-shadow 0.45s ease,
		transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--ept-delay, 0ms);
}

.ept-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: var(--ept-icon);
	color: inherit;
}

.ept-step__icon svg {
	display: block;
	width: var(--ept-icon);
	height: var(--ept-icon);
}

.ept-step__icon i {
	font-size: var(--ept-icon);
	color: inherit;
}

/* SVG recolouring modes */
.ept-svg-fill .ept-step__icon svg,
.ept-svg-fill .ept-step__icon svg * {
	fill: currentColor;
}

.ept-svg-stroke .ept-step__icon svg,
.ept-svg-stroke .ept-step__icon svg * {
	fill: none;
	stroke: currentColor;
}

.ept-svg-both .ept-step__icon svg,
.ept-svg-both .ept-step__icon svg * {
	fill: currentColor;
	stroke: currentColor;
}

.ept-step__label {
	margin-top: var(--ept-label-gap);
	color: var(--ept-label-color);
	transition: color 0.45s ease;
	transition-delay: var(--ept-delay, 0ms);
}

/* --- the line ---------------------------------------------------------- */

.ept-track {
	position: absolute;
	z-index: 1;
	top: calc(var(--ept-dot) / 2);
	margin-top: calc(var(--ept-line) / -2);
	/* JS replaces these with exact pixel offsets once it can measure the dots */
	left: var(--ept-x-start, calc(50% / var(--ept-count, 6)));
	right: var(--ept-x-end, calc(50% / var(--ept-count, 6)));
	height: var(--ept-line);
	background-color: var(--ept-line-color);
	border-radius: 999px;
	overflow: hidden;
}

.ept-track__fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--ept-line-color-active);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--ept-duration) linear var(--ept-start-delay);
	will-change: transform;
}

.ept-ltr .ept-track__fill {
	transform-origin: left center;
}

/* --- filled state ------------------------------------------------------ */

.ept-timeline.ept-run .ept-track__fill {
	transform: scaleX(1);
}

.ept-timeline.ept-run .ept-step__dot {
	background-color: var(--ept-dot-bg-active);
	border-color: var(--ept-dot-border-active);
	color: var(--ept-icon-color-active);
	transform: scale(1);
}

.ept-timeline.ept-run .ept-step__label {
	color: var(--ept-label-color-active);
}

/* steps flagged as "keep grey" never light up */
.ept-timeline .ept-step--muted .ept-step__dot,
.ept-timeline.ept-run .ept-step--muted .ept-step__dot {
	background-color: var(--ept-dot-bg);
	border-color: var(--ept-dot-border);
	color: var(--ept-icon-color);
	transform: scale(0.94);
	box-shadow: none;
}

.ept-timeline .ept-step--muted .ept-step__label,
.ept-timeline.ept-run .ept-step--muted .ept-step__label {
	color: var(--ept-label-color);
}

/* --- stacked (mobile) -------------------------------------------------- */

@media (max-width: 767px) {

	.ept-timeline.ept-stack .ept-steps {
		flex-direction: column;
		align-items: stretch;
		gap: var(--ept-stack-gap);
	}

	.ept-timeline.ept-stack .ept-step {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		text-align: start;
		gap: var(--ept-label-gap);
	}

	.ept-timeline.ept-stack .ept-step__label {
		margin-top: 0;
	}

	.ept-timeline.ept-stack .ept-track {
		top: var(--ept-y-start, calc(var(--ept-dot) / 2));
		bottom: var(--ept-y-end, calc(var(--ept-dot) / 2));
		left: auto;
		right: auto;
		inset-inline-start: calc(var(--ept-dot) / 2);
		margin-top: 0;
		margin-inline-start: calc(var(--ept-line) / -2);
		width: var(--ept-line);
		height: auto;
	}

	.ept-timeline.ept-stack .ept-track__fill {
		transform: scaleY(0);
		transform-origin: center top;
	}

	.ept-timeline.ept-stack.ept-run .ept-track__fill {
		transform: scaleY(1);
	}
}

/* --- accessibility ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ept-timeline .ept-track__fill,
	.ept-timeline .ept-step__dot,
	.ept-timeline .ept-step__label {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}