/* =================================================================
   File: inc/elementor/widgets/image-compare/style.css
   ================================================================= */
.liqui-compare {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	user-select: none;
	touch-action: none;
}
.liqui-compare__img { display: block; width: 100%; height: auto; }
.liqui-compare__before {
	position: absolute;
	inset: 0;
	width: var(--liqui-compare-pos, 50%);
	overflow: hidden;
	transition: width var(--dur-fast) var(--ease);
}
.liqui-compare.is-dragging .liqui-compare__before { transition: none; }
.liqui-compare__before .liqui-compare__img { width: calc(100% * (100% / var(--liqui-compare-pos, 50%))); }

.liqui-compare__label {
	position: absolute;
	top: var(--space-3);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: rgba(15, 23, 42, 0.55);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter:         blur(8px);
}
.liqui-compare__label--before { inset-inline-start: var(--space-3); }
.liqui-compare__label--after  { inset-inline-end:   var(--space-3); }

.liqui-compare__handle {
	position: absolute;
	top: 0; bottom: 0;
	left: var(--liqui-compare-pos, 50%);
	transform: translateX(-50%);
	width: 44px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	background: transparent;
	cursor: ew-resize;
}
.liqui-compare__handle::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: #fff;
	box-shadow: 0 0 12px rgba(0,0,0,0.5);
	transform: translateX(-50%);
}
.liqui-compare__handle svg {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 50%;
	padding: 10px;
	background: #fff;
	color: var(--c-ink);
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}