.image-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(8px);
}

.image-lightbox.show {
opacity: 1;
visibility: visible;
}

.image-lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}

.image-lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transform: scale(0.8);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-lightbox.show .image-lightbox-img {
transform: scale(1);
}

.image-lightbox-close {
position: absolute;
top: -50px;
right: 0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(8px);
}

.image-lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}

.image-lightbox-close svg {
width: 20px;
height: 20px;
}

@media (max-width: 640px) {
.image-lightbox-content {
max-width: 95vw;
max-height: 95vh;
}

.image-lightbox-close {
top: -40px;
width: 36px;
height: 36px;
}

.image-lightbox-close svg {
width: 18px;
height: 18px;
}
}