/* Image Hover Preview Styles */
.image-hover-preview {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 90vw;
    max-height: 90vh;
}

.image-hover-preview.active {
    opacity: 1;
    transform: scale(1);
}

.image-hover-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Dark mode adjustments */
[data-theme="dark"] .image-hover-preview {
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Prevent preview on mobile/touch devices */
@media (hover: none) {
    .image-hover-preview {
        display: none !important;
    }
}

/* Add subtle cursor indication for images that can be previewed */
img:not([data-no-preview]):not(button img):not(a img):not(input img) {
    cursor: zoom-in;
}

/* Exclude small icons and UI elements */
img[width][height] {
    /* Check if image is small - handled in JS */
}

/* Exclude images in navigation, buttons, etc. */
nav img,
button img,
.btn img,
.dropdown img,
.navbar img,
.modal-header img,
.modal-footer img {
    cursor: default;
}