/* ==========================================================
   RPRestoration — Before / After Slider
   Cream frame, rounded corners, white circular drag handle.

   Structural slider behaviour (drag, clip, separator position)
   comes from the jquery-beforeafter-slider plugin, which injects
   its own base <style id="jQuery-beforeAfter-styles"> tag. The
   rules below only theme the frame and override the plugin's
   default chevron handle to match the 3-line icon in the design.
   ========================================================== */

.rprt-ba-wrapper {
	background-color: #f4f1ea; /* cream frame, overridden via widget control */
	padding: 10px;
	border-radius: 14px;
	box-sizing: border-box;
}

.rprt-ba-container {
	border-radius: 10px;
	overflow: hidden;
}

/* --- Handle: replace the plugin's chevron icons with 3 flat lines --- */

.rprt-ba-container .separator-bullet {
	--rprt-ba-icon-color: #3a3a3a;
	background-image:
		linear-gradient( var( --rprt-ba-icon-color ), var( --rprt-ba-icon-color ) ),
		linear-gradient( var( --rprt-ba-icon-color ), var( --rprt-ba-icon-color ) ),
		linear-gradient( var( --rprt-ba-icon-color ), var( --rprt-ba-icon-color ) );
	background-repeat: no-repeat;
	background-size: 16px 2px;
	background-position:
		center calc( 50% - 6px ),
		center,
		center calc( 50% + 6px );
}

/* Hide the plugin's default chevron <i> arrows; the icon above replaces them */
.rprt-ba-container .separator-bullet .arrow {
	display: none;
}

/* Slightly softer shadow to match the reference handle */
.rprt-ba-container .separator-bullet {
	box-shadow: none !important;
}