.wpl-before-after{
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
    border-radius:24px;

    user-select:none;
    touch-action:none;

    background:#f5f5f5;

    transform:translateZ(0);
    backface-visibility:hidden;
}

/* BEFORE IMAGE */

.wpl-before-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}

/* AFTER CONTAINER */

.wpl-after-wrapper{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    clip-path:inset(0 50% 0 0);

    will-change:clip-path;

    transform:translateZ(0);
    backface-visibility:hidden;
}

/* AFTER IMAGE */

.wpl-after-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}

/* DIVIDER */

.wpl-divider{
    position:absolute;

    top:0;
    left:50%;

    width:2px;
    height:100%;

    z-index:20;

    background:rgba(255,255,255,.95);

    transform:translateX(-50%);

    box-shadow:
        0 0 12px rgba(255,255,255,.5),
        0 0 24px rgba(255,255,255,.3);

    will-change:left;
}

/* HANDLE */

.wpl-handle{
    position:absolute;

    top:50%;
    left:50%;

    width:72px;
    height:72px;

    z-index:30;

    border-radius:50%;

    transform:translate(-50%,-50%);

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    cursor:ew-resize;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(20px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.15),
        0 4px 12px rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    will-change:left;
}

.wpl-before-after:hover .wpl-handle{
    transform:translate(-50%,-50%) scale(1.08);

    box-shadow:
        0 20px 45px rgba(0,0,0,.18),
        0 10px 20px rgba(0,0,0,.12);
}

/* ARROWS */

.wpl-handle span{
    color:#0f172a;
    font-size:14px;
    font-weight:700;
    line-height:1;
}

/* LABELS */

.wpl-label{
    position:absolute;

    top:24px;

    z-index:40;

    padding:10px 18px;

    border-radius:40px;

    font-size:13px;
    font-weight:600;
    line-height:1;

    color:#fff;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(15px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.15);
}

.wpl-before-label{
    left:24px;
}

.wpl-after-label{
    right:24px;
}

/* ACTIVE DRAGGING */

.wpl-before-after.is-dragging .wpl-handle{
    transform:translate(-50%,-50%) scale(1.12);

    box-shadow:
        0 25px 50px rgba(0,0,0,.22),
        0 12px 24px rgba(0,0,0,.14);
}

.wpl-label{
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.wpl-label.is-hidden{
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
}

/* MOBILE */

@media(max-width:767px){

    .wpl-before-after{
        height:350px;
        border-radius:18px;
    }

    .wpl-handle{
        width:60px;
        height:60px;
    }

    .wpl-label{
        top:15px;
        padding:8px 14px;
        font-size:12px;
    }

    .wpl-before-label{
        left:15px;
    }

    .wpl-after-label{
        right:15px;
    }
}