/*
Theme Name: Hdmovie26
Theme URI: https://hdmovie26.com
Author: hdmovie26
Author URI: https://hdmovie26.com
Description: Hdmovie26 is a cutting-edge WordPress theme designed specifically for movie streaming, TV series, and video download websites. Built with performance and SEO in mind, this theme features a sleek, dark-mode interface that enhances the viewing experience. It includes a fully responsive grid layout, advanced search functionality, and dedicated areas for IMDb ratings, release years, and quality tags (1080p, 720p). Hdmovie26 is optimized for high traffic, ensuring fast load times for large video libraries and providing a user-friendly navigation structure for browsing huge collections of content.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hdmovie26
Tags: entertainment, dark-mode, responsive-layout, video, translation-ready
*/

/*
==========================================================================
 CSS Variables
==========================================================================
*/
:root {
    --primary-color: #408bea;
    --primary-color-darker: #2a73ca;
    --background-body: #000;
    --background-main: #464e5a;
    --background-header: #131313;
    --background-header-border: #1F1F1F;
    --background-module: rgba(15, 15, 15, .9);
    --background-footer: #141618;
    --background-footer-border: #2a2a2a;
    --background-widget-item: rgba(0, 0, 0, 0.3);
    --background-widget-item-hover: rgba(0, 0, 0, 0.6);
    --background-player-controls: #0a0a0a;
    --background-player-header: #060606;
    --background-player-source-active: rgba(255, 255, 255, .1);
    --background-comment-form: rgba(0, 0, 0, .5);
    --background-search-page-form: #0a0a0a;

    --text-light: rgba(255,255,255,.95);
    --text-medium: rgba(255,255,255,.8);
    --text-dark: rgba(255,255,255,.6);
    --text-darker: rgba(255,255,255,.4);
    --text-white: #fff;

    --border-color-light: rgba(255, 255, 255, .2);
    --border-color-medium: rgba(255, 255, 255, .1);
    --border-color-dark: rgba(255, 255, 255, .08);

    --font-main: Roboto, sans-serif;
}

/*
==========================================================================
 Base & Layout Styles
==========================================================================
*/
ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Visually hidden but readable by screen readers and Google */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

body {
    background: var(--background-body);
    color: var(--text-dark);
    font-family: var(--font-main);
    font-size: 14px;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    cursor: pointer;
}

#dt_contenedor {
    width: 100%;
    background-color: var(--background-main);
    background-position: 50% 0;
    background-attachment: fixed;
    background-size: cover;
}

#contenedor {
    max-width: 1200px;
    margin: 70px auto 0;
}

.module {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    background: var(--background-module);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: solid 1px var(--border-color-dark);
    border-top: solid 1px var(--border-color-dark);
}

.content {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}

.sidebar {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}

/*
==========================================================================
 Header Styles
==========================================================================
*/
header.main {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 104;
    background-color: var(--background-header);
    border-bottom: 1px solid var(--background-header-border);
}

