/**
 * Puzzle – Range Slider voor Elementor
 * Alle styling loopt via CSS-variabelen, zodat de Elementor Style-tab alles kan aansturen.
 */

.pzl-range {
	--pzl-track-height: 6px;
	--pzl-track-color: #e6e6e6;
	--pzl-track-radius: 3px;
	--pzl-connect-color: var(--e-global-color-primary, #61ce70);
	--pzl-handle-size: 22px;
	--pzl-handle-bg: #fff;
	--pzl-handle-border-color: var(--e-global-color-primary, #61ce70);
	--pzl-handle-border-width: 2px;
	--pzl-handle-radius: 50%;
	--pzl-labels-gap: 20px;

	padding: calc(var(--pzl-handle-size) / 2) calc(var(--pzl-handle-size) / 2) calc(var(--pzl-handle-size) / 2 + 4px);
}

/* --- Waarden ------------------------------------------------------------ */

.pzl-range__labels {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pzl-range__labels:first-child {
	margin-bottom: var(--pzl-labels-gap);
}

.pzl-range__slider + .pzl-range__labels {
	margin-top: var(--pzl-labels-gap);
}

.pzl-range__value {
	font-weight: 600;
}

.pzl-range__sep {
	opacity: 0.6;
}

/* --- Balk --------------------------------------------------------------- */

.pzl-range .noUi-target {
	background: var(--pzl-track-color);
	border: 0;
	border-radius: var(--pzl-track-radius);
	box-shadow: none;
}

.pzl-range .noUi-horizontal {
	height: var(--pzl-track-height);
}

.pzl-range .noUi-connect {
	background: var(--pzl-connect-color);
}

/* --- Handles ------------------------------------------------------------ */

.pzl-range .noUi-horizontal .noUi-handle {
	width: var(--pzl-handle-size);
	height: var(--pzl-handle-size);
	right: calc(var(--pzl-handle-size) / -2);
	top: calc((var(--pzl-track-height) - var(--pzl-handle-size)) / 2);
	background: var(--pzl-handle-bg);
	border: var(--pzl-handle-border-width) solid var(--pzl-handle-border-color);
	border-radius: var(--pzl-handle-radius);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	cursor: grab;
	transition: transform 0.12s ease;
}

.pzl-range .noUi-horizontal .noUi-handle:hover {
	transform: scale(1.08);
}

.pzl-range .noUi-horizontal .noUi-handle:focus-visible {
	outline: 2px solid var(--pzl-connect-color);
	outline-offset: 3px;
}

.pzl-range .noUi-handle.noUi-active {
	cursor: grabbing;
	transform: scale(1.12);
}

.pzl-range .noUi-handle::before,
.pzl-range .noUi-handle::after {
	display: none;
}

.pzl-range .noUi-touch-area {
	border-radius: var(--pzl-handle-radius);
}

/* --- Tooltips ----------------------------------------------------------- */

.pzl-range .noUi-tooltip {
	border: 0;
	border-radius: 4px;
	background: var(--pzl-connect-color);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 6px 8px;
	white-space: nowrap;
}

.pzl-range .noUi-horizontal .noUi-tooltip {
	bottom: calc(var(--pzl-handle-size) / 2 + 10px);
}

/* --- Elementor-editor --------------------------------------------------- */

.elementor-editor-active .pzl-range .noUi-handle {
	pointer-events: auto;
}