/* Before After Slider */
.bas-wrapper{width:100%;}
.bas-slider{position:relative; width:100%; overflow:hidden; border-radius:14px; background:#f2f2f2; touch-action:none;}
.bas-slider img{display:block; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none;}
.bas-images{position:absolute; inset:0;}
.bas-after,.bas-before{position:absolute; inset:0;}
.bas-before{overflow:hidden;}
.bas-divider{position:absolute; top:0; bottom:0; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; pointer-events:none;}
.bas-line{position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.9); box-shadow:0 0 0 1px rgba(0,0,0,0.08);}
.bas-handle{position:relative; width:52px; height:52px; border-radius:999px; background:rgba(255,255,255,0.95); box-shadow:0 8px 24px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center;}
.bas-arrow{width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; opacity:.75;}
.bas-arrow--left{border-right:9px solid rgba(0,0,0,0.65); margin-right:10px;}
.bas-arrow--right{border-left:9px solid rgba(0,0,0,0.65); margin-left:10px;}
.bas-has-logo .bas-arrow{display:none;}
.bas-logo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:10px;}
.bas-logo img{width:100%; height:100%; object-fit:contain; pointer-events:none;}
.bas-label{position:absolute; top:14px; padding:6px 10px; border-radius:10px; font-size:13px; line-height:1; background:rgba(0,0,0,0.55); color:#fff; z-index:5;}
.bas-label--before{left:14px;}
.bas-label--after{right:14px;}
.bas-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize;}
/* ensure slider has height from wrapper style */
.bas-slider{height:100%;}
/* effects */
.bas-fx-smooth .bas-before{transition:width .18s ease-out;}
.bas-fx-smooth .bas-divider{transition:left .18s ease-out;}
.bas-fx-glow .bas-handle{transition:box-shadow .2s ease, transform .2s ease;}
.bas-fx-glow.bas-is-dragging .bas-handle,
.bas-fx-glow:hover .bas-handle{box-shadow:0 10px 28px rgba(0,0,0,.22); transform:scale(1.03);}

/* Hint & Pulse */
.bas-pulse-run .bas-handle::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.85);
  opacity:0;
  transform:scale(0.98);
  pointer-events:none;
  animation: basPulseRing 2.4s ease-in-out 2;
}

@keyframes basPulseRing{
  0%   { opacity:0; transform:scale(0.98); }
  20%  { opacity:0.65; transform:scale(1.02); }
  55%  { opacity:0; transform:scale(1.12); }
  100% { opacity:0; transform:scale(1.12); }
}

@media (prefers-reduced-motion: reduce){
  .bas-pulse-run .bas-handle::after{ animation:none; }
}