/* Base Video Container Styles */
.custom-video-comparison-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    overflow: hidden;
    background-color: black;
}

/* Before Video (Bottom Layer) */
.custom-video-comparison-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;  /* Bottom layer */
}

/* After Video (Top Layer) */
.custom-video-comparison-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;  /* Top layer */
}

/* Base Slider Styles - Align with the video container */
.custom-video-comparison-slider {
    position: absolute;
    z-index: 3;  /* Above both videos */
    background-color: rgba(255, 255, 255, 0.7); /* Visible slider handle */
    cursor: ew-resize;
    width: 5px; /* Adjust as needed */
    height: 100%; /* Match the height of the video container */
    top: 0 !important; /* Force the slider to start at the top */
    left: 50%;
    transform: translateX(-50%);
}

/* Horizontal Wipe - Vertical Slider Line */
[data-orientation="horizontal"] .custom-video-comparison-slider {
    width: 5px;
    height: 100%;
    top: 0 !important;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    cursor: ew-resize;
}

/* Vertical Wipe - Slider Style */
[data-orientation="vertical"] .custom-video-comparison-slider {
    width: 100% !important;
    height: 5px !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    cursor: ns-resize !important;
}

/* Right-Leaning Diagonal Wipe */
[data-orientation="diagonal-right"] .custom-video-comparison-slider {
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    background-color: transparent;
    cursor: nwse-resize;
}

/* Left-Leaning Diagonal Wipe */
[data-orientation="diagonal-left"] .custom-video-comparison-slider {
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    background-color: transparent;
    cursor: nesw-resize;
}

/* Label Styles */
.label-before, .label-after {
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    font-size: 14px;
    z-index: 3;
}

/* "Before" label on the left top */
.label-before {
    top: 10px;
    left: 10px;
}

/* "After" label on the right top */
.label-after {
    top: 10px;
    right: 10px;
}