/* ==========================================================================
   Before / After Image Comparison — before-after.css
   CSS custom properties are set by Elementor's dynamic CSS engine via
   {{WRAPPER}} selectors. Defaults below act as fallbacks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom property defaults
   -------------------------------------------------------------------------- */
.allstar-before-after {
	--ba-divider-color: #ffffff;
	--ba-divider-width: 2px;
	--ba-label-offset:  12px;
	--ba-pos:           50%;
}

/* --------------------------------------------------------------------------
   Stage (the clipping/positioning context)
   -------------------------------------------------------------------------- */
.allstar-ba-stage {
	position:         relative;
	overflow:         hidden;
	width:            100%;
	aspect-ratio:     16 / 9;
	cursor:           col-resize;
	user-select:      none;
	-webkit-user-select: none;
}

.allstar-ba--vertical .allstar-ba-stage {
	cursor: row-resize;
}

/* --------------------------------------------------------------------------
   Panels — both fill the stage
   -------------------------------------------------------------------------- */
.allstar-ba-panel {
	position: absolute;
	inset:    0;
}

.allstar-ba-img {
	display:        block;
	width:          100%;
	height:         100%;
	object-fit:     cover;
	pointer-events: none;
	user-select:    none;
	-webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   After panel — clipped to reveal the correct side.

   Horizontal: After is on the RIGHT. --ba-pos moves left→right.
     clip-path clips from the left, showing only the right portion.
   Vertical:   After is on the BOTTOM. --ba-pos moves top→bottom.
     clip-path clips from the top, showing only the bottom portion.
   -------------------------------------------------------------------------- */
.allstar-ba--horizontal .allstar-ba-after {
	clip-path: inset( 0 0 0 var( --ba-pos ) );
}

.allstar-ba--vertical .allstar-ba-after {
	clip-path: inset( var( --ba-pos ) 0 0 0 );
}

/* --------------------------------------------------------------------------
   Divider line
   -------------------------------------------------------------------------- */
.allstar-ba-divider {
	position:       absolute;
	z-index:        2;
	display:        flex;
	align-items:    center;
	justify-content: center;
	pointer-events: none;
}

.allstar-ba--horizontal .allstar-ba-divider {
	top:              0;
	bottom:           0;
	left:             var( --ba-pos );
	transform:        translateX( -50% );
	width:            var( --ba-divider-width );
	background-color: var( --ba-divider-color );
	flex-direction:   column;
}

.allstar-ba--vertical .allstar-ba-divider {
	left:             0;
	right:            0;
	top:              var( --ba-pos );
	transform:        translateY( -50% );
	height:           var( --ba-divider-width );
	background-color: var( --ba-divider-color );
	flex-direction:   row;
}

/* --------------------------------------------------------------------------
   Handle
   -------------------------------------------------------------------------- */
.allstar-ba-handle {
	position:         relative;
	z-index:          3;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	gap:              3px;
	flex-shrink:      0;
	width:            40px;
	height:           40px;
	border-radius:    50%;
	background-color: #0055a5;
	color:            #ffffff;
	cursor:           grab;
	box-shadow:       0 2px 8px rgba( 0, 0, 0, 0.3 );
	pointer-events:   auto;
	touch-action:     none;
	transition:       transform 120ms ease;
}

.allstar-ba-handle:active,
.allstar-before-after.allstar-ba--dragging .allstar-ba-handle {
	cursor:    grabbing;
	transform: scale( 0.93 );
}

.allstar-ba-arrow {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	line-height:     1;
}

.allstar-ba-arrow svg,
.allstar-ba-arrow img {
	display:        block;
	width:          16px;
	height:         16px;
	pointer-events: none;
	flex-shrink:    0;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */
.allstar-ba-label {
	position:         absolute;
	z-index:          4;
	font-size:        12px;
	font-weight:      600;
	line-height:      1;
	color:            #ffffff;
	background-color: rgba( 0, 0, 0, 0.45 );
	padding:          4px 8px;
	border-radius:    4px;
	pointer-events:   none;
	white-space:      nowrap;
}

.allstar-ba-before .allstar-ba-label {
	z-index: 0;
}

.allstar-ba-label--top-left     { top:    var( --ba-label-offset ); left:  var( --ba-label-offset ); }
.allstar-ba-label--top-right    { top:    var( --ba-label-offset ); right: var( --ba-label-offset ); }
.allstar-ba-label--bottom-left  { bottom: var( --ba-label-offset ); left:  var( --ba-label-offset ); }
.allstar-ba-label--bottom-right { bottom: var( --ba-label-offset ); right: var( --ba-label-offset ); }

/* --------------------------------------------------------------------------
   Accessible range input — visually hidden but keyboard/AT operable.
   Focus ring appears on the stage when the range input is focused.
   -------------------------------------------------------------------------- */
.allstar-ba-range {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border:     0;
}

.allstar-before-after:focus-within .allstar-ba-stage {
	outline:        3px solid #0055a5;
	outline-offset: 2px;
}