/* BP Compare Slider Single Handle Fix
   Purpose: hide duplicate/ghost TwentyTwenty handles and show one clean working handle only.
*/

.gsc-compare-images,
.twentytwenty-wrapper,
.twentytwenty-container {
    max-width: 100%;
}

.twentytwenty-container.bp-csf-single-handle-ready {
    position: relative !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Hide the theme/plugin's original visual handle only inside the compare slider.
   The JS still updates it in the background for compatibility, but it is no longer visible. */
.gsc-compare-images .twentytwenty-container.bp-csf-single-handle-ready > .twentytwenty-handle,
.twentytwenty-wrapper .twentytwenty-container.bp-csf-single-handle-ready > .twentytwenty-handle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Hide any duplicate handle accidentally injected by another repair script. */
.twentytwenty-container.bp-csf-single-handle-ready > .bp-compare-slider-fix-handle,
.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-handle,
.twentytwenty-container.bp-csf-single-handle-ready > .bp-compare-handle,
.twentytwenty-container.bp-csf-single-handle-ready > .bp-compare-slider-handle,
.twentytwenty-container.bp-csf-single-handle-ready > .bp-before-after-handle,
.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle:not(:last-of-type) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50%;
    width: 44px !important;
    margin-left: -22px !important;
    z-index: 999999 !important;
    cursor: ew-resize !important;
    pointer-events: auto !important;
    touch-action: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}

.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle .bp-csf-single-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    margin-top: -18px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle .bp-csf-single-knob::before,
.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle .bp-csf-single-knob::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -6px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle .bp-csf-single-knob::before {
    left: 7px;
    border-right: 7px solid #ffffff;
}

.twentytwenty-container.bp-csf-single-handle-ready > .bp-csf-single-handle .bp-csf-single-knob::after {
    right: 7px;
    border-left: 7px solid #ffffff;
}

/* Prevent text/image selection inside the compare block only. */
.twentytwenty-container.bp-csf-single-handle-ready img,
.twentytwenty-container.bp-csf-single-handle-ready * {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}