header.main .hbox {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.main .hbox .logo {
    padding: 0 25px;
    height: 100%;
    display: flex;
    align-items: center;
    background: var(--background-header-border);
}

header.main .hbox .logo img {
    width: auto;
    height: 32px;
}

header.main .hbox .logo h1.text {
    color: var(--text-white);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.head-main-nav {
    flex-grow: 1;
    padding-left: 20px;
}

.head-main-nav ul.main-header,
.head-main-nav ul.main-header li ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.head-main-nav ul.main-header {
    display: flex;
}

.head-main-nav ul.main-header li {
    position: relative;
    height: 70px; /* <-- ADD THIS */
    display: flex; /* <-- ADD THIS */
    align-items: center; /* <-- ADD THIS */
}

.head-main-nav ul.main-header li a {
    font-size: 16px;
    font-weight: 400;
    padding: 0 12px; /* <-- CHANGE PADDING */
    line-height: normal; /* <-- RESET LINE HEIGHT */
    display: block;
    color: var(--text-medium);
    /* The next two lines are the most important part */
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.head-main-nav ul.main-header li:hover > a {
    color: var(--primary-color);
}

.head-main-nav ul.main-header li ul.sub-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 200px;
    background: rgba(0, 0, 0, 0.98);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    z-index: 105;
    padding: 0px;/* <-- THIS IS THE FIX (6px top/bottom padding) */
}

.head-main-nav ul.main-header li:hover > ul.sub-menu {
    display: block;
}

.head-main-nav ul.main-header li ul.sub-menu li {
    width: 100%;
}

.head-main-nav ul.main-header li ul.sub-menu li a {
    padding: 6px 20px; /* <-- THIS IS THE FIX (Tighter 6px padding) */
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.head-main-nav ul.main-header li ul.sub-menu li a:hover {
    color: var(--primary-color);
    background: rgba(0, 0, 0, 0.1);
}

header.main .hbox .search {
    width: 300px;
    flex-shrink: 0;
}

header.main .hbox .search form {
    position: relative;
    border-radius: 5px;
    background: var(--background-header-border);
    border: 1px solid #333;
}

header.main .hbox .search form input[type="search"] {
    border: 0;
    width: 100%;
    height: 40px;
    padding: 0 40px 0 15px;
    font-size: 14px;
    color: var(--text-white);
    background: transparent;
}

header.main .hbox .search form input[type="search"]::placeholder {
    color: var(--text-darker);
}

header.main .hbox .search form button[type="submit"] {
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    color: var(--text-dark);
    background: transparent;
}

header.main .hbox .search form button[type="submit"]:hover {
    color: var(--text-white);
}

/*
==========================================================================
 Mobile Header Styles
==========================================================================
*/
header.responsive {
    display: none;
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 105;
    background-color: var(--background-header);
    border-bottom: 1px solid var(--background-header-border);
    align-items: center;
    justify-content: space-between;
}

header.responsive .nav { padding-left: 15px; }
header.responsive .search { padding-right: 15px; }

header.responsive .aresp {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* Hamburger wrapper */
header.responsive .nav a.nav-resp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    position: relative;
    cursor: pointer;
}

/* All three lines */
header.responsive .nav a.nav-resp span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
    transform-origin: center;
}

/* Third line slightly shorter for style */
header.responsive .nav a.nav-resp span:nth-child(3) {
    width: 70%;
}

/* Active — animate into X */
header.responsive .nav a.nav-resp.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    width: 100%;
}
header.responsive .nav a.nav-resp.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
header.responsive .nav a.nav-resp.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    width: 100%;
}

/* Search icon */
header.responsive .search a.search-resp {
    display: block;
    width: 27px;
    height: 27px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 4px;
}

/* Active search — X icon */
header.responsive .search a.search-resp.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Remove any legacy content from old FA approach */
header.responsive .nav a.nav-resp::before,
header.responsive .nav a.nav-resp::after { content: none; }

header.responsive .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: center;
}

header.responsive .logo img {
    height: 28px;
    width: auto;
}

form.form-resp-ab {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 104;
    background: var(--background-header);
    padding: 15px;
    border-bottom: 1px solid var(--background-header-border);
}

form.form-resp-ab input[type="text"] {
    width: 80%;
    height: 40px;
    padding: 0 45px 0 15px;
    background: var(--background-header-border);
    border: 1px solid #333;
    color: var(--text-white);
    border-radius: 5px;
}

form.form-resp-ab .search-button {
    position: absolute;
    right: 50px;
    top: 15px;
    height: 40px;
    width: 45px;
    background: transparent;
    border: 0;
    color: var(--text-white);
    font-size: 16px;
}

.menuresp {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: auto; /* <-- THIS IS THE FIX */
    z-index: 104;
    background: var(--background-header);
    overflow-y: auto;
}

.menuresp .menu ul.resp li a {
    padding: 15px;
    display: block;
    color: var(--text-medium);
    border-bottom: 1px solid var(--background-header-border);
    font-size: 1.1rem;
}

.menuresp .menu ul.resp li a:hover {
    color: var(--primary-color);
}

.menuresp .menu ul.resp ul.sub-menu {
    list-style: none;
    padding-left: 15px;
}

.menuresp .menu ul.resp ul.sub-menu li a {
    font-size: 1rem;
    padding-left: 25px;
}

/*
==========================================================================
 Sidebar & Widget Styles
==========================================================================
*/
.sidebar aside.widget {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
}

.sidemenu {
    width: 100%;
    margin-bottom: 25px;
}

