/* Custom Carousel Styles */
.custom-carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.custom-carousel {
    width: 100%;
}

.custom-carousel-item {
    padding: 0 15px;
    outline: none;
}

.custom-carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

.custom-carousel-item a {
    display: block;
    text-decoration: none;
}

/* Hover Effects */
.custom-carousel-wrapper.hover-zoom .custom-carousel-item img:hover {
    transform: scale(1.05);
}

.custom-carousel-wrapper.hover-grayscale .custom-carousel-item img {
    filter: grayscale(0%);
}

.custom-carousel-wrapper.hover-grayscale .custom-carousel-item img:hover {
    filter: grayscale(100%);
}

.custom-carousel-wrapper.hover-opacity .custom-carousel-item img {
    opacity: 1;
}

.custom-carousel-wrapper.hover-opacity .custom-carousel-item img:hover {
    opacity: 0.7;
}

/* Slick Carousel Custom Styles */
.custom-carousel .slick-arrow {
    z-index: 10;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 0;
    line-height: 0;
}

.custom-carousel .slick-arrow:before {
    font-size: 20px;
}

.custom-carousel .slick-prev {
    left: 10px;
}

.custom-carousel .slick-next {
    right: 10px;
}

.custom-carousel .slick-arrow:before {
    transition: all 0.3s ease;
}

.custom-carousel .slick-dots {
    bottom: -35px;
}

.custom-carousel .slick-dots li button:before {
    transition: all 0.3s ease;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .custom-carousel-item {
        padding: 0 10px;
    }
    
    .custom-carousel .slick-prev {
        left: 5px;
    }
    
    .custom-carousel .slick-next {
        right: 5px;
    }
}

/* Loading State */
.custom-carousel:not(.slick-initialized) {
    opacity: 0;
}

.custom-carousel.slick-initialized {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Focus States for Accessibility */
.custom-carousel-item a:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

.custom-carousel .slick-arrow:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}