/* ==============================================
   GW Horizontal Steps – Stylesheet
   ============================================== */

/* Wrapper */
.gw-steps-wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* User-select disabled on track */
.gw-steps-track,
.gw-steps-track * {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

/* Track */
.gw-steps-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: var(--gw-gap, 20px);
	/* Einrückung links/rechts sowie oben/unten für den Schattenplatz */
	padding: 20px var(--gw-track-pad, 40px);
	/* Natives Wischen/Snappen exakt NACH der Einrückung */
	scroll-padding-inline: var(--gw-track-pad, 40px);
	align-items: stretch;
	box-sizing: border-box;
	cursor: grab;
}

.gw-steps-track::-webkit-scrollbar { display: none; }

.gw-steps-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

/* Custom cursor: hide default cursor when enabled */
.gw-steps-wrapper[data-cursor="custom"] .gw-steps-track:hover { cursor: none; }
.gw-steps-wrapper[data-cursor="custom"] .gw-steps-track.is-dragging { cursor: none; }

/* Step items */
.gw-step-item {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 0 0 calc((100% / var(--gw-spv, 2.2)) - (var(--gw-gap, 20px) * (var(--gw-spv, 2.2) - 1) / var(--gw-spv, 2.2)));
	box-sizing: border-box;
	overflow: hidden;
	z-index: 0;
	padding: 40px;
	border-radius: 20px;
	min-height: 500px;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Scroll effects */
.gw-steps-wrapper[data-effect="fade"] .gw-step-item:not(.is-center-slide) {
	opacity: 0.3;
}
.gw-steps-wrapper[data-effect="scale"] .gw-step-item:not(.is-center-slide) {
	transform: scale(0.9);
}
.gw-steps-wrapper[data-effect="fade-scale"] .gw-step-item:not(.is-center-slide) {
	opacity: 0.3;
	transform: scale(0.9);
}

/* Content bundle */
.gw-step-content-bundle {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}
.gw-step-content-bundle * { pointer-events: auto; }

/* Overlay pseudo-element */
.gw-step-item::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* Button */
.gw-step-button-wrapper { margin-top: 20px; align-self: flex-start; }

/* Custom cursor element */
.gw-custom-cursor {
	position: fixed;
	top: 0; left: 0;
	pointer-events: none;
	z-index: 9999;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate3d(-50%, -50%, 0) scale(0);
	opacity: 0;
	transition: transform 0.15s ease-out, opacity 0.2s ease;
	box-sizing: border-box;
	padding: 15px;
}

.gw-custom-cursor svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.gw-custom-cursor.is-visible { transform: translate3d(var(--x, -50%), var(--y, -50%), 0) scale(1); opacity: 1; }
.gw-custom-cursor.is-active { transform: translate3d(var(--x, -50%), var(--y, -50%), 0) scale(0.8); }

/* Pagination */
.gw-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
}
.gw-pagination-dot {
	display: inline-block;
	border-radius: 10px;
	cursor: pointer;
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

/* Elementor editor: snap deaktivieren */
.elementor-editor-active .gw-steps-track {
	scroll-snap-type: none !important;
}

/* Mobile: kein horizontaler Slider, alle Karten untereinander */
@media (max-width: 767px) {
	.gw-steps-wrapper {
		overflow: visible;
	}

	.gw-steps-track {
		display: flex;
		flex-direction: column;
		overflow: visible;
		scroll-snap-type: none;
		scroll-behavior: auto;
		-webkit-overflow-scrolling: auto;
		padding: 0;
		scroll-padding-inline: 0;
		cursor: default;
	}

	.gw-step-item {
		width: 100%;
		flex: 0 0 auto;
		scroll-snap-align: none;
		transform: none !important;
		opacity: 1 !important;
		padding: 40px !important;
	}

	.gw-pagination,
	.gw-custom-cursor {
		display: none !important;
	}
}