/**
 * Advanced Before/After Widget Styles
 */

/* Main Wrapper */
.angie-ba-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	touch-action: pan-y;
	--angie-ba-pos: 50%;
}

.angie-ba-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Layers (Images) */
.angie-ba-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: block; /* Ensure it's not hidden */
}

.angie-ba-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	user-select: none;
	pointer-events: none;
	transition: none; /* JS controlled transition */
}

/* Specific Layer Styles */
.angie-ba-after {
	/* The after image is the background base */
	z-index: 1;
}

.angie-ba-before {
	/* The before image sits on top and gets clipped */
	z-index: 2;
	width: 100%; /* Ensure it spans full width before clipping */
	/* Default fallback for clip-path */
	clip-path: inset(0 calc(100% - var(--angie-ba-pos)) 0 0); 
	-webkit-clip-path: inset(0 calc(100% - var(--angie-ba-pos)) 0 0);
	will-change: clip-path; /* Optimization */
}

/* RTL Support - Flip the logic */
body.rtl .angie-ba-before {
	clip-path: inset(0 0 0 calc(100% - var(--angie-ba-pos)));
	-webkit-clip-path: inset(0 0 0 calc(100% - var(--angie-ba-pos)));
}

/* Handle */
.angie-ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--angie-ba-pos); /* Follows the variable */
	width: var(--angie-ba-handle-width, 3px);
	background-color: var(--angie-ba-handle-color, #FFE500);
	z-index: 10;
	transform: translateX(-50%);
	cursor: col-resize;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none; /* Let clicks pass through to wrapper, but visually present */
}

/* RTL Handle */
body.rtl .angie-ba-handle {
	left: auto;
	right: var(--angie-ba-pos);
	transform: translateX(50%);
}

.angie-ba-handle-button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	pointer-events: auto; /* Handle button should be clickable/draggable */
	transition: transform 0.2s ease;
	z-index: 11;
}

.angie-ba-handle-button:hover,
.angie-ba-handle-button:active {
	transform: scale(1.1);
}

/* Labels */
.angie-ba-label {
	position: absolute;
	z-index: 5;
	font-size: 14px;
	font-weight: 600;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.angie-ba-labels-top .angie-ba-label {
	top: 20px;
}

.angie-ba-labels-bottom .angie-ba-label {
	bottom: 20px;
}

.angie-ba-label-before {
	left: 20px;
}

.angie-ba-label-after {
	right: 20px;
}

/* RTL Labels */
body.rtl .angie-ba-label-before {
	left: auto;
	right: 20px;
}

body.rtl .angie-ba-label-after {
	right: auto;
	left: 20px;
}

/* Range Input (Accessibility only - hidden visually) */
.angie-ba-range-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: col-resize;
	z-index: 20; /* Sit on top of everything to catch events if needed */
	margin: 0;
	pointer-events: none; /* We handle events via JS on wrapper, this is for screen readers mostly */
}

/* Focus styles for accessibility */
.angie-ba-range-input:focus ~ .angie-ba-handle .angie-ba-handle-button {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0,0,0,0.3);
}

/* Editor Specific Styles to prevent collapse */
.elementor-editor-active .angie-ba-container {
    min-height: 50px;
}

/* --- THUMBNAILS GALLERY --- */
.angie-ba-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.angie-ba-thumb {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent; /* Prepare for border transition */
    transition: all 0.3s ease;
    width: 100px; /* fallback default */
    opacity: 0.7;
}

.angie-ba-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Default fallback */
}

.angie-ba-thumb:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.angie-ba-thumb.active {
    opacity: 1;
    border-color: var(--e-global-color-accent, #61CE70); /* Fallback color */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- TRANSITION EFFECTS --- */

/* FADE EFFECT */
.angie-ba-container.animating-fade .angie-ba-image {
    transition: opacity var(--angie-ba-duration, 500ms) ease;
    opacity: 0;
}

.angie-ba-container.animating-fade.active-transition .angie-ba-image {
    opacity: 1;
}

/* SLIDE EFFECT */
.angie-ba-container.animating-slide .angie-ba-image {
    transition: transform var(--angie-ba-duration, 500ms) ease;
}

.angie-ba-container.animating-slide .angie-ba-before .angie-ba-image {
    transform: translateX(-100%);
}
.angie-ba-container.animating-slide .angie-ba-after .angie-ba-image {
    transform: translateX(100%);
}

.angie-ba-container.animating-slide.active-transition .angie-ba-image {
    transform: translateX(0);
}

/* ZOOM EFFECT */
.angie-ba-container.animating-zoom .angie-ba-image {
    transition: transform var(--angie-ba-duration, 500ms) ease, opacity var(--angie-ba-duration, 500ms) ease;
    transform: scale(1.1);
    opacity: 0;
}

.angie-ba-container.animating-zoom.active-transition .angie-ba-image {
    transform: scale(1);
    opacity: 1;
}