/* BA Image Slider — style frontendowe */

.ba-slider-wrap {
	width: 100%;
	max-width: 100%;
}

.ba-slider {
	position: relative;
	width: 100%;
	height: 450px;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	line-height: 0;

	/* Wartości domyślne zmiennych (nadpisywane przez kontrolki Elementora) */
	--ba-position: 50%;
	--ba-angle-offset: 0%;
	--ba-angle-deg: 0deg;
	--ba-line-thickness: 3px;
	--ba-line-style: solid;
	--ba-line-color: #ffffff;
	--ba-handle-size: 50px;
	--ba-handle-bg: #ffffff;
	--ba-handle-icon-color: #333333;
	--ba-handle-border-width: 3px;
	--ba-handle-border-color: #ffffff;
	--ba-before-x: 0%;
	--ba-before-y: 0%;
	--ba-before-scale: 100;
	--ba-after-x: 0%;
	--ba-after-y: 0%;
	--ba-after-scale: 100;
}

.ba-slider-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

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

.ba-slider-before img {
	transform: translate( var( --ba-before-x ), var( --ba-before-y ) ) scale( calc( var( --ba-before-scale ) / 100 ) );
}

.ba-slider-after img {
	transform: translate( var( --ba-after-x ), var( --ba-after-y ) ) scale( calc( var( --ba-after-scale ) / 100 ) );
}

.ba-slider-after {
	z-index: 1;
}

.ba-slider-before {
	z-index: 2;
	will-change: clip-path;
}

/* --- Maska kątowa "przed/po" (czyste CSS, w pełni responsywne) --- */
.ba-orientation-horizontal .ba-slider-before {
	clip-path: polygon(
		0% 0%,
		calc(var(--ba-position) + var(--ba-angle-offset)) 0%,
		calc(var(--ba-position) - var(--ba-angle-offset)) 100%,
		0% 100%
	);
}

.ba-orientation-vertical .ba-slider-before {
	clip-path: polygon(
		0% 0%,
		100% 0%,
		100% calc(var(--ba-position) + var(--ba-angle-offset)),
		0% calc(var(--ba-position) - var(--ba-angle-offset))
	);
}

/* --- Linia podziału --- */
.ba-slider-divider {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.ba-slider-divider-line {
	position: absolute;
	display: block;
}

.ba-orientation-horizontal .ba-slider-divider-line {
	left: var(--ba-position);
	top: -25%;
	height: 150%;
	width: 0;
	border-left: var(--ba-line-thickness) var(--ba-line-style) var(--ba-line-color);
	transform: translateX(-50%) rotate(var(--ba-angle-deg));
	transform-origin: center;
}

.ba-orientation-vertical .ba-slider-divider-line {
	top: var(--ba-position);
	left: -25%;
	width: 150%;
	height: 0;
	border-top: var(--ba-line-thickness) var(--ba-line-style) var(--ba-line-color);
	transform: translateY(-50%) rotate(var(--ba-angle-deg));
	transform-origin: center;
}

/* --- Uchwyt / przycisk przeciągania --- */
.ba-slider-handle {
	position: absolute;
	width: var(--ba-handle-size);
	height: var(--ba-handle-size);
	border-radius: 50%;
	background: var(--ba-handle-bg);
	border: var(--ba-handle-border-width) solid var(--ba-handle-border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	color: var(--ba-handle-icon-color);
	box-sizing: border-box;
	z-index: 4;
}

.ba-orientation-horizontal .ba-slider-handle {
	left: var(--ba-position);
	top: 50%;
	transform: translate(-50%, -50%);
	cursor: ew-resize;
}

.ba-orientation-vertical .ba-slider-handle {
	top: var(--ba-position);
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: ns-resize;
}

.ba-slider-handle:focus {
	outline: 2px solid #2996fd;
	outline-offset: 3px;
}

.ba-handle-arrows {
	display: flex;
	align-items: center;
	gap: 5px;
}

.ba-orientation-vertical .ba-handle-arrows {
	transform: rotate(90deg);
}

.ba-arrow {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.ba-arrow-left {
	border-right: 7px solid currentColor;
}

.ba-arrow-right {
	border-left: 7px solid currentColor;
}

.ba-handle-icon {
	font-size: calc(var(--ba-handle-size) * 0.42);
	line-height: 1;
	color: inherit;
}

.ba-handle-icon svg {
	width: calc(var(--ba-handle-size) * 0.42);
	height: calc(var(--ba-handle-size) * 0.42);
	fill: currentColor;
}

.ba-handle-custom-img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* --- Etykiety Przed / Po --- */
.ba-slider-label {
	position: absolute;
	z-index: 5;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}

.ba-label-pos-top-left {
	top: 15px;
	left: 15px;
}

.ba-label-pos-top-right {
	top: 15px;
	right: 15px;
}

.ba-label-pos-bottom-left {
	bottom: 15px;
	left: 15px;
}

.ba-label-pos-bottom-right {
	bottom: 15px;
	right: 15px;
}

/* --- Komunikat gdy brak zdjęć --- */
.ba-slider-notice {
	padding: 30px 20px;
	text-align: center;
	background: #f5f5f5;
	color: #555;
	border: 1px dashed #ccc;
	font-size: 14px;
}

/* --- Responsywność --- */
@media (max-width: 767px) {
	.ba-slider-label {
		font-size: 12px;
	}
}