/* AP Before After — Widget Styles */

/* ── Swiper layout (essential — ensures horizontal slides even if Swiper CSS not loaded) ── */

.ap-ba-swiper {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ap-ba-swiper .swiper-wrapper {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
}

.ap-ba-swiper .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	position: relative;
}

/* ── Outer wrappers ─────────────────────────────────────────────────────────── */

.ap-ba-carousel-wrap {
	position: relative;
}

/* Wraps just the slide + arrows (pagination sits outside) */
.ap-ba-swiper-area {
	position: relative;
	overflow: visible; /* arrows can stick out */
}

/* ── Slide container ────────────────────────────────────────────────────────── */

.ap-ba-slide {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	cursor: ew-resize;
	touch-action: pan-y; /* allow vertical scroll, block horizontal for drag */
}

.ap-ba-slide[data-mode="hover"] {
	cursor: default;
}

/* ── Before / After layers ──────────────────────────────────────────────────── */

/* CSS variable drives all moving parts — one update, zero reflow */
.ap-ba-slide {
	--ap-pct: 50%;
}

.ap-ba-before,
.ap-ba-after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}

/* Before: se recorta por overflow; width = CSS variable */
.ap-ba-before {
	overflow: hidden;
	width: var(--ap-pct);
	right: auto;
	z-index: 1;
}

.ap-ba-after {
	right: 0;
	z-index: 0;
}

/* After image: cover normal */
.ap-ba-after img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

/* Before image: debe cubrir siempre el ancho total del slide,
   aunque el contenedor sea solo var(--ap-pct) de ancho.
   El ancho exacto lo calcula el JS (200% como fallback para 50%). */
.ap-ba-before img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 200%;
	max-width: none;
	object-fit: cover;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */

.ap-ba-label {
	position: absolute;
	z-index: 4;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	padding: 6px 14px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border-radius: 4px;
}

.ap-ba-label-before { left: 12px; }
.ap-ba-label-after  { right: 12px; }

.ap-ba-label-v-top    { top: 12px; }
.ap-ba-label-v-center { top: 50%; transform: translateY(-50%); }
.ap-ba-label-v-bottom { bottom: 12px; }

/* ── Divider line ───────────────────────────────────────────────────────────── */

.ap-ba-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ap-pct);      /* única propiedad animada — mueve toda la línea + handle hijo */
	width: 2px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.9);
	z-index: 2;
}

/* ── Handle (hijo del divider — se mueve gratis con el padre, sin lag) ────────── */

.ap-ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;                /* centro de los 2px del divider */
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	cursor: ew-resize;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	padding: 0;
	/* sin will-change, sin transition — el padre se mueve, el hijo va con él */
}

.ap-ba-handle:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.ap-ba-handle-arrows {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;
	pointer-events: none;
}

.ap-ba-handle-arrows svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ── Carousel arrows ────────────────────────────────────────────────────────── */

.ap-ba-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: transparent; /* controlado desde Elementor */
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
	padding: 0;
}

.ap-ba-arrow:hover {
	filter: brightness(1.15);
}

.ap-ba-arrow.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.ap-ba-arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.ap-ba-arrow i {
	font-size: 18px;
	line-height: 1;
}

/* Inside mode: arrows over the slide area */
.ap-ba-arrow-prev { left: 16px; }
.ap-ba-arrow-next { right: 16px; }

/* Outside mode: fila ← paginación → */
.ap-ba-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between; /* flechas en los extremos, dots al centro */
	margin-top: 16px;
}

/* En la nav-row las flechas son elementos de flujo, no absolutas */
.ap-ba-nav-row .ap-ba-arrow {
	position: static;
	transform: none;
	flex-shrink: 0;
}

/* La paginación ocupa el espacio central */
.ap-ba-nav-row .ap-ba-pagination {
	flex: 1;
	padding-top: 0;
	margin-top: 0;
	justify-content: center;
}

/* Spacer cuando no hay paginación pero sí flechas outside */
.ap-ba-nav-spacer {
	flex: 1;
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */

.ap-ba-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 16px;
	flex-wrap: wrap;
	gap: 6px;
}

/* Bullets */
.ap-ba-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, 0.2);
	opacity: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: width 0.25s ease, background 0.2s ease, border-radius 0.25s ease;
	display: inline-block;
	flex-shrink: 0;
}

.ap-ba-pagination .swiper-pagination-bullet-active {
	background: #cc3300;
	/* width y border-radius del dot activo se controlan desde Elementor */
}

/* Progressbar */
.ap-ba-pagination.swiper-pagination-progressbar {
	display: block;
	height: 3px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	margin-top: 12px;
	padding-top: 0;
	position: relative;
	overflow: hidden;
}

.ap-ba-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: #cc3300;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-origin: left center;
}

/* Fraction */
.ap-ba-pagination.swiper-pagination-fraction {
	font-size: 14px;
	color: #cc3300;
}

/* ── Editor (disable interaction) ───────────────────────────────────────────── */

.elementor-editor-active .ap-ba-slide {
	pointer-events: none;
}