/*
Theme Name: Streamit Child
Theme URI: https://wordpress.iqonic.design/product/wp/streamit/
Author: the iQonic team
Author URI: https://iqonic.design/
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-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.
*/

/* Custom styles for TV Shows display - Images only */
.tvshow-image-only {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.tvshow-image-only:hover {
    transform: scale(1.05);
}

.tvshow-image-only a {
    display: block;
    width: 100%;
    height: 100%;
}

.tvshow-image-only img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover;
    border-radius: 8px;
}

/* Styling for available languages list */
.available-languages-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.available-languages-list li {
    padding: 5px 0;
    border-bottom: 1px solid #333;
    color: #ccc;
}

.available-languages-list li:last-child {
    border-bottom: none;
}

.no-content {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
}

.no-content p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Person Language Links Styles */
.person-language-links {
    margin: 20px 0;
}

.language-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-link-item {
    margin: 0;
    display: inline;
}

.language-link-item:not(:last-child)::after {
    content: " ";
}

.language-link {
    color: #007cba;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.language-link:hover {
    color: #005a87;
    text-decoration: underline;
}

.language-link-item.current-language .language-link {
    color: #28a745;
    font-weight: 600;
}

.language-link-item.current-language .language-link:hover {
    color: #218838;
}

.current-indicator {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .language-links-list {
        gap: 10px;
    }
    
    .language-link {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* Hide Watch List Button */
.watchlist-button-wrapper {
    display: none !important;
}

/* Episode Page Styles */
.episode-simple-item.current-episode {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.1), rgba(229, 9, 20, 0.05));
    border: 2px solid #e50914;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.episode-simple-item.current-episode .episode-simple-title {
    color: #e50914;
    font-weight: 600;
}

.episode-simple-item.current-episode .play-button-wrapper .btn {
    background: #e50914;
    border-color: #e50914;
}

.episode-simple-item.current-episode .play-button-wrapper .btn:hover {
    background: #c4080f;
    border-color: #c4080f;
}

/* Clickable Episode Link Styles */
.episode-simple-link:hover .play-button-wrapper .btn {
    background: #c4080f !important;
    border-color: #c4080f !important;
    transform: scale(1.05);
}

/* Disabled Episode Styles */
.episode-simple-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.episode-simple-disabled:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: inherit;
}

/* Season Dropdown Styles */
.season-dropdown-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

/* Season dropdown is now conditionally rendered in PHP, no CSS hiding needed */

.season-dropdown-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid #333;
    color: #fff;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    min-width: 220px;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.season-dropdown-btn:after {
    display: none;
}

.season-dropdown-btn:hover,
.season-dropdown-btn:focus {
    background: linear-gradient(135deg, #222 0%, #3a3a3a 100%);
    border-color: #e50914;
    color: #fff;
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.3);
    transform: translateY(-2px);
}

.season-dropdown-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.2);
}

.season-text {
    flex: 1;
}

.season-arrow {
    color: #e50914;
    font-size: 14px;
    transition: transform 0.3s ease;
    margin-left: 10px;
}

.season-dropdown-btn[aria-expanded="true"] .season-arrow {
    transform: rotate(180deg);
}

.season-dropdown-menu {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid #333;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    min-width: 220px;
    padding: 8px 0;
    margin-top: 8px;
    backdrop-filter: blur(10px);
}

