/**
 * Step Icons widget - CRDev Elementor UI Kit
 * https://camilorivera.dev
 */

.ceuk-step-icons {
	--ceuk-si-align: center;
	--ceuk-si-gap: 32px;
	--ceuk-si-inner-gap: 14px;

	--ceuk-si-line-color: #d5d8dc;
	--ceuk-si-line-thickness: 2px;
	--ceuk-si-line-style: dashed;

	--ceuk-si-marker-size: 56px;
	--ceuk-si-marker-radius: 50%;
	--ceuk-si-marker-color: #ffffff;
	--ceuk-si-marker-bg: #1d1f21;
	--ceuk-si-marker-color-active: var(--ceuk-si-marker-color);
	--ceuk-si-marker-bg-active: var(--ceuk-si-marker-bg);

	--ceuk-si-icon-size: 40px;
	--ceuk-si-icon-color: #1d1f21;
	--ceuk-si-icon-bg: transparent;

	position: relative;
	box-sizing: border-box;
}

.ceuk-step-icons *,
.ceuk-step-icons *::before,
.ceuk-step-icons *::after {
	box-sizing: border-box;
}

.ceuk-step-icons__list {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ceuk-si-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceuk-step-icons--equal-height .ceuk-step-icons__list {
	align-items: stretch;
}

.ceuk-step-icons__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: var(--ceuk-si-inner-gap);
	text-align: var(--ceuk-si-align);
	min-width: 0;
}

.ceuk-step-icons__marker-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.ceuk-step-icons__connector {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0;
	border-top: var(--ceuk-si-line-thickness) var(--ceuk-si-line-style) var(--ceuk-si-line-color);
	transform: translateY(-50%);
	z-index: 0;
}

.ceuk-step-icons--no-connector .ceuk-step-icons__connector {
	display: none;
}

.ceuk-step-icons__marker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ceuk-si-marker-size);
	height: var(--ceuk-si-marker-size);
	min-width: var(--ceuk-si-marker-size);
	border-radius: var(--ceuk-si-marker-radius);
	background: var(--ceuk-si-marker-bg);
	color: var(--ceuk-si-marker-color);
	font-size: calc(var(--ceuk-si-marker-size) * 0.4);
	line-height: 1;
}

.ceuk-step-icons__marker svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ceuk-step-icons__item--active .ceuk-step-icons__marker {
	background: var(--ceuk-si-marker-bg-active);
	color: var(--ceuk-si-marker-color-active);
}

.ceuk-step-icons__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ceuk-si-inner-gap);
	width: 100%;
}

.ceuk-step-icons__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ceuk-si-icon-size);
	color: var(--ceuk-si-icon-color);
	background: var(--ceuk-si-icon-bg);
	line-height: 1;
}

.ceuk-step-icons__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ceuk-step-icons__image img {
	display: block;
}

.ceuk-step-icons__title {
	margin: 0;
}

.ceuk-step-icons__content {
	margin: 0;
}

/* Vertical layout: marker + connector on one side, content beside it. */
.ceuk-step-icons[data-layout="vertical"] .ceuk-step-icons__list {
	flex-direction: column;
}

.ceuk-step-icons[data-layout="vertical"] .ceuk-step-icons__item {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
	width: 100%;
}

.ceuk-step-icons[data-layout="vertical"] .ceuk-step-icons__marker-wrap {
	align-self: stretch;
	width: auto;
	flex: 0 0 auto;
}

.ceuk-step-icons[data-layout="vertical"] .ceuk-step-icons__connector {
	top: 50%;
	left: 50%;
	width: 0;
	height: 100%;
	border-top: 0;
	border-left: var(--ceuk-si-line-thickness) var(--ceuk-si-line-style) var(--ceuk-si-line-color);
	transform: translateX(-50%);
}

.ceuk-step-icons[data-layout="vertical"] .ceuk-step-icons__body {
	align-items: flex-start;
	text-align: left;
	padding-bottom: var(--ceuk-si-gap);
}

.ceuk-step-icons[data-layout="vertical"] .ceuk-step-icons__item:last-child .ceuk-step-icons__body {
	padding-bottom: 0;
}

/* Mobile always renders as a vertical stepper, regardless of the layout setting. */
@media (max-width: 767px) {
	.ceuk-step-icons .ceuk-step-icons__list {
		flex-direction: column !important;
	}

	.ceuk-step-icons .ceuk-step-icons__item {
		flex-direction: row !important;
		align-items: flex-start !important;
		text-align: left !important;
		width: 100%;
	}

	.ceuk-step-icons .ceuk-step-icons__marker-wrap {
		align-self: stretch !important;
		width: auto !important;
		flex: 0 0 auto !important;
	}

	.ceuk-step-icons .ceuk-step-icons__connector {
		top: 50% !important;
		left: 50% !important;
		width: 0 !important;
		height: 100% !important;
		border-top: 0 !important;
		border-left: var(--ceuk-si-line-thickness) var(--ceuk-si-line-style) var(--ceuk-si-line-color) !important;
		transform: translateX(-50%) !important;
	}

	.ceuk-step-icons .ceuk-step-icons__body {
		align-items: flex-start !important;
		text-align: left !important;
		padding-bottom: var(--ceuk-si-gap);
	}

	.ceuk-step-icons .ceuk-step-icons__item:last-child .ceuk-step-icons__body {
		padding-bottom: 0;
	}
}