.ninp-image-compare { max-width:100%; }
.ninp-image-compare *, .ninp-image-compare *::before, .ninp-image-compare *::after { box-sizing:border-box; }
.ninp-image-compare .ninp-compare-frame { display:inline-block; vertical-align:top; width:var(--ninp-width,80%); max-width:100%; border-top:var(--ninp-border-top,0); border-right:var(--ninp-border-right,0); border-bottom:var(--ninp-border-bottom,0); border-left:var(--ninp-border-left,0); border-radius:var(--ninp-radius,0); overflow:hidden; }
.ninp-image-compare .ninp-compare-stage { position:relative; isolation:isolate; overflow:hidden; direction:ltr; background:#eee; }
.ninp-image-compare .ninp-compare-stage img { display:block; width:100%; max-width:none; margin:0; padding:0; border:0; border-radius:0; user-select:none; }
.ninp-image-compare .ninp-compare-after { height:auto; }
.ninp-image-compare .ninp-compare-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--ninp-position,50%)) 0 0); }
.ninp-image-compare .ninp-compare-before img { height:100%; object-fit:cover; object-position:center; }
.ninp-image-compare .ninp-compare-label { position:absolute; top:auto; bottom:20px; max-width:calc(50% - 28px); width:250px; overflow-wrap:anywhere; pointer-events:none; padding:var(--ninp-label-padding,10px 15px); color:var(--ninp-label-color,#fff); background:var(--ninp-label-bg,#00000080); font-size:var(--ninp-label-desktop,15px); font-family:var(--ninp-label-family,inherit); font-weight:var(--ninp-label-weight,400); font-style:var(--ninp-label-style,normal); text-transform:var(--ninp-label-transform,none); text-decoration:var(--ninp-label-decoration,none); line-height:var(--ninp-label-line,135%); letter-spacing:var(--ninp-label-spacing,0); }
.ninp-image-compare .ninp-compare-label-before { left:20px; text-align:left; }
.ninp-image-compare .ninp-compare-after-label-layer { position:absolute; inset:0; clip-path:inset(0 0 0 var(--ninp-position,50%)); pointer-events:none; }
.ninp-image-compare .ninp-compare-label-after { right:20px; text-align:right; }
/* Keep both labels in full stage coordinates, clipped with their own image. */
.ninp-image-compare .ninp-compare-divider { position:absolute; top:0; bottom:0; left:var(--ninp-position,50%); width:2px; transform:translateX(-50%); background:#fff; box-shadow:0 0 3px #0008; pointer-events:none; }
.ninp-image-compare .ninp-compare-divider span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:44px; height:44px; border:2px solid #fff; border-radius:50%; background:#222b; color:#fff; font:24px/1 sans-serif; }
.ninp-image-compare .ninp-compare-range { appearance:none; -webkit-appearance:none; position:absolute; inset:0; width:100%; height:100%; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; opacity:0; cursor:ew-resize; touch-action:pan-y; z-index:2; direction:ltr; }
.ninp-image-compare .ninp-compare-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:44px; height:44px; }
.ninp-image-compare .ninp-compare-range::-moz-range-thumb { width:44px; height:44px; border:0; }
.ninp-image-compare .ninp-compare-stage:focus-within { outline:3px solid #2271b1; outline-offset:-3px; }
.ninp-image-compare .ninp-compare-caption { padding:var(--ninp-cap-padding,10px 15px); color:var(--ninp-cap-color,#333); background:var(--ninp-cap-bg,#f4f4f4); font-size:var(--ninp-cap-desktop,14px); font-family:var(--ninp-cap-family,inherit); font-weight:var(--ninp-cap-weight,400); font-style:var(--ninp-cap-style,normal); text-transform:var(--ninp-cap-transform,none); text-decoration:var(--ninp-cap-decoration,none); line-height:var(--ninp-cap-line,135%); letter-spacing:var(--ninp-cap-spacing,0); }
@media (max-width:768px) {
    .ninp-image-compare .ninp-compare-label { font-size:var(--ninp-label-tablet,15px); }
    .ninp-image-compare .ninp-compare-caption { font-size:var(--ninp-cap-tablet,14px); }
}
@media (max-width:576px) {
    .ninp-image-compare .ninp-compare-frame { width:100%; }
    .ninp-image-compare .ninp-compare-label { bottom:8px; width:auto; max-width:calc(50% - 16px); padding:6px 8px; font-size:var(--ninp-label-mobile,15px); }
    .ninp-image-compare .ninp-compare-label-before { left:8px; }
    .ninp-image-compare .ninp-compare-label-after { right:8px; }
    .ninp-image-compare .ninp-compare-caption { font-size:var(--ninp-cap-mobile,14px); }
}