/* Cuevana3 Theme Fixes - Estilos faltantes para Menu, Sidebar y Footer */

/* ========================================
   FIX: Eliminar min-height innecesario
   ======================================== */

.TPost {
    min-height: auto !important;
}

.cuevana3-slider {
    min-height: auto !important;
}

/* Eliminar efecto de ocultar imagen en hover */
.TPost:hover .Image figure>img {
    opacity: 1 !important;
}

.TPost .Image figure>img {
    opacity: 1 !important;
}

/* Imágenes adaptables para episodios (horizontal/vertical) */
.TPost .Image figure,
.episode-item .Image figure,
article .Image figure {
    position: relative;
    overflow: hidden;
    background-color: #0a0f1e;
    width: 100%;
    height: auto;
}

.TPost .Image figure img,
.episode-item .Image figure img,
article .Image figure img {
    width: 100%;
    height: auto;
    min-height: 200px;
    object-fit: cover;
    background-color: #0a0f1e;
}

/* Para imágenes horizontales (episodios) - usar cover para llenar el espacio */
img[src*="still"],
img[src*="w500"],
img[src*="original"] {
    object-fit: cover !important;
    min-height: 250px;
}

/* Para imágenes verticales (posters) - usar cover también para llenar */
img[src*="w342"],
img[src*="w185"],
img[src*="w154"] {
    object-fit: cover !important;
    min-height: 300px;
}

/* Específico para últimos episodios */
.latest-episodes .TPostMv .Image figure img,
.MovieListSld .TPostMv .Image figure img {
    object-fit: cover !important;
    min-height: 250px;
}

/* ========================================
   HEADER & MENU STYLES
   ======================================== */

.Header {
    background-color: #141a32;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.Header .Container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.Header .Logo h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
}

.Header .Logo a {
    color: #fff;
    text-decoration: none;
}

.Header .Menu {
    flex: 1;
}

.Header .Menu ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.Header .Menu .menu-item {
    position: relative;
}

.Header .Menu .menu-item > a {
    display: block;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.Header .Menu .menu-item > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #00bcd4;
}

.Header .Menu .menu-item > a i {
    margin-right: 0.5rem;
}

/* Submenu Styles */
.Header .Menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1a2238;
    min-width: 200px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.Header .Menu .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.Header .Menu .sub-menu .menu-item {
    display: block;
}

.Header .Menu .sub-menu .menu-item a {
    padding: 0.5rem 1rem;
    display: block;
    color: #ccc;
    font-size: 0.9rem;
}

.Header .Menu .sub-menu .menu-item a:hover {
    background-color: rgba(0, 188, 212, 0.1);
    color: #00bcd4;
}

/* Search Form in Header */
.Header .Search {
    min-width: 250px;
}

.Header .Search .search-form {
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    overflow: hidden;
}

.Header .Search input {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    padding: 0.5rem 1rem;
    outline: none;
}

.Header .Search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.Header .Search button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.Header .Search button:hover {
    color: #00bcd4;
}

/* Mobile Menu Button */
.BtnMenu {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Mobile Menu */
.MobileMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.MobileMenu.active {
    opacity: 1;
}

.MobileMenuOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.MobileMenuContent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 350px;
    height: 100%;
    background-color: #141a32;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.MobileMenu.active .MobileMenuContent {
    transform: translateX(0);
}

.MobileMenuHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.MobileMenuHeader h2 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
}

