.fij-ba-wrapper { position: relative; width: 100%; overflow: hidden; user-select: none; }
.fij-ba-inner { position: relative; width: 100%; line-height: 0; }
.fij-ba-img { width: 100%; display: block; overflow: hidden; }
.fij-ba-img img { width: 100%; height: auto; display: block; max-width: 100%; }

.after-img {
    position: absolute; top: 0; left: 0; height: 100%; width: 50%;
    border-right: 0px solid transparent; /* Separator if needed */
}
.after-img img { width: auto; height: 100%; max-width: none; }
/* Horizontal specific: After image needs to match container width */
.horizontal .after-img img { width: 100vw; max-width: none; } /* Approximate hack for fixed aspect */

/* Wait, better approach for responsive image scaling in absolute div */
.fij-ba-inner img { width: 100%; height: auto; }
.before-img { position: relative; z-index: 1; }
.after-img { z-index: 2; width: 50%; }
.fij-ba-wrapper.horizontal .after-img { width: 50%; height: 100%; }
.fij-ba-wrapper.horizontal .after-img img { width: 200%; max-width: none; } /* Trick to keep aspect */

/* Handle */
.fij-ba-handle {
    position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center;
    cursor: ew-resize;
}
.horizontal .fij-ba-handle { top: 0; bottom: 0; width: 40px; margin-left: -20px; left: 50%; flex-direction: column; }
.vertical .fij-ba-handle { left: 0; right: 0; height: 40px; margin-top: -20px; top: 50%; flex-direction: row; cursor: ns-resize; }

.fij-ba-handle-line { position: absolute; background: #fff; }
.horizontal .fij-ba-handle-line { width: 2px; height: 100%; }
.vertical .fij-ba-handle-line { height: 2px; width: 100%; }

.fij-ba-handle-circle {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
    background: #8e44ad; color: #fff; display: flex; align-items: center; justify-content: center;
    z-index: 4; box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Labels */
.fij-ba-label {
    position: absolute; padding: 5px 10px; background: rgba(0,0,0,0.5); color: #fff;
    font-size: 12px; border-radius: 3px; z-index: 5; pointer-events: none;
}
.label-before { top: 10px; right: 10px; }
.label-after { top: 10px; left: 10px; }