.sidemenu:first-child {
    margin-top: 15px;
}

.sidemenu h2 {
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 15px;
    text-transform: none;
    color: var(--text-white);
    border-bottom: 1px solid var(--border-color-medium);
    margin-bottom: 10px;
    position: relative;
}

.sidemenu h2::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-medium);
    border-bottom: 1.5px solid var(--text-medium);
    transform: translateY(-70%) rotate(45deg);
    position: absolute;
    right: 8px;
    top: 50%;
}

.sidemenu ul.genres,
.sidemenu ul.year {
    padding: 5px 5px 5px 0;
    list-style: none;
    overflow-y: auto;
}

.sidemenu ul.genres {
    max-height: 280px;
}

.sidemenu ul.genres li {
    border-bottom: solid 1px var(--border-color-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
}

.sidemenu ul.genres li:last-child {
    border-bottom: 0;
}

.sidemenu ul.genres li a {
    font-size: 14px;
    color: var(--text-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sidemenu ul.genres li a:hover {
    color: var(--primary-color);
}

.sidemenu ul.genres li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-darker);
    margin-right: 12px;
    vertical-align: middle;
    flex-shrink: 0;
}

.sidemenu ul.genres li:hover a::before {
    color: var(--primary-color);
}

.sidemenu ul.genres li .count {
    font-size: 13px;
    color: var(--text-medium);
}

.sidemenu ul.year {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px 0 0;
    max-height: 210px;
}

.sidemenu ul.year li {
    width: calc(100% / 3);
    padding: 4px;
    box-sizing: border-box;
}

.sidemenu ul.year li a {
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 8px 1px;
    border-radius: 3px;
    font-weight: 400;
    color: var(--text-medium);
    background: none;
    border: 1px solid var(--border-color-light);
    display: block;
}

.sidemenu ul.year li a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-white);
}

.w_item_b {
    width: 100%;
    margin-bottom: 10px;
    background: var(--background-widget-item);
    border-radius: 5px;
    display: flex;
    padding: 1px;
    box-sizing: border-box;
    align-items: center;
    transition: background-color 0.2s ease-in-out;
}

.w_item_b:hover {
    background: var(--background-widget-item-hover);
}

.w_item_b a { display: contents; }

.w_item_b .image {
    width: 60px;
    height: 90px;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
}

.w_item_b .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.w_item_b .data {
    width: calc(100% - 75px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.w_item_b .data h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-light);
    margin: 0 0 8px;
    white-space: normal;
    overflow: hidden;
}

.w_item_b a:hover > .data h3 {
    color: var(--primary-color);
}

.w_item_b .data .wextra {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
}

.w_item_b .data .wextra b {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 13px;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0,0,0,0.2);
    color: var(--text-medium);
}

.w_item_b .data .wextra b::before {
    content: "★";
    margin-right: 4px;
    font-size: 11px;
    color: #f5c518;
}

.w_item_b .data .wextra span.year {
    font-size: 13px;
    margin-left: 10px;
    font-weight: 500;
    color: var(--text-dark);
}

/*
==========================================================================
 Movie Card & Grid Styles
==========================================================================
*/
.item {
    margin-bottom: 20px;
    min-width: 0;
}

.item .poster {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    aspect-ratio: 185 / 278;
}

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

.item .poster .quality,
.item .poster .featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-white);
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
    z-index: 2;
}