.season-dropdown-item {
    color: #fff;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

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

.season-dropdown-item:hover {
    background: linear-gradient(135deg, #e50914 0%, #b8070f 100%);
    color: #fff;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}

.season-dropdown-item.active {
    background: linear-gradient(135deg, #e50914 0%, #b8070f 100%);
    color: #fff;
    position: relative;
}

.season-dropdown-item.active:before {
    content: "✓";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 14px;
}

.season-dropdown-item.active:hover {
    background: linear-gradient(135deg, #b8070f 0%, #8b0509 100%);
    color: #fff;
    transform: translateX(5px);
}

/* Dropdown animation */
.dropdown-menu.show {
    animation: dropdownFadeIn 0.3s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Episode Simple List Styles */
.episode-simple-list {
    max-width: 100%;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.episode-list-container {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 800px; /* Approximately 10 episodes * 80px height */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-right: 8px; /* Space for scrollbar */
    scroll-behavior: smooth;
    z-index: 1 !important;
    isolation: auto !important;
}

/* Only show episode containers when their tab pane is active */
.tab-pane:not(.active):not(.show) .episode-list-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure episode list appears after dropdown */
.episode-season .tab-content {
    order: 2;
    position: relative;
    z-index: 1;
}

.episode-season .episode-list-container {
    position: relative;
    z-index: 1;
}

/* Custom scrollbar styling for episode list */
.episode-list-container::-webkit-scrollbar {
    width: 8px;
}

.episode-list-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.episode-list-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e50914 0%, #c4080f 100%);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.episode-list-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #c4080f 0%, #a0070c 100%);
}

/* Scroll indicator at top and bottom */
.episode-list-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 8px; /* Account for scrollbar */
    height: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.episode-list-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 8px; /* Account for scrollbar */
    height: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Ensure scroll indicators don't interfere with dropdown */
.episode-season .episode-list-container::before,
.episode-season .episode-list-container::after {
    z-index: 1 !important;
}

/* Show scroll indicators when content overflows */
.episode-list-container.scrollable::before {
    opacity: 1;
}

.episode-list-container.scrollable::after {
    opacity: 1;
}

/* Dynamic scroll indicators based on scroll position */
.episode-list-container.scrollable-top::before {
    opacity: 0;
}

.episode-list-container.scrollable-bottom::after {
    opacity: 0;
}

/* Add smooth scrolling */
.episode-list-container {
    scroll-behavior: smooth;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .episode-list-container {
        max-height: 600px; /* Smaller height on mobile */
    }
}

@media (max-width: 480px) {
    .episode-list-container {
        max-height: 500px; /* Even smaller on small mobile */
    }
}

/* Ensure episode season and tab content are always visible */
.episode-season {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tab-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tab-pane {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.tab-pane.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tab-pane.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.episode-simple-item {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.episode-simple-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    color: inherit;
}

.episode-simple-content {
    display: flex !important;
    align-items: center;
    gap: 20px;
}

.episode-simple-thumbnail {
    flex-shrink: 0;
    width: 240px;
    height: 135px;
}

.episode-simple-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.episode-simple-thumbnail a:hover {
    transform: scale(1.02);
}

.episode-simple-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.episode-placeholder {
    width: 100%;
    height: 100%;
    background: #333;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
}

.episode-simple-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.episode-simple-title {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    flex: 1;
}

.episode-simple-actions {
    display: flex;
    align-items: center;
}

.btn-disabled {
    background: #555;
    color: #999;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    cursor: not-allowed;
}

/* Responsive Design for Simple List */
@media (max-width: 768px) {
    .episode-list-container {
        gap: 15px;
    }
    
    .episode-simple-content {
        gap: 15px;
    }
    
    .episode-simple-title {
        font-size: 16px;
    }
    
    /* Hide play button wrapper on mobile */
    .play-button-wrapper {
        display: none;
    }
    
    /* Show red text instead */
    .episode-simple-actions::after {
        content: "Start Watching";
        color: #e50914;
        font-size: 14px;
        font-weight: 600;
        display: block;
    }
    
    .btn-disabled {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    /* Mobile dropdown styles */
    .season-dropdown-btn {
        min-width: 180px;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .season-dropdown-menu {
        min-width: 180px;
    }
    
    .season-dropdown-item {
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .episode-list-container {
        gap: 12px;
    }
    
    .episode-simple-content {
        gap: 12px;
    }
    
    .episode-simple-thumbnail {
        width: 160px;
        height: 90px;
    }
    
    .episode-simple-title {
        font-size: 15px;
    }
    
    /* Ensure play button is hidden on small mobile too */
    .play-button-wrapper {
        display: none;
    }
    
    /* Red text for small mobile */
    .episode-simple-actions::after {
        content: "Start Watching";
        color: #e50914;
        font-size: 13px;
        font-weight: 600;
        display: block;
    }
    
    .btn-disabled {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Small mobile dropdown styles */
    .season-dropdown-btn {
        min-width: 160px;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .season-dropdown-menu {
        min-width: 160px;
    }
    
    .season-dropdown-item {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* High Z-Index for All Dropdowns */
.season-dropdown-container {
    position: relative !important;
    z-index: 9999 !important;
    order: -1; /* Ensure dropdown appears before episode list */
    margin-bottom: 20px !important;
}

/* Specific positioning for episode pages */
.episode-season .season-dropdown-container {
    position: relative !important;
    z-index: 10000 !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Episode season layout - dropdown now outside item-nav */
.episode-season {
    display: block !important;
}

.episode-season #item-nav {
    position: relative !important;
    z-index: 1 !important;
}

.episode-season .tab-content {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

/* Ensure tab-content doesn't overlap the dropdown */
#nav-tabContent {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    clear: both !important;
}

/* Simplified stacking context for episode pages */
.episode-season .tab-content {
    isolation: auto !important;
}

.episode-season #item-nav {
    isolation: auto !important;
}

.season-dropdown-btn {
    z-index: 10000 !important;
}

.season-dropdown-menu {
    z-index: 10002 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

/* Ensure dropdown menu appears above everything on episode pages */
.episode-season .season-dropdown-menu {
    z-index: 10003 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

/* Ensure dropdown appears above scrollable episode containers */
.episode-season .season-dropdown-container {
    z-index: 10004 !important;
    position: relative !important;
}

.episode-season .season-dropdown-btn {
    z-index: 10005 !important;
    position: relative !important;
}

/* Ensure dropdown appears above all other elements */
.dropdown {
    position: relative !important;
    z-index: 9999 !important;
}

.dropdown-menu {
    z-index: 10001 !important;
    position: absolute !important;
}

/* Override any conflicting z-index values */
.season-dropdown-container * {
    position: relative;
    z-index: inherit;
}

.season-dropdown-menu * {
    position: relative;
    z-index: inherit;
}