 /* --- Global Styles & Variables --- */
        :root {
            --bg-color: #1b1c23;
            --card-bg-color: #1f1f1f;
            --text-color: #ffffff;
            --text-secondary-color: #aaaaaa;
            --accent-color: #e50914; /* wedotv red */
            --accent-color-rgb: 229, 9, 20; /* For rgba usage */
            --accent-color-alt: #f7a800; /* wedotv orange/yellow */
            --font-family: 'Montserrat', sans-serif;
            --header-height: 68px; /* Standard header height */ 
            --header-bg-scrolled: rgba(20, 20, 20, 0.95);
            --footer-gradient-top: #242739;
            --footer-gradient-bottom: #090a14;
            --footer-border-color: #3b4065;
            --base-border-radius: 5px;
            --base-font-size: 16px;
            --live-badge-bg: #cc0000;
            --sports-card-bg: #242739;
        }

        /* --- Sticky Footer CSS --- */
        html { height: 100%; }
        body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-family); line-height: 1.5; font-size: var(--base-font-size); overflow-x: hidden; }
        main { flex-grow: 1; }
        /* --- End Sticky Footer CSS --- */

        * { box-sizing: border-box; }
        a { color: var(--text-secondary-color); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; font-size: inherit; }
        a:hover { color: var(--text-color); }
        img { max-width: 100%; height: auto; display: block; }
        button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; font-size: inherit; }
        .container { width: 90%; max-width: 1400px; margin: 0 auto; padding: 20px 0; }

        .carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: red;
  width: 0%;
  transition: width 0.3s ease;
}