.item .poster .quality { background-color: #e50914; }
.item .poster .featured-badge { background-color: #46d369; }

.poster-middle-text {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #d90429, #ef233c);
    color: var(--text-white);
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 5px rgba(255,255,255,0.3);
    z-index: 2;
    white-space: nowrap;
}

.item .data {
    padding-top: 12px;
}

.item .data h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-white);
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item .data h3 a {
    color: var(--text-white);
    text-decoration: none;
    /* Extend touch target height without affecting layout */
    display: block;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.item .data h3 a:hover {
    color: var(--primary-color);
}

.item .data span {
    font-size: 13px;
    color: var(--text-dark);
}

.item .poster a {
    display: block;
    position: relative;
}

.item .poster a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url('assets/img/playhover.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 3;
}

.item .poster a:hover::after {
    opacity: 1;
}

.items, .movie-grid {
    display: grid;
    gap: 10px;
}

/*
==========================================================================
 Footer & Scroll-to-Top Styles
==========================================================================
*/
footer.main {
    background-color: var(--background-footer);
    border-top: 1px solid var(--background-footer-border);
    padding: 25px 0;
    color: var(--text-darker);
}

footer.main .fbox {
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer.main .copy {
    font-size: 14px;
    color: rgba(255,255,255,0.95);
}

footer.main .copy a {
    color: var(--text-medium);
    font-weight: 500;
    text-decoration: none;
}
footer.main .copy a:hover {
    color: var(--text-white);
}

.scroll-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    background-color: var(--background-footer-border);
    color: var(--text-white);
    border-radius: 5px;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
    cursor: pointer;
    z-index: 100;
    display: none;
    transition: background-color 0.3s, opacity 0.3s;
    text-decoration: none;
}

.scroll-top:hover {
    background-color: #444;
}

/*
==========================================================================
 Section Header Styles
==========================================================================
*/
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color-medium);
    padding-bottom: 15px;
}

.section-header h2 {
    color: var(--text-white);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    padding-left: 15px;
    position: relative;
}

.section-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.section-header .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.section-header .count {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}

.section-header .see-all-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background-color .2s;
    /* Minimum touch target */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.section-header .see-all-btn:hover {
    background-color: var(--primary-color-darker);
}

/*
==========================================================================
 Single Movie Page Styles
==========================================================================
*/
.sbox {
    padding: 0;
}

.dooplay_player {
    width: 100%;
    position: relative;
    margin-bottom: 25px;
    border-bottom: solid 3px var(--border-color-dark);
}

.dooplay_player .play {
    background: var(--background-body);
    position: relative;
    width: 100%;
}

.dooplay_player .play .pframe {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.dooplay_player .play .pframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dooplay_player .player-controls {
    background: var(--background-player-controls);
    width: 100%;
}

.dooplay_player h3 {
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    padding: 20px 30px;
    border-bottom: solid 1px var(--border-color-dark);
    background: var(--background-player-header);
    color: var(--text-white);
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.dooplay_player h3 span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: rgb(255 255 255 / 100%);
}

.dooplay_player .options {
    padding: 0 25px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.dooplay_player .options ul {
    margin: 25px 0 0;
    width: 100%;
    list-style: none;
}

.dooplay_player .options ul li {
    width: 100%;
    padding: 15px 20px;
    cursor: pointer;
    line-height: 20px;
    border-bottom: solid 1px var(--border-color-dark);
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.dooplay_player .options ul li:last-child {
    border-bottom: 0;
}

.dooplay_player .options ul li i {
    font-size: 25px;
    margin-right: 15px;
    color: rgb(255 255 255 / 100%);
    transition: color 0.2s ease-in-out;
}

.dooplay_player .options ul li svg {
    width: 25px;
    height: 25px;
    min-width: 25px;
    max-width: 25px;
    margin-right: 15px;
    fill: rgb(255 255 255 / 100%);
    color: rgb(255 255 255 / 100%);
    transition: fill 0.2s ease-in-out;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .dooplay_player .options ul li svg {
        width: 20px;
        height: 20px;
        min-width: 20px;
        max-width: 20px;
        margin-right: 10px;
    }
}

.dooplay_player .options ul li .title {
    color: var(--text-white);
    font-weight: 600;
    flex-grow: 1;
}

.dooplay_player .options ul li .server {
    font-size: 12px;
    margin-left: 15px;
    color: rgba(255, 255, 255, .5);
}

.dooplay_player .options ul li:hover .title,
.dooplay_player .options ul li.on .title {
    color: var(--primary-color);
}

.dooplay_player .options ul li:hover i,
.dooplay_player .options ul li.on i,
.dooplay_player .options ul li:hover svg,
.dooplay_player .options ul li.on svg {
    color: var(--text-white);
    fill: var(--text-white);
}

.dooplay_player .options ul li.on {
    background: var(--background-player-source-active);
}

#player-backdrop-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: var(--background-body);
    z-index: 10;
}

#player-backdrop-preview .player-backdrop-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 11;
}

#player-backdrop-preview::before {
    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: 12;
}

