/* MAX Before / After Slider */

.max-ba {
	--max-ba-pos: 50%;
	--max-ba-accent: #f5a623;
	--max-ba-handle-bg: #ffffff;
	--max-ba-divider-w: 3px;
	--max-ba-handle-size: 52px;

	position: relative;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	isolation: isolate;
}

.max-ba__frame {
	position: relative;
	width: 100%;
	line-height: 0;
}

.max-ba__img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* The before image sits in a clipped layer above the after image */
.max-ba__clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: inset(0 calc(100% - var(--max-ba-pos)) 0 0);
	will-change: clip-path;
}

.max-ba--vertical .max-ba__clip {
	clip-path: inset(0 0 calc(100% - var(--max-ba-pos)) 0);
}

.max-ba__clip .max-ba__img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}

/* ---------- Divider line ---------- */
.max-ba__divider {
	position: absolute;
	background: var(--max-ba-accent);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
	z-index: 3;
	pointer-events: none;
}

.max-ba--horizontal .max-ba__divider {
	top: 0;
	bottom: 0;
	left: var(--max-ba-pos);
	width: var(--max-ba-divider-w);
	transform: translateX(-50%);
}

.max-ba--vertical .max-ba__divider {
	left: 0;
	right: 0;
	top: var(--max-ba-pos);
	height: var(--max-ba-divider-w);
	transform: translateY(-50%);
}

/* ---------- Handle ---------- */
.max-ba__handle {
	position: absolute;
	z-index: 4;
	width: var(--max-ba-handle-size);
	height: var(--max-ba-handle-size);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: grab;
	-webkit-tap-highlight-color: transparent;
}

.max-ba--horizontal .max-ba__handle {
	top: 50%;
	left: var(--max-ba-pos);
	transform: translate(-50%, -50%);
	cursor: ew-resize;
}

.max-ba--vertical .max-ba__handle {
	left: 50%;
	top: var(--max-ba-pos);
	transform: translate(-50%, -50%);
	cursor: ns-resize;
}

.max-ba.is-dragging .max-ba__handle {
	cursor: grabbing;
}

.max-ba__handle-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--max-ba-handle-bg);
	color: var(--max-ba-accent);
	border: 2px solid var(--max-ba-accent);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.max-ba__handle:hover .max-ba__handle-inner,
.max-ba__handle:focus-visible .max-ba__handle-inner {
	transform: scale(1.08);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 6px color-mix(in srgb, var(--max-ba-accent) 25%, transparent);
}

.max-ba.is-dragging .max-ba__handle-inner {
	transform: scale(0.95);
}

.max-ba__handle:focus {
	outline: none;
}

.max-ba__handle:focus-visible .max-ba__handle-inner {
	outline: 2px solid var(--max-ba-accent);
	outline-offset: 3px;
}

.max-ba__arrows {
	width: 55%;
	height: 55%;
}

.max-ba--vertical .max-ba__arrows {
	transform: rotate(90deg);
}

/* ---------- Labels ---------- */
.max-ba__label {
	position: absolute;
	z-index: 2;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
	pointer-events: none;
	will-change: opacity, transform;
}

/* Label of the dominant side lights up with the accent color.
   !important lets this state win over the widget's Elementor style
   controls, which target labels with a higher-specificity selector. */
.max-ba__label.is-active {
	background: var(--max-ba-accent) !important;
	color: #14100a !important;
	transform: scale(1.06);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Label fades away as its side shrinks out of frame */
.max-ba__label.is-hidden {
	opacity: 0;
	transform: scale(0.88);
}

.max-ba--horizontal .max-ba__label--before { top: 20px; left: 20px; }
.max-ba--horizontal .max-ba__label--after  { top: 20px; right: 20px; }
.max-ba--vertical .max-ba__label--before   { top: 20px; left: 20px; }
.max-ba--vertical .max-ba__label--after    { bottom: 20px; left: 20px; }

.max-ba--fade-labels.is-dragging .max-ba__label {
	opacity: 0;
}

/* Intro nudge is driven by JS (requestAnimationFrame) so the divider,
   handle, and clip all move together via the --max-ba-pos custom property. */