/**
 * Before and After Treatment Images
 * Front-end styles
 *
 * @package Before_After_Treatment
 * @version 1.0.0
 */

/* -------------------------------------------------------
   Container
   ------------------------------------------------------- */
.bat-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: col-resize;
	user-select: none;
	-webkit-user-select: none;
	border-radius: 6px;
	background-color: #1a1a1a;
	box-sizing: border-box;
	line-height: 0;
	font-size: 0;
	touch-action: none;
}

.bat-slider--vertical {
	cursor: row-resize;
}

/* -------------------------------------------------------
   Image Layers
   ------------------------------------------------------- */

/* After layer — relative so it drives the container height */
.bat-slider__after {
	position: relative;
	z-index: 1;
	width: 100%;
	line-height: 0;
}

/* Before layer — absolute overlay, clipped to reveal/hide */
.bat-slider__before {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%; /* default – overridden by JS */
	height: 100%;
	overflow: hidden;
	z-index: 2;
}

.bat-slider--vertical .bat-slider__before {
	width: 100%;
	height: 50%; /* default – overridden by JS */
}

/* Shared image styles */
.bat-slider__img {
	display: block;
	width: 100%;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* After image — natural height drives the container */
.bat-slider__after .bat-slider__img {
	height: auto;
}

/* Before image — fills container height, width set by JS */
.bat-slider__before .bat-slider__img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	object-fit: cover;
	/* width set by JS to match full container width */
}

/* -------------------------------------------------------
   Handle
   ------------------------------------------------------- */
.bat-slider__handle {
	position: absolute;
	top: 0;
	left: 50%; /* default – overridden by JS */
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4px;
	height: 100%;
	transform: translateX(-50%);
	pointer-events: none;
}

.bat-slider--vertical .bat-slider__handle {
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	flex-direction: row;
	transform: translateY(-50%);
}

.bat-slider__handle-line {
	flex: 1;
	width: 3px;
	background-color: #ffffff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
	border-radius: 2px;
}

.bat-slider--vertical .bat-slider__handle-line {
	width: auto;
	height: 3px;
	flex: 1;
}

.bat-slider__handle-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: #ffffff;
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	color: #333333;
	pointer-events: auto;
	cursor: inherit;
	flex-shrink: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bat-slider__handle-circle:hover {
	transform: scale(1.1);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.bat-slider__handle-circle svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------
   Labels
   ------------------------------------------------------- */
.bat-slider__label {
	position: absolute;
	z-index: 3;
	padding: 6px 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 4px;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* Horizontal mode label positions */
.bat-slider__label--before {
	bottom: 16px;
	left: 16px;
}

.bat-slider__label--after {
	bottom: 16px;
	right: 16px;
}

/* Vertical mode label positions */
.bat-slider--vertical .bat-slider__label--before {
	top: 16px;
	left: 16px;
	bottom: auto;
}

.bat-slider--vertical .bat-slider__label--after {
	bottom: 16px;
	right: 16px;
}

/* -------------------------------------------------------
   Entrance Animation
   ------------------------------------------------------- */
@keyframes bat-slide-hint {
	0%   { --bat-pos: 50%; }
	30%  { --bat-pos: 35%; }
	60%  { --bat-pos: 65%; }
	100% { --bat-pos: 50%; }
}

.bat-slider--animate-in .bat-slider__before {
	animation: bat-hint-before 1s ease-in-out forwards;
}

.bat-slider--animate-in .bat-slider__handle {
	animation: bat-hint-handle 1s ease-in-out forwards;
}

/* Horizontal entrance */
@keyframes bat-hint-before {
	0%   { width: 50%; }
	30%  { width: 35%; }
	60%  { width: 65%; }
	100% { width: 50%; }
}

@keyframes bat-hint-handle {
	0%   { left: 50%; }
	30%  { left: 35%; }
	60%  { left: 65%; }
	100% { left: 50%; }
}

/* Vertical entrance */
.bat-slider--vertical.bat-slider--animate-in .bat-slider__before {
	animation: bat-hint-before-v 1s ease-in-out forwards;
}

.bat-slider--vertical.bat-slider--animate-in .bat-slider__handle {
	animation: bat-hint-handle-v 1s ease-in-out forwards;
}

@keyframes bat-hint-before-v {
	0%   { height: 50%; }
	30%  { height: 35%; }
	60%  { height: 65%; }
	100% { height: 50%; }
}

@keyframes bat-hint-handle-v {
	0%   { top: 50%; }
	30%  { top: 35%; }
	60%  { top: 65%; }
	100% { top: 50%; }
}

/* -------------------------------------------------------
   Dragging State
   ------------------------------------------------------- */
.bat-slider--dragging {
	cursor: col-resize;
}

.bat-slider--vertical.bat-slider--dragging {
	cursor: row-resize;
}

.bat-slider--dragging .bat-slider__handle-circle {
	transform: scale(1.15);
	box-shadow: 0 3px 16px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------
   Focus / Accessibility
   ------------------------------------------------------- */
.bat-slider:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

/* -------------------------------------------------------
   Responsive Adjustments
   ------------------------------------------------------- */
@media (max-width: 600px) {
	.bat-slider__handle-circle {
		width: 36px;
		height: 36px;
	}

	.bat-slider__handle-circle svg {
		width: 16px;
		height: 16px;
	}

	.bat-slider__label {
		font-size: 11px;
		padding: 4px 10px;
	}

	.bat-slider__label--before {
		bottom: 10px;
		left: 10px;
	}

	.bat-slider__label--after {
		bottom: 10px;
		right: 10px;
	}
}