/**
 * Enhanced Popular Today Slider Styles
 * Responsive sizing logic for optimal display with any number of items
 */

/* Base Popular Today Slider Enhancements */
.listupd.popularslider {
    padding-bottom: 10px;
    position: relative;
}

.listupd.popularslider .popconslide {
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 5px;
    display: flex;
    gap: 12px;
    scroll-behavior: smooth;
    transition: all 0.3s ease;
    /* Enhanced scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #333 #111;
}

/* Single-item visual refinement */
.listupd.popularslider.items-1 .popconslide {
    justify-content: center;
    gap: 10px;
}

.listupd.popularslider.items-1 .popconslide .bs {
    /* Responsive width for the single card */
    flex: 0 0 clamp(220px, 28vw, 320px);
    max-width: clamp(240px, 30vw, 340px);
}

.listupd.popularslider.items-1 .bs .bsx {
    margin: 6px;
}

.listupd.popularslider.items-1 .bs .bsx .limit {
    /* Reduce the aspect height for a sleeker single card */
    padding: 66% 0 0;
}

/* Subtle image scale on hover for polish */
.listupd.popularslider .bs .bsx .limit img {
    transition: transform 0.25s ease;
}

.listupd.popularslider .bs .bsx:hover .limit img {
    transform: scale(1.02);
}

/* Enhanced scrollbar for webkit browsers */
.listupd.popularslider .popconslide::-webkit-scrollbar {
    height: 8px;
    background-color: rgba(17, 17, 17, 0.8);
    border-radius: 4px;
}

.listupd.popularslider .popconslide::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #333, #555);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.listupd.popularslider .popconslide::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #555, #777);
}

