/* ====================================
   IMAGE MODAL STYLING
   ==================================== */
#image-modal {
    transition: all 0.3s ease-in-out;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
}

#image-modal.opacity-100 {
    animation: fadeIn 0.3s ease-out;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#image-modal.opacity-0 {
    opacity: 0 !important;
    pointer-events: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

#modal-image {
    transition: transform 0.2s ease-in-out;
}

#modal-image:hover {
    transform: scale(1.02);
}

#modal-close-btn:hover {
    background-color: var(--modal-overlay);
}