/*
 * Dooplay V2 - Custom Frontend Styles
 * Maintained and Refactored for Clarity and Responsiveness
 */

/* --- Global Styles & Dark Theme --- */
:root {
    --body-bg-option: #101010; 
    --body-bg: #101010;
    --container-bg: #181818; 
    --card-bg: #181818; 
    --text-color: rgba(255,255,255,0.7);
    --text-color-strong: #ffffff;
    --text-muted: rgba(255,255,255,0.5);
    --accent-color: #408bea;
    --accent-color-hover: #5fa4f3;
    --badge-featured-bg: #165a19;
    --badge-quality-bg: rgb(250, 0, 0);
    --border-color: rgba(255,255,255,0.08);
    --border-color-strong: #000; 
    --header-bg: rgba(15,15,15,0.95);
    --header-search-bg: rgba(255,255,255,0.1); 
    --header-search-text: #fff;
    --header-search-placeholder: rgba(255,255,255,0.5);
    --header-height: 53px; 

    --poster-width-pc: 140px;
    --poster-height-pc: calc(var(--poster-width-pc) * 1.5); 

    --font-family-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --default-max-container-width: 1200px;
    --container-padding: 20px; 
}

body {
    font-family: var(--font-family-main);
    margin: 0;
    background-color: var(--body-bg-option);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--accent-color-hover);
    text-decoration: none;
}

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

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Layout Wrappers --- */
.header-inner-wrap,
.footer-inner-wrap,
.dooplay-container {
    max-width: var(--default-max-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

/* --- Header --- */
.site-header {
    background-color: var(--header-bg);
    color: var(--text-color);
    padding: 0;
    border-bottom: 1px solid var(--border-color-strong);
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    min-height: var(--header-height); 
}
/* Adjust header top position when admin bar is present */
body.admin-bar .site-header {
    top: 32px; /* Default admin bar height */
}
@media screen and (max-width: 782px) { /* Admin bar height changes on smaller screens */
    body.admin-bar .site-header {
        top: 46px;
    }
}

.site-header .header-inner-wrap {
    display: flex;
    align-items: center;
    min-height: var(--header-height); 
}
.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 20px; 
}
.site-branding img.custom-logo {
    max-height: 28px;
    width: auto;
}
.site-branding .site-title a {
    color: var(--text-color-strong);
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
}

.main-navigation {
    display: flex; 
    align-items: center;
    margin-right: auto; 
}
.main-navigation ul.primary-menu-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; 
}
.main-navigation ul.primary-menu-ul li { 
    position: relative;
}
.main-navigation ul.primary-menu-ul li a {
    color: rgba(255,255,255,.8);
    padding: 15px 12px;
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85em;
    line-height: 1;
}
.main-navigation ul.primary-menu-ul li a:hover,
.main-navigation ul.primary-menu-ul li.current-menu-item > a,
.main-navigation ul.primary-menu-ul li.current-menu-ancestor > a {
    color: var(--accent-color);
}

/* Desktop Dropdown Menu Styles */
.main-navigation ul li.menu-item-has-children > a {
    padding-right: 25px; 
}
.main-navigation ul li.menu-item-has-children > a::after {
    font-family: 'dashicons';
    position: absolute;
    top: 50%;
    right: 8px; 
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
    color: rgba(255,255,255,.5); 
}
.main-navigation ul li.menu-item-has-children:hover > a::after {
    color: var(--accent-color);
}
.main-navigation ul ul.sub-menu {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: var(--header-bg); 
    border: 1px solid var(--border-color);
    border-top: none; 
    box-shadow: 0 3px 5px rgba(0,0,0,0.15);
    min-width: 220px; 
    z-index: 1001; 
    padding: 0;
    margin: 0;
    list-style: none;
}
.main-navigation ul li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation ul li.menu-item-has-children:focus-within > ul.sub-menu { 
    display: block;
}
.main-navigation ul ul.sub-menu li {
    width: 100%;
}
.main-navigation ul ul.sub-menu li a {
    padding: 10px 15px;
    font-size: 0.8em; 
    text-transform: none; 
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color); 
    color: var(--text-color); 
}
.main-navigation ul ul.sub-menu li:last-child a {
    border-bottom: none;
}
.main-navigation ul ul.sub-menu li a:hover {
    background-color: var(--accent-color); 
    color: var(--text-color-strong);
}
.main-navigation ul ul.sub-menu li.menu-item-has-children > a::after {
    content: '\\f139'; 
    right: 10px; 
}
.main-navigation ul ul.sub-menu ul.sub-menu { 
    top: -1px; 
    left: 100%; 
    border-top: 1px solid var(--border-color); 
}


