.bvl-img-comp-container { width: 100%; position: relative; text-align: center; }
.bvl-img-comp-container img { vertical-align: middle; }

.bvl-img-comp-img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; }
.bvl-img-comp-img img { display: block; max-width: 100%; width: 100%; }

.mode-horizontal .bvl-img-comp-overlay img { position: absolute; left: 0; top: 0; display: block; width: auto; height: 100% !important; max-width: none !important; }
.mode-vertical .bvl-img-comp-overlay img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto !important; max-width: none !important; }

/* The drag handle. It is positioned along the divider by the JS (the axis it moves on)
   and by the Separator Alignment control (the axis it sits on, via top/left %). The
   translate below re-centres it on that % anchor, so the handle stays centred on the
   line instead of hanging half its size below/right of it. */
.bvl-img-comp-slider { position: absolute; z-index: 9; width: 40px; height: 40px; background-color: #2196f3; opacity: 1; border-radius: 50%; }
.mode-horizontal .bvl-img-comp-slider { transform: translateY(-50%); }
.mode-vertical .bvl-img-comp-slider { transform: translateX(-50%); }

/* The glyph, centred inside the handle. */
.bvl-img-comp-slider svg,
.bvl-slider-icon { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); color: #fff; fill: #fff; }

.icon-horizontal { cursor: ew-resize; }
.icon-vertical { cursor: n-resize; }

.elementor-widget-bevel-image-compare { text-align: center; }
/* vertical-align keeps the inline-block off the text baseline — otherwise the line box
   reserves descender space under it, showing as a small gap below the widget. */
.elementor-widget-bevel-image-compare .bvl-ab-image-container { display: inline-block; vertical-align: top; margin: 0 auto !important; overflow: hidden; }

.bvl-text-after,
.bvl-text-before { position: absolute !important; padding: 10px; transition: transform .3s .7s, opacity .3s .7s; color: #d36118; z-index: 0; background: rgba(255, 255, 255, .5); margin: 20px; }