/* ==========================================================================
   WPBakery Voor/Na Slider — frontend styles
   ========================================================================== */

.wpbbas-slider {
	--wpbbas-handle-size: 44px;
	--wpbbas-handle-color: #ffffff;
	--wpbbas-handle-border-color: #ffffff;
	--wpbbas-handle-icon-color: #333333;
	--wpbbas-bar-color: #ffffff;
	--wpbbas-bar-width: 3px;
	--wpbbas-bar-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
	--wpbbas-pos: 50%;

	position: relative;
	width: 100%;
	max-width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

.wpbbas-slider .wpbbas-frame {
	position: relative;
	width: 100%;
	height: var(--wpbbas-fixed-height, auto);
	overflow: hidden;
	border-radius: inherit;
}

/* Als er geen vaste hoogte is ingesteld, bepaalt de "na"-afbeelding de
   hoogte via haar eigen intrinsieke verhouding (image is position:static). */
.wpbbas-slider:not([style*="--wpbbas-fixed-height"]) .wpbbas-frame {
	height: auto;
}

.wpbbas-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.wpbbas-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* De "na"-laag bepaalt, zonder vaste hoogte, de layout-hoogte van de frame. */
.wpbbas-slider:not([style*="--wpbbas-fixed-height"]) .wpbbas-image-after {
	position: static;
}

.wpbbas-slider:not([style*="--wpbbas-fixed-height"]) .wpbbas-image-after img {
	height: auto;
}

.wpbbas-slider:not([style*="--wpbbas-fixed-height"]) .wpbbas-image-before {
	position: absolute;
}

/* Horizontaal: de "voor"-laag wordt links afgeknipt op basis van --wpbbas-pos */
.wpbbas-orientation-horizontal .wpbbas-image-before {
	width: var(--wpbbas-pos);
}

.wpbbas-orientation-horizontal .wpbbas-image-before img {
	width: calc(100% / (var(--wpbbas-pos) / 100%) * 1);
	max-width: none;
}

/* Verticaal: de "voor"-laag wordt van boven afgeknipt op basis van --wpbbas-pos */
.wpbbas-orientation-vertical .wpbbas-image-before {
	height: var(--wpbbas-pos);
	width: 100%;
}

.wpbbas-orientation-vertical .wpbbas-image-before img {
	height: calc(100% / (var(--wpbbas-pos) / 100%) * 1);
	max-height: none;
}

/* Labels */
.wpbbas-label {
	position: absolute;
	top: 14px;
	padding: 4px 12px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 3px;
	pointer-events: none;
	white-space: nowrap;
}

.wpbbas-label-before {
	left: 14px;
}

.wpbbas-label-after {
	right: 14px;
}

/* ==========================================================================
   Divider / balk
   ========================================================================== */

.wpbbas-divider {
	position: absolute;
	z-index: 5;
	cursor: pointer;
	outline: none;
}

.wpbbas-orientation-horizontal .wpbbas-divider {
	top: 0;
	bottom: 0;
	left: var(--wpbbas-pos);
	width: var(--wpbbas-bar-width);
	margin-left: calc(var(--wpbbas-bar-width) / -2);
	background: var(--wpbbas-bar-color);
	box-shadow: var(--wpbbas-bar-shadow);
	cursor: ew-resize;
}

.wpbbas-orientation-vertical .wpbbas-divider {
	left: 0;
	right: 0;
	top: var(--wpbbas-pos);
	height: var(--wpbbas-bar-width);
	margin-top: calc(var(--wpbbas-bar-width) / -2);
	background: var(--wpbbas-bar-color);
	box-shadow: var(--wpbbas-bar-shadow);
	cursor: ns-resize;
}

.wpbbas-divider:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.55);
}

/* ==========================================================================
   Handle
   ========================================================================== */

.wpbbas-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--wpbbas-handle-size);
	height: var(--wpbbas-handle-size);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--wpbbas-handle-color);
	border: 2px solid var(--wpbbas-handle-border-color);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	color: var(--wpbbas-handle-icon-color);
}

.wpbbas-handle-square .wpbbas-handle {
	border-radius: 4px;
}

.wpbbas-orientation-vertical .wpbbas-handle {
	transform: translate(-50%, -50%) rotate(90deg);
}

.wpbbas-handle-icon {
	display: block;
}

/* ==========================================================================
   Admin warning (front-end, alleen zichtbaar voor ingelogde editors)
   ========================================================================== */

.wpbbas-admin-warning {
	padding: 14px 18px;
	background: #fff3f3;
	border: 1px dashed #d9534f;
	color: #a33;
	font-size: 14px;
	border-radius: 4px;
}

/* ==========================================================================
   Responsive / accessibility
   ========================================================================== */

@media (max-width: 600px) {
	.wpbbas-label {
		font-size: 11px;
		padding: 3px 8px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wpbbas-image-before,
	.wpbbas-divider {
		transition: none;
	}
}