/* lightbox-custom.css */
@keyframes customFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes customPopup {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

#custom-lightbox-overlay {
    position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); cursor: pointer;
    animation: customFadeIn 1.2s ease forwards;
}
#custom-lightbox-window {
    position: fixed; z-index: 100000; top: 50%; left: 50%; 
    background: #fff; padding: 10px; border-radius: 4px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.6); max-width: 90vw; text-align: center;
    animation: customPopup 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#custom-lightbox-overlay.is-closing { animation: customFadeIn 1.0s ease reverse forwards; }
#custom-lightbox-window.is-closing { animation: customPopup 1.0s ease reverse forwards; }

.cl-image-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}
.cl-nav-btn {
    position: absolute;
    top: 0;
    width: 45%;
    height: 100%;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    display: none;
    transition: opacity 0.8s;
    opacity: 0;
}
.cl-nav-btn:hover {
    opacity: 1;
}
#cl-btn-prev { left: 0; background-position: left center; }
#cl-btn-next { right: 0; background-position: right center; }