/*
 * Sarem Compare Slider — scoped widget styles.
 *
 * A before/after wipe: two images stacked in one frame, the upper one clipped to
 * the handle position, so dragging the handle wipes between them. Everything is
 * scoped under .sarem-cmp and driven by --sc-* custom properties, which is what
 * the Elementor Style controls write to — no control ever needs a new selector.
 *
 * The handle position is a single custom property (--sc-pos) set by the scoped JS.
 * Both the clip and the bar read it, so they can never disagree or drift apart,
 * and there is exactly one thing to animate on entry.
 *
 * Motion respects prefers-reduced-motion. No !important anywhere.
 */

.sarem-cmp,
.sarem-cmp *,
.sarem-cmp *::before,
.sarem-cmp *::after {
	box-sizing: border-box;
}

.sarem-cmp {
	/* Design tokens (Elementor Style controls override these). */
	--sc-ground: #FFFFFF;
	--sc-ink: #16181C;
	--sc-accent: #F5B800;
	--sc-accent-ink: #1B1500;
	--sc-halo: rgba(255, 255, 255, 0.92);
	--sc-edge: rgba(22, 24, 28, 0.12);
	--sc-muted: #6B7280;
	--sc-grip-bg: #FFFFFF;

	--sc-radius: 6px;
	--sc-bar-w: 2px;
	--sc-grip: 46px;
	--sc-grip-icon: 20px;
	--sc-ratio: 1080 / 600;
	--sc-tag-inset: 16px;
	--sc-cap-gap: 14px;

	/* The handle position. The JS owns this; everything else derives from it. */
	--sc-pos: 50%;
	--sc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	/* Inherit the theme's face and colour: this widget is a frame, not a voice. */
	font-family: inherit;
	color: inherit;
	line-height: normal;
}

/* ---- frame ---- */
.sarem-cmp__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--sc-ratio);
	overflow: hidden;
	border-radius: var(--sc-radius);
	background: var(--sc-ground);
	box-shadow: 0 0 0 1px var(--sc-edge), 0 22px 48px -32px rgba(22, 24, 28, 0.5);
	cursor: ew-resize;
	/*
	 * pan-y keeps vertical page scrolling available inside the frame while the
	 * horizontal axis is claimed for the wipe, so a touch drag down the page never
	 * gets swallowed by the comparison.
	 */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sarem-cmp__layer {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

/*
 * The image rules are deliberately explicit. A theme's global img rules (max-width,
 * height auto, borders, radii) would otherwise reach in and let the two layers
 * disagree in size, which shows up as a seam that slides with the handle.
 */
.sarem-cmp__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* The upper layer is revealed from the left as the handle travels right. */
.sarem-cmp__layer--top {
	clip-path: inset(0 calc(100% - var(--sc-pos)) 0 0);
}

/* ---- divider ---- */
.sarem-cmp__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sc-pos);
	width: var(--sc-bar-w);
	margin-left: calc(var(--sc-bar-w) / -2);
	background: var(--sc-ink);
	box-shadow: 0 0 0 1px var(--sc-halo);
	cursor: ew-resize;
	outline: none;
	/* The handle owns both axes; the frame around it still allows vertical scroll. */
	touch-action: none;
}

.sarem-cmp__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sc-grip);
	height: var(--sc-grip);
	border-radius: 999px;
	background: var(--sc-grip-bg);
	color: var(--sc-ink);
	box-shadow: 0 0 0 1px var(--sc-ink), 0 10px 26px -12px rgba(22, 24, 28, 0.6);
	transform: translate(-50%, -50%);
	transition: box-shadow 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}

.sarem-cmp__grip svg {
	display: block;
	width: var(--sc-grip-icon);
	height: var(--sc-grip-icon);
}

.sarem-cmp__frame:hover .sarem-cmp__grip {
	transform: translate(-50%, -50%) scale(1.06);
}

