/* Refohogar - Before / After Slider */

.rfba-slider {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
	user-select: none;
	--rfba-arrow-color: #1c2b45;
	--rfba-divider-size: 3px;
}

/* Las dos imágenes ocupan SIEMPRE el 100% del slider, en la misma posición fija.
   La imagen "antes" va encima y solo se recorta con clip-path: nunca cambia de
   tamaño ni se reescala, se comporta como una máscara que se abre/cierra. */
.rfba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rfba-img-after {
	z-index: 1;
}

.rfba-img-before {
	z-index: 2;
	will-change: clip-path;
}

/* Etiquetas "Antes" / "Después" */
.rfba-tag {
	position: absolute;
	top: 14px;
	padding: 5px 12px;
	border-radius: 20px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .9);
	color: #1c2b45;
	font-size: 11px;
	line-height: 1.4;
	z-index: 3;
	pointer-events: none;
	white-space: nowrap;
}
.rfba-tag-before { left: 14px; }
.rfba-tag-after  { right: 14px; }

/* Línea divisoria + círculo central */
.rfba-handle {
	position: absolute;
	z-index: 4;
	pointer-events: none;
}

/* La posición (left/top en %) la fija el atributo style inline (PHP en el
   primer render, JS al arrastrar), por eso aquí solo van el resto de reglas. */
.rfba-horizontal .rfba-handle {
	top: 0;
	bottom: 0;
	width: 0;
	transform: translateX(-50%);
}

.rfba-vertical .rfba-handle {
	left: 0;
	right: 0;
	height: 0;
	transform: translateY(-50%);
}

.rfba-handle::before {
	content: '';
	position: absolute;
	background: #ffffff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .25);
}

.rfba-horizontal .rfba-handle::before {
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--rfba-divider-size, 3px);
	margin-left: calc(var(--rfba-divider-size, 3px) / -2);
}

.rfba-vertical .rfba-handle::before {
	left: 0;
	right: 0;
	top: 0;
	height: var(--rfba-divider-size, 3px);
	margin-top: calc(var(--rfba-divider-size, 3px) / -2);
}

.rfba-handle-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	background: #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.rfba-handle-btn::before,
.rfba-handle-btn::after {
	content: '';
	border: 5px solid transparent;
}

/* Flechas: horizontal = izquierda/derecha */
.rfba-horizontal .rfba-handle-btn::before {
	border-right-color: var(--rfba-arrow-color, #1c2b45);
	margin-right: 4px;
}
.rfba-horizontal .rfba-handle-btn::after {
	border-left-color: var(--rfba-arrow-color, #1c2b45);
}

/* Flechas: vertical = arriba/abajo */
.rfba-vertical .rfba-handle-btn::before {
	border-bottom-color: var(--rfba-arrow-color, #1c2b45);
	margin-bottom: 4px;
}
.rfba-vertical .rfba-handle-btn::after {
	border-top-color: var(--rfba-arrow-color, #1c2b45);
}

/* Input range invisible que controla el slider */
.rfba-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 5;
}
.rfba-vertical .rfba-range {
	cursor: ns-resize;
}

@media (prefers-reduced-motion: reduce) {
	.rfba-after-wrap {
		transition: none;
	}
}