.sl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    z-index: 9999;
    padding: 20px;
}

.sl-overlay.sl-visible {
    display: flex;
}

.sl-inner {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.sl-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.sl-overlay.sl-animate.sl-visible .sl-inner {
    animation: sl-zoom-in 0.25s ease-out;
}

@keyframes sl-zoom-in {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.sl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
}

.sl-prev { left: 20px; }
.sl-next { right: 20px; }

.sl-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.sl-no-scroll {
    overflow: hidden;
}