/* Styles for product carousel */

/* Modal transition */
#product-carousel-modal {
    transition: opacity 0.3s ease;
}

#product-carousel-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Image hover effect in modal */
#carousel-modal-image {
    transition: transform 0.3s ease;
}

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

/* Navigation buttons */
#carousel-prev-image,
#carousel-next-image {
    opacity: 0.7;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

#carousel-prev-image:hover,
#carousel-next-image:hover {
    opacity: 1;
}

/* Product card image hover effect */
.card img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.card img:hover {
    transform: scale(1.05);
}

/* Image counter style */
#carousel-image-counter {
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
}