.sarem-cmp.is-dragging .sarem-cmp__grip {
	transform: translate(-50%, -50%) scale(0.95);
}

.sarem-cmp__bar:focus-visible .sarem-cmp__grip {
	box-shadow: 0 0 0 1px var(--sc-ink), 0 0 0 4px var(--sc-accent), 0 10px 26px -12px rgba(22, 24, 28, 0.6);
}

/* ---- position readout ---- */
/*
 * Shown while the handle is being used and for a moment after, then faded. It
 * confirms the drag without becoming furniture that sits on the image forever.
 */
.sarem-cmp__read {
	position: absolute;
	left: 50%;
	top: calc(50% + var(--sc-grip) / 2 + 11px);
	padding: 3px 7px 2px;
	border-radius: 3px;
	background: var(--sc-accent);
	color: var(--sc-accent-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%) translateY(-4px);
	pointer-events: none;
	transition: opacity 0.28s var(--sc-ease), transform 0.28s var(--sc-ease);
}

.sarem-cmp.is-active .sarem-cmp__read {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---- side labels ---- */
/*
 * Each label fades out as the handle approaches its own edge: at that point its
 * image is nearly gone, and a label naming a picture the visitor can no longer
 * see is worse than no label.
 */
.sarem-cmp__tag {
	position: absolute;
	top: var(--sc-tag-inset);
	padding: 7px 12px 6px;
	border-radius: 999px;
	background: var(--sc-ink);
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity 0.3s var(--sc-ease);
}

.sarem-cmp__tag--l {
	left: var(--sc-tag-inset);
}

.sarem-cmp__tag--r {
	right: var(--sc-tag-inset);
}

.sarem-cmp.is-edge-l .sarem-cmp__tag--l,
.sarem-cmp.is-edge-r .sarem-cmp__tag--r {
	opacity: 0;
}

/* ---- caption ---- */
.sarem-cmp__cap {
	margin: var(--sc-cap-gap) 0 0;
	padding: 0;
	color: var(--sc-muted);
	font-size: 12.5px;
	line-height: 1.55;
}

.sarem-cmp__cap-tag {
	display: inline-block;
	margin-right: 10px;
	color: var(--sc-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---- entry ---- */
/*
 * The widget starts fully wiped to one side and travels to its configured position
 * when it first scrolls into view, which shows the visitor that the frame moves.
 * The class is removed the instant a drag begins so the handle never fights an
 * in-flight transition.
 */
.sarem-cmp.is-anim .sarem-cmp__layer--top,
.sarem-cmp.is-anim .sarem-cmp__bar {
	transition: clip-path 1s var(--sc-ease), left 1s var(--sc-ease);
}

/* ---- mobile ---- */
@media (max-width: 767px) {
	.sarem-cmp {
		--sc-grip: 38px;
		--sc-grip-icon: 17px;
		--sc-radius: 5px;
		--sc-tag-inset: 10px;
	}

	.sarem-cmp__tag {
		padding: 6px 10px 5px;
		font-size: 8.5px;
		letter-spacing: 0.1em;
	}

	.sarem-cmp__read {
		font-size: 10px;
	}

	.sarem-cmp__cap {
		font-size: 12px;
	}

	.sarem-cmp__cap-tag {
		display: block;
		margin: 0 0 4px;
	}
}

/* ---- reduced motion ---- */
/*
 * The entry travel and the grip's springiness are dropped; the wipe itself still
 * follows the pointer, because that is the interaction rather than an effect.
 */
@media (prefers-reduced-motion: reduce) {
	.sarem-cmp.is-anim .sarem-cmp__layer--top,
	.sarem-cmp.is-anim .sarem-cmp__bar,
	.sarem-cmp__grip,
	.sarem-cmp__read,
	.sarem-cmp__tag {
		transition: none;
	}

	.sarem-cmp__frame:hover .sarem-cmp__grip,
	.sarem-cmp.is-dragging .sarem-cmp__grip {
		transform: translate(-50%, -50%);
	}
}