/* Process Steps Widget - Base Styles */
.pw-process-steps {
	--pw-connector-color: #D9D9D9;
	--pw-connector-height: 2px;
	--pw-connector-style: solid;
	position: relative;
	width: 100%;
}

.pw-step {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.pw-step-circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 2px solid #D9D9D9;
	box-sizing: border-box;
	transition: all 0.3s ease;
	z-index: 2;
}

.pw-step-circle .pw-icon i {
	font-size: 40px;
	color: #222222;
	line-height: 1;
}

.pw-step-circle .pw-icon svg {
	width: 40px;
	height: 40px;
	fill: #222222;
}

.pw-step-circle .pw-image img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	display: block;
}

.pw-step-number {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	background-color: #222222;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	z-index: 3;
	transform: translate(-10%, -10%);
}

.pw-step-title {
	margin: 20px 0 0;
	color: #222222;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.pw-step-description {
	margin: 8px 0 0;
	color: #555555;
	font-size: 15px;
	line-height: 1.6;
}

/* =========================================================
   GRID LAYOUT + CONNECTOR
========================================================= */
.pw-steps-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	row-gap: 50px;
	column-gap: 20px;
	position: relative;
	width: 100%;
}

.pw-steps-grid.pw-has-connector .pw-step {
	position: relative;
}

.pw-steps-grid.pw-has-connector::before {
	content: '';
	position: absolute;
	top: var(--pw-connector-top, 55px);
	left: calc(50% / var(--pw-steps-count, 6));
	right: calc(50% / var(--pw-steps-count, 6));
	height: var(--pw-connector-height, 2px);
	background: transparent;
	border-top: var(--pw-connector-height, 2px) var(--pw-connector-style, solid) var(--pw-connector-color, #D9D9D9);
	z-index: 1;
}

/* Dotted line with arrowhead variant (matches reference screenshot) */
.pw-steps-grid.pw-has-connector[data-connector-style="dotted-arrow"]::before {
	top: calc(var(--pw-connector-top, 55px) - 10px);
	height: 20px;
	border-top: none;
	background: var(--pw-connector-color, #D9D9D9);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%2220%22%20x2%3D%22128%22%20y2%3D%2220%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-dasharray%3D%2210%209%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M128%209%20L160%2020%20L128%2031%20Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%2220%22%20x2%3D%22128%22%20y2%3D%2220%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-dasharray%3D%2210%209%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M128%209%20L160%2020%20L128%2031%20Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: calc(100% / (var(--pw-steps-count, 6) - 1)) 100%;
	mask-size: calc(100% / (var(--pw-steps-count, 6) - 1)) 100%;
	-webkit-mask-position: left center;
	mask-position: left center;
}

/* =========================================================
   SLIDER LAYOUT (Swiper)
========================================================= */
.pw-steps-slider-wrap {
	display: none;
	position: relative;
	width: 100%;
}

.pw-steps-swiper {
	width: 100%;
	overflow: hidden;
	padding: 10px 4px 30px;
}

.pw-steps-swiper .swiper-slide {
	height: auto;
}

.pw-swiper-arrow {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #F2F2F2;
	color: #222222;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	font-size: 16px;
	transition: all 0.3s ease;
}

.pw-swiper-arrow:hover {
	background-color: #D9D9D9;
}

.pw-swiper-prev { left: -10px; }
.pw-swiper-next { right: -10px; }

.pw-swiper-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.pw-swiper-pagination .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #D9D9D9;
	opacity: 1;
	margin: 0;
	cursor: pointer;
}

.pw-swiper-pagination .swiper-pagination-bullet-active {
	background-color: #222222;
}

/* =========================================================
   RESPONSIVE LAYOUT SWITCH (grid <-> slider per device)
   Elementor default breakpoints: mobile <768, tablet 768-1024, desktop >1024
========================================================= */

/* Desktop */
@media (min-width: 1025px) {
	.pw-process-steps[data-desktop-layout="grid"] .pw-steps-slider-wrap { display: none; }
	.pw-process-steps[data-desktop-layout="grid"] .pw-steps-grid { display: grid; }

	.pw-process-steps[data-desktop-layout="slider"] .pw-steps-grid { display: none; }
	.pw-process-steps[data-desktop-layout="slider"] .pw-steps-slider-wrap { display: block; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-process-steps[data-tablet-layout="grid"] .pw-steps-slider-wrap { display: none; }
	.pw-process-steps[data-tablet-layout="grid"] .pw-steps-grid { display: grid; }

	.pw-process-steps[data-tablet-layout="slider"] .pw-steps-grid { display: none; }
	.pw-process-steps[data-tablet-layout="slider"] .pw-steps-slider-wrap { display: block; }
}

/* Mobile */
@media (max-width: 767px) {
	.pw-process-steps[data-mobile-layout="grid"] .pw-steps-slider-wrap { display: none; }
	.pw-process-steps[data-mobile-layout="grid"] .pw-steps-grid { display: grid; grid-template-columns: 1fr !important; }

	.pw-process-steps[data-mobile-layout="slider"] .pw-steps-grid { display: none; }
	.pw-process-steps[data-mobile-layout="slider"] .pw-steps-slider-wrap { display: block; }

	.pw-steps-grid.pw-has-connector::before,
	.pw-steps-grid.pw-has-connector[data-connector-style="dotted-arrow"]::before { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.pw-steps-grid.pw-has-connector::before,
	.pw-steps-grid.pw-has-connector[data-connector-style="dotted-arrow"]::before {
		display: none;
	}
}