#player-backdrop-preview:hover::before {
    background-color: rgba(0, 0, 0, 0.5);
}

#player-backdrop-preview .play-button-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 80px;
    height: 80px;
    background-image: url('assets/img/playhover.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 13;
}

#player-backdrop-preview:hover .play-button-icon {
    transform: translate(-50%, -50%) scale(1);
}

.sheader {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: solid 3px var(--border-color-dark);
}

.sheader .poster {
    float: left;
    width: 140px;
    position: relative;
}

.sheader .poster img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 10px 15px -7px rgb(0 0 0);
}

.sheader .data {
    width: calc(100% - 160px);
    margin-left: 160px;
}

.sheader .data h1 {
    font-size: 30px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-white);
    margin: 0 0 10px 0;
}

.sheader .data .extra {
    float: left;
    width: 100%;
    padding: 5px 0;
}

.sheader .data .extra span {
    font-size: 13px;
    line-height: 20px;
    float: left;
    padding-right: 15px;
    color: var(--text-dark);
}

.sheader .data .extra span.tagline {
    width: 100%;
    padding-bottom: 5px;
    font-size: 16px;
    color: var(--text-medium);
    font-style: italic;
}

.sgeneros {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.sgeneros a {
    font-size: 13px;
    float: left;
    padding: 0 10px;
    font-weight: 500;
    color: var(--text-white);
    border-left: solid 1px var(--border-color-dark);
}

.sgeneros a:first-child {
    padding-left: 0;
    border-left: 0;
}

.sgeneros a:hover {
    color: var(--primary-color);
}

.srating {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    margin: 10px 0;
    border-top: solid 1px var(--border-color-dark);
    border-bottom: solid 1px var(--border-color-dark);
}

.srating .promedio {
    padding: 10px 0;
    font-size: 30px;
    width: 60px;
    font-weight: 600;
    text-align: center;
    border-radius: 3px;
    background: var(--border-color-dark);
    color: var(--text-white);
}

.srating .rdata {
    margin-left: 15px;
    padding: 5px 0;
}

.srating .rdata .stars {
    position: relative;
    display: inline-block;
    height: 24px;
    width: 270px;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='rgba(255,255,255,.15)' d='M288 385.3l-124.3 65.4 23.7-138.4-100.6-98 138.7-20.2L288 64l62.5 129.1 138.7 20.2-100.6 98 23.7 138.4z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 27px 24px;
}

.srating .rdata .stars span.rating-stars-b {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23408bea' d='M288 385.3l-124.3 65.4 23.7-138.4-100.6-98 138.7-20.2L288 64l62.5 129.1 138.7 20.2-100.6 98 23.7 138.4z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 27px 24px;
}

.srating .rdata .votes {
    font-size: 13px;
    padding-top: 5px;
    width: 100%;
    color: #9297a2;
}

.your-rating {
    background-color: #444443;
    color: var(--text-white);
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    margin-left: auto;
}

.dt_social_single {
    float: left;
    width: 100%;
    padding: 15px 0;
    display: flex;
    align-items: center;
    border-top: solid 1px var(--border-color-dark);
    border-bottom: solid 1px var(--border-color-dark);
}

.dt_social_single a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    font-size: 12px;
    margin-right: 10px;
    border-radius: 3px;
    color: var(--text-white);
    font-weight: 500;
}

.dt_social_single a i {
    font-size: 16px;
    margin-right: 8px;
}

.dt_social_single a b {
    font-weight: 400;
}

