/* Absolutely positioned images have no intrinsic width in a flex container.
 * Size the Elementor widget itself; page-specific width controls still win.
 */
.elementor-widget-ens_image_compare {
	width: var(--container-widget-width, 100%);
	max-width: 100%;
}

.ens-image-compare {
	--ens-compare-position: 50%;
	--ens-compare-height: 400px;
	--ens-compare-line-width: 2px;
	--ens-compare-line-color: #fff;
	--ens-compare-handle-size: 44px;
	--ens-compare-handle-background: #fff;
	--ens-compare-handle-color: #222;
	--ens-compare-effective-handle-size: min(var(--ens-compare-handle-size), var(--ens-compare-bounds-size, 100000px));
	position: relative;
	width: 100%;
	height: var(--ens-compare-height);
	min-height: 60px;
	overflow: hidden;
	background: #eee;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: ew-resize;
	isolation: isolate;
	direction: ltr;
}

.ens-image-compare__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ens-image-compare__layer--before {
	clip-path: inset(0 calc(100% - var(--ens-compare-position)) 0 0);
	z-index: 1;
}

.ens-image-compare__layer--after {
	clip-path: inset(0 0 0 var(--ens-compare-position));
}

.ens-image-compare .ens-image-compare__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center center;
	-webkit-user-drag: none;
}

.ens-image-compare__divider {
	position: absolute;
	z-index: 2;
	top: var(--ens-compare-top, 0%);
	bottom: var(--ens-compare-bottom, 0%);
	left: clamp(calc(var(--ens-compare-left, 0%) + var(--ens-compare-line-width) / 2), var(--ens-compare-position), calc(100% - var(--ens-compare-right, 0%) - var(--ens-compare-line-width) / 2));
	width: var(--ens-compare-line-width);
	background: var(--ens-compare-line-color);
	transform: translateX(-50%);
	pointer-events: none;
}

.ens-image-compare__slider {
	box-sizing: border-box;
	overflow: hidden;
	position: absolute;
	z-index: 3;
	left: clamp(calc(var(--ens-compare-left, 0%) + var(--ens-compare-effective-handle-size) / 2), var(--ens-compare-position), calc(100% - var(--ens-compare-right, 0%) - var(--ens-compare-effective-handle-size) / 2));
	top: var(--ens-compare-middle, 50%);
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: var(--ens-compare-effective-handle-size);
	height: var(--ens-compare-effective-handle-size);
	border: 2px solid var(--ens-compare-line-color);
	border-radius: 50%;
	background: var(--ens-compare-handle-background);
	color: var(--ens-compare-handle-color);
	box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
	cursor: ew-resize;
	touch-action: pan-y;
}

.ens-image-compare__slider:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.ens-image-compare__arrow {
	width: 7px;
	height: 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(135deg);
}

.ens-image-compare__arrow--right {
	transform: rotate(-45deg);
}

.ens-image-compare__label {
	position: absolute;
	top: 16px;
	max-width: calc(100% - 32px);
	padding: 6px 12px;
	border-radius: 4px;
	background: rgb(0 0 0 / 60%);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.ens-image-compare__label--before { left: 16px; }
.ens-image-compare__label--after { right: 16px; }