.image-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);background-size:contain;background-repeat:no-repeat;background-position:center center;display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;visibility:hidden;transition:all .3s ease}
.image-modal.active{opacity:1;visibility:visible}
#modalImage{max-width:100%;max-height:100%;object-fit:contain;}
.modal-close{position:absolute;top:15px;right:15px;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;cursor:pointer;transition:var(--transition);z-index:10}
.modal-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;cursor:pointer;transition:var(--transition);z-index:10}
.modal-nav:hover{background:rgba(255,255,255,.3)}
.modal-prev{left:15px}
.modal-next{right:15px}
.download-btn{position:absolute;bottom:15px;right:15px;background:var(--primary-color);color:#fff;padding:8px 15px;border-radius:30px;font-size:.9rem;display:flex;align-items:center;gap:8px;cursor:pointer;transition:var(--transition);text-decoration:none;z-index:10}
.download-btn:hover{background:var(--secondary-color);transform:translateY(-3px)}
.image-counter{position:absolute;bottom:15px;left:15px;background:rgba(0,0,0,.5);color:#fff;padding:5px 15px;border-radius:20px;font-size:.9rem;z-index:10}