.dbas-wrapper{position:relative;width:100%;max-width:980px;margin:0 auto;overflow:hidden;background:#eee}
.dbas-wrapper::before{content:'';display:block}
.dbas-wrapper.ratio-1-1::before{padding-top:100%}
.dbas-wrapper.ratio-3-2::before{padding-top:66.66%}
.dbas-wrapper.ratio-2-3::before{padding-top:150%}

.dbas-before,.dbas-after{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}
.dbas-after{clip-path:inset(0 0 0 50%)}

.dbas-handle{position:absolute;top:0;left:50%;width:4px;height:100%;background:#fff;cursor:ew-resize}

.dbas-label{position:absolute;top:12px;padding:var(--dbas-label-pad, 6px 12px);background:var(--dbas-label-bg, rgba(0,0,0,.6));color:var(--dbas-label-color, #fff);font-size:12px;border-radius:var(--dbas-label-radius, 12px);z-index:5}
.dbas-label.before{left:12px}
.dbas-label.after{right:12px}

/* --- Visual Builder stability helpers --- */
.dbas-wrapper.labels-off .dbas-label{opacity:0;visibility:hidden}
.dbas-handle{width:4px}
.dbas-handle::before{
  content:'';
  position:absolute;
  top:0;
  left:-18px;
  width:40px;
  height:100%;
}
.dbas-placeholder{background:#fff}

/* --- Label Position Overrides (per label) --- */
.dbas-label.pos-tl{top:12px;left:12px;right:auto;bottom:auto;transform:none}
.dbas-label.pos-tr{top:12px;right:12px;left:auto;bottom:auto;transform:none}
.dbas-label.pos-bl{bottom:12px;left:12px;top:auto;right:auto;transform:none}
.dbas-label.pos-br{bottom:12px;right:12px;top:auto;left:auto;transform:none}
.dbas-label.pos-center{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}