/*
Theme Name: Streamit Child
Theme URI: https://wordpress.iqonic.design/product/wp/streamit/
Author: the iQonic team
Author URI: https://ellixar.com/
Template:   streamit
Description: Streamit Template will help you achieve media sharing site like Youtube, Dailymotion website within minutes. It has a user interface with brilliant UX, and multiple homepage version. Show off your work with this easy-to-customize and full-featured WordPress Theme. This help/documentation will assist you through building your site. Streamit is prepared for all media streaming OTT inspired projects. Check out landing page and inner pages. Streamit is optimized for fast responsiveness.
Version: 4.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: streamit-child
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ==========================================================================
   MOBILE-FRIENDLY ENHANCEMENTS
   ========================================================================== */

/* Improved Mobile Navigation */
@media (max-width: 1199.98px) {
    /* Header improvements */
    .header-default {
        padding: 0.5rem 0;
    }
    
    .header-default .container-fluid {
        padding: 0 1rem;
    }
    
    /* Logo sizing for mobile */
    .logo {
        padding: 0.5rem 0 !important;
        width: 7rem !important;
    }
    
    .logo img {
        max-height: 2.5rem;
        width: auto;
    }
    
    /* Mobile menu button improvements */
    .menu-toggle-button {
        padding: 0.5rem !important;
        font-size: 1.25rem !important;
        border: none !important;
        background: transparent !important;
        position: relative;
        z-index: 1050;
    }
    
    .menu-toggle-button.active {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border-radius: 0.25rem;
    }
    
    /* Offcanvas menu improvements */
    .css_prefix-offcanvas-menu {
        width: 85% !important;
        max-width: 320px;
        z-index: 1050 !important;
    }
    
    .css_prefix-offcanvas-menu.show {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .css_prefix-offcanvas-menu .offcanvas-header {
        padding: 1rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .css_prefix-offcanvas-menu .offcanvas-body {
        padding: 1rem;
    }
    
    /* Mobile navigation menu styling */
    .css_prefix-offcanvas-menu .sf-menu {
        flex-direction: column;
        width: 100%;
    }
    
    .css_prefix-offcanvas-menu .sf-menu li {
        padding: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .css_prefix-offcanvas-menu .sf-menu li:last-child {
        border-bottom: none;
    }
    
    .css_prefix-offcanvas-menu .sf-menu li > a {
        padding: 1rem 0;
        font-size: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Submenu improvements */
    .css_prefix-offcanvas-menu .sf-menu ul.sub-menu {
        position: static;
        display: none;
        width: 100%;
        background: var(--bs-secondary-bg);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin-left: 1rem;
    }
    
    .css_prefix-offcanvas-menu .sf-menu ul.sub-menu li {
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }
    
    .css_prefix-offcanvas-menu .sf-menu ul.sub-menu li a {
        padding: 0.75rem 0;
        font-size: 0.9rem;
    }
}

@media (max-width: 767.98px) {
    /* Extra small devices improvements */
    .header-default .container-fluid {
        padding: 0 0.75rem;
    }
    
    /* Header right side improvements */
    .css_prefix-header-right {
        gap: 0.5rem !important;
    }
    
    .css_prefix-header-right ul {
        gap: 0.75rem !important;
    }
    
    /* Search improvements */
    .dropdown-search-wrapper .search-box .css_prefix-search-bar {
        width: 100% !important;
        min-width: 250px;
    }
    
    /* User dropdown improvements */
    .dropdown-user-wrapper .dropdown-menu,
    .dropdown-shopping-wrapper .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
        width: 280px;
        max-width: calc(100vw - 2rem);
    }
    
    /* Cart dropdown improvements */
    .dropdown-shopping-wrapper .shopping-cart-panel {
        width: 300px;
        max-width: calc(100vw - 2rem);
    }
    
    /* Subscribe button improvements */
    .subscribe-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem;
    }
    
    .subscribe-btn span {
        gap: 0.25rem !important;
    }
}

/* Content Area Mobile Improvements */
@media (max-width: 991.98px) {
    /* Main content spacing */
    .content-area .site-main {
        padding: 2rem 0 !important;
    }
    
    /* Container fluid padding */
    body .container-fluid {
        padding: 0 1rem;
    }
    
    /* Card improvements */
    .card {
        margin-bottom: 1.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Button improvements */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    /* Form improvements */
    .form-control {
        padding: 0.75rem 1rem;
        font-size: 1rem; /* Prevents zoom on iOS */
    }
    
    .form-select {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    /* Extra small devices */
    .content-area .site-main {
        padding: 1.5rem 0 !important;
    }
    
    body .container-fluid {
        padding: 0 0.75rem;
    }
    
    /* Typography improvements */
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.5rem; }
    h4, .h4 { font-size: 1.25rem; }
    h5, .h5 { font-size: 1.125rem; }
    h6, .h6 { font-size: 1rem; }
    
    /* Grid improvements */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Modal improvements */
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    /* Table improvements */
    .table-responsive {
        font-size: 0.875rem;
    }
    
    /* Dropdown improvements */
    .dropdown-menu {
        font-size: 0.875rem;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Touch device specific styles */
    .btn, .nav-link, .dropdown-item {
        min-height: 44px; /* Apple's recommended touch target size */
        display: flex;
        align-items: center;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .nav-link:hover,
    .dropdown-item:hover {
        transform: none;
    }
    
    /* Larger touch targets for menu items */
    .sf-menu li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* Landscape orientation improvements */
@media (max-height: 500px) and (orientation: landscape) {
    .css_prefix-offcanvas-menu {
        width: 50% !important;
        max-width: 400px;
    }
    
    .css_prefix-offcanvas-menu .offcanvas-body {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

/* High DPI display improvements */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode improvements for mobile */
@media (prefers-color-scheme: dark) {
    .css_prefix-offcanvas-menu {
        background-color: var(--bs-dark);
        color: var(--bs-light);
    }
    
    .css_prefix-offcanvas-menu .offcanvas-header {
        border-bottom-color: var(--bs-border-color);
    }
}

/* Focus improvements for keyboard navigation */
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.menu-toggle-button:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Video player mobile improvements */
@media (max-width: 767.98px) {
    .css_prefix-video-player {
        margin: 0 -0.75rem;
    }
    
    .video-js {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }
}

/* ==========================================================================
   UNIFIED VIDEO PLAYER STYLING - FULL WIDTH CONSISTENCY
   ========================================================================== */

/* Ensure all video players fill the entire width regardless of source */
.streamit-player-ctrl {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full-width styling for all video elements */
.streamit-player-ctrl iframe,
.streamit-player-ctrl video,
.streamit-player-ctrl .plyr,
.streamit-player-ctrl .plyr__video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure responsive containers take full width */
.streamit-player-ctrl > div {
    width: 100% !important;
    max-width: 100% !important;
}

/* Override any centering styles that might be applied */
.streamit-player-ctrl {
    text-align: left !important;
    display: block !important;
}

/* Ensure Vimeo embeds are responsive and full-width */
.streamit-player-ctrl div[style*="padding-bottom:56.25%"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Constrained player mode for media player single page - matching TV show dimensions */
.css_prefix-video-player .player {
    position: relative;
    padding-bottom: 38% !important; /* Same aspect ratio as TV show episodes */
    width: 100%;
    height: 0;
    overflow: hidden;
}

.css_prefix-video-player .player .streamit-player-ctrl {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.css_prefix-video-player .player .streamit-player-ctrl iframe,
.css_prefix-video-player .player .streamit-player-ctrl video,
.css_prefix-video-player .player .streamit-player-ctrl .plyr {
    height: 100% !important;
    width: 100% !important;
    aspect-ratio: unset !important;
}

/* Episode pages should also fill full width */
.detail-page .streamit-player-ctrl iframe,
.detail-page .streamit-player-ctrl video,
.detail-page .streamit-player-ctrl .plyr {
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove any container constraints that might limit width */
.detail-page .player .streamit-player-ctrl {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure episode single player also gets full width */
.episode-single-player .streamit-player-ctrl iframe,
.episode-single-player .streamit-player-ctrl video,
.episode-single-player .streamit-player-ctrl .plyr {
    width: 100% !important;
    max-width: 100% !important;
}

/* Footer mobile improvements */
@media (max-width: 767.98px) {
    footer {
        padding: 2rem 0;
    }
    
    footer .container-fluid {
        padding: 0 1rem;
    }
    
    footer .row > * {
        margin-bottom: 1.5rem;
    }
}

/* Utility classes for mobile */
.mobile-hidden {
    display: none !important;
}

@media (min-width: 768px) {
    .mobile-hidden {
        display: block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Performance improvements */
* {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
}

/* Smooth scrolling for mobile */
html {
    scroll-behavior: smooth;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on focus */
    }
    
    /* Fix for iOS Safari viewport units */
    .min-vh-100 {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================================================
   TV SHOW EPISODES RESPONSIVE LAYOUT
   ========================================================================== */

/* Base styles - disable slider functionality */
.episode-section .css_prefix-slick-general {
    width: 100% !important;
}

.episode-section .css_prefix-slick-general .slick-track {
    display: grid !important;
    gap: 1.5rem;
    width: 100% !important;
    transform: none !important;
}

.episode-section .css_prefix-slick-general .slick-item {
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}

/* Large screens: 4 columns grid layout */
@media (min-width: 992px) {
    .episode-section .css_prefix-slick-general .slick-track {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .episode-section .css_prefix-slick-general .slide.episode-card {
        display: flex;
        flex-direction: column;
        background: var(--bs-card-bg);
        border-radius: var(--bs-border-radius);
        padding: 0;
        transition: all 0.3s ease;
        border: 1px solid var(--bs-border-color);
        overflow: hidden;
        height: 280px;
    }
    
    .episode-section .css_prefix-slick-general .episode-image {
        width: 100%;
        height: 160px;
        flex-shrink: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail {
        flex: 1;
        display: block !important;
        position: static !important;
        background: transparent !important;
        opacity: 1 !important;
        transform: none !important;
        padding: 1rem;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail h6 {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--bs-heading-color);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail span {
        color: var(--bs-secondary-color);
        font-size: 0.8rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Medium screens: 3 columns */
@media (min-width: 768px) and (max-width: 991.98px) {
    .episode-section .css_prefix-slick-general .slick-track {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .episode-section .css_prefix-slick-general .slide.episode-card {
        display: flex;
        flex-direction: column;
        background: var(--bs-card-bg);
        border-radius: var(--bs-border-radius);
        padding: 0;
        transition: all 0.3s ease;
        border: 1px solid var(--bs-border-color);
        overflow: hidden;
        height: 260px;
    }
    
    .episode-section .css_prefix-slick-general .episode-image {
        width: 100%;
        height: 140px;
        flex-shrink: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail {
        flex: 1;
        display: block !important;
        position: static !important;
        background: transparent !important;
        opacity: 1 !important;
        transform: none !important;
        padding: 0.875rem;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail h6 {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--bs-heading-color);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail span {
        color: var(--bs-secondary-color);
        font-size: 0.775rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Mobile screens: vertical list layout */
@media (max-width: 767.98px) {
    .episode-section .css_prefix-slick-general .slick-track {
        grid-template-columns: 1fr !important;
    }
    
    .episode-section .css_prefix-slick-general .slide.episode-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin-bottom: 1rem;
    }
    
    .episode-section .css_prefix-slick-general .episode-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        margin: 0 0 0.75rem 0 !important;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail {
        padding: 0 1rem 1rem 1rem !important;
        width: 100% !important;
    }
    
    .episode-section .css_prefix-slick-general .episode-detail h6 {
        font-size: 1.05rem !important;
    }
}

@media (max-width: 575.98px) {
    .episode-section .css_prefix-slick-general .episode-image {
        aspect-ratio: 16/9 !important;
    }

    .episode-section .css_prefix-slick-general .episode-detail {
        padding: 0 0.75rem 0.75rem 0.75rem !important;
    }
}

/* Common styles for all screen sizes */
.episode-section .css_prefix-slick-general .episode-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-section .css_prefix-slick-general .slide.episode-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow-lg);
}

.episode-section .css_prefix-slick-general .slide.episode-card.watching {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.episode-section .css_prefix-slick-general .episode-detail-visible {
    display: none !important;
}

.episode-section .css_prefix-slick-general .episode-time-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius);
    font-size: 0.75rem;
}

.episode-section .css_prefix-slick-general .episode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: transparent;
}

/* Hide slider controls since we're using vertical layout */
.episode-section .slick-dots,
.episode-section .slick-arrow,
.episode-section .slick-prev,
.episode-section .slick-next {
    display: none !important;
}

/* ==========================================================================
   EPISODE CARD ALWAYS-ON TITLE OVERLAY
   ========================================================================== */

/* Ensure the image container is positioned */
.episode-section .css_prefix-slick-general .episode-image {
    position: relative !important;
}

/* Title overlay visible by default */
.episode-section .css_prefix-slick-general .episode-detail-visible {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%) !important;
    color: #ffffff !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    z-index: 3 !important;
    pointer-events: none;
}

/* Hide full detail block until hover */
.episode-section .css_prefix-slick-general .episode-detail {
    display: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

/* Reveal full details on hover */
.episode-section .css_prefix-slick-general .slide.episode-card:hover .episode-detail {
    display: block !important;
    opacity: 1 !important;
}

/* ==========================================================================
   RECOMMENDED & UPCOMING SECTIONS - LANDSCAPE LAYOUT
   ========================================================================== */

/* Target the more-like-section (Recommended and Upcoming sections) */
.more-like-section .css_prefix-card {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

.more-like-section .css_prefix-card .block-images {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.more-like-section .css_prefix-card .block-images .image-box {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.more-like-section .css_prefix-card .block-images img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 16/9 !important;
    max-width: 100% !important;
}

/* Slick slider item constraints */
.more-like-section .slick-item {
    display: inline-block !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 300px !important;
    flex-shrink: 0 !important;
    vertical-align: top !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.more-like-section .css_prefix-slick-general {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.more-like-section .css_prefix-slick-general .slick-track {
    display: flex !important;
    align-items: stretch !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.more-like-section .css_prefix-slick-general .slick-list {
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Landscape layout for large screens */
@media (min-width: 992px) {
    .more-like-section .slick-item {
        width: 260px !important; /* new balanced width (16:9 => 146px height) */
        min-width: 240px !important;
        max-width: 280px !important;
    }
    
    .more-like-section .css_prefix-card .block-images {
        width: 100% !important;
        height: auto !important;
    }
}

/* Medium screens adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .more-like-section .slick-item {
        width: 240px !important; /* 16:9 => 135px height */
        min-width: 220px !important;
        max-width: 260px !important;
    }
    
    .more-like-section .css_prefix-card .block-images {
        width: 100% !important;
        height: auto !important;
    }
}

/* Mobile screens adjustments */
@media (max-width: 767.98px) {
    .more-like-section .slick-item {
        width: 213px !important; /* 16:9 => 120px height */
        min-width: 192px !important;
        max-width: 240px !important;
    }
    
    .more-like-section .css_prefix-card .block-images {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 450px) {
    .more-like-section .slick-item {
        width: 213px !important; /* 16:9 ratio - width for 120px height */
        min-width: 192px !important; /* 16:9 ratio - width for 108px height */
        max-width: 249px !important; /* 16:9 ratio - width for 140px height */
    }
}

/* ==========================================================================
   HOVER OVERLAY LANDSCAPE ADJUSTMENTS
   ========================================================================== */

/* Force landscape layout for hover overlay */
.more-like-section .display-hover-effect .hidden-hover-data {
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important; /* allow natural height */
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border-radius: var(--bs-border-radius);
}

.more-like-section .display-hover-effect:hover .hidden-hover-data {
    opacity: 1 !important;
    pointer-events: all !important;
}

.more-like-section .hidden-hover-data .css_prefix-card-overlay {
    max-width: 100% !important;
    max-height: 100% !important;
}

.more-like-section .hidden-hover-data .card-description {
    max-height: calc(100% - 146px) !important; /* ensures content fits below 16:9 img on lg screens */
    overflow-y: auto !important;
}

/* Hover overlay image container - landscape format */
.more-like-section .hidden-hover-data .css_prefix-card-overlay .block-images {
    height: 200px !important;
    aspect-ratio: 16/9 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.more-like-section .hidden-hover-data .css_prefix-card-overlay .block-images img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 16/9 !important;
}

/* Hover overlay content area */
.more-like-section .hidden-hover-data .card-description {
    flex: 1 !important;
    padding: 1rem !important;
    background: var(--bs-card-bg) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Text content adjustments */
.more-like-section .hidden-hover-data .card-description .css_prefix-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.more-like-section .hidden-hover-data .card-description .genres-list {
    margin-bottom: 0.75rem !important;
}

.more-like-section .hidden-hover-data .card-description .d-flex.align-items-center.gap-3:not(.mt-3) {
    margin-bottom: 0.5rem !important;
}

.more-like-section .hidden-hover-data .card-description .d-flex.align-items-center.gap-3.mt-3 {
    margin-top: auto !important;
    padding-top: 0.5rem !important;
}

/* Responsive adjustments for hover overlay */
@media (min-width: 992px) {
    .more-like-section .hidden-hover-data .css_prefix-card-overlay .block-images {
        height: 180px !important;
    }
    
    .more-like-section .hidden-hover-data .card-description {
        padding: 1.25rem !important;
    }
    
    .more-like-section .hidden-hover-data .card-description .css_prefix-title {
        font-size: 1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .more-like-section .hidden-hover-data .css_prefix-card-overlay .block-images {
        height: 160px !important;
    }
    
    .more-like-section .hidden-hover-data .card-description {
        padding: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .more-like-section .hidden-hover-data .css_prefix-card-overlay .block-images {
        height: 140px !important;
    }
    
    .more-like-section .hidden-hover-data .card-description {
        padding: 0.875rem !important;
    }
    
    .more-like-section .hidden-hover-data .card-description .css_prefix-title {
        font-size: 0.9rem !important;
    }
}

/* Ensure the container doesn't have overflow hidden that could crop the list */
.episode-section .overflow-hidden {
    overflow: visible !important;
}

/* Optional: Add a max height and scrollbar if you have many episodes */
.episode-section .css_prefix-slick-general {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom scrollbar styling */
.episode-section .css_prefix-slick-general::-webkit-scrollbar {
    width: 6px;
}

.episode-section .css_prefix-slick-general::-webkit-scrollbar-track {
    background: var(--bs-secondary-bg);
    border-radius: 3px;
}

.episode-section .css_prefix-slick-general::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 3px;
}

.episode-section .css_prefix-slick-general::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

/* Mobile Menu Touch Improvements for Real Devices */
@media (max-width: 991.98px) {
    .menu-toggle-button {
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .menu-toggle-button.active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    .menu-toggle-button.tapped {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Prevent iOS zoom on double tap */
    .css_prefix-offcanvas-menu {
        touch-action: manipulation;
    }
    
    /* Improve submenu touch targets */
    .css_prefix-offcanvas-menu .sf-menu li.menu-item-has-children > a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Better touch feedback for menu items */
    .css_prefix-offcanvas-menu .sf-menu a {
        transition: background-color 0.15s ease;
    }
    
    .css_prefix-offcanvas-menu .sf-menu a:active {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    /* Prevent unwanted scrolling during menu interactions */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Next Episode Modal Styles */
.next-episode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.next-episode-modal.show {
    opacity: 1;
    visibility: visible;
}

.next-episode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.next-episode-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.next-episode-modal.show .next-episode-content {
    transform: scale(1);
}

.next-episode-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.next-episode-header h4 {
    color: #fff;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.next-episode-close {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.next-episode-close:hover {
    background: #333;
    color: #fff;
}

.next-episode-body {
    padding: 20px 24px;
}

.next-episode-preview {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.next-episode-thumbnail {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.next-episode-info {
    flex: 1;
}

.next-episode-description {
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.next-episode-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

.episode-number {
    color: #007bff;
    font-weight: 600;
}

.episode-duration {
    color: #999;
}

.next-episode-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.next-episode-footer .btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.next-episode-cancel {
    background: #333;
    color: #fff;
}

.next-episode-cancel:hover {
    background: #444;
}

.next-episode-play {
    background: #007bff;
    color: #fff;
}

.next-episode-play:hover {
    background: #0056b3;
    color: #fff;
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .next-episode-content {
        width: 95%;
        margin: 20px;
    }
    
    .next-episode-preview {
        flex-direction: column;
        gap: 12px;
    }
    
    .next-episode-thumbnail {
        width: 100%;
        height: 120px;
    }
    
    .next-episode-footer {
        flex-direction: column;
    }
    
    .next-episode-footer .btn {
        width: 100%;
    }
}