.header-search {
    flex-shrink: 0; 
    display: flex; 
    align-items: center;
}
.desktop-header-search-form-wrapper {
    display: flex; 
}
.desktop-header-search-form-wrapper .header-search-form { 
    background: var(--header-search-bg);
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0; 
}
.desktop-header-search-form-wrapper .search-field {
    background: transparent;
    border: none;
    color: var(--header-search-text);
    padding: 8px 10px;
    font-size: 0.9em;
    outline: none;
    width: 180px; 
}
.desktop-header-search-form-wrapper .search-field::placeholder {
    color: var(--header-search-placeholder);
    opacity: 1;
}
.desktop-header-search-form-wrapper .search-submit {
    background: transparent;
    border: none;
    color: var(--header-search-text); 
    cursor: pointer;
    padding: 8px; 
    font-size: 1em; 
    line-height: 1; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
.desktop-header-search-form-wrapper .search-submit:hover {
    color: var(--accent-color); 
}

.mobile-search-toggler {
    background: transparent;
    border: none;
    color: var(--header-search-text);
    cursor: pointer;
    padding: 8px;
    display: none; 
    align-items: center;
    justify-content: center;
    line-height: 1; 
}
.mobile-search-toggler:hover {
    color: var(--accent-color);
}

.custom-search-icon svg {
    width: 18px; 
    height: 18px; 
    vertical-align: middle;
    display: inline-block; 
    fill: currentColor; 
}
.search-submit .dashicons { 
    display: none !important;
}


.menu-toggle {
    display: none; 
    background: transparent;
    color: var(--text-color-strong); 
    border: none;
    padding: 0.5em;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
}
/* SVG Menu Toggle Icons */
.menu-toggle .custom-menu-icon {
    display: inline-block; /* Show hamburger by default */
}
.menu-toggle .custom-close-icon {
    display: none; /* Hide close icon by default */
}
.menu-toggle.active .custom-menu-icon {
    display: none; /* Hide hamburger when menu is open/active */
}
.menu-toggle.active .custom-close-icon {
    display: inline-block; /* Show close icon when menu is open/active */
}
.menu-toggle .dashicons { /* Fallback or if still used for initial hamburger */
    vertical-align: middle;
    font-size: 24px; 
}


/* --- Mobile Dropdown Search Area --- */
.mobile-search-dropdown-area {
    background-color: var(--container-bg); 
    padding: 0; 
    position: fixed; 
    top: var(--header-height); /* Position below the header */
    left: 0;
    right: 0;
    z-index: 998; 
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--border-color);
    display: none; 
}
/* Adjust top position if admin bar is present */
body.admin-bar .mobile-search-dropdown-area {
    top: calc(var(--header-height) + 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .mobile-search-dropdown-area {
        top: calc(var(--header-height) + 46px);
    }
}

.mobile-search-dropdown-area.active { 
    display: block !important; 
}
.mobile-search-dropdown-area .homepage-search-section {
    padding: var(--container-padding); 
    margin-bottom: 0;
    border-bottom: none;
}


/* --- Footer --- */
.site-footer { background-color: #0a0a0a; color: var(--text-muted); text-align: center; font-size: 0.9em; }
.site-footer a { color: var(--text-color); }
.site-footer a:hover { color: var(--accent-color); }

/* --- Main Content Structure --- */
.dooplay-main-content-wrap {}
.dooplay-container { background-color: var(--container-bg); padding-top: var(--container-padding); padding-bottom: var(--container-padding); }
.site-content { flex-grow: 1; }

/* --- Homepage Search Section (and search page search bar) --- */
.homepage-search-section { padding: 0 0 20px 0; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.homepage-search-form { display: flex; max-width: 100%; margin: 0; background: rgba(30,30,30,0.9); border-radius: 4px; border: 1px solid var(--border-color); overflow: hidden; }
.homepage-search-form .search-field { flex-grow: 1; border: none; background: transparent; padding: 12px 20px; font-size: 1em; color: var(--text-color-strong); outline: none; }
.homepage-search-form .search-field::placeholder { color: var(--text-muted); opacity: 1; }
.homepage-search-form .search-submit { background: transparent; border: none; color: #fff; padding: 0 20px; cursor: pointer; font-size: 1.1em; transition: background-color 0.2s ease; display:flex; align-items:center; justify-content:center;}
.homepage-search-form .search-submit:hover { background-color: rgba(69, 64, 64, 0.495); }
.homepage-search-form .search-submit .custom-search-icon svg { width: 20px; height: 20px; }

/* --- Content & Sidebar Layout --- */
.dooplay-content-sidebar-wrap { display: flex; flex-wrap: nowrap; gap: 25px; }
#primary.content-area { width: calc(70% - 12.5px); box-sizing: border-box; }
#secondary.widget-area { width: calc(30% - 12.5px); box-sizing: border-box; }

/* --- Homepage Sections & Archive Titles --- */
.homepage-section { margin-bottom: 30px; }
.homepage-section:last-of-type { margin-bottom: 0; }
.section-title { font-size: 1.3em; margin-top: 0; margin-bottom: 15px; color: var(--text-color-strong); font-weight: 600; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.section-header .section-title { margin-bottom: 0; }
.section-header .section-header-right { display: flex; align-items: center; gap: 15px; }
.section-header .item-count { font-size: 0.9em; color: var(--text-muted); }
.section-header .see-all-button, a.button.see-all-button { background-color: var(--accent-color); color: #fff; padding: 6px 12px; text-decoration: none; border-radius: 3px; font-size: 0.85em; font-weight: bold; border: none; transition: background-color 0.2s ease-in-out; line-height: 1.2; }
.section-header .see-all-button:hover, a.button.see-all-button:hover { background-color: var(--accent-color-hover); color: #fff; }
.page-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.page-header .page-title { font-size: 1.8em; color: var(--text-color-strong); margin-top: 0; margin-bottom: 10px; }
.page-header .page-title span { color: var(--accent-color); font-weight: bold; }
.archive-custom-description p, .term-description p, .archive-description p { font-size: 0.95em; line-height: 1.6; color: var(--text-muted); margin-bottom: 0; }
.archive-custom-description.term-description-default p { font-style: italic; }
.section-title-container { margin-bottom: 20px; }
h2.section-title.recently-added-title { font-size: 1.2em; font-weight: 600; text-align: left; display: block; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-color); }
.recently-added-title .title-prefix { color: var(--accent-color); margin-right: 8px; font-weight: bold; }

/* --- Movie Grid & Items --- */
.movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--poster-width-pc), 1fr)); gap: 18px; }
.movie-item { background-color: transparent; border-radius: 3px; overflow: visible; display: flex; flex-direction: column; position: relative; }
.movie-item-poster-wrapper { position: relative; display: block; width: var(--poster-width-pc); height: var(--poster-height-pc); margin: 0 auto; overflow: hidden; background-color: #222; border-radius: 3px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.movie-item-poster-wrapper img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; }
.movie-item-poster-wrapper:hover img { transform: scale(1.1); filter: blur(3px); }
.movie-item a:hover .movie-item-poster-wrapper { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
.movie-item-poster-wrapper .play-icon-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: url('../images/play-button.png'); background-position: center center; background-repeat: no-repeat; background-size: 60px 60px; opacity: 0; transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; z-index: 10; cursor: pointer; background-color: rgba(0, 0, 0, 0); }
.movie-item-poster-wrapper:hover .play-icon-overlay { opacity: 1; background-color: rgba(0, 0, 0, 0.5); }
.quality-badge, .featured-badge { position: absolute; padding: 2px 6px; font-size: 0.7em; font-weight: 600; border-radius: 2px; line-height: 1.2; z-index: 2; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); text-transform: uppercase; color: #fff; }
.quality-badge { top: 5px; right: 5px; background-color: var(--badge-quality-bg); }
.featured-badge { top: 5px; left: 5px; background-color: var(--badge-featured-bg); }
.movie-item-content { padding-top: 8px; text-align: left; }
.movie-item .movie-title { font-size: 0.85em; margin: 0 0 3px 0; font-weight: 500; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.movie-item .movie-title a { color: inherit; }
.movie-item .movie-title a:hover { color: var(--accent-color); }
.movie-item .movie-year { font-size: 0.95em; color: var(--text-muted); display: block; }

/* --- Sidebar & Widget Styling --- */
#secondary.widget-area {}
.widget-area .widget { margin-bottom: 25px; background-color: var(--card-bg); padding: 15px; border-radius: 4px; }
.widget-area .widget:last-child { margin-bottom: 0; }
.widget-area .widget-title { font-size: 1.0em; margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); color: var(--text-color-strong); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.dooplay_v2_widget_genres nav.genres ul, .widget_categories ul { list-style: none; padding: 0; margin: 0; }
.dooplay_v2_widget_genres nav.genres ul.scrollable, .widget_categories ul.scrollable { max-height: 224px; overflow-y: hidden; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #101010 rgba(255,255,255,0.05); }
.dooplay_v2_widget_genres nav.genres ul.scrollable:hover, .widget_categories ul.scrollable:hover { overflow-y: auto; }
.dooplay_v2_widget_genres nav.genres ul.scrollable::-webkit-scrollbar, .widget_categories ul.scrollable::-webkit-scrollbar { width: 8px; }
.dooplay_v2_widget_genres nav.genres ul.scrollable::-webkit-scrollbar-track, .widget_categories ul.scrollable::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.dooplay_v2_widget_genres nav.genres ul.scrollable::-webkit-scrollbar-thumb, .widget_categories ul.scrollable::-webkit-scrollbar-thumb { background-color: #2d2c2c; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05); }
.dooplay_v2_widget_genres nav.genres ul.scrollable::-webkit-scrollbar-thumb:hover, .widget_categories ul.scrollable::-webkit-scrollbar-thumb:hover { background-color: #1f1e1d; }
.dooplay_v2_widget_genres nav.genres ul li, .widget_categories ul li { padding: 8px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; }
.dooplay_v2_widget_genres nav.genres ul li:last-child, .widget_categories ul li:last-child { border-bottom: none; }
.dooplay_v2_widget_genres nav.genres ul li a, .widget_categories ul li a { color: var(--text-muted); display: inline-block; position: relative; padding-left: 18px; text-decoration: none; font-weight: 400; }
.dooplay_v2_widget_genres nav.genres ul li a:before, .widget_categories ul li a:before { content: "\2022"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 18px; line-height: 1; transition: color 0.2s ease-in-out; font-family: sans-serif; }
.dooplay_v2_widget_genres nav.genres ul li a:hover, .widget_categories ul li a:hover { color: var(--accent-color); }
.dooplay_v2_widget_genres nav.genres ul li a:hover:before, .widget_categories ul li a:hover:before { color: var(--accent-color); }
.dooplay_v2_widget_genres nav.genres ul li .count, .dooplay_v2_widget_genres nav.genres ul li .post-count, .widget_categories ul li .count, .widget_categories ul li span[title*="posts in"] { color: var(--text-muted); font-size: 0.9em; background-color: rgba(0, 0, 0, 0.2); padding: 1px 6px; border-radius: 3px; margin-left: 5px; }
.widget_dooplay_v2_widget_release_years nav.releases ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.widget_dooplay_v2_widget_release_years nav.releases ul.scrollable { max-height: 36px; overflow-y: hidden; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--accent-color) rgba(255,255,255,0.05); }
.widget_dooplay_v2_widget_release_years nav.releases ul.scrollable:hover { overflow-y: auto; }
.widget_dooplay_v2_widget_release_years nav.releases ul.scrollable::-webkit-scrollbar { width: 8px; }
.widget_dooplay_v2_widget_release_years nav.releases ul.scrollable::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.widget_dooplay_v2_widget_release_years nav.releases ul.scrollable::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px; border: 1px solid rgba(255,255,255,0.05); }
.widget_dooplay_v2_widget_release_years nav.releases ul.scrollable::-webkit-scrollbar-thumb:hover { background-color: #E64A19; }
.widget_dooplay_v2_widget_release_years nav.releases ul li a { display: block; background-color: rgba(0,0,0,0.3); color: var(--text-muted); padding: 7px 5px; text-align: center; border-radius: 3px; font-size: 0.9em; border: 1px solid var(--border-color); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.widget_dooplay_v2_widget_release_years nav.releases ul li a:hover, .widget_dooplay_v2_widget_release_years nav.releases ul li a.current-year-link { background-color: var(--accent-color); color: var(--text-color-strong); border-color: var(--accent-color); }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item { display: flex; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); align-items: flex-start; background-color: #0F0F0E; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .image { width: 60px; height: calc(60px * 1.5); flex-shrink: 0; margin-right: 12px; background-color: #222; border-radius: 3px; overflow: hidden; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .image img { width: 100%; height: 100%; object-fit: cover; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data { flex-grow: 1; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data h3 { font-size: 0.85em; margin: 0 0 4px 0; line-height: 1.3; color: var(--text-color); font-weight: 500; white-space: normal; overflow: visible; text-overflow: clip; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data h3 a { color: inherit; text-decoration: none; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data h3 a:hover { color: var(--accent-color); }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra { font-size: 0.95em; color: var(--text-muted); display: flex; align-items: center; margin-top: 3px; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra b { display: inline-flex; align-items: center; margin-right: 12px; font-weight: normal; color: var(--text-color); border: 1px solid var(--border-color); padding: 2px 6px; border-radius: 3px; background-color: rgba(244, 244, 244, 0); }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra b .dashicons { color: #ffb900; font-size: 13px; margin-right: 4px; line-height: 1; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra b .rating-value { font-size: 0.9em; color: inherit; vertical-align: middle; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra .year { font-size: 0.9em; color: var(--text-muted); vertical-align: middle; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item:hover .data h3 a { color: #ffffff !important; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item:hover .data .wextra b { color: #ffffff; border-color: #0099ff; }
.widget_dooplay_v2_widget_popular_movies .movie-widget-item:hover .data .wextra .year { color: #ffffff !important; }

/* --- Pagination Styling --- */
.dooplay-custom-pagination { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 15px; margin-top: 30px; margin-bottom: 30px; padding: 15px 10px; background-color: #181818; border-radius: 4px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.dooplay-custom-pagination .page-of-pages { font-size: 0.9em; color: #ccc; margin-right: 15px; }
.dooplay-custom-pagination .navigation.pagination { flex-grow: 1; }
.dooplay-custom-pagination .nav-links { display: flex; align-items: center; gap: 5px; }
.dooplay-custom-pagination .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; min-width: 36px; height: 36px; text-decoration: none; border: 1px solid #333; border-radius: 3px; font-size: 0.9em; line-height: 1; box-sizing: border-box; background-color: #444; color: #ddd; }
.dooplay-custom-pagination .nav-links .page-numbers:not(.current):not(.dots):hover { background-color: #555; color: #fff; border-color: #666; }
.dooplay-custom-pagination .nav-links .page-numbers.current { background-color: #2a2a2a; color: #fff; border-color: #1a1a1a; font-weight: bold; }
.dooplay-custom-pagination .nav-links .page-numbers .dashicons { font-size: 20px; height: auto; width: auto; line-height: 1; }
.dooplay-custom-pagination .nav-links .dots { background-color: transparent; border: none; color: #aaa; padding: 8px 0; }

/* Screen reader text */
.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 !important; width: 1px; word-wrap: normal !important; }


/* === RESPONSIVE ADJUSTMENTS === */

@media (max-width: 1024px) {
    /* ==============================
       Header and Menu Toggle for Mobile Layout
       ============================== */
    .site-header .header-inner-wrap {
        justify-content: space-between; /* Hamburger - Logo - Search Icon */
    }
    .menu-toggle {
        display: block;
        order: 1;
        font-size: 1.8em;
        padding: 0.3em 0.5em;
    }
    .site-branding {
        order: 2;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        margin-right: 0;
    }
    .site-branding img.custom-logo,
    .site-branding .site-title a {
        margin-left: 0;
        margin-right: 0;
    }
    .main-navigation {
        order: 99;
        display: block;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
    }
    .main-navigation ul.primary-menu-ul {
        display: none;
        flex-direction: column;
        background-color: var(--header-bg);
        border-top: 1px solid var(--border-color-strong);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    }
    .main-navigation ul.primary-menu-ul.toggled-on {
        display: flex;
    }
    .main-navigation ul.primary-menu-ul li {
        width: 100%;
        text-align: left;
    }
    .main-navigation ul.primary-menu-ul li a {
        padding: 12px 20px;
        border-bottom: 1px solid var(--border-color);
    }
    .main-navigation ul.primary-menu-ul li:last-child a {
        border-bottom: none;
    }

    .header-search {
        order: 3;
        margin-left: 0;
    }
    /* Hide desktop inline search form on mobile */
    .desktop-header-search-form-wrapper {
        display: none;
    }
    /* Show mobile search toggler button on mobile */
    .mobile-search-toggler {
        display: inline-flex;
    }

    /* ==============================
       Movie Grid and Posters: Fixed size for larger tablets
       ============================== */
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 15px;
    }
    .movie-item-poster-wrapper {
        width: 130px;
        height: calc(130px * 1.5);
        padding-bottom: 0;
        margin: 0 auto;
    }
    .movie-item-poster-wrapper img {
        position: static;
        width: 100%;
        height: 100%;
    }

    /* ==============================
       ALWAYS SHOW SUB-MENUS IN-LINE ON MOBILE
       Override desktop “display: none” and absolute positioning
       ============================== */

    /* 1. Ensure that each <li> is full width, so child <ul> stack below */
    .main-navigation ul.primary-menu-ul li {
        width: 100%;
    }

    /* 2. Force any nested <ul class="sub-menu"> to display */
    .main-navigation ul.primary-menu-ul li ul.sub-menu {
        display: block !important;           /* override desktop’s “display: none” */
        position: relative !important;        /* stack under its parent, not absolute */
        top: auto !important;                 /* cancel top: 100% from desktop */
        left: auto !important;                /* cancel left: 0 from desktop */
        background-color: var(--header-bg);   /* match the mobile menu’s background */
        border: none !important;              /* remove the desktop border */
        box-shadow: none !important;          /* remove desktop box-shadow */
        padding-left: 0;                      /* reset any desktop padding */
        margin-left: 0;                       /* reset any desktop margin */
    }

    /* 3. Setup each sub-menu link’s base padding (so we have room for dashes) */
    .main-navigation ul.primary-menu-ul li ul.sub-menu li a {
        position: relative;                /* needed for ::before and ::after to position */
        padding-left: 25px;                /* leave space on left for the dash */
        padding-right: 25px;               /* leave space on right for the dash */
        font-size: 0.9em;                  /* slightly smaller text, optional */
        text-transform: none;              /* keep normal casing on mobile */
        color: var(--text-color);          /* or your preferred submenu text color */
        border-bottom: 1px solid var(--border-color);
    }

    /* 4. Insert dash on the left of each sub-menu link */
    .main-navigation ul.primary-menu-ul li ul.sub-menu li a::before {
        content: "–";
        position: absolute;
        left: 8px;                       /* adjust as needed */
        top: 50%;
        transform: translateY(-50%);
        color: var(--accent-color);     /* dash color */
        font-size: 1em;
        line-height: 1;
    }

    /* 5. Insert dash on the right of each sub-menu link */
    .main-navigation ul.primary-menu-ul li ul.sub-menu li a::after {
        content: "–";
        position: absolute;
        right: 8px;                      /* adjust as needed */
        top: 50%;
        transform: translateY(-50%);
        color: var(--accent-color);     /* dash color */
        font-size: 1em;
        line-height: 1;
    }

    /* 6. If you have “grandchild” menus, indent them further
          (e.g. <ul class="sub-menu"> inside another <ul class="sub-menu">) */
    .main-navigation ul.primary-menu-ul
        li ul.sub-menu
        li ul.sub-menu
        li a {
        padding-left: 40px;             /* deeper level = more indent */
        padding-right: 40px;            /* same for right dash space */
    }
    .main-navigation ul.primary-menu-ul
        li ul.sub-menu
        li ul.sub-menu
        li a::before {
        left: 12px;
    }
    .main-navigation ul.primary-menu-ul
        li ul.sub-menu
        li ul.sub-menu
        li a::after {
        right: 12px;
    }
}



@media (max-width: 992px) {
    /* Sidebar and Content Area Layout */
    .dooplay-content-sidebar-wrap { gap: 20px; }
    #primary.content-area { width: calc(65% - 10px); }
    #secondary.widget-area { width: calc(35% - 10px); }

    /* Movie Grid and Posters: Responsive Aspect Ratio Method */
    .movie-item-poster-wrapper { display: block; width: 100%; height: auto; padding-bottom: 150%; position: relative; margin: 0; }
    .movie-item-poster-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

@media (max-width: 768px) {
    /* Layout, Container, and Menu Styles */
    .header-inner-wrap, .footer-inner-wrap, .dooplay-container { padding-left: 15px; padding-right: 15px; }
    :root { --container-padding: 15px; }

    .dooplay-content-sidebar-wrap { flex-direction: column; gap: 25px; }
    #primary.content-area, #secondary.widget-area { width: 100%; padding-right: 0; padding-left: 0; }
    #secondary.widget-area { margin-top: 25px; background-color: var(--container-bg); padding: 15px; border-radius: 0px; border: none; }
    .section-title { font-size: 1.2em; }
    .homepage-search-form .search-field { padding: 10px 15px; font-size: 0.95em; }
    .homepage-search-form .search-submit { padding: 0 15px; }

    /* Movie Grid */
    .movie-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .movie-item-poster-wrapper { width: 100%; height: auto; padding-bottom: 150%; position: relative; margin: 0; }
    .movie-item-poster-wrapper img { position: absolute; top:0; left:0; width: 100%; height: 100%; }

    /* Popular Movies Widget */
    .widget_dooplay_v2_widget_popular_movies .movie-widget-item { flex-direction: row; align-items: center; text-align: left; } 
    .widget_dooplay_v2_widget_popular_movies .movie-widget-item .image { width: 60px; height: calc(60px * 1.5); margin-right: 12px; margin-bottom: 0; flex-shrink: 0; }
    .widget_dooplay_v2_widget_popular_movies .movie-widget-item .data { width: calc(100% - 60px - 12px); box-sizing: border-box; }
    .widget_dooplay_v2_widget_popular_movies .movie-widget-item .data h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px 0; font-size: 0.85em; line-height: 1.3; }
    .widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra { justify-content: flex-start; gap: 8px; }
}


/* Responsive adjustments for 3-column grid on small phones (300px - 485px) */
@media screen and (min-width: 300px) and (max-width: 485px) {
    html, body { overflow-x: hidden; }
    body::-webkit-scrollbar { width: 0; background: transparent; }
    body { scrollbar-width: none; }

    .dooplay-container { max-width: 100% !important; padding-left: 8px; padding-right: 8px; }
    :root { --container-padding: 8px; }

    .movie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-items: center; box-sizing: border-box; width: 100%; }
    .movie-item { width: 100%; min-width: 0; box-sizing: border-box; }
    .movie-item-poster-wrapper { width: 100%; min-width: 0; height: auto; padding-bottom: 150%; position: relative; overflow: hidden; margin: 0; }
    .movie-item-poster-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .movie-item .movie-title { font-size: 0.7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .movie-item .movie-year { font-size: 0.65em; }

    .dooplay-content-sidebar-wrap { flex-direction: column; gap: 12px; }
    #primary.content-area, #secondary.widget-area { width: 100%; box-sizing: border-box; padding: 0; }
    #secondary.widget-area { margin-top: 12px; padding: 8px; background-color: var(--container-bg); border-radius: 3px; }

    .dooplay_v2_widget_genres nav.genres ul.scrollable::-webkit-scrollbar,
    .widget_dooplay_v2_widget_release_years nav.releases ul.scrollable::-webkit-scrollbar { width: 0; background: none; }
    .dooplay_v2_widget_genres nav.genres ul.scrollable,
    .widget_dooplay_v2_widget_release_years nav.releases ul.scrollable { scrollbar-width: none; }

    /* Header adjustments for very small screens */
    .mobile-search-toggler { padding: 6px; } 
    .site-branding img.custom-logo { max-height: 28px; } 
    .menu-toggle { font-size: 1.3em; }
}

/* Further adjustments for very small screens if needed, e.g. within 768px breakpoint */
@media (max-width: 480px) { 
    /* Mobile header search icon button only */
    .mobile-search-toggler { 
        padding: 8px; 
    }
    .desktop-header-search-form-wrapper {
        display: none !important; 
    }
    
    .header-search .mobile-search-toggler { 
        background: transparent; 
        padding: 8px; 
    }

    .widget_dooplay_v2_widget_popular_movies .movie-widget-item .data h3 { font-size: 0.95em; }
    .widget_dooplay_v2_widget_popular_movies .movie-widget-item .data .wextra { font-size: 0.70em; }
}

/*
 * CSS for Single Movie Page (single-movies.php)
 *
 * @package Dooplay_V2
 * @since 2.5.1
 */

/* --- Main Player Box --- */
.movie-main-player-box {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #111; /* Fallback if background-image fails or is not set */
    margin-bottom: 25px;
    border-radius: 4px;
    overflow: hidden;
}

.fake-player-link-wrapper,
.real-player-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
}

.player-box-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    z-index: 5;
}

.play-svg-icon {
    width: 70px;
    height: 70px;
    filter: invert(95%) sepia(6%) saturate(100%) hue-rotate(197deg) brightness(118%) contrast(90%);
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    z-index: 10;
}

.fake-player-link-wrapper:hover .player-box-content-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}
.fake-player-link-wrapper:hover .play-svg-icon {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(30deg) brightness(111%) contrast(109%);
    opacity: 1;
    transform: scale(1.1);
}

.real-player-placeholder .real-play-button-trigger:hover .play-svg-icon {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(30deg) brightness(111%) contrast(109%);
    opacity: 1;
    transform: scale(1.1);
}

.fake-player-controls-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
    z-index: 12;
    color: #e0e0e0;
}
.fake-player-link-wrapper:hover .fake-player-controls-bottom {
    opacity: 1;
    transform: translateY(0);
}
.fake-player-controls-bottom .control-item { color: inherit; cursor: pointer; display: inline-flex; align-items: center; transition: color 0.2s ease; }
.fake-player-controls-bottom .control-item .dashicons { font-size: 20px; line-height: 1; }
.fake-player-controls-bottom .control-item:hover { color: #fff; }
.fake-player-controls-bottom .fake-play-icon-bottom .dashicons { font-size: 22px; }
.advertisement-indicator { background-color: transparent; color: inherit; padding: 0 5px; font-size: 0.85em; display: flex; align-items: center; margin-left: 8px; }
.advertisement-indicator .dashicons { margin-right: 4px; font-size: 15px; color: #ffd700; }
.fake-player-controls-right { display: flex; align-items: center; gap: 15px; }

.quality-badge-on-player { position: absolute; top: 15px; right: 15px; background-color: var(--badge-quality-bg, rgb(250, 0, 0)); color: #fff; padding: 3px 8px; font-size: 0.8em; font-weight: bold; border-radius: 3px; text-transform: uppercase; z-index: 15; }
.real-player-placeholder .real-play-button-trigger { background: none; border: none; padding: 0; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.real-player-placeholder .real-play-button-trigger:focus { outline: none; }
.fake-player-notice-ingeneral { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(255,0,0,0.7); padding: 5px 10px; border-radius: 3px; font-size: 0.8em; z-index: 20; }

/* Wrapper for the actual iframe, positioned within .movie-main-player-box */
.active-iframe-player-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Will fill the .movie-main-player-box which has aspect ratio */
    background-color: #000; /* Solid black background to cover underlying poster */
    z-index: 20; /* Ensure it's above the poster/placeholder overlays */
    display: none; /* Hidden by default, shown by JS */
}
.active-iframe-player-wrapper iframe {
    position: absolute; /* Position absolutely within its wrapper */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Remove extra space below iframe if any */
}

.movie-main-player-box.iframe-active .fake-player-link-wrapper,
.movie-main-player-box.iframe-active .real-player-placeholder {
    display: none !important; /* Ensure initial content is hidden when iframe is active */
}

/* --- Video Sources Section --- */
.video-sources-header.section-header { margin-top: 10px; margin-bottom: 15px; }
.page-views-count { font-size: 0.9em; color: var(--text-muted, #aaa); display: inline-flex; align-items: center; }
.page-views-count .dashicons { margin-right: 5px; font-size: 16px; }
.video-sources-list-section { margin-bottom: 25px; }
.video-sources-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.video-source-button { display: flex; align-items: center; width: 100%; padding: 10px 15px; background-color: rgba(255, 255, 255, 0.05); color: var(--text-color, #ccc); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 3px; text-align: left; font-size: 0.9em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; text-decoration: none; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-source-button:hover { background-color: var(--accent-color, #408bea); color: var(--text-color-strong, #fff); border-color: var(--accent-color-hover, #5fa4f3); }
.video-source-button .dashicons { margin-right: 10px; font-size: 18px; line-height: 1; flex-shrink: 0; }
.video-source-button.active-source { background-color: var(--accent-color-hover, #5fa4f3); color: var(--text-color-strong, #fff); border-color: var(--accent-color, #408bea); font-weight: bold; }


/*
 * CSS for Movie Details Header Section, Static TMDB Rating, Share Buttons, and Download Links
 *
 * @package Dooplay_V2
 * @since 2.7.2
 */

/* --- Movie Details Header Section (single-page-details.php) --- */
.movie-details-header-section {
    background-color: var(--card-bg, #181818);
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
    color: var(--text-color, #ccc);
}

.details-container {
    display: flex;
    flex-wrap: nowrap; 
    gap: 20px; 
}

.details-poster {
    flex: 0 0 140px;
    width: 140px;
    height: 210px; 
    max-width: 140px; 
}
.details-poster img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 3px;
    display: block;
    background-color: #222; 
}

.details-content {
    flex: 1; 
    display: flex;
    flex-direction: column; 
    min-width: 0; 
}

.movie-title-main-details {
    font-size: 1.6em;
    color: var(--text-color-strong, #fff);
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.25;
    font-weight: 600;
}

.movie-meta-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px; 
    color: var(--text-muted, #aaa);
    font-size: 1em; 
    margin-bottom: 12px; 
    padding-bottom: 12px; 
    line-height: 1.5;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1)); 
}
.movie-meta-primary .meta-item:not(:last-child)::after {
    content: "•";
    margin-left: 10px;
    color: var(--text-muted, #666);
}

/* Rating Area Styling - Simplified for Static TMDB Display */
.movie-rating-area-combined { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 12px; 
    padding-bottom: 12px; 
    width: 100%;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1)); 
}

.overall-rating-display { 
    display: flex;
    align-items: center; 
    gap: 10px; 
    padding: 0; 
}

.rating-value-display {
    font-size: 2.2em; 
    font-weight: 700;
    color: var(--text-color-strong, #fff);
    line-height: 1;
    flex-shrink: 0;
}

.rating-stars-and-votes { 
    display: flex;
    align-items: center; 
    gap: 8px; 
}

.rating-stars-display { 
    line-height: 1; 
    white-space: nowrap; 
    display: flex; 
    gap: 2px; 
}
.rating-stars-display .rating-star { 
    width: 16px;  
    height: 16px; 
    display: inline-block;
}
.rating-stars-display .rating-star.filled {
    fill: var(--accent-color, #f0b900); 
}
.rating-stars-display .rating-star.empty {
    fill: var(--text-muted, #444); 
}

.rating-count-display {
    font-size: 0.9em; 
    color: var(--text-muted, #999);
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1; 
}
.rating-count-display .dashicons { 
    margin-right: 4px;
    font-size: 13px;
    line-height: 1;
}

/* Movie Genres List */
.movie-genres-list {
    margin-top: 0; 
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.genre-tag {
    background-color: rgba(255,255,255,0.08);
    color: var(--text-muted, #aaa);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.genre-tag:hover {
    background-color: var(--accent-color, #408bea);
    color: var(--text-color-strong, #fff);
}

/* --- Share Buttons Section --- */
.movie-share-buttons-section {
    margin: 20px 0;
    padding: 0;
}
.share-divider {
    border: none;
    height: 1px;
    background-color: var(--border-color, rgba(255,255,255,0.1));
    margin: 15px 0;
}
.share-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}
.share-label {
    font-size: 0.9em;
    color: var(--text-muted, #aaa);
    margin-right: 5px;
    white-space: nowrap;
}
.share-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 3px;
    color: #fff; /* Icon and text color */
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    transition: opacity 0.2s ease-in-out;
    border: none;
}
.share-button:hover {
    opacity: 0.85;
}
.share-icon { /* Styles for the SVGs */
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor; /* SVG inherits color from parent <a> */
}
/* Brand specific colors */
.share-button.telegram { background-color: #0088cc; }
.share-button.facebook { background-color: #1877f2; }
.share-button.whatsapp { background-color: #25d366; }
.share-button.instagram { background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.share-button.message { background-color: #555; }


/* --- Download Links Section (Inside .entry-content from WordPress Editor) --- */
.entry-content > hr, 
.main-synopsis-area > hr,
.entry-content a + hr, /* Targets HR specifically after an <a> tag (your download link structure) */
.main-synopsis-area a + hr {
    display: none !important; /* Hide the HR if you are pasting them with the buttons */
}

.entry-content .dipesh,
.main-synopsis-area .dipesh {
    display: block; 
    width: 100%;   
    background-color: #1a73e8; /* Blue color similar to reference image */
    color: #ffffff;
    border: 1px solid #1a73e8; 
    padding: 10px 15px; 
    border-radius: 6px; 
    text-align: center;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
    transition: background-color 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}

.entry-content .dipesh:hover,
.main-synopsis-area .dipesh:hover {
    background-color: #1765cc; 
    opacity: 0.95;
}

.entry-content a:has(> button.dipesh),
.main-synopsis-area a:has(> button.dipesh) { 
    display: block;
    margin-bottom: 10px; /* Spacing between link blocks (which contain buttons) */
}
.entry-content a:last-of-type:has(> button.dipesh),
.main-synopsis-area a:last-of-type:has(> button.dipesh) {
    margin-bottom: 0; /* No bottom margin for the last link block */
}


/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    .details-container { flex-wrap: nowrap; align-items: flex-start; }
    .details-poster { flex: 0 0 100px; width: 100px; height: 150px; max-width: 100px; }
    .details-poster img { height: 100%; }
    .movie-title-main-details { font-size: 1.3em; }
    .movie-meta-primary { font-size: 0.9em; margin-bottom: 10px; padding-bottom: 10px;}
    .movie-meta-primary .meta-item:not(:last-child)::after { margin-left: 8px; }
    .movie-rating-area-combined { margin-top: 10px; margin-bottom:10px; padding-bottom:10px; } 
    .rating-value-display { font-size: 1.8em; }
    .rating-stars-display .rating-star { width: 16px; height: 16px; }
    .rating-count-display { font-size: 0.9em; }
    .genre-tag { font-size: 0.9em; padding: 2px 7px; }
    .share-buttons-container { justify-content: center; }
    .share-label { width: 100%; text-align: center; margin-bottom: 10px; margin-right: 0; }
    .entry-content .dipesh, .main-synopsis-area .dipesh { padding: 10px 12px; font-size: 0.85em; }
}

@media (max-width: 480px) {
    .movie-details-header-section { padding: 10px; }
    .details-container { gap: 15px; }
    .details-poster { flex: 0 0 80px; width: 80px; height: 120px; max-width: 80px; }
    .details-poster img { height: 100%; }
    .movie-title-main-details { font-size: 1.1em; }
    .movie-meta-primary { font-size: 13px; gap: 3px 6px; }
    .movie-meta-primary .meta-item:not(:last-child)::after { margin-left: 6px; }
    .rating-value-display { font-size: 1.6em; }
    .rating-stars-display .rating-star { width: 14px; height: 14px; }
    .rating-count-display { font-size: 0.65em; }
    .share-button { padding: 6px 10px; font-size: 0.8em; }
    .share-icon { width: 14px; height: 14px; }
    .entry-content .dipesh, .main-synopsis-area .dipesh { padding: 8px 10px; font-size: 0.8em; }
}

@media (max-width: 360px) {
    .details-poster { flex: 0 0 70px; width: 70px; height: 105px; max-width: 70px; }
    .details-container { gap: 10px; }
    .movie-title-main-details { font-size: 1em; }
    .movie-meta-primary { font-size: 0.6em; }
    .rating-value-display { font-size: 1.5em; }
    .rating-stars-display .rating-star { width: 12px; height: 12px; }
    .rating-stars-and-votes { gap: 5px; }
}



/*
 * ------------------------------------------------------------
 *  Full Updated CSS for Comments Section (Dooplay_V2)
 * ------------------------------------------------------------
 */

/* 1) Overall Comments Container */
#comments {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* 2) Title Styles ("Leave a comment" / "X thoughts on ...") */
#reply-title,
.comments-title {
    font-size: 1.4em;
    color: #fff;
    margin: 0 0 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

/* SVG icons inherit `color` from the parent element */
.comment-title-icon,
.comments-title-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    fill: currentColor; /* uses the parent color (#fff) */
    vertical-align: middle;
}

#reply-title small {
    font-size: 0.6em;
    margin-left: 10px;
}
#reply-title small a {
    color: #408bea;
    text-decoration: none;
}
#reply-title small a:hover {
    text-decoration: underline;
}

/* 3) Comment Form Container */
#respond {
    background-color: #1c1c1c; /* dark card background */
    padding: 20px 25px;
    border-radius: 4px;
    margin-bottom: 30px;
    border: 1px solid #000; /* slightly stronger border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 3.a) Paragraphs in the form (individual fields) */
.comment-form p {
    margin-bottom: 15px;
}
.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9em;
    color: #fff;
}

/* 3.b) Group: Name + Email Side-by-Side */
.comment-form-fields-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* space between Name and Email */
    margin-bottom: 15px; /* space after these two fields */
}
.comment-form-fields-group .comment-form-field-group-item {
    flex: 1;
    min-width: calc(50% - 10px); /* two-column layout on desktop */
    margin-bottom: 0;
}

/* 3.c) URL field (full width below Name/Email) */
.comment-form-url {
    clear: both;
}

/* 3.d) Input & Textarea Styles */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    color: #ccc;
    font-size: 0.9em;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    border-color: #408bea; /* accent on focus */
    background-color: rgba(0, 0, 0, 0.3);
    outline: none;
}

/* 3.e) Specific styling for the main comment textarea */
.comment-form textarea#comment {
    min-height: 100px;
    resize: vertical;
    margin-bottom: 15px; /* space before Name/Email group */
}

/* 3.f) Notes (“Your email address will not be published.”, signed-in message, etc.) */
.comment-form .comment-notes,
.comment-form .logged-in-as {
    font-size: 0.8em;
    color: #aaa;
    margin-bottom: 20px;
}
.comment-form .logged-in-as a {
    color: #408bea;
    text-decoration: none;
}

/* 3.g) Required-field asterisk color */
.comment-form .required {
    color: #ff0000;
}

/* 3.h) “Save my name, email, and website…” checkbox */
.comment-form-cookies-consent label {
    font-weight: normal;
    font-size: 0.85em;
    color: #aaa;
    display: inline-flex;
    align-items: center;
}
.comment-form-cookies-consent input[type="checkbox"] {
    margin-right: 8px;
}

/* 3.i) Submit Button */
.form-submit input#submit {
    background-color: #408bea;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.form-submit input#submit:hover {
    background-color: #5fa4f3; /* lighter accent on hover */
}

/* 4) Comment List (each individual comment) */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 4.a) Each top-level comment or pingback/trackback */
.comment-list li.comment,
.comment-list li.pingback,
.comment-list li.trackback {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comment-list li.comment:last-child,
.comment-list li.pingback:last-child,
.comment-list li.trackback:last-child {
    border-bottom: none;
}

/* 4.b) Nested replies (<ul class="children">) indentation */
.comment-list .children {
    list-style: none;
    padding-left: 25px; /* indent for replies */
    margin-top: 15px;
    border-left: 2px solid rgba(64, 139, 234, 0.3); /* accent line for thread */
}
.comment-list .children li.comment {
    background-color: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 10px;
    border-bottom: none;
}

/* 4.c) Comment body wrapper */
.comment-body {
    position: relative;
}

/* 4.d) Comment author line (avatar + name + metadata) */
.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.comment-author .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #333;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.comment-author .fn {
    font-weight: 600;
    font-size: 0.9em;
    color: #fff;
    text-decoration: none;
}
.comment-author .fn a {
    color: inherit;
    text-decoration: none;
}
.comment-author .says {
    display: none;
}

/* 4.e) Comment metadata (date + Reply link) */
.comment-metadata {
    font-size: 0.7em;
    color: #aaa;
    margin-left: auto; /* push it to the right on large screens */
    padding-left: 10px;
    white-space: nowrap;
}
.comment-metadata a {
    color: #aaa;
    text-decoration: none;
}
.comment-metadata a:hover {
    color: #408bea;
    text-decoration: underline;
}

/* 4.f) Comment text */
.comment-content {
    font-size: 0.9em;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 10px;
}
.comment-content p {
    margin-bottom: 10px;
}
.comment-content p:last-child {
    margin-bottom: 0;
}

/* 4.g) “Reply” link styling */
.reply .comment-reply-link {
    font-size: 0.95em;
    color: #408bea;
    text-decoration: none;
    font-weight: 500;
    background-color: rgba(64, 139, 234, 0.15);
    padding: 3px 7px;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.reply .comment-reply-link:hover {
    background-color: #408bea;
    color: #fff;
}

/* 5) Pagination / Comment Navigation */
.comment-navigation {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
}
.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
    color: #408bea;
    text-decoration: none;
}
.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover {
    text-decoration: underline;
}

/* 6) “Comments are closed” notice */
.no-comments {
    padding: 15px;
    background-color: #181818;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    text-align: center;
    color: #aaa;
    font-size: 0.9em;
}

/* 7) Responsive adjustments */
@media (max-width: 600px) {
    /* Stack Name/Email vertically on small screens */
    .comment-form-fields-group {
        flex-direction: column;
        gap: 0;
    }
    .comment-form-fields-group .comment-form-field-group-item {
        min-width: 100%;
        margin-bottom: 15px;
    }
    .comment-form-fields-group .comment-form-field-group-item:last-child {
        margin-bottom: 0;
    }

    /* For nested comment author → stack avatar and name vertically */
    .comment-author {
        flex-direction: column;
        align-items: flex-start;
    }
    .comment-metadata {
        margin-left: 0;
        padding-left: 0;
        margin-top: 5px;
    }

    .comment-list .children {
        padding-left: 15px;
    }

    #respond {
        padding: 15px;
    }
}

/* Breadcrumb bar: no background, only top & bottom borders */
.dooplay-breadcrumb {
  border-top: 1px solid #333;    /* top border (slightly lighter than dark background) */
  border-bottom: 1px solid #333; /* bottom border */
  padding: 6px 10px;             /* small padding on all four sides */
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 25px;
}

/* Each breadcrumb link and the current item: white text, small inner padding */
.dooplay-breadcrumb a,
.dooplay-breadcrumb span.current {
  display: inline-block;
  color: #fff;       /* pure white text */
  text-decoration: none;
  padding: 15px 6px;  /* tiny padding top/bottom & left/right */
}

/* Automatically insert “→” between items (not after the last one) */
.dooplay-breadcrumb a:not(:last-child)::after,
.dooplay-breadcrumb span.current:not(:last-child)::after {
  content: "→";
  display: inline-block;
  margin: 0 6px;     /* space before and after the arrow */
  color: #888;       /* muted gray arrow */
  font-size: 12px;
  vertical-align: middle;
}

/* Ensure the final “current” item never has an arrow after it */
.dooplay-breadcrumb span.current::after {
  content: "";
}

/* 1) Make the outer <footer> transparent */
.site-footer {
  background-color: transparent;
}

/* 2) Give the inner wrapper the 1200px background */
.site-footer .footer-inner-wrap {
  background-color: #0a0a0a;    /* same color you had on .site-footer */
  max-width: 1200px;            /* cap width at 1200px */
  margin-left: auto;            /* center it */
  margin-right: auto;           /* center it */
  padding: 2em 0;               /* preserve vertical padding */
}

/* Add to your style.css or custom.css */

/* Target the wrapper that holds content and sidebar */
.dooplay-content-sidebar-wrap {
    display: flex; /* Ensure flexbox is active for side-by-side layout */
    /* Other flex properties like flex-wrap, justify-content etc. should be here */
    /* Example: flex-wrap: wrap; justify-content: space-between; */
}

/* Apply the border to the right of the primary content area */
.dooplay-content-sidebar-wrap #primary {
    /* Assuming #primary has a width like 70% or flex-grow: 1; */
    /* Example: flex: 1; or width: 70%; */

    position: relative; /* Needed for pseudo-element if we go that route, or just good practice */
    /* Remove any existing padding-right or margin-right that might be pushing content away */
    /* padding-right: 0 !important; */ /* Use !important if needed to override existing theme styles */
    /* margin-right: 0 !important; */
}

/* Create the vertical line using a pseudo-element on the main content area */
.dooplay-content-sidebar-wrap #primary::after {
    content: ''; /* Essential for pseudo-elements */
    position: absolute;
    top: 0;
    bottom: 0;
    right: -15px; /* Adjust this value to control the line's position in the gap.
                     If the gap between primary and secondary is 30px, this places it in the middle. */
    width: 1px; /* The thickness of your vertical line */
    background-color: #333; /* The color of your vertical line */
    /* You can also use a border: border-right: 1px solid #333; */
}

/* Responsive adjustments: remove the line on smaller screens */
@media (max-width: 768px) { /* Adjust this breakpoint to match when your layout stacks */
    .dooplay-content-sidebar-wrap #primary::after {
        display: none; /* Hide the vertical line when columns stack */
    }
    /* Optional: Add a horizontal line if desired when stacked */
    .dooplay-content-sidebar-wrap #primary {
        border-bottom: 1px solid #333; /* Subtle horizontal separator */
        padding-bottom: 20px; /* Space below content */
        margin-bottom: 20px; /* Space between line and stacked sidebar */
    }
}

/* --- Additional Movie Details Section --- */
.movie-extra-details-section {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.movie-extra-details-section .section-title {
    color: #ffffff; /* White title */
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333; /* Subtle separator */
    padding-bottom: 10px;
}

.extra-details-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stack on small screens */
    gap: 15px; /* Space between rows */
}

@media (min-width: 640px) { /* Small screens and up */
    .extra-details-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Two columns or more */
    }
}

@media (min-width: 1024px) { /* Large screens and up */
    .extra-details-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust as needed for your layout */
    }
}

.extra-detail-row {
    display: flex;
    flex-direction: column; /* Stack label and value */
    padding: 10px 0;
    border-bottom: 1px dashed #333; /* Dashed line for separation */
}

.extra-detail-row:last-child {
    border-bottom: none; /* No border for the last item */
}

.extra-detail-label {
    color: #999999; /* Lighter color for labels */
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.extra-detail-value {
    color: #ffffff; /* White for values */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.extra-detail-value .dashicons-star-filled {
    color: #FFD700; /* Gold color for stars */
    vertical-align: middle;
    margin-right: 5px;
}

.extra-detail-votes {
    color: #cccccc; /* Slightly lighter for vote count */
    font-size: 14px;
    margin-left: 5px;
}

/* Specific styling for comma-separated lists like cast/directors */
.extra-detail-value span {
    display: inline; /* Keep names inline */
}

/* Homepage Notification Bar Styles for Dark Theme - Adjusted for Best Look with Close Button */
.homepage-notification-bar {
    /* Position relative for absolute positioning of the close button */
    position: relative !important; 

    /* Background: A slightly distinct dark grey to give it presence without being jarring */
    background-color: #282828 !important; /* A dark grey, slightly lighter than pure black */
    
    /* Text Color: A soft, light grey for optimal readability on the dark background */
    color: #f0f0f0 !important; /* Clean, light grey */
    
    padding: 16px 28px !important; /* Adjusted padding for better visual balance */
    padding-right: 50px !important; /* Extra padding on the right for the close button */
    text-align: center !important;
    font-size: 1em !important; /* Standard font size */
    font-weight: 400 !important; /* Normal font weight */
    line-height: 1.5 !important; /* Standard line height */
    
    margin-top: 20px !important; /* Spacing above the bar */
    margin-bottom: 20px !important; /* Spacing below the bar */
    
    border-radius: 6px !important; /* Softly rounded corners */
    
    /* Subtle shadow for a hint of depth */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; 
    
    /* Very thin, subtle border for definition */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    
    /* No transitions on the bar itself for a static look */
    transition: none !important;
    
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Paragraph inside the notification bar */
.homepage-notification-bar p {
    margin: 0 !important; /* Remove default paragraph margins */
    max-width: 900px !important; /* Limit width for very long messages on large screens */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important; /* Changed to block so text centers naturally without flex interference */
}

/* Close button styling */
.close-notification {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important; /* Position from the right edge */
    transform: translateY(-50%) !important; /* Vertically center the button */
    cursor: pointer !important;
    font-size: 20px !important; /* Size of the 'X' */
    line-height: 1 !important;
    color: #f0f0f0 !important; /* Match text color */
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
    border-radius: 50% !important; /* Make it round */
    opacity: 0.7 !important; /* Slightly transparent by default */
    transition: opacity 0.2s ease, background-color 0.2s ease !important; /* Subtle transition for hover */
}

.close-notification:hover {
    opacity: 1 !important; /* Fully opaque on hover */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle hover background */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .homepage-notification-bar {
        font-size: 0.95em !important;
        padding: 12px 18px !important;
        padding-right: 40px !important; /* Adjust padding for close button on smaller screens */
        margin-top: 18px !important;
        margin-bottom: 18px !important;
        border-radius: 4px !important;
    }
    .close-notification {
        font-size: 18px !important;
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .homepage-notification-bar {
        font-size: 0.85em !important;
        padding: 10px 15px !important;
        padding-right: 35px !important; /* Adjust padding for close button on very small screens */
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 3px !important;
    }
    .close-notification {
        font-size: 16px !important;
        right: 8px !important;
    }
}