/* Custom styles for SwiperJS slider */
.movie-carousel-section .swiper-container {
    position: relative;
    padding: 0 10px; /* Add padding to prevent arrows from overlapping content on small screens */
}

.movie-carousel-section .swiper-button-next,
.movie-carousel-section .swiper-button-prev {
    color: #fff; /* White arrows */
    background-color: rgba(0, 0, 0, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    margin-top: -22px; /* Center vertically */
}

.movie-carousel-section:hover .swiper-button-next,
.movie-carousel-section:hover .swiper-button-prev {
    opacity: 1;
}


.movie-carousel-section .swiper-button-next:hover,
.movie-carousel-section .swiper-button-prev:hover {
    background-color: #E50914; /* Primary red color */
}

.movie-carousel-section .swiper-button-next::after,
.movie-carousel-section .swiper-button-prev::after {
    font-size: 20px;
    font-weight: bold;
}

.movie-carousel-section .swiper-button-prev {
    left: 15px;
}

.movie-carousel-section .swiper-button-next {
    right: 15px;
}

.swiper-slide {
    height: auto;
}

.swiper-slide a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.swiper-slide .p-3 {
    flex-grow: 1;
}

/* Hide swiper buttons on mobile and show on hover on desktop */
@media (max-width: 768px) {
    .movie-carousel-section .swiper-button-next,
    .movie-carousel-section .swiper-button-prev {
        display: none;
    }
    .movie-carousel-section .swiper-container {
        padding: 0;
    }
}