/**
 * Universal Carousel Styles
 * Shared styles for all carousel components
 */

.carousel-image {
    transition: opacity 0.3s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-image.hidden {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* Common carousel navigation styles */
.offer-carousel .carousel-prev,
.offer-carousel .carousel-next,
.event-carousel .carousel-prev,
.event-carousel .carousel-next,
.company-carousel .carousel-prev,
.company-carousel .carousel-next,
.blog-carousel .carousel-prev,
.blog-carousel .carousel-next,
.generic-carousel .carousel-prev,
.generic-carousel .carousel-next {
    transition: all 0.2s ease-in-out;
}

.offer-carousel .carousel-prev:hover,
.offer-carousel .carousel-next:hover,
.event-carousel .carousel-prev:hover,
.event-carousel .carousel-next:hover,
.company-carousel .carousel-prev:hover,
.company-carousel .carousel-next:hover,
.blog-carousel .carousel-prev:hover,
.blog-carousel .carousel-next:hover,
.generic-carousel .carousel-prev:hover,
.generic-carousel .carousel-next:hover {
    background-color: var(--color-blue-600) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Show navigation on mobile touch devices */
@media (hover: none) and (pointer: coarse) {

    .offer-carousel .carousel-prev,
    .offer-carousel .carousel-next,
    .event-carousel .carousel-prev,
    .event-carousel .carousel-next,
    .company-carousel .carousel-prev,
    .company-carousel .carousel-next,
    .blog-carousel .carousel-prev,
    .blog-carousel .carousel-next,
    .generic-carousel .carousel-prev,
    .generic-carousel .carousel-next {
        opacity: 1 !important;
    }
}