/*
Theme Name: HDMovie2
Theme URI: https://hdmovie2.monster
Author: HDMovie2 Team
Author URI: https://hdmovie2.monster
Description: HDMovie2 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). HDMovie2 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: hdmovie2
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;
}

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 {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 22px;
    color: var(--text-white);
    cursor: pointer;
}

header.responsive .nav a.nav-resp:before { content: "\f0c9"; }
header.responsive .nav a.nav-resp.active:before { content: "\f00d"; }
header.responsive .search a.search-resp:before { content: "\f002"; }
header.responsive .search a.search-resp.active:before { content: "\f00d"; }

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 {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0dd";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--text-medium);
}

.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: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Changed to bold */
    margin-right: 15px;
    font-size: 8px;
    vertical-align: middle;
    color: var(--text-darker);
}

.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: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
    font-size: 11px;
    color: #6e6e6e;
}

.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;
}
.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;
}

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: var(--text-white);
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background-color .2s;
}

.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 h2 {
    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 h2 span {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-darker);
}

.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: 14px;
    margin-right: 15px;
    color: var(--text-darker);
    transition: color 0.2s ease-in-out;
}

.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 {
    color: 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: 0;
    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: all 0.2s ease-in-out;
    box-sizing: border-box;
}

.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 .fa-search {
    font-size: 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 .fa-star {
    color: #ffd600;
    margin-right: 5px;
}

.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: "\f0d7"; /* Font Awesome "caret-down" icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--text-dark);
    position: absolute;
    right: 12px;
    top: 50%; /* <-- THIS IS THE FIX */
    transform: translateY(-50%); /* <-- THIS IS THE FIX */
    transition: all 0.2s ease-in-out;
}

/* Change arrow color and direction on hover */
.head-main-nav ul.main-header li.menu-item-has-children:hover > a::after {
    color: var(--primary-color); /* Match the link hover color */
    transform: translateY(-50%) rotate(180deg);
}

/* 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); 
}