/* /assets/css/image-comparison.css */

.comparison-slider {
    position: relative;
    width: 100%;
    max-width: 700px; /* Control the max size */
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    aspect-ratio: 1 / 1; /* Ensure it's a square */
}

.comparison-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.comparison-slider .after-image {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.comparison-slider .slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-slider .slider-handle::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e85a0c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="5" x2="7" y2="19"></line><line x1="7" y1="5" x2="17" y2="19"></line></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(45deg);
}