/* Before / After Image Slider — isolated frontend and Builder styles. */
.before-after-slider{--ba-start:50%;--ba-height:auto;--ba-max-width:100%;--ba-radius:0;--ba-handle-size:44px;--ba-divider-width:2px;--ba-divider-color:#fff;--ba-handle-bg:#fff;--ba-handle-border:#fff;--ba-arrow-color:#111827;--ba-object-fit:cover;--ba-overflow:hidden;--ba-margin:0 auto;--ba-padding:0;--ba-aspect-ratio:16/9;position:relative;isolation:isolate;width:100%;max-width:var(--ba-max-width);height:var(--ba-height);aspect-ratio:var(--ba-aspect-ratio);margin:var(--ba-margin);padding:var(--ba-padding);overflow:var(--ba-overflow);border:var(--ba-border-width,0) var(--ba-border-style,solid) var(--ba-border-color,transparent);border-radius:var(--ba-radius);box-shadow:var(--ba-shadow,none);touch-action:none;user-select:none;contain:layout paint style;background:#e5e7eb}
.before-after-slider.shadow-small{--ba-shadow:0 4px 14px rgba(0,0,0,.14)}.before-after-slider.shadow-medium{--ba-shadow:0 10px 30px rgba(0,0,0,.2)}.before-after-slider.shadow-large{--ba-shadow:0 20px 55px rgba(0,0,0,.28)}
.before-after-slider .before-image,.before-after-slider .after-image{position:absolute;inset:0;overflow:hidden;pointer-events:none}.before-after-slider .before-image{z-index:1}.before-after-slider .after-image{z-index:2}.before-after-slider--horizontal .after-image{clip-path:inset(0 0 0 var(--ba-start))}.before-after-slider--vertical .after-image{clip-path:inset(var(--ba-start) 0 0 0)}
.before-after-slider img{display:block;width:100%;height:100%;max-width:none;object-fit:var(--ba-object-fit);transform:translateZ(0);backface-visibility:hidden;transition:filter .25s ease,transform .25s ease,opacity .25s ease}.before-after-slider:not([style*="--ba-height"]) img{position:relative}.before-after-slider:has(img[height]){min-height:1px}.before-after-slider[style*="--ba-height:auto"]{aspect-ratio:16/9}
.before-after-slider .before-after-resizer{position:absolute;z-index:5;display:grid;place-items:center;width:var(--ba-handle-size);height:var(--ba-handle-size);border:2px solid var(--ba-handle-border);border-radius:50%;background:var(--ba-handle-bg);box-shadow:0 2px 12px rgba(0,0,0,.28);cursor:ew-resize;outline:0;transform:translate3d(-50%,-50%,0);will-change:left,top}
.before-after-slider--horizontal .before-after-resizer{top:50%;left:var(--ba-start)}.before-after-slider--vertical .before-after-resizer{top:var(--ba-start);left:50%;cursor:ns-resize;transform:translate3d(-50%,-50%,0) rotate(90deg)}
.before-after-slider .resizer-vertical-line{position:absolute;left:50%;top:50%;width:var(--ba-divider-width);height:max(100vh,2000px);background:var(--ba-divider-color);transform:translate3d(-50%,-50%,0);z-index:-1}.left-arrow-resizer,.right-arrow-resizer{position:absolute;top:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translateY(-50%)}.left-arrow-resizer{left:7px;border-right:7px solid var(--ba-arrow-color)}.right-arrow-resizer{right:7px;border-left:7px solid var(--ba-arrow-color)}
.handle-style-rounded .before-after-resizer{border-radius:12px}.handle-style-glass .before-after-resizer{background:rgba(255,255,255,.22);backdrop-filter:blur(12px)}.handle-style-neon .before-after-resizer{background:#111827;box-shadow:0 0 8px var(--ba-divider-color),0 0 20px var(--ba-divider-color)}.handle-style-minimal .before-after-resizer{border:0;background:transparent;box-shadow:none}.handle-style-modern .before-after-resizer{border-radius:14px;background:linear-gradient(135deg,var(--ba-handle-bg),color-mix(in srgb,var(--ba-handle-bg),#000 15%))}.handle-style-circle .before-after-resizer{border-radius:50%}
.before-after-label{position:absolute;z-index:4;top:50%;padding:var(--ba-label-padding);border-radius:var(--ba-label-radius);background:var(--ba-label-bg);color:var(--ba-label-color);font-size:var(--ba-label-size);font-weight:var(--ba-label-weight);line-height:1;pointer-events:none;transform:translateY(-50%)}.before-after-label--before{left:16px}.before-after-label--after{right:16px}.before-after-slider--vertical .before-after-label{left:50%;right:auto;transform:translateX(-50%)}.before-after-slider--vertical .before-after-label--before{top:16px}.before-after-slider--vertical .before-after-label--after{top:auto;bottom:16px}
.label-position-start.before-after-slider--horizontal .before-after-label{top:24px}.label-position-end.before-after-slider--horizontal .before-after-label{top:auto;bottom:24px}.label-position-start.before-after-slider--vertical .before-after-label{left:24px;transform:none}.label-position-end.before-after-slider--vertical .before-after-label{left:auto;right:24px;transform:none}
.hover-zoom:hover img{transform:scale(1.04) translateZ(0)}.hover-fade:hover img{opacity:.88}.hover-blur:hover img{filter:blur(2px)}.hover-brightness:hover img{filter:brightness(1.12)}.hover-scale:hover{transform:scale(1.01)}
.before-after-slider{opacity:1;transform:translateZ(0)}.before-after-slider[data-before-after-slider*='"animation":true']:not(.is-before-after-ready){opacity:0;transform:translate3d(0,14px,0) scale(.985)}.before-after-slider.is-before-after-ready{min-height:120px;transition:opacity var(--ba-animation-duration,0ms) var(--ba-animation-ease,ease) var(--ba-animation-delay,0ms),transform var(--ba-animation-duration,0ms) var(--ba-animation-ease,ease) var(--ba-animation-delay,0ms)}.before-after-slider:focus-within .before-after-resizer{box-shadow:0 0 0 4px rgba(59,130,246,.35),0 2px 12px rgba(0,0,0,.28)}
.before-after-slider[data-before-after-slider] .before-after-label{--ba-label-offset:16px}.before-after-slider[data-before-after-slider] .before-after-label--before,.before-after-slider[data-before-after-slider] .before-after-label--after{top:50%}
@media(max-width:850px){.hide-labels-md .before-after-label,.hide-handle-md .before-after-resizer{display:none}}
@media(max-width:550px){.hide-labels-sm .before-after-label,.hide-handle-sm .before-after-resizer{display:none}}
@media(prefers-reduced-motion:reduce){.before-after-slider,.before-after-slider img{transition:none!important}}