.dt_social_single a.facebook { background: #4861a3; }
.dt_social_single a.twitter { background: #03a9f4; }
.dt_social_single a.telegram { background: #0088cc; }
.dt_social_single a.whatsapp { background: #51ce60; }

.srelacionados {
    margin-top: 30px;
}

/*
==========================================================================
 Comment Section Styles
==========================================================================
*/
.comments-area {
    float: left;
    width: 100%;
    margin-top: 25px;
    padding: 30px 20px;
    border-top: solid 3px var(--border-color-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.comments-area .comments-title,
.comment-respond .comment-reply-title {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 30px;
    color: var(--text-light);
    display: flex;
    align-items: center;
}

ol.comment-list ol.children {
    margin: 0;
    padding-left: 35px;
    list-style: none;
}

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

.comment-list .comment {
    display: flex;
    padding: 20px 0;
    border-top: 1px solid var(--border-color-dark);
}
.comment-list .comment:first-child {
    border-top: 0;
    padding-top: 0;
}

.comment .comment-author .avatar {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    margin-right: 18px;
    flex-shrink: 0;
}

.comment-list .children .comment-author .avatar {
    width: 40px;
    height: 40px;
}

.comment .comment-body {
    flex: 1;
}

.comment .comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-dark);
    flex-wrap: wrap;
}

.comment .comment-author .fn {
    font-weight: 700;
    font-style: normal;
    color: var(--text-white);
    font-size: 15px;
    margin-right: 15px;
}
.comment .comment-author .fn a {
    color: var(--text-white);
    text-decoration: none;
}

.comment-list .bypostauthor > .comment-body .comment-meta .fn::after {
    content: 'Author';
    background: var(--primary-color);
    color: var(--text-white);
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 3px;
    margin-left: 10px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

.comment .comment-metadata a {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
}
.comment .comment-metadata a:hover {
    text-decoration: underline;
}

.comment .comment-meta .reply {
    margin-left: auto;
}

.comment .reply .comment-reply-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-medium);
    text-decoration: none;
    padding: 5px 0;
}
.comment .reply .comment-reply-link:hover {
    color: var(--text-white);
}

.comment .comment-content {
    line-height: 1.7;
    font-size: 15px;
    color: var(--text-medium);
}
.comment .comment-content p {
    margin: 0;
}

.comment-respond {
    margin-top: 30px;
    padding-top: 30px;
    border-top: solid 3px var(--border-color-dark);
}

.comment-form p {
    margin: 0 0 20px 0;
}

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
    width: 100%;
}

.comment-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-medium);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background: var(--background-comment-form);
    color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 12px 15px;
    width: 100%;
    border-radius: 4px;
    font-size: 15px;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.comment-form textarea {
    min-height: 120px;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(64, 139, 234, .3);
    outline: 0;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    color: var(--text-dark);
}

.comment-form-cookies-consent input {
    margin-right: 10px;
}

.comment-form .form-submit input[type="submit"] {
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--text-white);
    border: 0;
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out;
}

.comment-form .form-submit input[type="submit"]:hover {
    background: var(--primary-color-darker);
}

/*
==========================================================================
 Archive & Search Page Styles
==========================================================================
*/
.search-results-wrapper {
    width: 100%;
    float: left;
}

.search-page {
    padding: 20px;
}

.search-page .page-header,
.page-header {
    margin-bottom: 25px;
    border-bottom: solid 1px var(--border-color-dark);
}

.search-page .page-title,
.page-title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-white);
    margin: 15px 0 25px 0;
    text-align: center;
    overflow: hidden;
}

.search-page .page-title span {
    font-style: italic;
    color: var(--primary-color);
}

.page-title:before,
.page-title:after {
    background-color: var(--border-color-dark);
    content: "";
    display: inline-block;
    height: 3px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.page-title:before { right: 0.5em; margin-left: -50%; }
.page-title:after { left: 0.5em; margin-right: -50%; }

.search_page_form {
    margin-bottom: 30px;
}

.search_page_form .search-form {
    background: var(--background-search-page-form);
    border: 1px solid var(--border-color-medium);
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.search_page_form .search-form label {
    flex-grow: 1;
    display: flex;
}

.search_page_form .search-form input[type="search"] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 14px 20px;
    font-size: 18px;
    color: var(--text-white);
}

.search_page_form .search-form .search-submit {
    border: 0;
    padding: 14px 20px;
    cursor: pointer;
    background: transparent;
}
.search_page_form .search-form .search-submit svg {
    width: 20px;
    height: 20px;
    color: #bcc2cb;
}

.result-item {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color-dark);
}

.result-item .image {
    width: 100px;
    flex-shrink: 0;
    margin-right: 20px;
}

.result-item .image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.result-item .details {
    overflow: hidden;
}
.result-item .details .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}
.result-item .details .title a {
    color: var(--text-light);
    text-decoration: none;
}
.result-item .details .title a:hover {
    color: var(--primary-color);
}

