/*
 * Creatif Work Essentials - Container Slider
 * (c) 2026 Creatif Work. All rights reserved.
 *
 * Progressive enhancement: every rule is scoped to .zz-cs--ready, which the
 * script adds only after it has built the track. With JS off, or in the
 * Elementor editor, the container renders as a normal stack.
 */

.zz-cs--ready.zz-cs--ready {
	display: block !important;
	position: relative;
}

.zz-cs-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--zz-cs-slide-gap, 0px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.zz-cs-track::-webkit-scrollbar {
	display: none;
}

/*
 * Elementor containers carry their own flex custom properties
 * (--flex-basis: auto, --flex-shrink: 1), which otherwise let the slides
 * shrink and sit side by side instead of taking a full frame each.
 */
.zz-cs-track > *,
.zz-cs-track > .e-con,
.zz-cs-track > .elementor-element {
	--width: 100%;
	--flex-basis: 100%;
	--flex-grow: 0;
	--flex-shrink: 0;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.zz-cs-nav {
	display: flex;
	align-items: center;
	justify-content: var(--zz-cs-nav-align, center);
	gap: var(--zz-cs-nav-gap, 18px);
	margin-top: var(--zz-cs-nav-offset, 24px);
}

.zz-cs-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--zz-cs-arrow-size, 40px);
	height: var(--zz-cs-arrow-size, 40px);
	padding: 0;
	border: var(--zz-cs-arrow-border-width, 1px) solid var(--zz-cs-arrow-border-color, currentColor);
	border-radius: var(--zz-cs-arrow-radius, 50%);
	background: var(--zz-cs-arrow-bg, transparent);
	color: var(--zz-cs-arrow-color, currentColor);
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.zz-cs-arrow:hover,
.zz-cs-arrow:focus-visible {
	background: var(--zz-cs-arrow-bg-hover, var(--zz-cs-arrow-bg, transparent));
	color: var(--zz-cs-arrow-color-hover, var(--zz-cs-arrow-color, currentColor));
	border-color: var(--zz-cs-arrow-border-color-hover, var(--zz-cs-arrow-border-color, currentColor));
}

.zz-cs-arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.zz-cs-arrow svg {
	width: 45%;
	height: 45%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zz-cs-dots {
	display: flex;
	align-items: center;
	gap: var(--zz-cs-dot-gap, 10px);
}

.zz-cs-dot {
	width: var(--zz-cs-dot-size, 8px);
	height: var(--zz-cs-dot-size, 8px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--zz-cs-dot-color, rgba(128, 128, 128, .35));
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.zz-cs-dot[aria-current="true"] {
	background: var(--zz-cs-dot-active-color, currentColor);
	transform: scale(var(--zz-cs-dot-active-scale, 1.35));
}

.zz-cs-arrow:focus-visible,
.zz-cs-dot:focus-visible,
.zz-cs-track:focus-visible {
	outline: 2px solid var(--zz-cs-focus-color, currentColor);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.zz-cs-dot {
		transition: none;
	}
}