:root {
            /* Beautiful Color Palette */
            --accent: #dc3545;
            --accent-hover: #ff4757;
            --accent-dark: #a02832;
            --gold: #ffd700;
            --blue-accent: #1e3a5f;

            /* Sophisticated Dark Theme */
            --bg-main: #0f1419;
            --bg-secondary: #1a1f2e;
            --bg-card: #202837;
            --bg-hover: #2a3343;
            --bg-overlay: rgba(15, 20, 25, 0.9);

            /* Text Hierarchy */
            --text-primary: #ffffff;
            --text-secondary: #c3c8d2;
            --text-muted: #8892a0;

            /* Effects */
            --border: rgba(255, 255, 255, 0.08);
            --glow: 0 0 20px rgba(220, 53, 69, 0.15);
            --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);

            /* Transitions */
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Scroll/layout: vod-landing-layout.css */
        body.vod-modern-categories {
            font-family: IRANSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            background: var(--bg-main) !important;
            color: var(--text-primary) !important;
            direction: rtl;
            line-height: 1.6;
        }

        /* layout scroll/navbar: vod-landing-layout.css */

        /*!* Ensure footer is visible *!*/
        /*body.vod-modern-categories footer {*/
        /*    display: block !important;*/
        /*    position: relative !important;*/
        /*    z-index: 100 !important;*/
        /*    margin-top: 50px !important;*/
        /*}*/

        /* Beautiful Gradient Background */
        .animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse at top left, rgba(30, 58, 95, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(220, 53, 69, 0.08) 0%, transparent 50%),
                linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
            z-index: 0;
        }

        /* Enhanced Animated Orbs */
        .animated-bg::before,
        .animated-bg::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.6;
        }

        .animated-bg::before {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.05) 40%, transparent 70%);
            top: -250px;
            right: -250px;
            animation: floatPrimary 30s ease-in-out infinite;
        }

        .animated-bg::after {
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(30, 58, 95, 0.12) 0%, rgba(30, 58, 95, 0.04) 40%, transparent 70%);
            bottom: -350px;
            left: -350px;
            animation: floatSecondary 35s ease-in-out infinite reverse;
        }

        @keyframes floatPrimary {
            0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
            25% { transform: translate(50px, -30px) scale(1.1) rotate(90deg); }
            50% { transform: translate(-25px, 40px) scale(0.9) rotate(180deg); }
            75% { transform: translate(35px, -15px) scale(1.05) rotate(270deg); }
        }

        @keyframes floatSecondary {
            0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
            20% { transform: translate(-40px, 25px) scale(1.08) rotate(72deg); }
            40% { transform: translate(55px, -45px) scale(0.92) rotate(144deg); }
            60% { transform: translate(-30px, -25px) scale(1.15) rotate(216deg); }
            80% { transform: translate(25px, 35px) scale(0.95) rotate(288deg); }
        }


        /* Animated Particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            animation: float 25s infinite linear;
        }

        @keyframes float {
            from {
                transform: translateY(100vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            90% {
                opacity: 0.8;
            }
            to {
                transform: translateY(-100vh) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* Main Container */
        .vod-container {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            overflow-x: clip;
        }

        /* Elegant Header */
        .vod-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(26, 31, 46, 0.85);
            /*backdrop-filter: blur(10px) saturate(180%);*/
            padding: 1.2rem 3%;
            z-index: 1000;
            transition: all var(--transition);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
        }

        .vod-header.scrolled {
            padding: 0.8rem 3%;
            background: rgba(26, 31, 46, 0.95);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1800px;
            margin: 0 auto;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .logo {
            font-size: 1.9rem;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -0.5px;
            text-decoration: none;
            position: relative;
            transition: all var(--transition);
        }

        .logo::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--blue-accent) 100%);
            transition: width var(--transition);
        }

        .logo:hover::after {
            width: 100%;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
        }

        .nav-item {
            position: relative;
            color: var(--text-secondary);
            cursor: pointer;
            transition: color var(--transition-fast);
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
        }

        .nav-item:hover {
            color: var(--text-primary);
        }

        .nav-item.active {
            color: var(--accent);
        }

        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { width: 0; }
            to { width: 100%; }
        }

        /* Hero Section */
        .hero-section {
            position: relative;
            min-height: clamp(420px, 72vh, 680px);
            height: auto;
            margin-top: 0;
            padding-top: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, transparent 0%, var(--bg-main) 100%);
            width: 100%;
            max-width: 100%;
        }

        .hero-slider {
            position: relative;
            min-height: clamp(360px, 65vh, 600px);
            height: 100%;
            width: 100%;
        }

        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity var(--transition-slow);
        }

        .hero-slide.active {
            opacity: 1;
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /* Dark blurred background for areas not covered by image */
            background: radial-gradient(ellipse at center,
                rgba(26, 31, 46, 0.8) 0%,
                rgba(15, 20, 25, 0.95) 100%);
        }

        .hero-background img,
        .hero-background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            filter: brightness(0.7) contrast(1.1);
            transform: scale(1.02);
            animation: heroZoom 25s ease-in-out infinite alternate;
        }

        @keyframes heroZoom {
            0% { transform: scale(1.05); }
            100% { transform: scale(1.1); }
        }

        /* Multiple gradient layers for better text visibility */
        .hero-gradient {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(10, 14, 26, 0.95) 0%,
                rgba(10, 14, 26, 0.85) 35%,
                rgba(10, 14, 26, 0.4) 65%,
                rgba(10, 14, 26, 0.2) 100%
            );
            z-index: 1;
            pointer-events: none;
        }

        /* Additional overlay for bottom fade */
        .hero-gradient::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(
                to top,
                rgba(10, 14, 26, 1) 0%,
                rgba(10, 14, 26, 0.7) 30%,
                transparent 100%
            );
        }

        .hero-content {
            position: absolute;
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            max-width: 650px;
            z-index: 20;
            animation: fadeInUp 1s ease-out;
            /* Glass morphism effect for better text visibility */
            background: linear-gradient(135deg,
                rgba(15, 20, 25, 0.8) 0%,
                rgba(26, 31, 46, 0.7) 100%);
            /*backdrop-filter: blur(10px);*/
            -webkit-backdrop-filter: blur(10px);
            padding: 2.5rem;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.4),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(-30%);
            }
            to {
                opacity: 1;
                transform: translateY(-50%);
            }
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(220, 53, 69, 0.05) 100%);
            padding: 0.6rem 1.4rem;
            border-radius: 30px;
            border: 1px solid rgba(220, 53, 69, 0.25);
            margin-bottom: 1.2rem;
            font-size: 0.85rem;
            color: var(--accent);
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
            animation: glow 3s ease-in-out infinite;
        }

        @keyframes glow {
            0%, 100% { box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1); }
            50% { box-shadow: 0 4px 25px rgba(220, 53, 69, 0.2); }
        }


        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 1rem;
            line-height: 1.2;
            color: var(--text-primary);
            text-shadow:
                0 2px 4px rgba(0, 0, 0, 0.8),
                0 4px 8px rgba(0, 0, 0, 0.6),
                0 8px 16px rgba(0, 0, 0, 0.4);
            letter-spacing: -0.5px;
        }

        .hero-meta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-secondary);
            font-size: 1rem;
        }

        .meta-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 215, 0, 0.1);
            padding: 0.4rem 1rem;
            border-radius: 20px;
            color: var(--gold);
            font-weight: 600;
            border: 1px solid rgba(255, 215, 0, 0.2);
        }

        .hero-description {
            font-size: 1.15rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.6),
                0 2px 4px rgba(0, 0, 0, 0.4);
            font-weight: 400;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
            position: relative;
            overflow: hidden;
            font-family: inherit;
        }

        .btn-primary {
            background: var(--accent);
            color: white;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn-primary:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            background: var(--accent-hover);
            box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        /* Hero Navigation Styles */
        .hero-navigation {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem 5%;
            background: linear-gradient(to top,
                rgba(10, 14, 26, 1) 0%,
                rgba(10, 14, 26, 0.9) 50%,
                transparent 100%);
            z-index: 20;
        }

        /* Progress Bar */
        .hero-progress {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }

        .hero-progress-bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--accent) 0%, var(--blue-accent) 100%);
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
        }

        /* Slide Indicators */
        .hero-indicators {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0 60px; /* Space for arrows */
        }

        .hero-indicator {
            flex: 1;
            max-width: 200px;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .hero-indicator:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .hero-indicator.active {
            background: linear-gradient(135deg,
                rgba(220, 53, 69, 0.15) 0%,
                rgba(0, 61, 130, 0.1) 100%);
            border-color: var(--accent);
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
        }

        .indicator-number {
            font-size: 1.8rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            min-width: 40px;
        }

        .hero-indicator:hover .indicator-number,
        .hero-indicator.active .indicator-number {
            color: var(--accent);
            text-shadow: 0 0 20px rgba(220, 53, 69, 0.5);
        }

        .indicator-content {
            flex: 1;
            overflow: hidden;
        }

        .indicator-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .indicator-genre {
            font-size: 0.75rem;
            color: var(--text-secondary);
            opacity: 0.7;
        }

        /* Progress indicator for each slide */
        .indicator-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: var(--accent);
            width: 0;
            transition: width 8s linear;
        }

        .hero-indicator.active .indicator-progress {
            width: 100%;
        }

        /* Navigation Arrows */
        .hero-arrows {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 1rem;
            pointer-events: none;
        }

        .hero-arrow {
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            pointer-events: all;
        }

        .hero-arrow:hover {
            background: var(--accent);
            border-color: var(--accent);
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(220, 53, 69, 0.4);
        }

        .hero-arrow i {
            color: white;
            font-size: 1.2rem;
        }

        /* Notification Styles */
        #notification-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .notification {
            background: linear-gradient(135deg, rgba(26, 31, 46, 0.98) 0%, rgba(15, 20, 25, 0.98) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 15px 20px;
            min-width: 300px;
            max-width: 400px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            animation: slideDown 0.4s ease, fadeIn 0.4s ease;
            pointer-events: all;
            position: relative;
            overflow: hidden;
        }

        .notification::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: linear-gradient(90deg, var(--accent) 0%, var(--blue-accent) 100%);
        }

        .notification.success::before {
            background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
        }

        .notification.error::before {
            background: linear-gradient(90deg, #f44336 0%, #e91e63 100%);
        }

        .notification.warning::before {
            background: linear-gradient(90deg, #ff9800 0%, #ffc107 100%);
        }

        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .notification.success .notification-icon {
            background: rgba(76, 175, 80, 0.2);
            color: #4caf50;
        }

        .notification.error .notification-icon {
            background: rgba(244, 67, 54, 0.2);
            color: #f44336;
        }

        .notification.warning .notification-icon {
            background: rgba(255, 152, 0, 0.2);
            color: #ff9800;
        }

        .notification-content {
            flex: 1;
        }

        .notification-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .notification-message {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .notification-close {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .notification-close:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        .notification-close i {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .notification.hiding {
            animation: slideUp 0.4s ease, fadeOut 0.4s ease;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(-100%);
                opacity: 0;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        
        /* ================= TV Mode Optimizations ================= */
        body.tv-mode .category-card {
            min-height: 250px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        body.tv-mode .category-card:focus,
        body.tv-mode .category-card.focused {
            transform: translateY(-10px) scale(1.08);
            box-shadow: 0 0 0 3px var(--tv-focus-color),
                        0 20px 40px rgba(0, 0, 0, 0.5),
                        0 0 60px rgba(255, 0, 64, 0.3);
            z-index: 100;
        }
        
        body.tv-mode .category-card:focus .card-content h3,
        body.tv-mode .category-card.focused .card-content h3 {
            color: var(--tv-focus-color);
            font-size: 1.3rem;
        }
        
        body.tv-mode .filter-btn {
            min-height: 50px;
            min-width: 120px;
            font-size: 1.1rem;
            padding: 1rem 2rem;
        }
        
        body.tv-mode .filter-btn:focus,
        body.tv-mode .filter-btn.focused {
            transform: scale(1.05);
            background: var(--tv-focus-color);
            color: white;
            box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
        }
        
        body.tv-mode .search-box input {
            min-height: 60px;
            font-size: 1.2rem;
            padding: 1rem 3rem 1rem 1.5rem;
        }
        
        body.tv-mode .search-box input:focus,
        body.tv-mode .search-box input.focused {
            border-color: var(--tv-focus-color);
            box-shadow: 0 0 0 2px rgba(255, 0, 64, 0.3);
        }
        
        body.tv-mode .category-grid {
            gap: 2rem;
            padding: 2rem;
        }
        
        body.tv-mode .hero-slide {
            min-height: 500px;
        }
        
        body.tv-mode .slide-content h2 {
            font-size: 3rem;
        }
        
        body.tv-mode .slide-content p {
            font-size: 1.3rem;
        }
        
        body.tv-mode .play-btn {
            min-height: 70px;
            min-width: 180px;
            font-size: 1.2rem;
            padding: 1.2rem 2.5rem;
        }
        
        body.tv-mode .play-btn:focus,
        body.tv-mode .play-btn.focused {
            transform: scale(1.1);
            box-shadow: 0 0 0 4px var(--tv-focus-color),
                        0 0 30px rgba(255, 0, 64, 0.5);
        }
        
        /* TV Navigation Helper */
        body.tv-mode .tv-nav-helper {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            padding: 1rem 2rem;
            border-radius: 30px;
            display: flex;
            gap: 2rem;
            z-index: 1000;
            font-size: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        body.tv-mode .tv-nav-helper-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            color: white;
        }
        
        body.tv-mode .tv-nav-helper-key {
            background: var(--tv-focus-color);
            color: white;
            padding: 0.4rem 1rem;
            border-radius: 8px;
            font-weight: bold;
            font-size: 0.9rem;
        }
        
        /* Disable hover effects in TV mode */
        body.tv-mode .category-card:hover {
            transform: none !important;
        }
        
        body.tv-mode .filter-btn:hover {
            background: inherit !important;
            color: inherit !important;
        }
        
        /* Large TV screens */
        @media (min-width: 1920px) {
            body.tv-mode .category-card {
                min-height: 300px;
            }
            
            body.tv-mode .card-content h3 {
                font-size: 1.4rem;
            }
            
            body.tv-mode .card-stats {
                font-size: 1rem;
            }
        }
        
        /* 4K TV screens */
        @media (min-width: 3840px) {
            body.tv-mode .category-card {
                min-height: 400px;
            }
            
            body.tv-mode .card-content h3 {
                font-size: 1.8rem;
            }
            
            body.tv-mode .card-stats {
                font-size: 1.3rem;
            }
            
            body.tv-mode .filter-btn {
                min-height: 70px;
                font-size: 1.4rem;
            }
        }

        /* Elegant Filter Section */
        .filter-section {
            position: relative;
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
            padding: 2rem 3%;
            margin-bottom: 2.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            overflow: visible;
            z-index: 3;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .filter-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
            opacity: 0.3;
        }


        .filter-container {
            max-width: 1800px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        .filter-form {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            flex-wrap: wrap;
        }

        .filter-chip {
            position: relative;
            display: inline-block;
            z-index: 100; /* Ensure filter chips are above other elements */
        }

        .filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.6rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 30px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition);
            white-space: nowrap;
            position: relative;
            overflow: hidden;
            z-index: 101; /* Ensure button is clickable */
            pointer-events: auto !important; /* Force enable clicks */
        }

        .filter-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: all 0.5s ease;
            opacity: 0.1;
        }

        .filter-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .filter-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        .filter-btn i {
            font-size: 1rem;
        }

        /* Dropdown Menus */
        .filter-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 0.5rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all var(--transition-fast);
            z-index: 1000; /* High z-index to ensure visibility */
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            pointer-events: none; /* Disable pointer events when hidden */
        }

        .filter-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto; /* Enable pointer events when shown */
        }

        .filter-dropdown-item {
            padding: 0.8rem 1.2rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .filter-dropdown-item:last-child {
            border-bottom: none;
        }

        .filter-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            padding-right: 1.5rem;
        }

        .filter-dropdown-item.active {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(0, 61, 130, 0.1) 100%);
            color: var(--corp-red);
            font-weight: 600;
            padding-right: 1.5rem;
        }

        /* Advanced Filter Dropdown */
        .filter-dropdown-large {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 0.5rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all var(--transition-smooth);
            z-index: 1000; /* High z-index to ensure visibility */
            padding: 1.5rem;
            min-width: 350px;
            pointer-events: none; /* Disable pointer events when hidden */
        }

        .filter-dropdown-large.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto; /* Enable pointer events when shown */
        }

        /* Year Range Filter */
        .year-filter-content label {
            display: block;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .year-inputs {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .year-input {
            flex: 1;
            padding: 0.8rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.95rem;
            transition: all var(--transition-fast);
        }

        .year-input:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(255, 255, 255, 0.08);
        }

        .year-separator {
            color: var(--text-muted);
            font-weight: 500;
        }

        .year-presets {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 0.8rem;
        }

        .year-preset {
            padding: 0.6rem 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            cursor: pointer;
            transition: all var(--transition-fast);
            text-align: center;
        }

        .year-preset:hover {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(0, 61, 130, 0.1) 100%);
            border-color: rgba(220, 53, 69, 0.3);
            color: var(--corp-red);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
        }

        /* IMDb Rating Filter */
        .rating-filter-content {
            min-width: 400px;
        }

        .rating-slider-container {
            position: relative;
        }

        .rating-inputs {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .rating-input-group {
            flex: 1;
        }

        .rating-input-group label {
            display: block;
            color: var(--text-muted);
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
        }

        .rating-input {
            width: 100%;
            padding: 0.8rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.95rem;
            transition: all var(--transition-fast);
        }

        .rating-visual {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            margin-bottom: 0.5rem;
            position: relative;
            overflow: hidden;
        }

        .rating-visual-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: linear-gradient(90deg, var(--corp-red) 0%, var(--gold) 100%);
            border-radius: 4px;
            transition: all var(--transition-fast);
            width: 100%;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }

        .rating-values {
            display: flex;
            justify-content: space-between;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        /* Sort Options */
        .sort-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding-right: 2rem;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sort-label {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .sort-options {
            display: flex;
            gap: 0.5rem;
        }

        .sort-option {
            padding: 0.5rem 1rem;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .sort-option:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .sort-option.active {
            background: linear-gradient(135deg, var(--corp-red) 0%, var(--corp-blue) 100%);
            border-color: var(--corp-red);
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
        }

        /* Submit Button */
        .filter-submit {
            padding: 0.9rem 2.2rem;
            background: var(--accent);
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .filter-submit:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
        }

        .filter-submit i {
            font-size: 1.1rem;
        }

        /* Filter Tags */
        .active-filters {
            display: flex;
            gap: 0.8rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }

        .filter-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(0, 61, 130, 0.1) 100%);
            border: 1px solid rgba(220, 53, 69, 0.2);
            border-radius: 25px;
            color: var(--corp-red-light);
            font-size: 0.85rem;
            font-weight: 600;
            backdrop-filter: blur(5px);
        }

        .filter-tag-remove {
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .filter-tag-remove:hover {
            transform: rotate(90deg);
        }

        /* Special Films Section */
        .special-section {
            padding: 4rem 3%;
            background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            position: relative;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        .special-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--corp-red) 20%,
                var(--corp-blue) 50%,
                var(--corp-red) 80%,
                transparent 100%);
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(0, 61, 130, 0.1) 100%);
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            border: 1px solid rgba(220, 53, 69, 0.2);
            margin-bottom: 1rem;
            color: var(--corp-red);
            font-weight: 600;
            backdrop-filter: blur(10px);
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }

        .section-subtitle {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        /* Special Grid */
        .special-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1800px;
            margin: 0 auto;
        }

        .special-card {
            position: relative;
            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);
            border-radius: 20px;
            overflow: hidden;
            transition: all var(--transition-smooth);
            cursor: pointer;
            aspect-ratio: 16/10;
            border: 1px solid var(--border-color);
            text-decoration: none;
            display: block;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
        }

        .special-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow:
                0 30px 60px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(220, 53, 69, 0.2);
            border-color: rgba(220, 53, 69, 0.4);
        }

        .special-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }

        .special-card:hover img {
            transform: scale(1.1);
        }

        .special-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.2) 30%,
                rgba(0, 0, 0, 0.7) 70%,
                rgba(0, 0, 0, 0.95) 100%
            );
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
            transition: all var(--transition-fast);
        }

        .special-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            line-height: 1.3;
        }

        .special-info {
            display: flex;
            gap: 1rem;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.85rem;
            font-weight: 500;
        }

        .special-info span {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }

        .special-info i {
            color: var(--accent);
            font-size: 0.9rem;
        }

        /* Categories Section */
        /*.categories-section {*/
        /*    padding: 4rem 0;*/
        /*    background: var(--bg-secondary);*/
        /*}*/

        .category-section {
            margin-bottom: 4rem;
            width: 100%;
            max-width: 100%;
            /*overflow-x: hidden;*/
            box-sizing: border-box;
        }

        .category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 3%;
            margin-bottom: 2rem;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .category-title {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .category-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, var(--corp-red) 0%, var(--corp-blue) 100%);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
            font-size: 1.2rem;
        }

        .category-title h3 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .category-more {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--corp-red);
            text-decoration: none;
            font-weight: 600;
            transition: all var(--transition-fast);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            background: rgba(220, 53, 69, 0.05);
            border: 1px solid rgba(220, 53, 69, 0.2);
        }

        .category-more:hover {
            gap: 1rem;
        }

        /* Movie Cards in Swiper */
        .category-slider {
            padding: 0 3%;
            position: relative;
            width: 100%;
            max-width: 100%;
            /*overflow-x: hidden;*/
            box-sizing: border-box;
        }

        .category-swiper.swiper,
        .category-swiper .swiper {
            overflow: hidden !important;
            pointer-events: auto !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Ensure swiper container doesn't interfere */
        .swiper-wrapper {
            pointer-events: auto !important;
        }

        /* Category section styling */
        .category-swiper {
            pointer-events: auto !important;
        }

        /* Limit items shown on desktop */
        @media (min-width: 1200px) {
            .category-swiper .swiper-slide:nth-child(n+13) {
                display: none !important;
            }
        }

        /* Debug mode - uncomment to see hover areas */
        /*
        .movie-card-wrapper::before {
            border: 2px solid rgba(255, 0, 0, 0.5) !important;
            background: rgba(255, 0, 0, 0.1) !important;
        }
        */

        /* Force all movie card elements to respect pointer events properly */
        .movie-card-wrapper {
            pointer-events: auto !important;
        }

        .movie-card {
            pointer-events: auto !important;
        }

        /* Except for these specific elements that should not interfere with hover */
        .movie-overlay,
        .movie-overlay *,
        .placeholder {
            pointer-events: none !important;
        }

        /* Images should allow clicks for modal but not interfere with hover */
        .movie-card img {
            pointer-events: auto !important; /* Allow click for modal */
            cursor: pointer;
        }

        /* But action buttons should always be clickable */
        .movie-actions,
        .action-btn {
            pointer-events: auto !important;
            cursor: pointer;
        }

        /* Ensure hover works on the wrapper level, not image level */
        .movie-card-wrapper:hover .movie-card img {
            pointer-events: auto !important; /* Keep clickable for modal */
        }

        /* Force hover state for JavaScript fallback */
        .movie-card-wrapper.force-hover .movie-card {
            transform: translateY(-10px) scale(1.02) !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), var(--glow) !important;
            z-index: 100 !important;
            border-color: rgba(220, 53, 69, 0.2) !important;
        }

        .movie-card-wrapper.force-hover .movie-card::before {
            opacity: 1 !important;
        }

        .movie-card-wrapper.force-hover img {
            transform: scale(1.1) !important;
        }

        .movie-card-wrapper.force-hover .movie-overlay {
            opacity: 1 !important;
        }

        .movie-card-wrapper.force-hover .movie-actions {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .swiper-slide {
            height: auto;
            position: relative;
            pointer-events: auto !important; /* Ensure slides allow pointer events */
            width: 180px !important; /* Fixed width for movie cards */
            flex-shrink: 0;
            margin-left: 12px; /* Add spacing between cards */
        }

        /* Movie card wrapper for better hover detection */
        .movie-card-wrapper {
            position: relative;
            width: 180px; /* Fixed width to match slide */
            height: auto;
            display: block;
            pointer-events: auto !important; /* Force enable hover interaction */
            flex-shrink: 0;
        }
        
        /* Responsive widths for different screen sizes */
        @media (max-width: 1400px) {
            .swiper-slide {
                width: 160px !important;
            }
            .movie-card-wrapper {
                width: 160px;
            }
        }
        
        @media (max-width: 1200px) {
            .swiper-slide {
                width: 150px !important;
            }
            .movie-card-wrapper {
                width: 150px;
            }
        }
        
        @media (max-width: 992px) {
            .swiper-slide {
                width: 140px !important;
            }
            .movie-card-wrapper {
                width: 140px;
            }
        }
        
        @media (max-width: 768px) {
            .swiper-slide {
                width: 130px !important;
            }
            .movie-card-wrapper {
                width: 130px;
            }
        }
        
        @media (max-width: 576px) {
            .swiper-slide {
                width: 120px !important;
            }
            .movie-card-wrapper {
                width: 120px;
            }
        }

        /* Main hover zone - covers the entire area and extends beyond */
        .movie-card-wrapper::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            z-index: 50; /* High enough but not conflicting with buttons */
            pointer-events: auto;
            /* Increase hover area for better detection */
            /* Debug: add temporary border to see hover area */
            /* border: 1px solid red; opacity: 0.3; */
        }

        /* Ensure hover detection works even on edges */
        .movie-card-wrapper::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            z-index: 60;
            pointer-events: auto;
        }

        .movie-card {
            position: relative;
            background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
            border-radius: 12px;
            overflow: hidden;
            transition: all var(--transition);
            cursor: pointer;
            aspect-ratio: 2/3;
            border: 1px solid rgba(255, 255, 255, 0.06);
            display: block;
            width: 100%;
            height: auto;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            pointer-events: auto !important; /* Force enable hover interaction */
        }

        /* Remove the previous ::after hover area to avoid conflicts */
        /* .movie-card::after is removed to prevent z-index conflicts */

        .movie-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: linear-gradient(to bottom, rgba(220, 53, 69, 0.1) 0%, transparent 100%);
            opacity: 0;
            transition: opacity var(--transition);
            z-index: 2; /* Lower z-index, behind overlay */
            pointer-events: none; /* This should not interfere with hover */
        }

        /* Beautiful hover effect */
        .movie-card-wrapper:hover .movie-card {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), var(--glow);
            z-index: 100;
            border-color: rgba(220, 53, 69, 0.2);
        }

        .movie-card-wrapper:hover .movie-card::before {
            opacity: 1;
        }

        .movie-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
            position: relative;
            z-index: 1; /* Behind overlay but above background */
            pointer-events: none !important; /* Images must not interfere with hover */
        }

        .movie-card-wrapper:hover img {
            transform: scale(1.1);
        }

        .movie-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                to bottom,
                transparent 50%,
                rgba(0, 0, 0, 0.9) 100%
            );
            opacity: 0;
            transition: opacity var(--transition);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1rem;
            z-index: 10; /* Higher z-index to be on top of image */
            pointer-events: none !important; /* Don't interfere with main hover detection */
        }

        .movie-card-wrapper:hover .movie-overlay {
            opacity: 1;
            pointer-events: none !important; /* Keep this as none to not interfere */
        }

        .movie-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--text-secondary);
            font-size: 0.85rem;
            pointer-events: none !important; /* Don't interfere with hover detection */
        }

        .movie-genre {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.2rem 0.6rem;
            border-radius: 15px;
            pointer-events: none !important; /* Don't interfere with hover detection */
        }

        /* Additional hover area improvements */
        .movie-info {
            pointer-events: none !important; /* Don't interfere with hover detection */
        }

        /* Placeholder styling with proper pointer events */
        .placeholder {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255, 255, 255, 0.3);
            font-size: 2rem;
            z-index: 0; /* Behind everything else */
            pointer-events: none !important; /* Placeholder must not interfere */
        }

        .movie-actions {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            gap: 1rem;
            opacity: 0;
            transition: all var(--transition-fast);
            z-index: 150; /* Very high z-index to ensure buttons are always on top */
            pointer-events: none; /* Initially disabled, enabled on hover */
        }

        .movie-card-wrapper:hover .movie-actions {
            opacity: 1;
            pointer-events: auto !important; /* Enable buttons on hover */
        }

        .action-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(220, 53, 69, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition);
            position: relative;
            z-index: 200; /* Highest z-index for individual buttons */
            box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
            pointer-events: auto !important; /* Always allow button interaction */
        }

        .action-btn:hover {
            background: var(--accent);
            transform: scale(1.15) rotate(5deg);
            box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .action-btn:active {
            transform: scale(0.95);
        }

        .action-btn.bookmark-btn {
            transition: all 0.3s ease;
        }

        .action-btn.bookmark-btn.bookmarked {
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
        }

        .action-btn.bookmark-btn.bookmarked i {
            color: #333;
        }

        .action-btn.bookmark-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .action-btn.bookmark-btn i {
            transition: transform 0.2s ease;
        }

        /* Modal - completely hidden when not active */
        .film-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            display: none; /* Completely hidden from DOM interaction */
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none !important; /* Force no pointer events when hidden */
            transition: opacity var(--transition-smooth);
        }

        .film-modal.active {
            display: flex !important; /* Show in DOM when active */
            opacity: 1;
            pointer-events: all !important; /* Enable all interactions when active */
        }

        /* Force modal to be completely non-interactive when hidden */
        .film-modal:not(.active) {
            display: none !important;
            pointer-events: none !important;
            visibility: hidden !important;
            z-index: -1 !important; /* Move behind everything when hidden */
        }

        /* Page scrollbar only (not filter row / every element) */
        html.vod-landing::-webkit-scrollbar,
        body.vod-modern-categories::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        html.vod-landing::-webkit-scrollbar-track,
        body.vod-modern-categories::-webkit-scrollbar-track {
            background: linear-gradient(to bottom, #1a1a1a 0%, #0f0f0f 100%);
            border-radius: 10px;
        }

        html.vod-landing::-webkit-scrollbar-thumb,
        body.vod-modern-categories::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #dc2626 0%, #ef4444 50%, #dc2626 100%);
            border-radius: 10px;
            border: 2px solid #1a1a1a;
        }

        html.vod-landing,
        body.vod-modern-categories {
            scrollbar-width: thin;
            scrollbar-color: #dc2626 #1a1a1a;
        }

        body.vod-modern-categories .filter-dropdown::-webkit-scrollbar,
        body.vod-modern-categories .filter-dropdown-large::-webkit-scrollbar,
        body.vod-modern-categories .modal-content::-webkit-scrollbar {
            width: 8px;
        }

        .modal-content {
            background: var(--bg-card);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            transform: scale(0.9) translateY(20px);
            transition: transform var(--transition-smooth);
        }

        .film-modal.active .modal-content {
            transform: scale(1) translateY(0);
        }

        .modal-inner {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0;
        }

        .modal-poster {
            width: 100%;
            height: 250px;
            margin: 0;
            overflow: hidden;
            position: relative;
            border-radius: 20px 20px 0 0;
            flex-shrink: 0;
        }

        .modal-poster img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
        }

        .modal-details {
            flex: 1;
            padding: 0 2rem 2rem 2rem;
        }

        .modal-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .modal-meta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            color: var(--text-secondary);
        }

        .modal-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 215, 0, 0.1);
            padding: 0.4rem 1rem;
            border-radius: 20px;
            color: var(--gold);
            font-weight: bold;
            border: 1px solid rgba(255, 215, 0, 0.2);
        }

        .modal-description {
            font-size: 1.1rem;
            line-height: 1.7;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .modal-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            border: none;
        }

        .modal-close:hover {
            background: var(--primary);
            transform: rotate(90deg);
        }

        .placeholder {
            display: none;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-hover) 100%);
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 3rem;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px 20px 0 0;
        }

        /* Loading Animation */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            position: relative;
        }

        .spinner {
            width: 100%;
            height: 100%;
            border: 4px solid var(--border-color);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, var(--corp-red) 0%, var(--corp-blue) 100%);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, var(--corp-red-light) 0%, var(--corp-blue-light) 100%);
        }

        /* Responsive Design */
        @media (max-width: 1400px) {
            .special-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
        }

        @media (max-width: 1200px) {
            .hero-title {
                font-size: 3rem;
            }
            .special-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }

        @media (max-width: 992px) {
            .hero-section {
                height: 85vh;
                margin-top: -60px;
                padding-top: 60px;
            }
            .hero-title {
                font-size: 2.5rem;
            }
            .hero-content {
                max-width: 500px;
            }
            .nav-menu {
                display: none;
            }
            .modal-poster {
                width: 100%;
                height: 180px;
            }
            .modal-poster img {
                width: 100%;
                height: 180px;
            }

            /* Limit swiper items on tablet */
            .category-swiper .swiper-slide:nth-child(n+9) {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            .vod-container {
                padding: 0 !important;
                margin: 0 !important;
            }

            .vod-header {
                padding: 0.8rem 4%;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .hero-section {
                min-height: clamp(320px, 58vh, 480px);
                height: auto;
                margin-top: 0;
                padding-top: 60px;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }

            .hero-slider {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            .hero-slide {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            .hero-background {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            .hero-background img,
            .hero-background video {
                width: 100% !important;
                max-width: 100% !important;
                object-fit: cover !important;
                object-position: center !important;
            }

            /* Hide filter section on mobile */
            .filter-section {
                display: none !important;
            }

            /* Hide hero content on mobile */
            .hero-content {
                display: none !important;
            }

            .hero-title {
                font-size: 2rem;
                line-height: 1.2;
                margin-bottom: 1rem;
            }

            .hero-meta {
                flex-wrap: wrap;
                gap: 1rem;
                margin-bottom: 1rem;
            }

            .hero-description {
                font-size: 1rem;
                -webkit-line-clamp: 2;
                line-height: 1.5;
                margin-bottom: 1.5rem;
            }

            .hero-actions {
                gap: 0.8rem;
                flex-wrap: wrap;
            }

            .btn {
                padding: 0.9rem 1.8rem;
                font-size: 1rem;
                width: auto;
                min-width: auto;
            }

            .special-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                padding: 0 3%;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .special-card {
                aspect-ratio: 16/12; /* Better aspect ratio for mobile */
            }

            .special-overlay {
                padding: 1rem;
            }

            .special-title {
                font-size: 1rem;
                margin-bottom: 0.3rem;
            }

            .special-info {
                font-size: 0.75rem;
                gap: 0.5rem;
            }

            .special-info span {
                gap: 0.2rem;
            }

            .special-info i {
                font-size: 0.7rem;
            }

            .section-title {
                font-size: 1.8rem;
                padding: 0 4%;
            }

            /* Better category layout on mobile - Convert to Grid */
            .category-slider {
                padding: 0 4%;
                width: 100% !important;
                max-width: 100% !important;
                /*overflow-x: hidden !important;*/
                box-sizing: border-box !important;
            }

            /* Keep swiper functionality on mobile for touch/swipe */
            .category-swiper .swiper-wrapper {
                display: flex !important;
                transition-timing-function: ease-out;
            }

            .category-swiper .swiper-slide {
                flex-shrink: 0;
                width: 130px !important;
                height: auto !important;
            }

            /* Make movie cards smaller on mobile */
            .movie-card-wrapper {
                width: 130px !important;
            }
            
            .movie-card {
                aspect-ratio: 2/3 !important;
                width: 100% !important;
                height: auto !important;
            }

            /* Adjust overlay for mobile */
            .movie-overlay {
                padding: 0.5rem;
            }

            .movie-info {
                padding: 0.4rem;
            }

            .movie-meta {
                font-size: 0.7rem;
                gap: 0.3rem;
            }

            .movie-genre {
                font-size: 0.65rem;
                padding: 0.2rem 0.4rem;
            }

            /* Smaller action buttons */
            .movie-actions {
                padding: 0.5rem;
                gap: 0.4rem;
            }

            .action-btn {
                width: 28px;
                height: 28px;
                font-size: 0.7rem;
            }

            /* Optimize movie card size for mobile */
            .movie-card {
                aspect-ratio: 2/3 !important;
                height: auto !important;
            }

            .movie-card img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
            }

            .category-header {
                padding: 0 4%;
                margin-bottom: 1rem;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .category-header h2 {
                font-size: 1.5rem;
            }

            /* Hero navigation on tablet */
            .hero-navigation {
                padding: 1.5rem 4%;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .hero-indicators {
                gap: 1rem;
                padding: 0 50px;
                max-width: calc(100% - 100px) !important;
                overflow-x: auto;
                box-sizing: border-box !important;
            }

            .hero-indicator {
                padding: 0.75rem;
                flex-shrink: 0;
                min-width: 120px;
            }

            .indicator-number {
                font-size: 1.5rem;
                min-width: 35px;
            }

            .indicator-title {
                font-size: 0.85rem;
            }

            .hero-arrow {
                width: 40px;
                height: 40px;
            }
        }

        /* PWA Mode - Hide hero content */
        @media (display-mode: standalone) {
            .hero-content {
                display: none !important;
            }

            .hero-section {
                height: 450px;
                min-height: 300px;
                max-height: 50vh;
            }

            .hero-slide img {
                object-fit: contain !important;
                height: auto;
                max-height: 50vh;
            }
        }

        /* Fullscreen Mode */
        @media (display-mode: fullscreen) {
            .hero-content {
                display: none !important;
            }
        }

        @media (max-width: 576px) {
            /* Hide filter section on small mobile */
            .filter-section {
                display: none !important;
            }

            .vod-container {
                padding: 0 !important;
                margin: 0 !important;
            }

            .hero-section {
                height: 250px;
                min-height: 350px;
                margin-top: -60px;
                padding-top: 60px;
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            /* Hide hero content on small mobile */
            .hero-content {
                display: none !important;
            }

            .hero-title {
                font-size: 1.6rem;
                margin-bottom: 0.8rem;
                line-height: 1.2;
            }

            .hero-meta {
                gap: 0.75rem;
                margin-bottom: 1rem;
                flex-wrap: wrap;
            }

            .meta-item {
                font-size: 0.85rem;
            }

            .meta-rating {
                padding: 0.3rem 0.8rem;
                font-size: 0.85rem;
            }

            .hero-description {
                font-size: 0.95rem;
                margin-bottom: 1.5rem;
                line-height: 1.5;
                -webkit-line-clamp: 2;
            }

            .btn {
                padding: 0.8rem 1.5rem;
                font-size: 0.95rem;
                width: auto;
                min-width: auto;
            }

            .hero-badge {
                font-size: 0.75rem;
                padding: 0.4rem 1rem;
                margin-bottom: 0.8rem;
            }

            .special-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.8rem;
                padding: 0 2%;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .special-section {
                padding: 2rem 0;
            }

            .special-card {
                aspect-ratio: 16/11;
            }

            .special-overlay {
                padding: 0.8rem;
                background: linear-gradient(
                    to bottom,
                    transparent 0%,
                    rgba(0, 0, 0, 0.4) 40%,
                    rgba(0, 0, 0, 0.8) 80%,
                    rgba(0, 0, 0, 0.95) 100%
                );
            }

            .special-title {
                font-size: 0.9rem;
                margin-bottom: 0.2rem;
                font-weight: 600;
            }

            .special-info {
                font-size: 0.7rem;
                gap: 0.4rem;
            }

            .special-info span:nth-child(n+3) {
                display: none; /* Hide extra info on small screens */
            }

            .special-info i {
                font-size: 0.65rem;
            }

            .section-title {
                font-size: 1.6rem;
                padding: 0 3%;
            }

            /* Improve mobile category sections - Convert to Grid */
            .category-slider {
                padding: 0 3%;
                width: 100% !important;
                max-width: 100% !important;
                /*overflow-x: hidden !important;*/
                box-sizing: border-box !important;
            }

            /* Keep swiper functionality on small mobile for touch/swipe */
            .category-swiper .swiper-wrapper {
                display: flex !important;
                transition-timing-function: ease-out;
            }

            .category-swiper .swiper-slide {
                flex-shrink: 0;
                width: 120px !important;
                height: auto !important;
            }

            /* Make movie cards even smaller on very small screens */
            .movie-card-wrapper {
                width: 120px !important;
            }
            
            .movie-card {
                aspect-ratio: 2/3 !important;
                width: 100% !important;
                height: auto !important;
            }

            /* Minimize overlay content */
            .movie-overlay {
                padding: 0.4rem;
            }

            .movie-info {
                padding: 0.3rem;
            }

            .movie-meta {
                font-size: 0.65rem;
                gap: 0.2rem;
            }

            .movie-genre {
                font-size: 0.6rem;
                padding: 0.15rem 0.3rem;
            }

            /* Even smaller action buttons */
            .movie-actions {
                padding: 0.4rem;
                gap: 0.3rem;
            }

            .action-btn {
                width: 25px;
                height: 25px;
                font-size: 0.65rem;
            }

            /* Optimize movie card size for small mobile */
            .movie-card {
                aspect-ratio: 2/3 !important;
                height: auto !important;
            }

            .movie-card img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
            }

            .category-header {
                padding: 0 3%;
                margin-bottom: 0.8rem;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .category-header h2 {
                font-size: 1.3rem;
            }

            .category-more {
                font-size: 0.85rem;
                padding: 0.4rem 0.8rem;
            }

            /* Hero navigation on mobile */
            .hero-navigation {
                padding: 1rem 3%;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .hero-indicators {
                gap: 0.5rem;
                padding: 0 40px;
                flex-wrap: nowrap;
                overflow-x: auto;
                scrollbar-width: none;
                max-width: calc(100% - 80px) !important;
                box-sizing: border-box !important;
            }

            .hero-indicators::-webkit-scrollbar {
                display: none;
            }

            .hero-indicator {
                min-width: 120px;
                padding: 0.5rem;
                flex-shrink: 0;
            }

            .indicator-number {
                font-size: 1.2rem;
                min-width: 30px;
            }

            .indicator-title {
                font-size: 0.75rem;
            }

            .indicator-genre {
                display: none;
            }

            .hero-arrow {
                width: 35px;
                height: 35px;
            }

            .hero-arrow i {
                font-size: 1rem;
            }
        }