.wd-slider-container {
    overflow-x: auto;
    white-space: nowrap;
    background-color: #1E1F23;
}

.wd-slider-track {
    display: flex;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.wd-slide {
    display: inline-block;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    font-family: 'Segoe UI', sans-serif;
    flex-shrink: 0;
    position: relative;
}

.slide-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease;
}

/* Video hover effect styles - UPDATED */
.video-hover-effect {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Increased z-index to ensure it's above overlay */
}

.video-hover-effect video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: transparent; /* Ensure no black background */
}

/* Fixed overlay issue */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.70) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.25) 60%,
        rgba(0,0,0,0.00) 100%
    );
    z-index: 2; /* Lower than video z-index */
}

/* Gradient overlay on bottom */
.wd-slide-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.wd-slide-info h3 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 8px;
}

.wd-slide-info p {
    font-size: 14px;
    color: #cccccc;
    margin-bottom: 10px;
}

.wd-button {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
}

.wd-button.live {
    background-color: #0DB14B;
    color: #ffffff;
}

.wd-button.vod {
    background-color: #FFDE17;
    color: #000000;
}

.wd-button:hover {
    opacity: 0.85;
    transition: 0.3s ease;
}

/* Swiper styles */
.swiper {
    width: 100%;
    padding: 10px;
}

.swiper-wrapper {
    padding-left: 5px;
}

.swiper-slide {
    height: auto;
}

.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

/* Responsive styles */
@media (max-width: 768px) {
    .wd-slider-track {
        gap: 15px;
        padding-left: 15px;
    }
    
    .wd-slide {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .wd-slide {
        width: 250px;
    }
}