#start-player-button {
    position: relative;
}
#start-player-button .carousel-progress {
    background-color: white;
    bottom:6px;
    right:6px; left:6px;
}
        /* --- Header --- */
        .main-header { background-color: transparent; padding: 0 5%; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; left: 0; right: 0; z-index: 100; gap: 20px; transition: background-color 0.3s ease; }
        .main-header.header-scrolled { background-color: var(--header-bg-scrolled); }
        .header-left { display: flex; align-items: center; gap: 30px; flex-shrink: 0; }
        .logo { width: 185px; height: 50px; width: auto; display: block; }
        .main-nav { flex-grow: 1; display: flex; justify-content: center; }
        .main-nav ul { list-style: none; margin:0; padding:0; display: flex; gap: 25px; }
        .main-nav a { font-weight: bold; padding: 5px 0; position: relative; color: var(--text-secondary-color); transition: color 0.2s ease; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); font-size: 1em; }
        .main-nav a:hover { color: var(--text-color); }
        .main-nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background-color: var(--accent-color); transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left; }
        .main-nav a.active::after, .main-nav a:hover::after { transform: scaleX(1); }
        .main-nav a.active { color: var(--text-color); }
        .header-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
        .header-right .fa-solid, .header-right .fa-regular, .header-right .fa-brands, .header-right .user-icon-link .fa-solid { font-size: 1.2rem; color: var(--text-color); cursor: pointer; transition: color 0.2s ease; padding: 5px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
        .header-right .fa-solid:hover, .header-right .fa-regular:hover, .header-right .fa-brands:hover, .header-right .user-icon-link:hover .fa-solid { color: var(--text-secondary-color); }
        
        .search-container { position: relative; display: flex; align-items: center; }
        .desktop-search-input { background-color: rgba(0, 0, 0, 0.5); border: 1px solid var(--text-secondary-color); color: var(--text-color); padding: 6px 30px 6px 10px; border-radius: var(--base-border-radius); height: 34px; width: 200px; transition: background-color 0.3s ease, border-color 0.3s ease; font-size: 0.9em; }
        .desktop-search-input:focus { background-color: rgba(0, 0, 0, 0.7); border-color: var(--text-color); outline: none; }
        .mobile-search-trigger { display: none; /* Hidden by default, shown in media query */ }

        .dropdown-container { position: relative; }
        #language-toggle { background: none; border: none; padding: 0; margin: 0; }
        #language-toggle .fa-globe { font-size: 1.2rem; color: var(--text-color); padding: 5px; transition: color 0.2s ease; display: block; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
        #language-toggle:hover .fa-globe { color: var(--text-secondary-color); }
        .dropdown-menu { display: block; position: absolute; top: calc(100% + 5px); right: 0; background-color: var(--card-bg-color); border-radius: var(--base-border-radius); list-style: none; padding: 10px 0; margin:0; min-width: 120px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); z-index: 110; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; pointer-events: none; }
        .dropdown-container.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
        .dropdown-menu li a { display: block; padding: 8px 15px; color: var(--text-secondary-color); white-space: nowrap; font-size: 0.9em; }
        .dropdown-menu li a:hover, .dropdown-menu li a:focus { background-color: rgba(255, 255, 255, 0.1); color: var(--text-color); outline: none; }
        .user-icon-link { display: flex; align-items: center; justify-content: center; background-color: var(--accent-color); color: var(--text-color); width: 34px; height: 34px; border-radius: var(--base-border-radius); transition: background-color 0.2s ease; }
        .user-icon-link:hover { background-color: #c40812; color: var(--text-color); }
        .user-icon-link .fa-user { font-size: 1rem; padding: 0; text-shadow: none; }

        /* --- Hero Section (Styles remain largely the same) --- */
        .hero-section-wrapper { position: relative; margin-bottom: 30px; }
       /* .hero-slide, .movie-detail-hero { position: relative; min-height: 70vh; padding-bottom: 5%; display: flex !important; align-items: flex-end; overflow: hidden; }
       */
       
        .hero-slide {
    position: relative;
    height: 100vh; 
    display: flex !important;
    align-items: flex-end;
    overflow: hidden;
}


       .movie-detail-hero {
    position: relative;
        height: 90vh; 

    display: flex !important;
    align-items: flex-end;
    overflow: hidden;
}
       
        .hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
        .hero-background-placeholder { width: 100%; height: 100%; background-color: #333; display: flex; align-items: center; justify-content: center; font-size: 2em; color: #666; text-align: center; background-size: cover; background-position: center; transition: opacity 0.5s ease; }
        .hero-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: -2; opacity: 0; transition: opacity 0.5s ease; }
        .hero-video.visible { opacity: 1; z-index: -1; }
        .hero-background-placeholder.hidden { opacity: 0; }
        
        
        .hero-slide::after, .movie-detail-hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, var(--bg-color) 20%, transparent); z-index: 0; pointer-events: none; }
        .hero-slide::before, .movie-detail-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(27, 28, 35, 0.7) 0%, rgba(27, 28, 35, 0) 40%), linear-gradient(to right, rgba(27, 28, 35, 0.9) 0%, rgba(27, 28, 35, 0) 50%); z-index: 0; pointer-events: none; }
        .hero-content { max-width: 50%; width: 90%; margin-left: 5%; z-index: 1; position: relative; padding-bottom: 40px; padding-top: var(--header-height); }
        .hero-badges { display: flex; gap: 10px; margin-bottom: 15px; }
        .hero-badge { display: inline-block; padding: 4px 12px; border-radius: 15px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; line-height: 1.2; }
        .hero-badge.series { border: 1px solid var(--text-color); color: var(--text-color); background-color: transparent; }
        .hero-badge.new-episode { background-color: var(--text-color); color: var(--bg-color); border: 1px solid var(--text-color); }
        .hero-title { font-size: 2.5em; font-weight: bold; margin-bottom: 15px; }
        .hero-description { font-size: 1.1em; margin-bottom: 15px; color: var(--text-secondary-color); max-width: 80%; }
        .hero-meta { font-size: 1em; color: var(--text-secondary-color); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .meta-item { display: flex; align-items: center; gap: 5px; }
        .meta-icon-placeholder { width: 20px; height: 20px; background-color: var(--text-secondary-color); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8em; color: var(--bg-color); font-weight: bold; }
        .meta-icon-placeholder.age-rating { border-radius: var(--base-border-radius); padding: 1px 4px; width: auto; height: auto; font-size: 0.9em; }
        
        .hero-content .watch-button, #start-player-button, #episodeDetailPage-details-modal .watch-button { display: inline-flex; align-items: center; gap: 8px; background-color: var(--accent-color); color: var(--text-color); padding: 12px 25px; border: none; border-radius: var(--base-border-radius); font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
       #start-player-button:hover { background-color: #c40812; }
        #start-player-button .fa-circle-play { font-size: 1.2em; line-height: 1; }
        .hero-video-controls { position: absolute; bottom: 25px; right: 5%; z-index: 5; display: flex; gap: 15px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
        .hero-video-controls.visible { opacity: 1; visibility: visible; }
        .hero-video-controls button { background-color: rgba(20, 20, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.5); color: var(--text-color); width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease; }
        .hero-video-controls button:hover { background-color: rgba(20, 20, 20, 0.8); border-color: var(--text-color); }
        .hero-section-wrapper .slick-dots { bottom: 25px; display: block !important; }
        .hero-section-wrapper .slick-dots li { margin: 0 5px; }
        .hero-section-wrapper .slick-dots li button { width: 10px; height: 10px; padding: 0; }
        .hero-section-wrapper .slick-dots li button:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); opacity: 1; transition: background-color 0.2s ease; }
        .hero-section-wrapper .slick-dots li.slick-active button:before { background-color: var(--text-color); }

        /* --- Carousel Sections --- */
        .carousel-section { margin-bottom: 40px; padding: 0; }
        .carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 5%; }
        .carousel-title { font-size: 1.5em; font-weight: bold; }
        .view-all-link { font-size: 0.9em; color: var(--text-secondary-color); text-transform: uppercase; border: 1px solid var(--text-secondary-color); padding: 5px 10px; border-radius: var(--base-border-radius); display: inline-flex; align-items: center; gap: 5px; }
        .view-all-link:hover { color: var(--text-color); border-color: var(--text-color); background-color: rgba(255, 255, 255, 0.1); }
        .view-all-link .fa-chevron-right { font-size: 0.8em; }
        .carousel-items { margin: 0; padding: 0 4%; }
        .slick-slide { margin: 0 8px; height: auto !important; }
        .carousel-item-placeholder { aspect-ratio: 2 / 3; background-color: #444; border-radius: var(--base-border-radius); display: flex !important; align-items: center; justify-content: center; color: var(--text-secondary-color); font-size: 0.9em; text-align: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; position:relative; /* For play button */ }
        .carousel-item-placeholder:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); }
        .slick-prev, .slick-next { z-index: 1; width: 40px; height: 40px; background-color: rgba(20, 20, 20, 0.7); border-radius: 50%; transition: background-color 0.2s ease; }
        .slick-prev:hover, .slick-next:hover { background-color: rgba(20, 20, 20, 0.9); }
        .slick-prev { left: 15px; }
        .slick-next { right: 15px; }
        .slick-prev:before, .slick-next:before { font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px; color: var(--text-color); opacity: 0.8; transition: opacity 0.2s ease; }
        .slick-prev:hover:before, .slick-next:hover:before { opacity: 1; }
        .slick-prev:before { content: '\f053'; }
        .slick-next:before { content: '\f054'; }
        .slick-dots { display: none !important; }

        /* --- Item Hover Effect (Carousel & Grid) --- */
        .carousel-item-placeholder > span, /* Target the span with background image */
        .grid-item-thumbnail,
        .episode-thumbnail,
        .event-card-image-placeholder,
        .playlist-item-thumbnail {
             position: relative;
             display: block;
        }
        .carousel-item-placeholder > span::after, /* For items where image is on a span */
        .grid-item-thumbnail::after,
        .episode-thumbnail::after,
        .event-card-image-placeholder::after,
        .playlist-item-thumbnail::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            transition: background-color 0.3s ease;
            z-index: 1;
        }
        .carousel-item-placeholder:hover > span::after,
        .grid-item-card:hover .grid-item-thumbnail::after,
        .episode-card:hover .episode-thumbnail::after,
        .event-card:hover .event-card-image-placeholder::after,
        .playlist-item-card:hover .playlist-item-thumbnail::after {
            background-color: rgba(0, 0, 0, 0.7);
        }
        .play-button-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 60px; 
            height: 60px;
            background-color: rgba(var(--accent-color-rgb), 0.85);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-color);
            font-size: 1.8em; /* Icon size relative to button */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
            z-index: 2;
            border: 2px solid var(--text-color);
            box-shadow: 0 0 15px rgba(0,0,0,0.5);
            line-height: 1; /* Improved vertical centering for Font Awesome icon */
        }
        .play-button-overlay .fas.fa-play {
             margin-left: 4px; /* Fine-tune for visual centering of the play icon triangle */
             margin-top: 1px; /* Minor adjustment if needed */
        }


        .carousel-item-placeholder:hover .play-button-overlay,
        .grid-item-card:hover .play-button-overlay,
        .episode-card:hover .play-button-overlay,
        .event-card:hover .play-button-overlay,
        .playlist-item-card:hover .play-button-overlay {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }
        /* --- End Item Hover Effect --- */


        /* --- Banner Section --- */
        .banner-section { margin: 40px 0; padding: 0 5%; }
        .banner-placeholder { width: 100%; aspect-ratio: 5 / 1; background-color: var(--accent-color-alt); border-radius: var(--base-border-radius); display: flex; align-items: center; justify-content: center; color: var(--bg-color); font-size: 1.8em; font-weight: bold; text-align: center; }

        /* --- Details Tab Section & Static Page Content --- */
        .details-tabs-section, .static-page-content { padding: 0 5%; margin-bottom: 40px; }
        .tab-navigation { display: flex; gap: 25px; border-bottom: 1px solid var(--footer-border-color); margin-bottom: 25px; }
        .tab-button { padding: 10px 0; font-size: 1.2em; font-weight: bold; color: var(--text-secondary-color); position: relative; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 0.2s ease; }
        .tab-button:hover { color: var(--text-color); }
        .tab-button.active { color: var(--text-color); border-bottom-color: var(--text-color); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .details-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; font-size: 1em; }
        .details-column p, .details-column ul, .static-page-content .content-area p, .static-page-content .content-area ul { margin-bottom: 15px; color: var(--text-secondary-color); }
        .details-column strong, .static-page-content .content-area strong { color: var(--text-color); font-weight: bold; }
        .details-column ul, .static-page-content .content-area ul { list-style: disc; padding-left: 20px; margin-left:0; }
        .static-page-content .content-area h3 { font-size: 1.3em; color: var(--text-color); margin-top: 25px; margin-bottom: 10px; border-bottom: 1px dashed var(--footer-border-color); padding-bottom: 5px;}
        .details-column li, .static-page-content .content-area li { margin-bottom: 8px; }
        .details-column h3 { font-size: 1.1em; color: var(--text-color); margin-bottom: 10px; }
        .language-icons, .share-icons { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
        .language-icon-placeholder, .share-icon-placeholder { width: 24px; height: 24px; background-color: var(--text-secondary-color); border-radius: var(--base-border-radius); display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: var(--bg-color); }
        .share-icon-placeholder { background-color: var(--accent-color); color: var(--text-color); font-size: 1.1em; transition: background-color 0.2s ease; }
        .share-icon-placeholder:hover { background-color: #c40812; }

        /* Episodes Grid (Series Detail) */
        .episodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
        .episode-card { background-color: var(--card-bg-color); border-radius: var(--base-border-radius); overflow: hidden; text-decoration: none; color: var(--text-secondary-color); display:flex; flex-direction:column; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; /* For play button */ }
        .episode-thumbnail { aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; /* For overlay */ }
        .episode-info { padding: 15px; flex-grow:1; display:flex; flex-direction:column; }
        .episode-info h4 { font-size: 1.1em; color: var(--text-color); margin-bottom: 5px; }
        .episode-info p { font-size: 0.9em; margin-bottom: 8px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; flex-grow:1; }
        .episode-info small { font-size: 0.8em; display:block; margin-top:auto; color:var(--text-secondary-color); padding-top: 5px; }

        /* --- Sports Section --- */
        .sports-section { padding: 0; margin-bottom: 40px; }
        .sports-section .carousel-header { padding: 0 5%; }
        .event-card { background-color: var(--sports-card-bg); border-radius: var(--base-border-radius); overflow: hidden; display: flex !important; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; position: relative; /* For play button */ }
        .event-card-image-placeholder { width: 100%; aspect-ratio: 16 / 9; background-color: #444; display: flex; align-items: center; justify-content: center; color: var(--text-secondary-color); position: relative; background-size:cover; background-position:center; }
        .event-card-image-placeholder > span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.5); padding:5px 10px; border-radius:3px; color:white; font-weight:bold; }
        .live-badge { position: absolute; top: 10px; right: 10px; background-color: var(--live-badge-bg); color: var(--text-color); padding: 3px 8px; border-radius: var(--base-border-radius); font-size: 0.75em; font-weight: bold; text-transform: uppercase; z-index: 3; /* Above overlay */ }
        .live-badge::before { content: '•'; margin-right: 4px; }
        .event-card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .event-card-date { font-size: 0.8em; color: var(--text-secondary-color); margin-bottom: 5px; text-transform: uppercase; background-color: red;
position: absolute;
margin-top: -20px;
left: 0px;
padding: 5px 10px;
color: white;}
        .event-card-title { font-size: 1.1em; font-weight: bold; color: var(--text-color); margin-bottom: 5px; }
        .event-card-time { font-size: 0.9em; color: var(--text-secondary-color); margin-bottom: 10px; }
        .event-card-description { font-size: 0.9em; color: var(--text-secondary-color); margin-bottom: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
        .event-card-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; background-color: var(--accent-color); color: var(--text-color); border-radius: var(--base-border-radius); text-align: center; font-weight: bold; font-size: 0.9em; transition: background-color 0.2s ease; margin-top: auto; align-self: flex-start; }
        .event-card-button.details { background-color: var(--text-secondary-color); color: var(--bg-color); }
        .event-card-button:hover { background-color: #c40812; }
        .event-card-button.details:hover { background-color: var(--text-color); }
        .event-card-button i { font-size: 1em; line-height: 1; }

        /* Schedule Section */
        .schedule-section { padding: 0 5%; margin-top: 50px; }
        .schedule-title { font-size: 1.5em; font-weight: bold; margin-bottom: 25px; }
        .schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .schedule-column { position: relative; }
        .schedule-column h3 { font-size: 1.3em; font-weight: bold; color: var(--text-color); margin-bottom: 20px; border-bottom: 1px solid var(--footer-border-color); padding-bottom: 10px; padding-right: 30px; }
        .schedule-column-icon { position: absolute; top: 0; right: 0; font-size: 1.5em; color: var(--text-secondary-color); opacity: 0.5; }
        .schedule-item { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; background-color: var(--sports-card-bg); border-radius: var(--base-border-radius); padding: 15px; transition: transform 0.2s ease; }
        .schedule-item:hover { transform: scale(1.02); }
        .schedule-item-image-placeholder { flex-shrink: 0; width: 80px; height: 50px; background-color: #444; border-radius: var(--base-border-radius); background-size:cover; background-position:center; }
        .schedule-item-content { flex-grow: 1; display: flex; flex-direction: column; }
        .schedule-item-title { font-size: 1em; font-weight: bold; color: var(--text-color); margin-bottom: 3px; }
        .schedule-item-description { font-size: 0.85em; color: var(--text-secondary-color); margin-bottom: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .schedule-item-meta { display: flex; flex-direction: column; align-items: center; font-size: 0.8em; color: var(--text-secondary-color); margin-left: auto; text-align: center; padding-left: 10px; }
        .schedule-item-date { background-color: var(--accent-color); color: var(--text-color); padding: 3px 6px; border-radius: var(--base-border-radius); text-align: center; line-height: 1.1; margin-bottom: 3px; }
        .schedule-item-date strong { display: block; font-size: 1.2em; font-weight: bold; }
        .schedule-item-time { font-weight: bold; }
        .full-schedule-button { display: block; width: 100%; padding: 10px; margin-top: 10px; background-color: var(--accent-color); color: var(--text-color); text-align: center; font-weight: bold; border-radius: var(--base-border-radius); transition: background-color 0.2s ease; }
        .full-schedule-button:hover { background-color: #c40812; }

        /* --- Footer --- */
        .main-footer { background: linear-gradient(to bottom, var(--footer-gradient-top), var(--footer-gradient-bottom)); padding: 40px 5%; margin-top: auto; color: var(--text-secondary-color); }
        .footer-top { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; }
        .footer-links-container { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; }
        .footer-column h4 { color: var(--text-color); margin-bottom: 15px; font-size: 1.1em; }
        .footer-column ul { list-style: none; margin:0; padding:0; }
        .footer-column li { margin-bottom: 10px; position: relative; padding-left: 15px; }
        .footer-column li.footer-logo-item::before, .footer-column.social-column li::before, .footer-column.info-column li::before { content: none; }
        .footer-column li.footer-logo-item, .footer-column.social-column li, .footer-column.info-column li { padding-left: 0; margin-bottom: 0; }
        .footer-column li.footer-logo-item { margin-bottom: 15px; }
        .footer-logo { height: 25px; width: auto; filter: brightness(0) invert(1); }
        .footer-column li::before { content: '•'; color: var(--accent-color); position: absolute; left: 0; top: 0; font-size: 1.1em; line-height: inherit; }
        .footer-column.info-column p { font-size: 1em; line-height: 1.5; }
        .footer-column a { font-size: 1em; }
        .social-icons { display: flex; gap: 10px; list-style: none; padding-left: 0; margin:0; align-items: center; }
        .social-icons li a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--accent-color); border-radius: var(--base-border-radius); color: var(--text-color); transition: background-color 0.2s ease; }
        .social-icons li a:hover { background-color: #c40812; color: var(--text-color); }
        .social-icons .fab { font-size: 1.1rem; line-height: 1; }
        .footer-bottom { text-align: center; font-size: 0.9em; margin-top: 20px; border-top: 1px solid var(--footer-border-color); padding-top: 20px; }
        .footer-column li {
            list-style: none; margin: 0; padding-left:15px;
        }
        /* --- Hamburger Menu --- */
        .hamburger-icon { display: none; cursor: pointer; padding: 5px; z-index: 1101; position: relative; }
        .hamburger-icon .fa-bars { font-size: 1.2rem; color: var(--text-color); }

        /* --- Modal Styles (User, Mobile Menu & Search) --- */
        .modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; transition: opacity 0.2s ease, visibility 0.2s ease; }
        .modal-content { background-color: var(--card-bg-color); margin: auto; padding: 30px; border-radius: var(--base-border-radius); width: 90%; max-width: 500px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.2s ease; }
        #mobile-menu-modal .modal-content { max-width: 300px; padding: 20px; }
        #mobile-menu-modal ul { list-style: none; padding: 0; margin: 0; }
        #mobile-menu-modal li { margin-bottom: 15px; }
        #mobile-menu-modal a { color: var(--text-color); font-size: 1.2em; font-weight: bold; display: block; padding: 5px 0; }
        #mobile-menu-modal a:hover { color: var(--accent-color); }
       
        .modal-close-button { color: var(--text-secondary-color); position: absolute; top: 10px; right: 15px; font-size: 1.8rem; font-weight: bold; cursor: pointer; line-height: 1; }
        .modal-close-button:hover, .modal-close-button:focus { color: var(--text-color); text-decoration: none; }
        .modal-active { display: flex; opacity: 1; visibility: visible; }
        .modal-active .modal-content { transform: scale(1); }

        /* --- Genre Selection & Grid View --- */
        .genre-selection-container { padding: 20px 5%; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .genre-selection-container label { font-weight: bold; color: var(--text-color); }
        /* Custom Select Dropdown (for Genre) */
        .custom-select-container {
            position: relative;
            display: inline-block;
            min-width: 220px; /* Adjust width as needed */
        }
        .custom-select-trigger {
            background-color: var(--card-bg-color);
            color: var(--text-color);
            padding: 8px 12px;
            border: 1px solid var(--text-secondary-color);
            border-radius: var(--base-border-radius);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 1em;
            transition: border-color 0.2s ease;
        }
        .custom-select-trigger:hover { border-color: var(--text-color); }
        .custom-select-trigger .fa-chevron-down { margin-left: 10px; transition: transform 0.2s ease; }
        .custom-select-container.active .custom-select-trigger .fa-chevron-down { transform: rotate(180deg); }
        .custom-select-options {
            display: none; /* JS will toggle this */
            position: absolute;
            top: calc(100% + 2px); /* Small gap */
            left: 0;
            right: 0;
            background-color: var(--card-bg-color);
            border: 1px solid var(--text-secondary-color);
            border-top: none; /* Avoid double border with trigger */
            border-radius: 0 0 var(--base-border-radius) var(--base-border-radius);
            z-index: 110; /* Higher than header */
            max-height: 200px;
            overflow-y: auto;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        }
        .custom-select-container.active .custom-select-options { display: block; }
        .custom-select-options a.custom-select-option {
            display: block;
            padding: 10px 15px;
            color: var(--text-secondary-color);
            text-decoration: none;
            white-space: nowrap;
            font-size: 0.95em;
        }
        .custom-select-options a.custom-select-option:hover,
        .custom-select-options a.custom-select-option.selected {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
        }
        .items-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; padding: 0 5%; }
        .grid-item-card { text-decoration: none; color: inherit; background-color: var(--card-bg-color); border-radius: var(--base-border-radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; /* For play button */ }
        /* .grid-item-card:hover moved to general item hover */
        .grid-item-thumbnail { aspect-ratio: 2 / 3; background-size: cover; background-position: center; background-color: #444; position: relative; /* For overlay */ }
        .grid-item-info { padding: 10px; }
        .grid-item-info h4 { font-size: 0.95em; color: var(--text-color); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .grid-item-info p { font-size: 0.8em; color: var(--text-secondary-color); margin: 0; }
        /* --- End Genre Selection & Grid View --- */


        /* --- Responsiveness --- */
        @media (max-width: 992px) { /* Tablet and larger mobile */
            :root { --base-font-size: 15px; }
            .main-header { padding: 0 3%; }
            .header-left { gap: 20px; }
            .main-nav ul { gap: 15px; }
            .header-right { gap: 15px; }
            .desktop-search-input { width: 150px; }
            .hero-content { max-width: 70%; margin-left: 3%;}
            .hero-title { font-size: 2em; }
            .hero-description { font-size: 1em; }
            .banner-placeholder { font-size: 1.5em; }
        }

        @media (max-width: 768px) { /* Smaller tablets and mobile */
            :root { --base-font-size: 16px; }
            .main-nav { display: none; }
            .hamburger-icon { display: block; }
            .header-left { flex-grow: 0; }
            .main-header { justify-content: space-between; }
            
            .desktop-search-input { display: none !important; }
            .mobile-search-trigger {
                display: flex !important;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--text-secondary-color);
                border-radius: var(--base-border-radius);
                width: 34px; height: 34px;
                background: transparent;
                color: var(--text-secondary-color);
             }
            .mobile-search-trigger .fa-search { font-size: 1rem; }
            .mobile-search-trigger:hover { border-color: var(--text-color); color: var(--text-color); }
            .mobile-search-trigger:hover .fa-search { color: var(--text-color); }

            /* Mobile Hero Height & Controls */
            .hero-slide, .movie-detail-hero {
                min-height: 50vh; 
                max-height: 80vh;
            }
            .hero-video-controls.visible { /* Ensure controls are visible if JS enables them */
                opacity: 1 !important;
                visibility: visible !important;
                bottom: 15px; 
                right: 15px;
            }
            .hero-video-controls button {
                width: 35px; height: 35px; font-size: 0.9rem;
            }
            .hero-section-wrapper .slick-dots { /* Ensure dots are visible for hero on mobile */
                display: block !important;
                bottom: 15px; 
            }
            .hero-section-wrapper .slick-dots li button { width: 8px; height: 8px;}
            .hero-section-wrapper .slick-dots li button:before { width: 6px; height: 6px;}


            .hero-content { padding-top: calc(var(--header-height) + 10px); max-width: 90%; margin-left: 5%; }
            .hero-title { font-size: 1.8em; }
            .hero-meta { flex-wrap: wrap; font-size: 0.9em;}
            .carousel-title { font-size: 1.3em; }
            .banner-placeholder { font-size: 1.2em; aspect-ratio: 4 / 1; }
            .details-content-grid { grid-template-columns: 1fr; }
            .schedule-grid { grid-template-columns: 1fr; }
            
            .footer-links-container { grid-template-columns: 1fr; text-align: center; }
            .footer-column {  }
            .footer-column:last-child { margin-bottom: 0; }
            .footer-column ul { padding-left: 0; }
            .footer-column li { display: block; padding-left: 0; margin-bottom: 8px; text-align: center; }
            .footer-column li::before { content: none; }
            .social-icons { justify-content: center; }

            .modal-content { width: 95%; padding: 20px; }
            #search-modal .modal-content { max-width: 95%; }
            .modal-close-button { font-size: 1.5rem; top: 8px; right: 10px;}

            .items-grid-view {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
                gap: 15px;
            }
            .genre-selection-container { flex-direction: column; align-items: stretch; }
            .custom-select-container { width: 100%; min-width: unset; }

            .play-button-overlay {
                width: 50px;
                height: 50px;
                font-size: 1.5em;
            }
            .play-button-overlay .fas.fa-play {
                 margin-left: 2px; /* Adjust for smaller button */
                 margin-top: 0; /* Reset any top margin */
            }
        }

         @media (max-width: 576px) { /* Small mobile */
             .main-header { padding: 0 5%; }
             .logo { height: 25px; }
             .header-right { gap: 10px; }
             .mobile-search-trigger { width: 30px; height: 30px; }
             .mobile-search-trigger .fa-search { font-size: 0.9rem; }
             .header-right .fa-solid, .header-right .fa-regular, .header-right .fa-brands, .header-right .user-icon-link .fa-solid { font-size: 1rem; padding: 3px;}
             .user-icon-link { width: 30px; height: 30px; }
             .user-icon-link .fa-user { font-size: 0.9rem; }
             .hero-content { max-width: 90%; margin-left: 5%; }
             .hero-title { font-size: 1.5em; }
             .movie-detail-hero .hero-description { display: block; font-size: 1em; }
             .hero-badges { margin-bottom: 10px; }
             .hero-badge { font-size: 0.75em; padding: 3px 10px; }
             .hero-meta { font-size: 0.85em; gap: 6px; }
             .meta-icon-placeholder { width: 16px; height: 16px; font-size: 0.65em;}
             .watch-button { padding: 10px 20px; font-size: 1em; }
             .watch-button .fa-circle-play { font-size: 1.1em; }
             .carousel-title { font-size: 1.1em; }
             .banner-placeholder { font-size: 1em; }
             .tab-button { font-size: 1.1em; }
             .schedule-item-image-placeholder { width: 80px; height: 45px; }
             .schedule-item { padding: 10px; }
             .schedule-item-meta { font-size: 0.75em; }
             
             .footer-links-container { grid-template-columns: 1fr; }
             .footer-column h4 { font-size: 1em; }
             .footer-column a { font-size: 0.9em; }
             .footer-column.info-column p { font-size: 0.9em; }
             .footer-bottom { font-size: 0.8em; }
             .social-icons li a { width: 30px; height: 30px; }
             .social-icons .fab { font-size: 1rem; }

            .view-all-link .fa-chevron-right { display: none; }
            .carousel-items.slick-slider.slick-variable-width .slick-slide { margin-right: 10px; }
            .carousel-items.slick-slider.slick-variable-width .slick-list { margin-right: -10px; }
             .play-button-overlay {
                width: 45px;
                height: 45px;
                font-size: 1.3em;
            }
            .play-button-overlay .fas.fa-play {
                 margin-left: 2px; /* Adjust for smallest button */
                 margin-top: 0; /* Reset any top margin */
            }
         }


    .carousel-item-placeholder {
    /* Default to portrait */
    aspect-ratio: 2 / 3; 
    background-color: #444;
    border-radius: var(--base-border-radius);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-color);
    font-size: 0.9em;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

/* Specific overrides for other aspect ratios */
.js-carousel-landscape .carousel-item-placeholder,
.js-carousel-landscape .slick-slide > div {
    aspect-ratio: 16 / 9; /* Widescreen */
}

.js-carousel-1x1 .carousel-item-placeholder,
.js-carousel-1x1 .slick-slide > div {
    aspect-ratio: 1 / 1; /* Square */
}

.share-icons a {
    padding: 15px;
}

.watch-button:hover {
    cursor: pointer;
}

.carousel-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    padding-right:10px;
}

/* This targets screens 768px wide or smaller */
@media (max-width: 768px) {
    .footer-links-container img {
        display: block; /* This is needed for margin:auto to work on an image */
        margin-left: auto;
        margin-right: auto;
    }
}

 .styled-input {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 15px;
                background: #f8f8f8;
                transition: border-color 0.2s;
            }
            .styled-input:focus {
                border-color: #e50914;
                outline: none;
                background: #fff;
            }
            .red-btn {
                background: #e50914;
                color: #fff;
                border: none;
                padding: 10px 0;
                width: 100%;
                border-radius: 4px;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
                margin-top: 10px;
                transition: background 0.2s;
            }
            .red-btn:hover, .red-btn:focus {
                background: #b0060f;
            }
            .recover-password-link {
                margin-top: 6px;
                text-align: right;
            }
            /* === User modal overlay & dialog === */
#user-modal.modal-overlay {
  position: fixed;
  inset: 0;                    /* top/right/bottom/left: 0 */
  display: flex;               /* 🔑 enables flex-box centering */
  align-items: center;         /* vertical centering */
  justify-content: center;     /* horizontal centering */
  background: rgba(0,0,0,.6);  /* dim the page */
  z-index: 1050;               /* sit above Bootstrap 4 elements */
}

#user-modal .modal-content {
  padding: 2rem 2.5rem;
  max-width: 480px;
  width: 90%;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35);
}

/* hide/show helpers already used by your script */
.user-modal-form { display: none; }
.user-modal-form.active { display: block; }
   
   
        .user-modal-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .user-modal-tab {
            background: none;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: border-color 0.2s;
        }
        .user-modal-tab.active {
            border-bottom: 2px solid #333;
            font-weight: bold;
        }
        .user-modal-form {
            display: none;
        }
        .user-modal-form.active {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
.pin-digit{
  width:2.5rem;height:2.5rem;text-align:center;font-size:1.4rem;
  border:1px solid #ccc;border-radius:4px;
}
.pin-digit:focus{border-color:#e50914;outline:none;}
.pin-digit:focus {
  border-color: #e50914;
  outline: none;
}
.modal-content .text-center {
  text-align: center;
}

.favorite-btn {
    padding: 13px 25px;
    display: inline-flex;
            font-weight: bold;
            cursor: pointer;
            background-color: #6b7280; /* Grey for non-favorite state */
            color: white;
            border: none; min-height: 50px;
            border-radius: 5px;
            position: absolute; margin-top:0px; margin-left:4px;
            align-items: center;
            transition: background-color 0.2s ease;
        }
        .favorite-btn:hover {
            background-color: #4b5563;
        }
        
        /* Hide text by default, show on hover */
        .button-text {
            display: none;
            margin-left: 0.5em;
        }
        .favorite-btn:hover .button-text {
            display: inline-flex;
        }
        
        /* Default state: show outline heart, hide solid heart */
        .favorite-btn .far.fa-heart { display: inline-block; }
        .favorite-btn .fas.fa-heart { display: none; }
        .favorite-btn:hover .far.fa-heart,
        .favorite-btn:hover .fas.fa-heart {
            display: none; /* Hide icon on hover to show text */
        }
        
        /* Favorited state: change color, hide outline heart, show solid heart */
        .favorite-btn.is-favorite {
            background-color: #e50914; /* Red color for favorited */
        }
        .favorite-btn.is-favorite:hover {
            background-color: #c40812;
        }
        .favorite-btn.is-favorite .far.fa-heart { display: none; }
        .favorite-btn.is-favorite .fas.fa-heart { display: inline-block; }
