/* DHS Process Steps — base styles */
.dhs-ps-wrapper {
	--dhs-ps-red: #D13B4B;
	--dhs-ps-dark: #2E2E2E;
	--dhs-ps-line-color: #2E2E2E;
	--dhs-ps-line-width: 2px;
	--dhs-ps-dot-color: #2E2E2E;

	position: relative;
	width: 100%;
	padding: 40px 10px 20px;
	box-sizing: border-box;
}

.dhs-ps-line-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: visible;
}

.dhs-ps-line-path {
	stroke: var(--dhs-ps-line-color);
	stroke-width: var(--dhs-ps-line-width);
	stroke-linecap: round;
}

.dhs-ps-moving-dot {
	fill: var(--dhs-ps-dot-color);
	opacity: 0;
}

.dhs-ps-track {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: nowrap;
}

.dhs-ps-item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}

/* order handling for above/below text */
.dhs-ps-text-above .dhs-ps-text-top { order: 1; }
.dhs-ps-text-above .dhs-ps-node { order: 2; }
.dhs-ps-text-below .dhs-ps-node { order: 1; }
.dhs-ps-text-below .dhs-ps-text-bottom { order: 2; }

.dhs-ps-node {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.dhs-ps-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dhs-ps-dot-color);
	z-index: 3;
}

.dhs-ps-text-above .dhs-ps-dot-top,
.dhs-ps-text-below .dhs-ps-dot-bottom {
	visibility: hidden; /* the alternating end dots only show on the outer edges, drawn by JS markers instead if desired */
}

.dhs-ps-circle {
	position: relative;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 6px 0;
	background: var(--dhs-ps-dark);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	text-decoration: none;
	z-index: 3;
}

.dhs-ps-color-red .dhs-ps-circle {
	background: var(--dhs-ps-red);
}

.dhs-ps-ring {
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	border-radius: 50%;
	border: 1px solid transparent;
}

.dhs-ps-color-red .dhs-ps-ring {
	border-color: rgba(209,59,75,0.35);
}

.dhs-ps-color-dark .dhs-ps-ring {
	border-color: rgba(46,46,46,0.18);
}

.dhs-ps-circle i,
.dhs-ps-circle svg {
	color: #fff;
	font-size: 34px;
}

.dhs-ps-text {
	max-width: 260px;
	padding: 14px 6px;
}

.dhs-ps-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1A1A1A;
}

.dhs-ps-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #6B6B6B;
	margin: 0;
}

/* ================= ANIMATION STATES ================= */
.dhs-ps-anim-enabled .dhs-ps-item {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.dhs-ps-anim-pop .dhs-ps-item {
	transform: scale(0.6);
}
.dhs-ps-anim-pop .dhs-ps-item.dhs-ps-in-view {
	opacity: 1;
	transform: scale(1);
}

.dhs-ps-anim-fade-up .dhs-ps-item {
	transform: translateY(30px);
}
.dhs-ps-anim-fade-up .dhs-ps-item.dhs-ps-in-view {
	opacity: 1;
	transform: translateY(0);
}

.dhs-ps-anim-none .dhs-ps-item {
	opacity: 1;
	transform: none;
}

.dhs-ps-line-anim .dhs-ps-line-path {
	stroke-dasharray: var(--dhs-ps-line-length, 3000);
	stroke-dashoffset: var(--dhs-ps-line-length, 3000);
	transition: stroke-dashoffset 1.6s ease;
}
.dhs-ps-line-anim.dhs-ps-line-in-view .dhs-ps-line-path {
	stroke-dashoffset: 0;
}

.dhs-ps-dot-anim.dhs-ps-line-in-view .dhs-ps-moving-dot {
	opacity: 1;
	animation: dhs-ps-travel 3.5s linear 1.6s infinite;
}

@keyframes dhs-ps-travel {
	0% { offset-distance: 0%; }
	100% { offset-distance: 100%; }
}

.dhs-ps-moving-dot {
	offset-rotate: 0deg;
}

/* subtle hover lift */
.dhs-ps-circle:hover {
	transform: translateY(-4px);
	transition: transform 0.3s ease;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
	.dhs-ps-track {
		flex-wrap: wrap;
		row-gap: 40px;
	}
	.dhs-ps-item {
		flex: 1 1 33%;
	}
	.dhs-ps-line-svg {
		display: none;
	}
}

@media (max-width: 767px) {
	.dhs-ps-track {
		flex-direction: column;
		align-items: center;
	}
	.dhs-ps-item {
		flex: 1 1 auto;
		width: 100%;
		max-width: 320px;
	}
	.dhs-ps-title-alternate .dhs-ps-item .dhs-ps-text-top,
	.dhs-ps-title-alternate .dhs-ps-item .dhs-ps-text-bottom {
		order: 2;
	}
	.dhs-ps-title-alternate .dhs-ps-item .dhs-ps-node {
		order: 1;
	}
}