/**
 * Sidebar Components CSS
 * Optimized styles for upcoming movies, web series, and OTT releases sidebars
 * Mobile-first responsive design with device-specific optimizations
 */

/* ===== UPCOMING MOVIES SIDEBAR ===== */
.upcoming-movies-sidebar {
    --primary: #1e3a8a;
    --primary-light: #3b82f6;
    --primary-dark: #1e40af;
    --secondary: #fbbf24;
    --secondary-light: #fcd34d;
    --secondary-dark: #f59e0b;
    --tertiary: #10b981;
    --tertiary-light: #34d399;
    --tertiary-dark: #059669;
}

.upcoming-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #c084fc;
    transition: all 0.3s ease;
}

.upcoming-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(147, 51, 234, 0.1), 0 10px 10px -5px rgba(147, 51, 234, 0.04);
    border-color: #a855f7;
}

.upcoming-movies-sidebar .countdown-timer {
    background: linear-gradient(45deg, #374151, #4b5563) !important;
}

.upcoming-movies-sidebar .days-counter {
    background: linear-gradient(45deg, #374151, #4b5563) !important;
}

.upcoming-movies-sidebar .coming-soon {
    background: linear-gradient(45deg, #374151, #4b5563) !important;
}

.movie-item {
    transition: all 0.3s ease;
}

.movie-item:hover {
    background: linear-gradient(90deg, rgba(147, 51, 234, 0.05), rgba(168, 85, 247, 0.05));
}

/* ===== UPCOMING WEB SERIES SIDEBAR ===== */
.upcoming-webseries-sidebar {
    --primary: #EC4899;
    --primary-light: #F472B6;
    --primary-dark: #BE185D;
    --secondary: #8B5CF6;
    --secondary-light: #A78BFA;
    --secondary-dark: #7C3AED;
    --tertiary: #20B2AA;
    --tertiary-light: #40D2CA;
    --tertiary-dark: #178F88;
}

/* ===== RECENT WEB SERIES SIDEBAR ===== */
.recent-webseries-sidebar {
    --primary: #10B981;
    --primary-light: #34D399;
    --primary-dark: #059669;
    --secondary: #14B8A6;
    --secondary-light: #5EEAD4;
    --secondary-dark: #0D9488;
    --tertiary: #20B2AA;
    --tertiary-light: #40D2CA;
    --tertiary-dark: #178F88;
}

.webseries-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.webseries-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--primary-light);
}

.platform-netflix { background: linear-gradient(45deg, #E50914, #F40612); }
.platform-amazon { background: linear-gradient(45deg, #00A8E1, #0F79AF); }
.platform-disney { background: linear-gradient(45deg, #006FFF, #0080FF); }
.platform-jio { background: linear-gradient(45deg, #8B5CF6, #A855F7); }
.platform-default { background: linear-gradient(45deg, #6B7280, #4B5563); }

.series-item {
    transition: all 0.3s ease;
}

.series-item:hover {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.05), rgba(139, 92, 246, 0.05));
}

/* Recent Web Series specific styles */
.recent-webseries-sidebar .series-item:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), rgba(20, 184, 166, 0.05));
}

.released-today {
    background: linear-gradient(45deg, #10B981, #34D399);
}

.released-yesterday {
    background: linear-gradient(45deg, #059669, #10B981);
}

.recent-release {
    background: linear-gradient(45deg, #14B8A6, #5EEAD4);
}

.released-recently {
    background: linear-gradient(45deg, #0D9488, #14B8A6);
}

/* Additional Web Series specific styles */
.upcoming-webseries-sidebar .countdown-timer {
    background: linear-gradient(45deg, var(--tertiary), var(--tertiary-light));
}

.upcoming-webseries-sidebar .days-counter {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary));
}

.upcoming-webseries-sidebar .coming-soon {
    background: linear-gradient(45deg, var(--secondary), var(--secondary-light));
}

/* ===== OTT RELEASES SIDEBAR ===== */
.ott-releases-sidebar {
    --primary: #6A5ACD;
    --primary-light: #8878E8;
    --primary-dark: #483D8B;
    --secondary: #FF8C00;
    --secondary-light: #FFA333;
    --secondary-dark: #CC7000;
    --tertiary: #20B2AA;
    --tertiary-light: #40D2CA;
    --tertiary-dark: #178F88;
}

.ott-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.ott-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--primary-light);
}

.release-item {
    transition: all 0.3s ease;
}

.release-item:hover {
    background: linear-gradient(90deg, rgba(106, 90, 205, 0.05), rgba(255, 140, 0, 0.05));
}

/* Additional OTT-specific styles */
.trending-badge {
    background: linear-gradient(45deg, var(--secondary), var(--secondary-light));
    animation: pulse 2s infinite;
}

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

.genre-tag {
    background: rgba(106, 90, 205, 0.1);
    color: var(--primary-dark);
    font-size: 0.75rem;
}

.rating-star {
    color: var(--secondary);
}

.ott-releases-sidebar .days-counter {
    background: linear-gradient(45deg, var(--tertiary-dark), var(--tertiary));
}

.bg-grey-500 {
    background: linear-gradient(45deg, #ffffff, #f8fafc) !important;
    color: #374151 !important;
}

/* ===== SHARED COMPONENTS ===== */
.view-all-btn {
    background: linear-gradient(45deg, #6A5ACD, #8878E8);
    transition: all 0.3s ease;
    text-decoration: none;
}

.view-all-btn:hover {
    background: linear-gradient(45deg, #483D8B, #6A5ACD);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Desktop Optimizations (1024px and above) */
@media (min-width: 1024px) {
    .upcoming-card,
    .webseries-card,
    .ott-card {
        padding: 1.5rem;
    }
    
    .upcoming-card h2,
    .webseries-card h2,
    .ott-card h2 {
        font-size: 1.25rem;
    }
    
    .movie-item,
    .series-item,
    .release-item {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .movie-item h3,
    .series-item h3,
    .release-item h3 {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    .view-all-btn {
        padding: 0.75rem 2rem;
    }
    
    .view-all-btn span {
        font-size: 0.875rem;
    }
}

/* Tablet Optimizations (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .upcoming-card,
    .webseries-card,
    .ott-card {
        padding: 1.25rem;
    }
    
    .upcoming-card h2,
    .webseries-card h2,
    .ott-card h2 {
        font-size: 1.125rem;
    }
    
    .movie-item,
    .series-item,
    .release-item {
        padding: 0.875rem;
        margin-bottom: 0.625rem;
    }
    
    .movie-item h3,
    .series-item h3,
    .release-item h3 {
        font-size: 0.9375rem;
        line-height: 1.35;
    }
    
    .view-all-btn {
        padding: 0.625rem 1.5rem;
    }
    
    .view-all-btn span {
        font-size: 0.8125rem;
    }
}

/* Mobile Optimizations (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .upcoming-card,
    .webseries-card,
    .ott-card {
        padding: 1.25rem;
    }
    
    .upcoming-card h2,
    .webseries-card h2,
    .ott-card h2 {
        font-size: 1.25rem !important;
    }
    
    .movie-item,
    .series-item,
    .release-item {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .movie-item h3,
    .series-item h3,
    .release-item h3 {
        font-size: 1.125rem !important;
        line-height: 1.4;
    }
    
    .view-all-btn {
        padding: 0.75rem 1.5rem;
    }
    
    .view-all-btn span {
        font-size: 0.9375rem !important;
    }
    
    /* Increase badge and text sizes */
    .movie-item .text-xs,
    .series-item .text-xs,
    .release-item .text-xs {
        font-size: 0.8125rem !important;
        padding: 0.25rem 0.5rem;
    }
    
    /* Force larger text for web series specific elements */
    .upcoming-webseries-sidebar .text-sm,
    .recent-webseries-sidebar .text-sm {
        font-size: 0.9375rem !important;
    }
    
    .upcoming-webseries-sidebar .text-xs,
    .recent-webseries-sidebar .text-xs {
        font-size: 0.8125rem !important;
    }
}

/* Small Mobile Optimizations (320px - 479px) */
@media (min-width: 320px) and (max-width: 479px) {
    .upcoming-card,
    .webseries-card,
    .ott-card {
        padding: 1rem;
    }
    
    .upcoming-card h2,
    .webseries-card h2,
    .ott-card h2 {
        font-size: 1.125rem !important;
    }
    
    .movie-item,
    .series-item,
    .release-item {
        padding: 0.875rem;
        margin-bottom: 0.625rem;
    }
    
    .movie-item h3,
    .series-item h3,
    .release-item h3 {
        font-size: 1rem !important;
        line-height: 1.35;
    }
    
    .view-all-btn {
        padding: 0.625rem 1.25rem;
    }
    
    .view-all-btn span {
        font-size: 0.875rem !important;
    }
    
    /* Increase badge sizes for better readability */
    .movie-item .text-xs,
    .series-item .text-xs,
    .release-item .text-xs {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem;
    }
    
    /* Force larger text for web series specific elements */
    .upcoming-webseries-sidebar .text-sm,
    .recent-webseries-sidebar .text-sm {
        font-size: 0.875rem !important;
    }
    
    .upcoming-webseries-sidebar .text-xs,
    .recent-webseries-sidebar .text-xs {
        font-size: 0.75rem !important;
    }
}

/* Extra Small Mobile Optimizations (below 320px) */
@media (max-width: 319px) {
    .upcoming-card,
    .webseries-card,
    .ott-card {
        padding: 0.875rem;
    }
    
    .upcoming-card h2,
    .webseries-card h2,
    .ott-card h2 {
        font-size: 1rem !important;
    }
    
    .movie-item,
    .series-item,
    .release-item {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .movie-item h3,
    .series-item h3,
    .release-item h3 {
        font-size: 0.9375rem !important;
        line-height: 1.3;
    }
    
    .view-all-btn {
        padding: 0.5rem 1rem;
    }
    
    .view-all-btn span {
        font-size: 0.8125rem !important;
    }
    
    /* Increase badge sizes for better readability */
    .movie-item .text-xs,
    .series-item .text-xs,
    .release-item .text-xs {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.5rem;
    }
    
    /* Force larger text for web series specific elements */
    .upcoming-webseries-sidebar .text-sm,
    .recent-webseries-sidebar .text-sm {
        font-size: 0.8125rem !important;
    }
    
    .upcoming-webseries-sidebar .text-xs,
    .recent-webseries-sidebar .text-xs {
        font-size: 0.6875rem !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.upcoming-card,
.webseries-card,
.ott-card,
.movie-item,
.series-item,
.release-item,
.view-all-btn {
    will-change: transform;
    backface-visibility: hidden;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    .upcoming-card,
    .webseries-card,
    .ott-card,
    .movie-item,
    .series-item,
    .release-item,
    .view-all-btn {
        transition: none;
        transform: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .upcoming-card,
    .webseries-card,
    .ott-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .view-all-btn {
        display: none;
    }
}