/**
 * Perfamix Before / After widget
 *
 * Scoped behind .pfmx-before-after so it cannot leak into unrelated elements.
 * Elementor selectors supplement this for editor-controlled values.
 *
 * @package PerfamixChild
 */

/* Keep Elementor's internal widget container full-width, including while old
 * generated page CSS is still cached with the pre-0.2.1 alignment rule. */
.elementor-widget-perfamix-before-after>.elementor-widget-container {
	width: 100%;
	min-width: 0;
}

/* ── Root ──────────────────────────────────────────────────────────── */
.pfmx-before-after {
	--pfmx-ba-position: 50%;
	position: relative;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	background-color: var(--pfmx-ba-outer-bg, #0c0e12);
}

/* ── Image layers ──────────────────────────────────────────────────── */
.pfmx-before-after__layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pfmx-before-after__layer picture {
	display: block;
	width: 100%;
	height: 100%;
}

.pfmx-before-after__layer--before {
	z-index: 1;
	clip-path: inset(0 calc(100% - var(--pfmx-ba-position)) 0 0);
}

.pfmx-before-after__layer--after {
	z-index: 0;
}

.pfmx-before-after__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--pfmx-ba-object-fit, cover);
	pointer-events: none;
}

.pfmx-before-after__layer--before .pfmx-before-after__img {
	object-position: var(--pfmx-ba-before-obj-pos, center center);
}

.pfmx-before-after__layer--after .pfmx-before-after__img {
	object-position: var(--pfmx-ba-after-obj-pos, center center);
}

/* ── Divider line ──────────────────────────────────────────────────── */
.pfmx-before-after__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pfmx-ba-position);
	z-index: 3;
	width: var(--pfmx-ba-divider-w, 2px);
	background: var(--pfmx-ba-divider-color, rgba(255, 255, 255, 0.60));
	transform: translateX(-50%);
	pointer-events: none;
}

/* ── Handle ────────────────────────────────────────────────────────── */
.pfmx-before-after__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pfmx-ba-handle-size, 52px);
	height: var(--pfmx-ba-handle-size, 52px);
	border-radius: 50%;
	background: var(--pfmx-ba-handle-bg, rgba(17, 18, 20, 0.42));
	color: var(--pfmx-ba-handle-color, #ffffff);
	border: var(--pfmx-ba-handle-border, 1px solid rgba(255, 255, 255, 0.22));
	box-shadow: var(--pfmx-ba-handle-shadow, 0 4px 20px rgba(0, 0, 0, 0.28));
	-webkit-backdrop-filter: blur(var(--pfmx-ba-handle-blur, 14px));
	backdrop-filter: blur(var(--pfmx-ba-handle-blur, 14px));
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Inline SVG chevrons */
.pfmx-before-after__handle-icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Native range ──────────────────────────────────────────────────── */
.pfmx-before-after__range {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: col-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

/* Transparent thumb for click/touch area — at least 44px */
.pfmx-before-after__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 52px;
	height: 52px;
	background: transparent;
	border: 0;
	cursor: col-resize;
}

.pfmx-before-after__range::-moz-range-thumb {
	width: 52px;
	height: 52px;
	background: transparent;
	border: 0;
	cursor: col-resize;
}

/* Focus ring on the visible handle via sibling combinator */
.pfmx-before-after__range:focus-visible~.pfmx-before-after__divider .pfmx-before-after__handle {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* ── Labels ────────────────────────────────────────────────────────── */
.pfmx-before-after__label {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--pfmx-ba-label-pad, 5px 14px);
	border-radius: var(--pfmx-ba-label-radius, 20px);
	background: var(--pfmx-ba-label-bg, rgba(17, 18, 20, 0.52));
	color: var(--pfmx-ba-label-color, #ffffff);
	font-size: var(--pfmx-ba-label-size, 11px);
	font-weight: var(--pfmx-ba-label-weight, 600);
	letter-spacing: var(--pfmx-ba-label-tracking, 0.04em);
	line-height: 1;
	-webkit-backdrop-filter: blur(var(--pfmx-ba-label-blur, 10px));
	backdrop-filter: blur(var(--pfmx-ba-label-blur, 10px));
	pointer-events: none;
	white-space: nowrap;
}

.pfmx-before-after__label--before {
	bottom: var(--pfmx-ba-label-offset, 20px);
	inset-inline-start: var(--pfmx-ba-label-offset, 20px);
}

.pfmx-before-after__label--after {
	bottom: var(--pfmx-ba-label-offset, 20px);
	inset-inline-end: var(--pfmx-ba-label-offset, 20px);
}

/* ── Fallback if backdrop-filter unsupported ───────────────────────── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.pfmx-before-after__handle {
		background: rgba(17, 18, 20, 0.82);
	}

	.pfmx-before-after__label {
		background: rgba(17, 18, 20, 0.82);
	}
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

	.pfmx-before-after,
	.pfmx-before-after__handle,
	.pfmx-before-after__label {
		transition: none !important;
	}
}

/* ── Editor placeholder ────────────────────────────────────────────── */
.pfmx-before-after__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 40px;
	background: #f0f0f1;
	color: #50575e;
	font-size: 14px;
	text-align: center;
	border-radius: 8px;
}