.before-after-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 20px auto;
overflow: hidden;
border-radius: 8px;
}
.before-after-container img {
width: 100%;
display: block;
pointer-events: none;
user-select: none;
}
.before-after-overlay {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.before-after-overlay img {
width: 100%;
height: auto;
}
.before-after-handle {
position: absolute;
top: 0;
left: calc(50% - 15px);
width: 30px;
height: 100%;
background: rgba(255,255,255,0.8);
border: 2px solid #fff;
border-radius: 4px;
cursor: ew-resize;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transition: background 0.2s;
}
.before-after-handle:hover {
background: rgba(255,255,255,1);
}
