.before-after-container {
    /* default CSS variables (can be overridden inline or by JS) */
    --slider-position: 50%;
    --slider-width: 3px;
    --slider-color: rgba(255, 255, 255, 0.95);
    --button-size: 44px;
    --button-color: rgba(255, 255, 255, 0.98);
    --arrow-color: #757575;
    --ipad-border-radius: 40px;
    --ipad-border-width: 16px;
    --ipad-color: #000000;
    --background-color: transparent;

    position: relative;
    max-width: 100%;
    margin: 80px auto 40px;
    overflow: visible;
    border-radius: var(--ipad-border-radius);
    border: var(--ipad-border-width) solid var(--ipad-color);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    background: var(--ipad-color);
    padding: 3px;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.before-after-header {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 7;
}

.before-after-header .header-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.before-after-header .header-text {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.before-after-container .screen-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-color);
    z-index: 0;
}

/* iPad front camera and button */
.before-after-container::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #000000;
    border-radius: 50%;
    top: calc(var(--ipad-border-width) * -0.5);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
    z-index: 10;
}

/* .before-after-container::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: calc(var(--ipad-border-width) * -0.75);
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #2a2a2c;
    border-radius: 50%;
    background: var(--ipad-color);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    z-index: 10;
} */

/* iPad screen container */
.before-after-container .screen-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--ipad-border-radius) - var(--ipad-border-width));
    background: #000;
}

.before-after-container .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width;
}

.before-after-container .background-img {
    z-index: 1;
}

.before-after-container .foreground-img {
    z-index: 2;
    width: 100%;
    clip-path: inset(0 calc(100% - var(--slider-position, 50%)) 0 0);
    transition: none;
    will-change: clip-path;
}

.before-after-container .slider {
    /* the native range input is full-size and invisible; it receives pointer events
       while the visible decorative button is .slider-button (pointer-events: none)
       so the native input handles dragging reliably across browsers. */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    margin: 0;
    padding: 0;
    border: none;
    transition: none;
    z-index: 6; /* above visuals so it captures pointer events */
    cursor: col-resize;
    opacity: 0; /* visually hidden but still interactive */
}

.before-after-container .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-width, 6px);
    height: 100%;
    background: transparent; /* keep native thumb transparent; decorative element used */
    cursor: col-resize;
}

.before-after-container .slider::-moz-range-thumb {
    width: var(--slider-width, 6px);
    height: 100%;
    background: transparent;
    cursor: col-resize;
    border: none;
}

.before-after-container .slider-button {
    pointer-events: none;
    position: absolute;
    height: 100%;
    width: var(--slider-width, 3px);
    background-color: var(--slider-color);
    left: calc(var(--slider-position, 50%) - calc(var(--slider-width, 3px) / 2));
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
    backdrop-filter: blur(4px);
    will-change: left;
}

.before-after-container .slider-button::before {
    content: '';
    position: absolute;
    width: var(--button-size);
    height: var(--button-size);
    background-color: var(--button-color);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
    backdrop-filter: blur(4px);
}

/* Arrows inside the circle */
.before-after-container .slider-button::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: var(--arrow-color);
    opacity: 0.9;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3.5L1.5 9.5l6 6M16.5 3.5l6 6-6 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3.5L1.5 9.5l6 6M16.5 3.5l6 6-6 6'/%3E%3C/svg%3E") no-repeat center;
    z-index: 6;
    transition: none;
}

@media (max-width: 768px) {
    .before-after-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4; /* Portrait mode for mobile */
        --ipad-border-radius: 25px;
        --ipad-border-width: 12px;
        margin: 20px auto;
    }
}

/* Hover effects */
@media (hover: hover) {
    .before-after-container:hover {
        transform: scale(1.01) translateY(-3px);
        box-shadow: 0 30px 60px -15px rgba(0,0,0,0.2);
    }
    
    .before-after-container:hover .slider-button::before {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
    }
    
    .before-after-container:hover .slider-button::after {
        opacity: 1;
    }
    
    .before-after-container:active {
        transform: scale(1.005) translateY(-1px);
        transition-duration: 0.15s;
    }
}

/* show visual focus when keyboard focusing the underlying input */
.before-after-container .slider:focus + .slider-button,
.before-after-container .slider:focus-visible + .slider-button {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}