.CloseMobileMenu {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.MobileNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.MobileNav > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.MobileNav a {
    display: block;
    padding: 1rem 1.5rem;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.MobileNav a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.MobileNav a i {
    margin-right: 0.75rem;
    width: 20px;
    display: inline-block;
}

.MobileNav .submenu {
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0;
}

.MobileNav .has-submenu.open .submenu {
    display: block;
}

.MobileNav .submenu a {
    padding-left: 3rem;
    font-size: 0.9rem;
}

.MobileNav .submenu-toggle {
    position: relative;
}

.MobileNav .submenu-toggle .fa-chevron-down {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.MobileNav .has-submenu.open .submenu-toggle .fa-chevron-down {
    transform: translateY(-50%) rotate(180deg);
}

/* ========================================
   SIDEBAR STYLES
   ======================================== */

.SidebarA {
    background-color: transparent;
}

.SidebarA .Widget {
    background-color: #1a2238;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.SidebarA .Widget .Title {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.SidebarA .Widget .Body {
    padding: 1rem;
}

.SidebarA .Widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.SidebarA .Widget ul li {
    margin-bottom: 0.5rem;
}

.SidebarA .Widget ul li:last-child {
    margin-bottom: 0;
}

.SidebarA .Widget ul li a {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: #ccc;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.SidebarA .Widget ul li a:hover {
    background-color: rgba(0, 188, 212, 0.1);
    color: #00bcd4;
    padding-left: 1rem;
}

.SidebarA .Widget ul li a i {
    margin-right: 0.5rem;
    color: #00bcd4;
    font-size: 0.875rem;
}

.SidebarA .Widget .year-list {
    max-height: 400px;
    overflow-y: auto;
}

.SidebarA .Widget .year-list::-webkit-scrollbar {
    width: 6px;
}

.SidebarA .Widget .year-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.SidebarA .Widget .year-list::-webkit-scrollbar-thumb {
    background: #00bcd4;
    border-radius: 3px;
}

/* ========================================
   SIDEBAR STYLES (OLD - KEEP FOR COMPATIBILITY)
   ======================================== */

.TpRwCont {
    display: flex;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

main {
    flex: 1;
    min-width: 0;
}

.SidebarA {
    width: 300px;
    flex-shrink: 0;
}

.SidebarA.BgA {
    background-color: transparent;
}

.SidebarA .Widget {
    background-color: #141a32;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.SidebarA .Widget .Title {
    background-color: #1a2238;
    color: #fff;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    border-bottom: 2px solid #00bcd4;
}

.SidebarA .Widget .Body {
    padding: 1rem;
}

.SidebarA .search-form {
    display: flex;
    gap: 0.5rem;
}

.SidebarA .search-form input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 4px;
    outline: none;
}

.SidebarA .search-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.SidebarA .search-form button {
    padding: 0.5rem 1rem;
    background-color: #00bcd4;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.SidebarA .search-form button:hover {
    background-color: #0097a7;
}

.SidebarA .genre-list,
.SidebarA .year-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.SidebarA .genre-list li,
.SidebarA .year-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.SidebarA .genre-list li:last-child,
.SidebarA .year-list li:last-child {
    border-bottom: none;
}

.SidebarA .genre-list a,
.SidebarA .year-list a {
    display: block;
    padding: 0.75rem 0.5rem;
    color: #ccc;
    text-decoration: none;
    transition: all 0.3s ease;
}

.SidebarA .genre-list a:hover,
.SidebarA .year-list a:hover {
    color: #00bcd4;
    padding-left: 1rem;
}

.SidebarA .genre-list a i,
.SidebarA .year-list a i {
    margin-right: 0.5rem;
    color: #00bcd4;
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.Footer {
    background-color: #0d1221;
    color: #8DA0BC;
    margin-top: 3rem;
    border-top: 3px solid #00bcd4;
}

.Footer .Container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.Footer .FooterContent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 3rem 0 2rem;
}

.Footer .FooterSection h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.Footer .FooterSection h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.Footer .FooterSection p {
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.Footer .FooterSection ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.Footer .FooterSection ul li {
    margin-bottom: 0.5rem;
}

.Footer .FooterSection ul li a {
    color: #8DA0BC;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.Footer .FooterSection ul li a:hover {
    color: #00bcd4;
}

.Footer .FooterSection ul li a i {
    margin-right: 0.5rem;
    color: #00bcd4;
}

.Footer .FooterBottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    text-align: center;
}

.Footer .FooterBottom p {
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.Footer .disclaimer {
    font-size: 0.75rem;
    color: #6c7a8d;
    font-style: italic;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background-color: #00bcd4;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
}

.scroll-to-top:hover {
    background-color: #0097a7;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 188, 212, 0.6);
}

.scroll-to-top i {
    font-size: 1.25rem;
}

/* ========================================
   FIX DUPLICACIÓN DE ELEMENTOS
   ======================================== */

/* Evitar que el título y rating se muestren dos veces */
.TPost.C .Image + .Title {
    display: block;
    margin-top: 0.5rem;
}

/* Ocultar el título duplicado dentro de TpMvTtl cuando ya existe .Title */
.TPost.C .TpMvTtl {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: #fff;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.TPost.C:hover .TpMvTtl {
    opacity: 1;
}

/* Asegurar que el rating solo se muestre una vez */
.TPost.C .Vote {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: rgba(0, 188, 212, 0.9);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 3;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
    display: none !important;
}

.hide {
    display: none !important;
}

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

/* Reducir ancho máximo en pantallas grandes */
@media (min-width: 1600px) {
    .cont,
    .MovieListSldCn .TPMvCn,
    .MovieListSld .owl-dots {
        max-width: 1280px !important;
    }
}

@media (max-width: 991px) {
    .Header .Menu {
        display: none;
    }
    
    .BtnMenu {
        display: block;
    }
    
    .Header .Search {
        min-width: auto;
        flex: 1;
    }
    
    .TpRwCont,
    .bd.is-single .TpRwCont {
        flex-direction: column;
    }
    
    .SidebarA,
    .bd.is-single .SidebarA {
        width: 100%;
        position: static;
    }
    
    .Footer .FooterContent {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .episodes-list,
    .all-episodes {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .player-container {
        min-height: 300px;
    }
    
    .bd.is-single .player-container {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .Header .Container {
        gap: 1rem;
    }
    
    .Header .Logo h1 {
        font-size: 1.25rem;
    }
    
    .Header .Search input {
        font-size: 0.875rem;
    }
    
    .scroll-to-top {
        width: 40px;
        height: 40px;
        bottom: 1rem;
        right: 1rem;
    }
    
    .scroll-to-top i {
        font-size: 1rem;
    }
}

/* ========================================
   LATEST EPISODES SLIDER
   ======================================== */

.latest-episodes {
    margin-bottom: 2rem;
}

.latest-episodes .Top {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

.latest-episodes .Title {
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    position: relative;
    z-index: 10;
}

.latest-episodes .Title i {
    color: #00bcd4;
    margin-right: 0.5rem;
}

.MovieListSldCn {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
}

.MovieListSld {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.MovieListSld::-webkit-scrollbar {
    height: 8px;
}

.MovieListSld::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.MovieListSld::-webkit-scrollbar-thumb {
    background: #00bcd4;
    border-radius: 4px;
}

.MovieListSld .TPostMv {
    flex: 0 0 auto;
    width: 200px;
}

.MovieListSld .TPostMv .Image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.MovieListSld .TPostMv .Image figure {
    position: relative;
    padding-top: 150%;
    background-color: #1a2238;
}

.MovieListSld .TPostMv .Image figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    background-color: #0a0f1e;
}

/* Todas las imágenes usan cover para llenar el espacio */
.MovieListSld .TPostMv .Image figure img[src*="w500"],
.MovieListSld .TPostMv .Image figure img[src*="original"],
.MovieListSld .TPostMv .Image figure img[src*="w342"],
.MovieListSld .TPostMv .Image figure img[src*="w185"] {
    object-fit: cover !important;
}

.MovieListSld .TPostMv:hover .Image figure img {
    transform: scale(1.05);
}

.MovieListSld .TPostMv .TpMvTtl {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7));
    color: #fff !important;
    font-size: 0.875rem;
    text-align: center;
    opacity: 1 !important;
    z-index: 2;
}

.MovieListSld .TPostMv .TpMvTtl p {
    margin: 0.25rem 0 0;
    color: #00bcd4 !important;
    font-weight: 600;
    opacity: 1 !important;
}

/* Fix Latest Episodes Layout */
.latest-episodes .MovieListSldCn {
    width: 100%;
}

.latest-episodes .MovieListSld,
.MovieListSld {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 1.5rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
    flex-wrap: wrap !important;
}

.latest-episodes .MovieListSld .TPostMv,
.MovieListSld .TPostMv {
    width: 100% !important;
    flex: none !important;
    display: block !important;
}

/* ========================================
   PLAYER & EPISODES STYLES
   ======================================== */

/* Player Container */
.player-section {
    margin-bottom: 2rem;
}

.player-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.player-tab {
    padding: 0.5rem 1rem;
    background-color: #1a2238;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.player-tab:hover {
    background-color: #2a3248;
}

.player-tab.active {
    background-color: #00bcd4;
    color: #fff;
}

.player-container {
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.player-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.player-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Episodes List Styles */
.episodes-section,
.seasons-section {
    margin-bottom: 2rem;
}

.season-selector {
    margin-bottom: 1.5rem;
}

.season-selector select,
#select-season {
    width: 100%;
    max-width: 300px;
    padding: 0.75rem 1rem;
    background-color: #1a2238;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.season-selector select:focus,
#select-season:focus {
    outline: none;
    border-color: #00bcd4;
}

/* Season Toggle Button */
.season-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1a2238 0%, #141a32 100%);
    color: #fff;
    border: 1px solid rgba(0, 188, 212, 0.3);
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.season-toggle:hover {
    background: linear-gradient(135deg, #2a3248 0%, #1a2238 100%);
    border-color: #00bcd4;
    transform: translateX(5px);
}

.season-toggle .fa-folder {
    color: #00bcd4;
    font-size: 1.25rem;
}

.season-toggle span {
    color: #888;
    font-size: 0.875rem;
    font-weight: 400;
    margin-left: auto;
}

.season-toggle .fa-chevron-down,
.season-toggle .fa-chevron-up {
    margin-left: auto;
    color: #00bcd4;
    transition: transform 0.3s ease;
}

.season-block {
    margin-bottom: 1.5rem;
}

.episodes-list,
.all-episodes,
.seasons-episodes {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cuando el inline style dice display: grid, mostrarlo */
.episodes-list[style*="grid"],
.all-episodes[style*="grid"],
.seasons-episodes[style*="grid"] {
    display: grid !important;
}

.episode-item,
li.episode-item,
.all-episodes li,
.seasons-episodes li {
    background-color: #1a2238 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    list-style: none !important;
    margin: 0 !important;
}

.episode-item:hover,
li.episode-item:hover,
.all-episodes li:hover,
.seasons-episodes li:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
    background-color: #2a3248 !important;
}

.episode-item a,
li.episode-item a,
.all-episodes li a,
.seasons-episodes li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    min-height: 80px !important;
}

/* Ocultar iconos de play en episodios */
.episode-item .fa-play,
.all-episodes .fa-play,
.seasons-episodes .fa-play {
    display: none !important;
}

.episode-item .episode-number,
.episode-number {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
    transition: all 0.3s ease;
}

.episode-number:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.5);
}

.episode-item .episode-title,
.all-episodes li .episode-title,
.seasons-episodes li .episode-title {
    font-size: 0.875rem;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.3;
}

/* Movie/Series Detail Page Layout */
.movtv-info {
    margin-bottom: 2rem;
}

.movtv-info .Image {
    margin-bottom: 1.5rem;
}

.movtv-info header {
    margin-bottom: 1.5rem;
}

.movtv-info .Description {
    line-height: 1.6;
    color: #ccc;
}

/* Hide sidebar in detail pages */
.bd.is-single .SidebarA {
    display: none !important;
}

.bd.is-single .TpRwCont {
    display: block;
}

.bd.is-single main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Ensure player is full width in main content */
.bd.is-single .player-section {
    width: 100%;
}

.bd.is-single .player-container {
    width: 100%;
    min-height: 400px;
}

/* ========================================
   GENRES STYLES
   ======================================== */

.Genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.Genres a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #1a2238;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 188, 212, 0.3);
}

.Genres a:hover {
    background-color: #00bcd4;
    border-color: #00bcd4;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.4);
}

/* ========================================
   MOVIE/SERIES INFO BOX STYLES
   ======================================== */

article.TPost.inlist.movtv-info {
    background: linear-gradient(135deg, #1a2238 0%, #141a32 100%);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

article.TPost.inlist.movtv-info .Image {
    flex-shrink: 0;
    width: 200px;
}

article.TPost.inlist.movtv-info .Image figure {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

article.TPost.inlist.movtv-info .Image img {
    width: 100%;
    height: auto;
    display: block;
}

article.TPost.inlist.movtv-info .TPMvCn {
    flex: 1;
}

article.TPost.inlist.movtv-info .Title {
    margin-bottom: 1rem;
}

article.TPost.inlist.movtv-info .Title h1 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    color: #fff;
}

article.TPost.inlist.movtv-info .Title h2.Year,
h2.Year {
    font-size: 1rem;
    font-weight: 600;
    background-color: #00bcd4;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin: 0;
    width: fit-content;
    display: inline-block;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
}

/* Ajustar tamaño para texto completo de temporada/episodio */
.Year {
    white-space: nowrap;
}

/* Asegurar que h2.Year no use position absolute del CSS base */
h2.Year {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
}

@media (max-width: 768px) {
    article.TPost.inlist.movtv-info .Title h2.Year,
    h2.Year {
        font-size: 0.875rem;
        padding: 0.4rem 0.75rem;
    }
    
    /* Ajustar episodios en móvil para que sean más pequeños */
    .latest-episodes .MovieListSld,
    .MovieListSld {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 1rem !important;
    }
    
    .MovieListSld .TPostMv {
        font-size: 0.75rem;
    }
    
    .MovieListSld .TPostMv .TpMvTtl {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .MovieListSld .TPostMv .TpMvTtl p {
        font-size: 0.7rem;
    }
}

article.TPost.inlist.movtv-info .Info {
    margin-bottom: 1rem;
}

article.TPost.inlist.movtv-info .Vote {
    display: inline-block;
    background-color: rgba(237, 183, 9, 0.2);
    color: #EDB709;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
}

article.TPost.inlist.movtv-info .Vote i {
    margin-right: 0.25rem;
}

article.TPost.inlist.movtv-info .Description {
    color: #ccc;
    line-height: 1.6;
}

article.TPost.inlist.movtv-info .Description p {
    margin: 0;
}

/* Responsive for info box */
@media (max-width: 768px) {
    article.TPost.inlist.movtv-info {
        flex-direction: column;
        padding: 1.5rem;
    }
    
    article.TPost.inlist.movtv-info .Image {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    article.TPost.inlist.movtv-info .Title h1 {
        font-size: 1.5rem;
    }
}

/* ========================================
   EPISODE NAVIGATION BUTTONS
   ======================================== */

.episode-navigation {
    display: block;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.episode-navigation .nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.episode-nav-btn,
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #1a2238 0%, #141a32 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 188, 212, 0.3);
}

.episode-nav-btn:hover,
.nav-btn:hover {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    border-color: #00bcd4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
}

.episode-nav-btn.disabled,
.nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.episode-nav-btn.disabled:hover,
.nav-btn.disabled:hover {
    transform: none;
    background: linear-gradient(135deg, #1a2238 0%, #141a32 100%);
}

.episode-nav-btn i,
.nav-btn i {
    font-size: 1rem;
}

.episode-nav-btn.prev i,
.nav-btn.prev i {
    margin-right: 0.5rem;
}

.episode-nav-btn.next i,
.nav-btn.next i {
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .episode-navigation .nav-buttons {
        flex-direction: column;
    }
    
    .nav-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   COLOR SCHEME
   ======================================== */

body {
    background-color: #080f28;
    color: #fff;
}

a {
    color: #00bcd4;
}

a:hover {
    color: #0097a7;
}