/* Container */
.dm-ba{
  position:relative;
  width:100%;
  height:500px;
  max-width:100%;
  display:block;
  -webkit-tap-highlight-color:transparent;
  --dm-eba-icon-color:#000;
  --dm-eba-icon-size:22px;
}

/* Images */
.dm-ba__img-wrap{position:absolute;inset:0;overflow:hidden}
.dm-ba__img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  user-select:none;
  pointer-events:none;
}

/* Divider line (its left:% is updated by JS) */
.dm-ba__line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background-color:#FAFAFA;
  will-change:left;
  pointer-events:none;
}

/* Single visual handle (centered only via translate) */
.dm-ba__handle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:40px;
  border-radius:9999px;
  background:#FFF;
  border:4px solid #FFF;
  box-shadow:0 0 8px 2px rgba(0,0,0,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:3;
}
.dm-ba__handle-icon{
  width:var(--dm-eba-icon-size);
  height:var(--dm-eba-icon-size);
  display:block;
}
.dm-ba__handle-icon path{fill:var(--dm-eba-icon-color)}

/* Drag layer (native thumb hidden; used only for interaction) */
.dm-ba__range{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  position:absolute;
  inset:-18px 0 -18px 0;
  width:100%;
  height:calc(100% + 36px);
  margin:0;
  outline:none;
  z-index:2;
}
.dm-ba__range::-webkit-slider-runnable-track{background:transparent;border:0}
.dm-ba__range::-moz-range-track{background:transparent;border:0}

/* Hide the native thumb visuals completely */
.dm-ba__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  height:40px;
  width:40px;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  cursor:grab;
  border-radius:9999px;
}
.dm-ba__range:active::-webkit-slider-thumb{cursor:grabbing}
.dm-ba__range::-moz-range-thumb{
  height:40px;
  width:40px;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  cursor:grab;
  border-radius:9999px;
}
.dm-ba__range:active::-moz-range-thumb{cursor:grabbing}

.dm-ba__handle-icon path:first-child {
  transform: translateX(-10px); 
}

.dm-ba__handle-icon path:last-child {
  transform: translateX(10px);  
}