(function() {
const style = document.createElement('style');
style.textContent = `
.vc-lightbox-overlay {
position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,.85);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s;
cursor: zoom-out;
}
.vc-lightbox-overlay.active { opacity: 1; }
.vc-lightbox-overlay img {
max-width: 90vw; max-height: 90vh;
border-radius: 4px;
box-shadow: 0 0 40px rgba(0,0,0,.6);
transform: scale(.92); transition: transform .3s;
}
.vc-lightbox-overlay.active img { transform: scale(1); }
.vc-lightbox-close {
position: absolute; top: 20px; right: 28px;
color: #fff; font-size: 36px; cursor: pointer;
font-family: sans-serif; line-height: 1;
}
`;
document.head.appendChild(style);
const imgs = [...document.querySelectorAll('.mk-metro-pf-img img')];
if (!imgs.length) return;
imgs.forEach(i => { i.style.cursor = 'zoom-in'; });
const overlay = document.createElement('div');
overlay.className = 'vc-lightbox-overlay';
overlay.innerHTML = `
×
![]()
`;
document.body.appendChild(overlay);
const lbImg = overlay.querySelector('img');
function open(idx) {
lbImg.src = imgs[idx].dataset.src || imgs[idx].src;
overlay.style.display = 'flex';
requestAnimationFrame(() => overlay.classList.add('active'));
document.body.style.overflow = 'hidden';
}
function close() {
overlay.classList.remove('active');
setTimeout(() => { overlay.style.display = 'none'; }, 300);
document.body.style.overflow = '';
}
imgs.forEach((img, i) => img.addEventListener('click', e => { e.preventDefault(); open(i); }));
overlay.querySelector('.vc-lightbox-close').addEventListener('click', close);
overlay.addEventListener('click', e => { if (e.target === overlay) close(); });
document.addEventListener('keydown', e => {
if (overlay.style.display !== 'flex') return;
if (e.key === 'Escape') close();
});
overlay.style.display = 'none';
})();
