/*
 * TreeTech before/after comparison slider.
 * Native replacement for Divi Essential's dnxte_before_after module —
 * replicates its rendered geometry exactly (measured 2026-07-31):
 * radius 50px 0 50px 50px, shadow 6px 6px 40px rgba(12,113,195,.2),
 * 3px brand-green divider, 38px round handle, translucent label pills.
 * Colors flow from the Divi Variable Library with matching fallbacks.
 */
.tt-ba {
	--tt-ba-pos: 70%;
	--tt-ba-accent: var(--gcid-brand-green, #0daf4b);
	position: relative;
	overflow: hidden;
	border-radius: 50px 0 50px 50px;
	box-shadow: 6px 6px 40px 0 rgba(12, 113, 195, 0.2);
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

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

.tt-ba__before {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0 calc(100% - var(--tt-ba-pos)) 0 0);
}

.tt-ba--animate .tt-ba__before { transition: clip-path 0.3s ease; }
.tt-ba--animate .tt-ba__divider { transition: left 0.3s ease; }

.tt-ba__label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.3px;
	line-height: 38px;
	padding: 0 20px;
	border-radius: 2px;
	pointer-events: none;
	z-index: 2;
}

.tt-ba__label--before { left: 10px; }
.tt-ba__label--after { right: 10px; }

.tt-ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tt-ba-pos);
	width: 3px;
	margin-left: -1.5px;
	background: var(--tt-ba-accent);
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
	z-index: 3;
}

.tt-ba__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	border: 3px solid var(--tt-ba-accent);
	border-radius: 1000px;
	background: var(--tt-ba-accent);
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
	cursor: ew-resize;
	padding: 0;
	appearance: none;
}

.tt-ba__handle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* arrows — the plugin set these to green-on-green (invisible); ours are white */
.tt-ba__handle::before,
.tt-ba__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -6px;
	border: 6px solid transparent;
}

.tt-ba__handle::before {
	left: 4px;
	border-right-color: #fff;
	border-left-width: 0;
}

.tt-ba__handle::after {
	right: 4px;
	border-left-color: #fff;
	border-right-width: 0;
}