.result-item .details .meta {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-dark);
}
.result-item .details .meta span {
    margin-right: 15px;
}
.result-item .details .meta .rating {
    font-weight: 600;
}
.result-item .details .meta .rating svg {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

.result-item .details .contenido {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-medium);
}

.navigation.pagination {
    margin-top: 30px;
    text-align: center;
}
.nav-links {
    display: inline-flex;
    gap: 10px;
}
.nav-links .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    background: var(--background-player-source-active);
    border: 1px solid var(--border-color-light);
    color: var(--text-white);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .2s;
}
.nav-links .page-numbers:hover {
    background: var(--primary-color);
}
.nav-links .page-numbers.current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

.breadcrumbs {
    float: left;
    width: 100%;
    padding: 20px 0;
    margin-top: 25px;
    border-top: 1px solid var(--border-color-dark);
    list-style: none;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.breadcrumbs li {
    display: inline;
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
}

.breadcrumbs li a {
    color: var(--text-medium);
    text-decoration: none;
}

.breadcrumbs li a:hover {
    color: var(--primary-color);
}

.breadcrumbs li.separator {
    margin: 0 10px;
}

/*
==========================================================================
 Admin Bar & Responsive Styles
==========================================================================
*/
body.admin-bar header.main,
body.admin-bar header.responsive { top: 32px; }

body.admin-bar form.form-resp-ab { top: calc(60px + 32px); }
body.admin-bar .menuresp {
    top: calc(60px + 32px);
    height: calc(100% - 60px - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar header.main,
    body.admin-bar header.responsive { top: 46px; }

    body.admin-bar form.form-resp-ab { top: calc(60px + 46px); }
    body.admin-bar .menuresp {
        top: calc(60px + 46px);
        height: calc(100% - 60px - 46px);
    }
}

@media (min-width: 992px) {
    #dt_contenedor {
        padding-bottom: 30px;
    }
    #contenedor {
        box-shadow: 0 15px 50px -10px rgba(0,0,0,0.7);
    }
    .content {
        width: calc(100% - 360px);
        border-right: solid 1px var(--border-color-dark);
    }
    .sidebar {
        width: 360px;
    }
}

@media only screen and (max-width: 1100px) {
    header.main .hbox .search { width: 220px; }
    .head-main-nav ul.main-header li a { padding: 25px 15px; }
}

@media only screen and (max-width: 991px) {
    header.main .hbox .search { width: 180px; }
    .head-main-nav ul.main-header li a {
        padding: 25px 10px;
        font-size: 14px;
    }
    header.main .hbox .logo { padding: 0 15px; }
}

@media only screen and (max-width: 768px) {
    header.main { display: none; }
    header.responsive { display: flex; }
    #contenedor { margin-top: 60px; }

    .sheader {
        display: flex;
        align-items: flex-start;
    }
    .sheader .poster {
        width: 120px;
        flex-shrink: 0;
    }
    .sheader .data {
        flex-grow: 1;
        width: auto;
        margin-left: 20px;
        margin-top: 0;
    }
    .srating {
    display: none; /* This will hide the entire rating block on mobile */
    }
    .dt_social_single {
        display: block;
    }
    .dt_social_single span {
        display: block;
        border-right: none;
        margin-bottom: 15px;
        padding-right: 0;
    }
}

/*
==========================================================================
 Movie Extra Details Styles (Overview, Director, Cast)
==========================================================================
*/

.movie-extra-details {
    padding: 25px 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color-dark);
    border-bottom: 1px solid var(--border-color-dark);
}

.overview-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-white);
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-dark);
}

.overview-section p {
    line-height: 1.7;
    color: var(--text-medium);
    margin: 0;
}

.meta-details-list {
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.meta-details-list li {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-dark);
    font-size: 14px;
}

.meta-details-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.meta-details-list li:first-child {
    padding-top: 0;
}

.meta-details-list .meta-label {
    font-weight: 700;
    color: var(--text-light);
    width: 120px;
    flex-shrink: 0;
}

.meta-details-list .meta-value {
    color: var(--text-dark);
    line-height: 1.6;
}

/* Add this CSS to your existing style.css file */

.sbox {
    padding: 0;
    overflow: hidden; /* FIX: This contains floated elements and prevents overlays */
}