/* Base item styling */
.listupd.popularslider .popconslide .bs {
    display: block;
    float: none !important;
    white-space: normal;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

/* Responsive sizing based on item count */
/* 1-3 items: Large size for better visual impact */
.listupd.popularslider .popconslide:has(.bs:nth-child(1):nth-last-child(1)) .bs,
.listupd.popularslider .popconslide:has(.bs:nth-child(2):nth-last-child(1)) .bs,
.listupd.popularslider .popconslide:has(.bs:nth-child(3):nth-last-child(1)) .bs {
    flex: 0 0 280px;
    max-width: 320px;
    min-width: 240px;
}

/* 4-6 items: Medium size for balanced layout */
.listupd.popularslider .popconslide:has(.bs:nth-child(4):nth-last-child(1)) .bs,
.listupd.popularslider .popconslide:has(.bs:nth-child(5):nth-last-child(1)) .bs,
.listupd.popularslider .popconslide:has(.bs:nth-child(6):nth-last-child(1)) .bs {
    flex: 0 0 220px;
    max-width: 260px;
    min-width: 180px;
}

/* 7-9 items: Smaller size to fit more items */
.listupd.popularslider .popconslide:has(.bs:nth-child(7):nth-last-child(1)) .bs,
.listupd.popularslider .popconslide:has(.bs:nth-child(8):nth-last-child(1)) .bs,
.listupd.popularslider .popconslide:has(.bs:nth-child(9):nth-last-child(1)) .bs {
    flex: 0 0 185px;
    max-width: 220px;
    min-width: 160px;
}

/* 10+ items: Standard size */
.listupd.popularslider .popconslide .bs {
    flex: 0 0 165px;
    max-width: 200px;
    min-width: 140px;
}

/* Fallback for browsers that don't support :has() */
@supports not selector(:has(*)) {
    /* JavaScript will add these classes */
    .listupd.popularslider.items-1 .popconslide .bs,
    .listupd.popularslider.items-2 .popconslide .bs,
    .listupd.popularslider.items-3 .popconslide .bs {
        flex: 0 0 280px;
        max-width: 320px;
        min-width: 240px;
    }
    
    .listupd.popularslider.items-4 .popconslide .bs,
    .listupd.popularslider.items-5 .popconslide .bs,
    .listupd.popularslider.items-6 .popconslide .bs {
        flex: 0 0 220px;
        max-width: 260px;
        min-width: 180px;
    }
    
    .listupd.popularslider.items-7 .popconslide .bs,
    .listupd.popularslider.items-8 .popconslide .bs,
    .listupd.popularslider.items-9 .popconslide .bs {
        flex: 0 0 185px;
        max-width: 220px;
        min-width: 160px;
    }
}

/* Enhanced hover effects */
.listupd.popularslider .popconslide .bs:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* Smooth transitions for dynamic content changes */
.listupd.popularslider .popconslide .bs {
    animation: slideInFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.listupd.popularslider .popconslide .bs:nth-child(1) { animation-delay: 0.1s; }
.listupd.popularslider .popconslide .bs:nth-child(2) { animation-delay: 0.15s; }
.listupd.popularslider .popconslide .bs:nth-child(3) { animation-delay: 0.2s; }
.listupd.popularslider .popconslide .bs:nth-child(4) { animation-delay: 0.25s; }
.listupd.popularslider .popconslide .bs:nth-child(5) { animation-delay: 0.3s; }
.listupd.popularslider .popconslide .bs:nth-child(6) { animation-delay: 0.35s; }
.listupd.popularslider .popconslide .bs:nth-child(7) { animation-delay: 0.4s; }
.listupd.popularslider .popconslide .bs:nth-child(8) { animation-delay: 0.45s; }
.listupd.popularslider .popconslide .bs:nth-child(9) { animation-delay: 0.5s; }
.listupd.popularslider .popconslide .bs:nth-child(10) { animation-delay: 0.55s; }

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    /* Adjust sizes for medium screens */
    .listupd.popularslider .popconslide:has(.bs:nth-child(1):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(2):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(3):nth-last-child(1)) .bs {
        flex: 0 0 240px;
        max-width: 280px;
        min-width: 200px;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(4):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(5):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(6):nth-last-child(1)) .bs {
        flex: 0 0 190px;
        max-width: 230px;
        min-width: 160px;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(7):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(8):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(9):nth-last-child(1)) .bs {
        flex: 0 0 160px;
        max-width: 190px;
        min-width: 140px;
    }
    
    .listupd.popularslider .popconslide .bs {
        flex: 0 0 145px;
        max-width: 175px;
        min-width: 125px;
    }
    
    /* Fallback classes for medium screens */
    @supports not selector(:has(*)) {
        .listupd.popularslider.items-1 .popconslide .bs,
        .listupd.popularslider.items-2 .popconslide .bs,
        .listupd.popularslider.items-3 .popconslide .bs {
            flex: 0 0 240px;
            max-width: 280px;
            min-width: 200px;
        }
        
        .listupd.popularslider.items-4 .popconslide .bs,
        .listupd.popularslider.items-5 .popconslide .bs,
        .listupd.popularslider.items-6 .popconslide .bs {
            flex: 0 0 190px;
            max-width: 230px;
            min-width: 160px;
        }
        
        .listupd.popularslider.items-7 .popconslide .bs,
        .listupd.popularslider.items-8 .popconslide .bs,
        .listupd.popularslider.items-9 .popconslide .bs {
            flex: 0 0 160px;
            max-width: 190px;
            min-width: 140px;
        }
    }
}

@media (max-width: 768px) {
    /* Mobile adjustments */
    .listupd.popularslider .popconslide {
        gap: 8px;
        padding-bottom: 8px;
    }

    /* Tweak single-card proportions and width on tablets/large phones */
    .listupd.popularslider.items-1 .popconslide .bs {
        flex: 0 0 clamp(210px, 40vw, 280px);
        max-width: clamp(220px, 42vw, 300px);
    }

    .listupd.popularslider.items-1 .bs .bsx .limit {
        padding: 60% 0 0;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(1):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(2):nth-last-child(1)) .bs {
        flex: 0 0 200px;
        max-width: 240px;
        min-width: 180px;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(3):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(4):nth-last-child(1)) .bs {
        flex: 0 0 170px;
        max-width: 200px;
        min-width: 150px;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(5):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(6):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(7):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(8):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(9):nth-last-child(1)) .bs {
        flex: 0 0 140px;
        max-width: 170px;
        min-width: 120px;
    }
    
    .listupd.popularslider .popconslide .bs {
        flex: 0 0 125px;
        max-width: 150px;
        min-width: 110px;
    }
    
    /* Mobile fallback classes */
    @supports not selector(:has(*)) {
        .listupd.popularslider.items-1 .popconslide .bs,
        .listupd.popularslider.items-2 .popconslide .bs {
            flex: 0 0 200px;
            max-width: 240px;
            min-width: 180px;
        }
        
        .listupd.popularslider.items-3 .popconslide .bs,
        .listupd.popularslider.items-4 .popconslide .bs {
            flex: 0 0 170px;
            max-width: 200px;
            min-width: 150px;
        }
        
        .listupd.popularslider.items-5 .popconslide .bs,
        .listupd.popularslider.items-6 .popconslide .bs,
        .listupd.popularslider.items-7 .popconslide .bs,
        .listupd.popularslider.items-8 .popconslide .bs,
        .listupd.popularslider.items-9 .popconslide .bs {
            flex: 0 0 140px;
            max-width: 170px;
            min-width: 120px;
        }
    }
    
    /* Reduce hover effects on mobile */
    .listupd.popularslider .popconslide .bs:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    /* Small mobile adjustments */
    .listupd.popularslider .popconslide {
        gap: 6px;
    }

    /* Compact single-card sizing on small phones */
    .listupd.popularslider.items-1 .popconslide .bs {
        flex: 0 0 clamp(170px, 58vw, 220px);
        max-width: clamp(180px, 60vw, 240px);
    }
    .listupd.popularslider.items-1 .bs .bsx .limit {
        padding: 56% 0 0;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(1):nth-last-child(1)) .bs {
        flex: 0 0 180px;
        max-width: 220px;
        min-width: 160px;
    }
    
    .listupd.popularslider .popconslide:has(.bs:nth-child(2):nth-last-child(1)) .bs,
    .listupd.popularslider .popconslide:has(.bs:nth-child(3):nth-last-child(1)) .bs {
        flex: 0 0 150px;
        max-width: 180px;
        min-width: 130px;
    }
    
    .listupd.popularslider .popconslide .bs {
        flex: 0 0 110px;
        max-width: 130px;
        min-width: 95px;
    }
    
    /* Small mobile fallback classes */
    @supports not selector(:has(*)) {
        .listupd.popularslider.items-1 .popconslide .bs {
            flex: 0 0 180px;
            max-width: 220px;
            min-width: 160px;
        }
        
        .listupd.popularslider.items-2 .popconslide .bs,
        .listupd.popularslider.items-3 .popconslide .bs {
            flex: 0 0 150px;
            max-width: 180px;
            min-width: 130px;
        }
    }
}

/* Light mode adjustments */
.lightmode .listupd.popularslider .popconslide::-webkit-scrollbar {
    background-color: rgba(228, 228, 228, 0.8);
}

.lightmode .listupd.popularslider .popconslide::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ccc, #aaa);
}

.lightmode .listupd.popularslider .popconslide::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #aaa, #888);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .listupd.popularslider .popconslide .bs {
        animation: none;
        transition: none;
    }
    
    .listupd.popularslider .popconslide .bs:hover {
        transform: none;
    }
    
    .listupd.popularslider .popconslide {
        scroll-behavior: auto;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .listupd.popularslider .popconslide::-webkit-scrollbar {
        background-color: #000;
        border: 1px solid #fff;
    }
    
    .listupd.popularslider .popconslide::-webkit-scrollbar-thumb {
        background: #fff;
        border: 1px solid #000;
    }
}

/* Focus indicators for keyboard navigation */
.listupd.popularslider .popconslide .bs:focus-within {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Loading state animation */
.listupd.popularslider.loading .popconslide .bs {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* Empty state styling */
.listupd.popularslider.empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
}

.listupd.popularslider.empty::before {
    content: "No popular series available at the moment";
    padding: 20px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* Print styles */
@media print {
    .listupd.popularslider .popconslide {
        display: block;
        overflow: visible;
        white-space: normal;
    }
    
    .listupd.popularslider .popconslide .bs {
        display: inline-block;
        width: 150px;
        margin: 10px;
        break-inside: avoid;
    }
}