/* This adds a separator and spacing for the new combined content box */
.main-content-box {
    margin-top: 25px;
    border-top: solid 3px var(--border-color-dark);
    padding-top: 15px;
}

.wp-content {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color-dark);
}

.section-header:first-of-type {
    margin-top: 15px;
}

body.home .content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Adds a gap after a movie grid */
.items {
    margin-bottom: 20px; 
}

/* Removes the gap from the very last movie grid on the page */
.items:last-of-type {
    margin-bottom: 0;
}

/*
==========================================================================
 Homepage Search Bar Styles (Updated to remove all borders/outlines)
==========================================================================
*/
.homepage-search-bar {
    padding: 5px;
    margin-bottom: 20px;
}

.homepage-search-bar .search-form {
    display: flex;
    background: #1C1C1E;      /* The dark background color you liked */
    border: none;             /* --- FIX: Removed the 1px border --- */
    border-radius: 8px;       /* Keeps the rounded corners */
    overflow: hidden;
    height: 50px;
    align-items: center;
}

.homepage-search-bar .search-form label {
    flex-grow: 1;
    display: flex;
    margin-bottom: 0;
    height: 100%;
}

.homepage-search-bar .search-form .search-field {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0 20px;
    font-size: 16px;
    color: #E0E0E0;
    height: 100%;
    box-sizing: border-box;
}

/* --- FIX: This new block removes the white line on click --- */
.homepage-search-bar .search-form .search-field:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.homepage-search-bar .search-form .search-field::placeholder {
    color: #707070;
}

.homepage-search-bar .search-form .search-submit {
    background: transparent;
    border: 0;
    color: #707070;
    padding: 0 15px;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage-search-bar .search-form .search-submit:hover {
    color: #FFFFFF;
}

/*
==========================================================================
 Desktop Submenu Arrow
==========================================================================
*/

/* Find menu items that have a sub-menu */
.head-main-nav ul.main-header li.menu-item-has-children > a {
    position: relative; /* Allow positioning the arrow */
    /* Make space for the arrow */
    padding-right: 30px; 
}

/* Create the arrow icon */
.head-main-nav ul.main-header li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-dark);
    border-bottom: 1.5px solid var(--text-dark);
    transform: translateY(-70%) rotate(45deg);
    position: absolute;
    right: 12px;
    top: 50%;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.head-main-nav ul.main-header li.menu-item-has-children:hover > a::after {
    border-color: var(--primary-color);
    transform: translateY(-30%) rotate(225deg);
}

/* Hide this new arrow inside the dropdown sub-menu */
.head-main-nav ul.main-header li ul.sub-menu li.menu-item-has-children > a {
    padding-right: 20px; /* Reset to its original padding */
}

.head-main-nav ul.main-header li ul.sub-menu li.menu-item-has-children > a::after {
    display: none; /* We don't need arrows on sub-menu items */
}

/*
==========================================================================
 Desktop Submenu Horizontal Line
==========================================================================
*/

/* Adds the line to each item */
.head-main-nav ul.main-header li ul.sub-menu li {
    border-bottom: 1px solid var(--background-header-border); 
}

/* =========================================================================
   Content Slots — Responsive Placement Wrappers
   Neutral class names. No ad-related keywords.
   ========================================================================= */

.section-bridge,
.detail-bridge {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 16px 0;
    display: block;
    clear: both;
}

.section-bridge .inner-wrap,
.detail-bridge .inner-wrap {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
}

/* Test banner sizing — removes once real ad code is placed */
.section-bridge .test-slot,
.detail-bridge .test-slot {
    width: 100%;
    max-width: 728px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

@media ( max-width: 768px ) {
    .section-bridge,
    .detail-bridge {
        margin: 12px 0;
    }
    .section-bridge .test-slot,
    .detail-bridge .test-slot {
        max-width: 100%;
        height: 60px;
        font-size: 12px;
    }
}

/* Gap fix — removes sbox padding interference */
.detail-bridge {
    margin: 0;
    padding: 0;
}

.sbox:has(.detail-bridge) {
    padding-bottom: 0;
}

/* Inner wrap full width fix */
.detail-bridge .inner-wrap,
.section-bridge .inner-wrap {
    display: block;
    width: 100%;
}