/*
Theme Name: BlackVideo Pro Child
Theme URI:  https://wpenjoy.com/themes/blackvideo-pro
Description: Child theme for BlackVideo Pro
Author:      Your Name
Template:    blackvideo-pro
Version:     1.1.4
*/

/* Add your custom CSS below this line */

/* ==============================================
   BlackVideo Pro - Light Theme Overrides
   ============================================== */

/* 1. Main Backgrounds & Body Text */
/* Changed bg from #000 to #fff */
#page {
    background-color: #ffffff;
}

/* Essential: Change default text from white to dark grey */
body {
    color: #0f0f0f;
}

/* 2. Header */
/* Changed bg from #0e0e0e to #f9f9f9 */
.site-header {
    background: rgba(249, 249, 249, 0.75);

    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);

    isolation: isolate;
}

/* 3. Left Menu (Sidebar Navigation) */

/* Normal Links: Changed from #fff to #333 */
#left-menu li a {
    color: #0f0f0f;
}

/* Active Item Background: Changed from #222 to #eee */
#left-menu li.current-cat a, 
#left-menu li.current-menu-item a {
    background-color: #eeeeee;
}

/* Hover on Active Item: Keep it #eee */
#left-menu li.current-cat a:hover, 
#left-menu li.current-menu-item a:hover {
    background-color: #eeeeee;
}

/* Standard Hover State: Changed from #222 to #eee */
#left-menu li.sfHover a, 
#left-menu li a:hover {
    background-color: #eeeeee;
    color: #0f0f0f; /* Make text pitch black on hover for contrast */
}

/* 4. Content & Titles */

/* Video/Post Titles: Changed from #fff to #1a1a1a (Soft Black) */
.content-loop .entry-title a,
.entry-title a {
    color: #0f0f0f;
}

/* Title Hover Color (Keep the Red Accent) */
.content-loop .entry-title a:hover,
.entry-title a:hover {
    color: #b70000; 
}

/* 5. Input Fields (Search Bars, Comment Forms, etc.) */
/* ============================================================
   5A. SEARCH BOX ONLY (Keeps your original Grey-to-White design)
   ============================================================ */
input[type="search"],
.search-input,
.header-search .search-input {
    background-color: #f8f9fa !important; /* Original Light Grey */
    color: #0f0f0f !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Search Box Hover & Focus (Turns White) */
input[type="search"]:focus,
input[type="search"]:hover,
.search-input:focus,
.search-input:hover,
.header-search .search-input:focus,
.header-search .search-input:hover {
    background-color: #ffffff !important; /* Brightens to White */
    border-color: #aaaaaa !important;
    outline: none !important;
}

/* ============================================================
   5B. COMMENT & NAME FIELDS (Always White, Border Hover Only)
   ============================================================ */
textarea,               /* Comment Box */
input[type="text"],     /* Name Field */
input[type="email"],    /* Email Field */
input[type="url"],      /* Website Field */
input[type="password"] {
    background-color: #ffffff !important; /* ALWAYS White */
    color: #0f0f0f !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Field Hover & Focus (Background stays White, Border gets darker) */
textarea:focus,
textarea:hover,
input[type="text"]:focus,
input[type="text"]:hover,
input[type="email"]:focus,
input[type="email"]:hover,
input[type="url"]:focus,
input[type="url"]:hover,
input[type="password"]:focus,
input[type="password"]:hover {
    background-color: #ffffff !important; /* No color change */
    border-color: #aaaaaa !important;     /* Only border changes */
    outline: none;
}

/* 6. Sidebar Widgets (Right Side) */
.sidebar .widget h2, 
.sidebar .widget .widget-title {
    border-bottom-color: rgba(0,0,0,0.1);
}
.sidebar .widget a {
    color: #555555;
}

/* ==============================================
   3.3 Pagination (Light Theme & Red Accent)
   ============================================== */

.pagination {
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

/* Standard Page Numbers (1, 2, 3...) */
.pagination .page-numbers {
    background-color: #f2f2f2;  /* Light Grey Background */
    color: #0f0f0f;             /* Black Text */
    border-radius: 2px;
    display: inline-block;
    font-weight: 600;
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
    transition: all 0.2s ease;
}

/* Hover State for Numbers */
.pagination .page-numbers:hover {
    background-color: #e0e0e0;
    color: #0f0f0f;
    text-decoration: none;
}

/* Current Active Page Number */
.pagination .page-numbers.current {
    background-color: #e0e0e0; /* Slightly darker grey to show it's active */
    color: #0f0f0f;            /* Black Text as requested */
    font-weight: 700;
}

/* Previous & Next Buttons (The Primary Red Color) */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
    background-color: #b70000; /* Primary Red */
    color: #ffffff;            /* White Text */
    border: none;
}

.pagination .prev.page-numbers:hover,
.pagination .next.page-numbers:hover {
    background-color: #8a0000; /* Darker Red on Hover */
    color: #ffffff;
}

.pagination .page-numbers.dots {
    background-color: transparent; /* Removes the grey box */
    color: #909090;
    border: none;
    cursor: default;
    pointer-events: none;
}

/* ==============================================
   Global Primary Color Updates (Red #b70000)
   ============================================== */

/* 2. Backgrounds (Tags, Play Icons, More Button) */
/* Note: Buttons are handled in the section below */
.thumbnail-link .icon-play:hover,
.entry-tags .tag-links a:hover,
.widget_tag_cloud .tagcloud a:hover,
.more-button a {
    background-color: #b70000 !important;
    color: #fff !important;
}

/* 3. Borders (Section Headings, Menu Underlines) */
.content-block .section-heading h3,
.breadcrumbs h1,
.sidebar .widget h2 span,
.sidebar .widget .widget-title span,
.comment-reply-title,
.comments-title {
    border-left-color: #b70000 !important;
}

#primary-menu li.current-menu-item a, 
#primary-menu li.sfHover a,
#primary-menu li a:hover {
    border-bottom-color: #b70000 !important;
}

/* ==============================================
   Search Button & Submit Buttons (Red Theme)
   ============================================== */

/* 1. Default State (Primary Red) */
button,
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"],
.header-search .search-submit {
    background-color: #b70000 !important; /* Primary Red */
    color: #ffffff !important;            /* White Text/Icon */
    border: none;
    transition: background-color 0.3s ease; /* Makes the color change smooth */
}

/* 2. Hover State (Darker Red - Matches Pagination) */
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.header-search .search-submit:hover {
    background-color: #8a0000 !important; /* The Darker Red you liked */
    color: #ffffff !important;
    cursor: pointer;
}

/* ==============================================
   Single Post Meta, Headings & Footer (Light Theme)
   ============================================== */

/* 1. Headings (Pitch Black) */
h1, h2, h3, h4, h5, h6 {
    color: #0f0f0f !important;
    font-weight: bold;
}

/* 2. Single Post Author/Meta Box (Light Grey Background) */
.single .entry-meta-bottom {
    background: #f9f9f9 !important;
    margin-bottom: 25px;
    border-radius: 5px;
    padding: 25px;
}

/* 3. Single Post Category Buttons (with Red Hover) */
.single article .entry-category a {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light Grey Base */
    color: #0f0f0f !important;                        /* Black Text */
    border-radius: 3px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    height: 24px;
    line-height: 24px;
    margin: 0 2px 5px 0;
    padding: 0 7px;
    position: relative;
    transition: all 0.2s ease;
}

.single article .entry-category a:hover {
    background-color: #b70000 !important; /* Primary Red */
    color: #ffffff !important;            /* White Text */
    text-decoration: none;
}

/* 4. Single Post: Tag Buttons (with Red Hover) */
.single article .entry-tags .tag-links a {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light Grey Base */
    color: #0f0f0f !important;                        /* Black Text */
    border-radius: 3px;
    display: inline-block;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    margin: 0 2px 5px 0;
    padding: 0 7px;
    position: relative;
    transition: all 0.2s ease;
}

.single article .entry-tags .tag-links a:hover {
    background-color: #b70000 !important; /* Primary Red */
    color: #ffffff !important;            /* White Text */
    text-decoration: none;
}

/* 5. Footer Area (Light Theme) */
#site-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    font-size: 12px;
    line-height: 1.7;
    margin: 30px 0 0 0;
    padding: 30px 0;
    text-align: center;
}

#site-bottom .site-info {
    color: #0f0f0f !important; /* Black Text */
}

/* Footer Links Black by default, Red on interaction */
#site-bottom .site-info a {
    color: #0f0f0f !important; 
    transition: color 0.2s ease;
}

#site-bottom .site-info a:hover,
#site-bottom .site-info a:focus,
#site-bottom .site-info a:active {
    color: #b70000 !important; /* Primary Red */
    text-decoration: underline;
}

/* ==============================================
   Theme Navigation Skin (Dropdowns - Light Theme)
   ============================================== */

/* --- 1. GLOBAL Dropdown Styles (Applies to ALL menus) --- */
.sf-menu ul {
    background-color: #eeeeee !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Default Text Color for ALL menus (Top & Left) */
.sf-menu li li a {
    color: #333333 !important; 
}

/* Default Hover Effect */
.sf-menu li li a:hover {
    background-color: #f4f4f4 !important;
    color: #b70000 !important;            
}

/* --- 2. LEFT MENU Specific Overrides (The Fix) --- */
/* We need this because the Parent Theme uses an ID (#left-menu) 
   which is stronger than the global class above. */
#left-menu li li a {
    color: #0f0f0f !important; /* Forces black text in left sidebar */
}

#left-menu li li a:hover {
    color: #b70000 !important; /* Red hover for left sidebar */
    background: none !important;
}

/* --- 2. LEFT MENU Specific Overrides (The Fix) --- */
/* We need this because the Parent Theme uses an ID (#left-menu) 
   which is stronger than the global class above. */
#left-menu li li a {
    color: #0f0f0f !important; /* Forces black text in left sidebar */
}

#left-menu li li a:hover {
    color: #b70000 !important; /* Red hover for left sidebar */
    background: none !important;
}

/* ==============================================
   FINAL FIX: Mobile Menu, Toggles & Search
   ============================================== */

/* 1. Main "... Menu" Button (Header Toggle) */
.nav-toggle {
    background-color: #b70000 !important; /* RESTORED: Primary Red Background */
    color: #ffffff !important;            /* White Text */
    border-radius: 5px !important;
    padding: 0 15px !important;           /* ADDED: Internal spacing (Left/Right) */
    
    /* External spacing to separate it from search icon */
    margin-left: 15px !important;         
    margin-right: 15px !important;        
    
    height: 30px; /* Force consistent height */
    line-height: 30px;
}

.nav-toggle:hover {
    background-color: #8a0000 !important; /* Darker Red on Hover */
}

/* 2. Menu Modal Background & Text (Desktop & Mobile) */
.mobile-menu,
.menu-modal {
    background-color: #eeeeee !important; /* Light Grey Background */
}

/* Ensure ALL links inside the modal are Dark Grey by default */
.modal-menu a,
.menu-modal a {
    color: #333333 !important; 
}

/* 3. Menu Links Hover Effect (Red) */
/* This fixes the "not hovering to color #b70000" issue */
.modal-menu li a:hover,
.modal-menu li a:focus,
.modal-menu li a:active,
.modal-menu li.current-menu-item > a {
    color: #b70000 !important; /* Primary Red */
    background-color: rgba(0,0,0,0.05); /* Optional: Slight grey highlight */
}

/* 4. Sub-Menu Toggle Button (The arrow) */
button.sub-menu-toggle {
    flex-shrink: 0;
    
    /* Spacing Fix: Added 15px margin to the RIGHT side */
    margin: 0.7rem 15px 0.7rem 0 !important; 
    
    padding: 0 1.5rem !important; 
    height: 30px;
    line-height: 30px;
    border-radius: 5px !important;
    background-color: rgba(0,0,0,0.05); 
    color: #333333 !important;
}

button.sub-menu-toggle:hover {
    background-color: #ddd;
    color: #b70000 !important;
}

/* 5. Mobile Search Icon */
.search-icon span {
    color: #0f0f0f !important;
    font-size: 22px;
    font-weight: bold;
    vertical-align: middle;

/* Safari Jitter Fix */
    transition: background-color 0.2s ease, color 0.2s ease !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
}

/* ==============================================
   Search Bar Border Fix (Aggressive)
   ============================================== */

/* Force border to be visible at all times */
input[type="search"],
.search-input,
.header-search .search-input {
    border: 1px solid #e0e0e0 !important; 
    -webkit-appearance: none; 
}

/* Fix for Border Disappearing on Type */
input[type="search"]:focus,
.search-input:focus,
.header-search .search-input:focus {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #aaaaaa !important; /* Visible Dark Grey Border */
    outline: 1px solid #aaaaaa !important; /* Backup: Force outline if border fails */
    outline-offset: -1px; /* Pull outline inside so it looks like a border */
    background-color: #ffffff !important;
}

/* ==============================================
   FINAL TWEAKS Modal Menu Borders & Text
   ============================================== */

/* 1. Modal Menu Item Borders */
.modal-menu li {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-style: solid;
    border-width: 1px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    justify-content: flex-start;
    margin: 0;
}

/* 2. Modal Menu Text Color (Desktop & Mobile) */
/* We use multiple selectors to force the #000 color over the theme's white default */
.menu-modal a,
.modal-menu a,
.modal-menu li a,
ul.modal-menu li a {
    color: #0f0f0f !important; /* User Request: #000 */
}

/* 3. Keep the Red Hover Effect */
/* This ensures that when you hover over the black text, it still turns red */
.menu-modal a:hover,
.modal-menu a:hover,
.modal-menu li a:hover,
ul.modal-menu li a:hover {
    color: #b70000 !important;
}

/* ==============================================
   Sidebar & Breadcrumb Overrides
   ============================================== */

/* 1. Sidebar Widget Titles (Links & Spans) -> Pitch Black */
.sidebar .widget h2 a, 
.sidebar .widget h2 a:visited, 
.sidebar .widget h2 span, 
.sidebar .widget .widget-title a, 
.sidebar .widget .widget-title a:visited, 
.sidebar .widget .widget-title span {
    color: #0f0f0f !important;
}

/* 2. Sidebar Widget List Links (Standard Links) -> Pitch Black */
.sidebar .widget ul > li a,
.sidebar .widget ul > li a:visited {
    color: #0f0f0f !important; /* Overrides parent theme's color */
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 2. Hover State (Primary Red) */
.sidebar .widget ul > li a:hover,
.sidebar .widget ul > li a:focus,
.sidebar .widget ul > li a:active {
    color: #b70000 !important; /* Primary Red on Hover */
    text-decoration: none;
}

/* 3. Breadcrumbs Hover Color -> Dark Grey (#444) */
.breadcrumbs .breadcrumbs-nav a:hover {
    color: #444444 !important;
}

/* ==============================================
   FIX Mobile Search Bar Alignment & Text Padding
   ============================================== */
@media only screen and (max-width: 959px) {
    .header-search {
        /* 1. Reset the fixed desktop width to be fluid */
        width: 96% !important;
        
        /* 2. Reset the desktop centering logic */
        left: 0 !important;
        right: 0 !important;
        
        /* 3. Center it automatically using margins */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==============================================
   Edit Link Hover Override (Logged In User)
   ============================================== */

/* Target the edit link in footer and tags */
.entry-footer .edit-link a:hover,
.entry-tags .edit-link a:hover,
.edit-link a:hover {
    color: #8a0000 !important;
    text-decoration: underline;
}

/* ==============================================
   Posts Top Nav Override (Season/Sort Buttons)
   ============================================== */

/* 1. Default State (Light Grey Background, Black Text) */
.posts-top-nav li a {
    background-color: #eeeeee !important; /* Light Grey */
    color: #0f0f0f !important;            /* Black Text */
    border-radius: 5px;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    margin: 0 6px 10px 0;
    padding: 4px 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* 2. Hover State (Primary Red Background, White Text) */
.posts-top-nav li a:hover {
    background-color: #b70000 !important; /* Primary Red */
    color: #ffffff !important;            /* White Text */
}


/* ==============================================
   FIX Search Bar Text Overlap (Global)
   ============================================== */
/* Adds padding to the right so text doesn't hide behind the Red Button */
.header-search .search-input,
input[type="search"] {
    padding-right: 70px !important; 
}

/* ==============================================
   Header Search Positioning (1120px - 1550px)
   ============================================== */
@media only screen and (min-width: 1120px) and (max-width: 1550px) {
  .header-search {
    width: 300px !important;
    margin-left: 0 !important;
    left: 32px !important;
    position: relative !important;
  }
}

/* ==============================================
   1. Hide Native Browser Clear Buttons (Global)
   ============================================== */
/* Hide Chrome/Safari/Edge Native 'X' */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Hide IE/Edge Legacy 'X' */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==============================================
   2. Custom Cross-Browser Clear Button (Styles)
   ============================================== */
.custom-clear-btn {
    position: absolute;
    right: 45px; /* Adjust distance from right edge */
    top: 50%;
    transform: translateY(-50%);
    
    width: 16px;
    height: 16px;
    cursor: pointer;
    z-index: 10;
    
    /* The Red X Icon */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b70000'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* Animation */
    transition: opacity 0.2s ease, visibility 0.2s;
    opacity: 0;         /* Hidden by default */
    visibility: hidden; /* Hidden by default */
}

/* Optional: Add hover effect to the X */
.custom-clear-btn:hover {
    opacity: 0.8 !important;
}

/* ==============================================
   FIX Search No Results Page Layout
   ============================================== */

/* 1. Target the form container to align items side-by-side */
.search-no-results .search-form {
    display: inline-flex;  /* This is key: it shrinks the container to fit the content */
    align-items: center;   /* Keeps input and button vertically aligned */
    gap: 5px;             /* Adds a clean space between the Input and the Button */
}

/* 2. Target the label (which holds the Input and your custom 'X') */
.search-no-results .page-content label, 
.search-no-results .entry-content label {
    display: block;       /* Resets layout behavior */
    position: relative;   /* Crucial: Anchors your absolute 'X' button */
    margin: 0;            /* Remove old margins, we use 'gap' above */
    width: auto;          /* Let the label just fit the input size */
}

/* Specific override for the 'No Results' body search only */
.search-no-results .page-content .custom-clear-btn,
.search-no-results .entry-content .custom-clear-btn {
    right: 10px !important; 
}

/* Fix text overlap in 'No Results' search box */
.search-no-results .page-content input.search-field, 
.search-no-results .entry-content input.search-field {
    padding-right: 35px !important; /* Clears the small 'X' button */
}

/* ==============================================
   FIX 404 Error Page Layout (Matches No Results)
   ============================================== */

/* 1. Target the form container to align items side-by-side */
.error404 .search-form {
    display: inline-flex;  /* Shrinks container to fit content */
    align-items: center;   /* Vertically align input and button */
    gap: 5px;             /* Space between Input and Button */
}

/* 2. Target the label (Anchors the 'X') */
.error404 .page-content label, 
.error404 .entry-content label {
    display: block;       
    position: relative;   /* Anchors the absolute 'X' button */
    margin: 0;            
    width: auto;          
}

/* 3. Position the Custom 'X' Clear Button */
.error404 .page-content .custom-clear-btn,
.error404 .entry-content .custom-clear-btn {
    right: 10px !important; 
}

/* 4. Fix text overlap in Search Box */
.error404 .page-content input.search-field, 
.error404 .entry-content input.search-field {
    padding-right: 35px !important; /* Make room for the 'X' */
}

/* ==============================================
   Primary Menu Overrides
   ============================================== */
#primary-menu ul {
    background-color: #eeeeee !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ==============================================
   Primary Menu Text Color Override
   ============================================== */
#primary-menu li a {
    color: #0f0f0f !important; /* Overrides #fff to Black */
}

/* ==============================================
   Primary Menu Dropdown (Sub-menu) Hover Fix
   ============================================== */
/* Targets the items inside the dropdown (modal) of the top menu */
#primary-menu li li a:hover {
    color: #b70000 !important;        /* Text turns Red */
    background: none !important;      /* Removes the background block */
    background-color: transparent !important; /* Double check to ensure no bg */
}

/* ==============================================
   Primary Menu Dropdown Alignment Fix (Prevent Cut-off)
   ============================================== */
/* 1. Force the dropdown to anchor to the RIGHT side of the parent */
#primary-menu > li > ul.sub-menu {
    left: auto !important;   /* Reset the default left positioning */
    right: 0 !important;     /* Align the right edge of the box to the right edge of the text */
}

/* 2. Optional: If you have 3rd level menus (submenu inside submenu) */
/* We flip them to open to the LEFT side so they don't go off-screen either */
#primary-menu > li > ul.sub-menu ul {
    left: auto !important;
    right: 100% !important;
}

/* ==============================================
   Grid Layout 100% Clickable Card Fix (FINAL)
   ============================================== */

/* 1. The Card Container (The "Anchor") */
.content-loop .hentry {
    padding: 8px 8px !important; 
    margin-bottom: 12px !important;
    margin-top: -8px !important;  
    border-radius: 8px; 
    position: relative !important; /* Boundary for the link */
    cursor: pointer; /* Shows pointer everywhere */
    transition: background-color 0.2s ease;
}

/* 2. Card Background Hover */
.content-loop .hentry:hover {
    background-color: rgba(201, 79, 69, 0.13) !important;
}

/* 3. Release the link's positioning */
.content-loop .hentry .thumbnail-link {
    position: static !important; 
}

/* 4. The Invisible "Stretched" Link Layer */
.content-loop .hentry .thumbnail-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; 
}

/* 5. Title Hover Effect (Fixes the "..." dots color) */
.content-loop .hentry:hover .entry-title,
.content-loop .hentry:hover .entry-title a {
    color: #b70000 !important;
    text-decoration: none !important;
}

/* ==============================================
   Sidebar Thumbnail 100% Clickable Card Fix
   ============================================== */

/* 1. Base Styles (The Container / Anchor) */
.sidebar .widget-posts-thumbnail ul > li {
    /* Override theme padding/margins (Preserving your logic) */
    padding: 8px 8px !important; 
    margin-bottom: 12px !important;
    margin-left: -8px !important; 
    margin-top: -8px !important; 
    margin-right: -8px !important;
    
    /* Card Visuals */
    border-radius: 8px;
    transition: background-color 0.2s ease;
    box-sizing: border-box;

    /* CRITICAL: Makes the LI the "Anchor" for the clickable layer */
    position: relative !important; 
    cursor: pointer; /* Shows the pointer hand everywhere */
}

/* 2. Hover State */
.sidebar .widget-posts-thumbnail ul > li:hover {
    background-color: rgba(201, 79, 69, 0.13) !important; 
}

/* 3. THE FIX: Release the link's positioning */
/* Forces the link to be static so its ::before layer looks at the LI parent */
.sidebar .widget-posts-thumbnail ul > li a {
    position: static !important;
}

/* 4. The Invisible "Stretched" Link Layer */
/* Creates a clickable sheet over the entire List Item */
.sidebar .widget-posts-thumbnail ul > li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* 5. Title Hover Consistency */
/* Ensures the title turns red when you hover anywhere on the sidebar card */
.sidebar .widget-posts-thumbnail ul > li:hover a {
    color: #b70000 !important;
    text-decoration: none !important;
}

/* ==============================================
   Sidebar Thumbnail Image ONLY (3px Radius)
   ============================================== */
.sidebar .widget-posts-thumbnail img {
    border-radius: 3px !important;
}

/* ==============================================
   Custom Video Label (Episode/HD Badge)
   ============================================== */

/* 1. Ensure the thumbnail wrapper handles positioning */
.thumbnail-wrap {
    position: relative; /* Standard safety measure */
}

/* 2. The Red Badge Style */
.flixgaze-video-label {
    position: absolute;
    z-index: 10;
    
    /* Position: Bottom Left (Opposite of Duration) */
    bottom: 10px;
    right: 10px;
    
    /* Colors */
    background-color: #b70000; /* Primary Red */
    color: #ffffff;            /* White Text */
    
    /* Font & Size */
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    
    /* Shape */
    padding: 4px 8px;
    border-radius: 3px; /* Matches your theme's radius */
    
    /* Optional: Tiny shadow for better readability */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


/* =========================================================
   TV Series Grid Template Styles (FINAL FIXES)
   ========================================================= */

/* 1. Title Alignment & Red Bar Fix */
.page-template-page-tv-series-grid h1.page-title {
    margin: 0 0 22px 0 !important;
    padding: 0 0 0 10px !important;
    line-height: 0.88 !important;
    border-left: 3px solid #b70000; /* Primary Red Bar */
}

/* Remove extra vertical spacing */
.page-template-page-tv-series-grid .page-header,
.page-template-page-tv-series-grid .breadcrumbs {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* 2. Grid Item Layout Tightening */
.page-template-page-tv-series-grid .entry-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.page-template-page-tv-series-grid h2.entry-title {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* 3. Image Display Fix */
.page-template-page-tv-series-grid .thumbnail-wrap img {
    display: block; 
    width: 100%;
    border-radius: 5px;
}

.page-template-page-tv-series-grid .thumbnail-link {
    margin-bottom: 8px !important;
    background: transparent !important;
    display: block;
}

/* 4. Title Colors */
.page-template-page-tv-series-grid .entry-content .entry-title a {
    color: #0f0f0f !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    font-weight: bold;
}

.page-template-page-tv-series-grid .entry-content .entry-title a:hover {
    color: #b70000 !important;
    text-decoration: none !important;
}

/* 5. Pagination FIX (Final Polish) */

/* A. Base Styles (Force No Underline, Black Text, Light Grey BG) */
.page-template-page-tv-series-grid .entry-content .pagination a,
.page-template-page-tv-series-grid .entry-content .pagination .page-numbers {
    text-decoration: none !important;
    border-bottom: none !important;
    transition: all 0.2s ease;
    color: #0f0f0f !important;       /* Default Black Text */
    background-color: #f2f2f2 !important; /* Default Light Grey BG */
}

/* B. Hover State for Standard Numbers (Text turns Red, BG stays Light Grey) */
.page-template-page-tv-series-grid .entry-content .pagination a.page-numbers:hover {
    background-color: #e0e0e0 !important;
    color: #b70000 !important;            /* Text turns PRIMARY RED */
}

/* C. Current Active Page (Red Text, Slightly Darker Grey BG) */
.page-template-page-tv-series-grid .entry-content .pagination .page-numbers.current {
    background-color: #e0e0e0 !important; /* Active item background */
    color: #b70000 !important;            /* Active item text is RED */
    font-weight: bold;
}

/* D. "Next" & "Previous" Buttons (Solid Red Blocks) */
.page-template-page-tv-series-grid .entry-content .pagination .next.page-numbers,
.page-template-page-tv-series-grid .entry-content .pagination .prev.page-numbers {
    background-color: #b70000 !important; /* Red Background */
    color: #ffffff !important;            /* White Text */
}

.page-template-page-tv-series-grid .entry-content .pagination .next.page-numbers:hover,
.page-template-page-tv-series-grid .entry-content .pagination .prev.page-numbers:hover {
    background-color: #8a0000 !important; /* Darker Red on hover */
    color: #ffffff !important;
}

/* =========================================
   1. Post Views Counter - Main Fix
   Target Inside .entry-views (prevents conflicts elsewhere)
   ========================================= */
.entry-views .post-views {
    display: inline-flex !important; /* Force side-by-side layout */
    flex-direction: row !important;  /* Ensure Left-to-Right flow */
    align-items: center !important;  /* Vertically center icon and text */
    width: auto !important;          /* Prevent squishing */
    gap: 5px;                        /* Consistent spacing between Icon, Number, Label */
}

/* Element Ordering & Resets */
.entry-views .post-views-icon {
    order: 1;                        /* Icon First */
    display: inline-block !important;
    line-height: 1 !important;       /* Fix vertical alignment */
    margin: 0 !important;            /* Reset default plugin margins */
}

.entry-views .post-views-count {
    order: 2;                        /* Number Second */
    font-weight: normal;             
    margin: 0 !important;
    padding: 0 !important;
}

.entry-views .post-views-label {
    order: 3;                        /* Label Last */
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   2. Related Posts Section Alignment
   ========================================= */
.post-bottom-related .hentry .entry-meta {
    display: flex;                   /* Enable flexbox for the meta row */
    align-items: center;             /* Vertically align Date, Views, etc. */
    flex-wrap: wrap;                 /* Allow wrapping on small screens */
    gap: 5px;                       /* Space between distinct meta items */
}

/* Prevent the view counter from shrinking in this specific section */
.post-bottom-related .hentry .entry-meta .post-views {
    flex-shrink: 0;
}


/* =========================================
   My overrides
   ========================================= */

.entry-meta {
    color: #606060 !important;
    font-size: 13px !important;
    position: relative !important;
}

.single article .entry-header .entry-meta-right {
    display: none;
}

.breadcrumbs .breadcrumbs-nav {
    display: none;
}


.breadcrumbs .taxonomy-description {
    color: #606060 !important;
    font-size: 0.95em !important;
    margin-top: 10px !important;
}

.post-bottom-ads h2 {
    background-color: transparent;
    border-bottom: none;
    font-size: 11px;
    font-weight: normal;
    margin-bottom: 7px;
    padding-bottom: 0;
    text-align: center;
    text-transform: none;
}

.sidebar .widget_media_image .widget-title,
.sidebar .widget_custom_html .widget-title {
    background-color: transparent;
    border-bottom: none;
    font-size: 11px;
    font-weight: normal;
    margin-bottom: 20px;
    padding-bottom: 0;
    text-align: left;
    text-transform: none;
}

/* ============================================== 
   Season Menu Styles 
   ============================================== */

/* 1. Reset List Styles for the Menu */
ul.season-menu {
    list-style: none !important;
    margin: 20px 0 -10px !important; /* Add space below title */
    padding: 0 !important;
    display: block;
}

/* 2. The Button Style (Your design) */
ul.season-menu li {
    display: inline-block; /* Force items into a row */
    margin: 0 6px 10px 0; /* Spacing between buttons */
}

/* 3. Active State (Current Page) - #8a0000 */
ul.season-menu li.current-season a {
    background-color: #8a0000 !important;
    color: #ffffff !important; /* White text for contrast */
/*    border-color: #8a0000; */
    pointer-events: none; /* Disable clicking the page you are already on */
}

/* ============================================== 
   Genre Menu Styles 
   ============================================== */

/* 1. Reset List Styles */
ul.genre-menu {
    list-style: none !important;
    margin: 20px 0 -10px !important;
    padding: 0 !important;
    display: block;
}

/* 2. Button Style */
ul.genre-menu li {
    display: inline-block;
    margin: 0 6px 10px 0;
}

/* 3. Active State (Current Page) */
ul.genre-menu li.current-genre a {
    background-color: #8a0000 !important;
    color: #ffffff !important; 
    pointer-events: none; 
}

/* ==============================================
   Posts Like Dislike Plugin Overrides
   ============================================== */

/* 1. Default State (Container) - FLEXBOX */
.pld-like-dislike-wrap .pld-common-wrap a {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px;
    cursor: pointer;
    
    /* Flexbox for Internal Icon Centering */
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    
    /* THE FIX Lift it up manually by 2 pixels */
    vertical-align: -1px; 
    
    /* Fixed Size */
    padding: 0;
    width: 26px; 
    height: 22px; 
    
    margin-right: 0;
    transition: background-color 0.2s ease;
}

/* 2. HIDE original Plugin Icon */
.pld-like-dislike-wrap .pld-common-wrap a i {
    color: transparent !important; 
    position: relative; 
    display: inline-block;
    
    width: 14px;
    height: 12px;
    line-height: 1;
}

/* 3. INJECT the "Outline" Heart (Default) - FA 7 */
.pld-like-dislike-wrap .pld-common-wrap a i::before {
    content: "\f004";          
    font-family: "Font Awesome 7 Free"; 
    font-weight: 400; /* 400 = Regular (Outline) */     
    color: #606060;
    
    /* Absolute Center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 13px; 
    text-align: center;
}

/* 4. SWAP to "Solid" Heart (Liked) - FA 7 */
.pld-like-dislike-wrap .pld-common-wrap a.pld-undo-trigger i::before,
.pld-like-dislike-wrap .pld-common-wrap a.liked i::before,
.pld-like-dislike-wrap .pld-common-wrap a.already-liked i::before {
    font-weight: 900; /* 900 = Solid (Filled) */        
    color: #b70000;           
}

/* 5. HOVER EFFECT */
.pld-like-dislike-wrap .pld-common-wrap a:hover {
    background-color: rgba(0, 0, 0, 0.14) !important;
}

@media only screen and (max-width: 479px) {
  .pld-like-dislike-wrap .pld-count-wrap {
    font-size: 13px !important;
  }
}

/* ==============================================
   JW PLAYER FIX
   Removes the global red background from player buttons
   ============================================== */
.jwplayer button {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Force Arrow Cursor (Default) for menu items without a URL */
#left-menu li a:not([href]) {
    cursor: default;
}

.header-search {
background-color: transparent !important;
}


/* ==============================================
   Comments Section Overrides
   ============================================== */

.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.no-comments,
.form-allowed-tags,
.form-allowed-tags code {
	color: #606060 !important;
	a,
	a:visited {
		color: #0f0f0f !important;
		text-decoration: underline;
		&:hover {
			color: #0f0f0f !important;
			text-decoration: none;
		}
	}
}


.comment-list .trackback,
.comment-list .pingback,
.comment-metadata,
.comment-list .reply {
	a,
	a:visited {
		color: #606060 !important;
	}
}
.comment-list .trackback a:hover,
.comment-list .pingback a:hover,
.comment-metadata a:hover,
.comment-list .reply a:hover {
	color: #b70000 !important;
}
.comment-author a {
	&:hover {
		color: #b70000 !important;
	}
}

.comment-reply-title small a {
    color: #606060 !important;
    float: right !important;
}

.comment-reply-title small a:hover {
    color: #b70000 !important;
    float: right !important;
}

/* Disable clicking on Comment Date/Time links */
.comment-metadata a {
    pointer-events: none !important; /* Makes it unclickable */
    cursor: text !important;         /* Shows the normal text cursor (I-beam) */
    color: inherit !important;       /* Forces it to look like normal text */
    text-decoration: none !important;
}

/* Hide the "Edit" link in comments for logged-in admins */
.comment-metadata .edit-link {
    display: none !important;
}



/* ==============================================
   PERMANENT THEATER MODE (Final Polished Version)
   ============================================== */

/* --- 1. THEATER CONTAINER STRIP --- */
.theater-mode-container {
    background-color: #000000;
    width: 100%;
    margin-top: 66px; /* Matches Sticky Header Height */
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.theater-mode-container .video-code {
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;
    position: relative;
    background: transparent; 
}

/* --- 2. DESKTOP PLAYER (Cinematic 65vh) --- */
/* Forces all player types to respect the cinematic strip height */
.theater-mode-container iframe,
.theater-mode-container object,
.theater-mode-container embed,
.theater-mode-container video,
.theater-mode-container .wp-video-shortcode,
.theater-mode-container #FlixGazer,
.theater-mode-container .jwplayer,      /* Added: Targets loaded player */
.theater-mode-container .video-js {     /* Added: Targets HTML5 players */
    width: 100% !important;
    height: 65vh !important;
    max-height: 65vh !important;        /* Strict limit */
    display: block !important;
    margin: 0 auto !important;
    aspect-ratio: auto !important;
}

/* --- 3. MOBILE HEADER FIX (Screens < 959px) --- */
/* Removes top margin since the theme header scrolls on mobile */
@media only screen and (max-width: 959px) {
    .theater-mode-container {
        margin-top: 0 !important; 
        padding: 0 !important; 
    }

    .single #primary .entry-header h1.entry-title {
       font-size: 1.3em !important;
       line-height: 1.16 !important;
       display: block !important;
       margin-top: 10px !important;
       margin-bottom: 10px !important;
  }
}

@media only screen and (max-width: 479px) {
    .single #primary .entry-header h1.entry-title {
       font-size: 1.1em !important;
  }
}

/* --- 4. iPAD PRO & TABLET FIX (Screens < 1024px) --- */
/* Switches to 16:9 "Perfect Fit" to remove black bars on tablets */
@media only screen and (max-width: 1024px) {
    .theater-mode-container iframe,
    .theater-mode-container object,
    .theater-mode-container embed,
    .theater-mode-container video,
    .theater-mode-container .wp-video-shortcode,
    .theater-mode-container #FlixGazer,
    .theater-mode-container .jwplayer {
        height: auto !important;
        max-height: none !important;     /* Unlock desktop limit */
        aspect-ratio: 16 / 9 !important; /* Auto-calculate height */
    }
}


/* ==============================================
   NUCLEAR FULLSCREEN FIX (Separated for Safety)
   ============================================== */

/* --- BLOCK 1: STANDARD (Modern Browsers) --- */
:fullscreen, 
::backdrop {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
    z-index: 2147483647 !important;
    aspect-ratio: unset !important;
}

/* --- BLOCK 2: CHROME / SAFARI / EDGE (-webkit) --- */
/* Kept separate so Firefox doesn't crash on it */
:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
    z-index: 2147483647 !important;
    aspect-ratio: unset !important;
}

/* --- BLOCK 3: FIREFOX (-moz) --- */
/* Kept separate so Chrome doesn't crash on it */
:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
    z-index: 2147483647 !important;
    aspect-ratio: unset !important;

    /* THE MOBILE FIX: Grid centers better than Flexbox */
    display: grid !important;
    place-items: center !important; 
    align-content: center !important;
}

/* --- VIDEO ELEMENTS (SEPARATED) --- */

/* Standard */
:fullscreen iframe,
:fullscreen video,
:fullscreen .jwplayer {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
}

/* Chrome/Safari */
:-webkit-full-screen iframe,
:-webkit-full-screen video {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
}

/* Firefox */
:-moz-full-screen iframe,
:-moz-full-screen video,
:-moz-full-screen .jwplayer {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
}

/* --- FIREFOX SPECIFIC WRAPPER KILLER --- */
/* This MUST be separate or Chrome breaks */
:-moz-full-screen .jw-wrapper,
:-moz-full-screen .jw-media {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding-top: 0 !important;
}


/* ==============================================
   THEATER MODE HEADER OVERRIDES (Desktop & iPad)
   ============================================== */

/* Apply these styles ONLY when Theater Mode is active on Desktop/Tablets */
@media only screen and (min-width: 960px) {

    /* 1. Dark Header Background */
    body:has(.theater-mode-container) .site-header {
        background: #0e0e0e !important;
        backdrop-filter: none !important; /* Optional: remove blur if you want solid black */
    }

    /* 2. Turn Dark Text/Links to White */
   body:has(.theater-mode-container) #primary-menu ul {
       background-color: #222 !important;
       border: 1px solid rgba(255, 255, 255, 0.08) !important;
       box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.55),
         0 2px 6px rgba(0, 0, 0, 0.35) !important;
   }


    body:has(.theater-mode-container) #primary-menu li a {
        color: #ffffff !important;
    }

    body:has(.theater-mode-container) #primary-menu li li a:hover {
    color: #b70000 !important;

    }

    /* 3. Dark Search Input Fields */
    body:has(.theater-mode-container) input[type="search"],
    body:has(.theater-mode-container) .search-input,
    body:has(.theater-mode-container) .header-search .search-input {
        background-color: hsl(0, 0%, 7%) !important;
        color: #fff !important;
        border: 1px solid hsl(0,0%,18.82%) !important;
        border-radius: 5px;
        transition: border-color 0.2s ease;
    }

    /* Search Input Hover/Focus */
    body:has(.theater-mode-container) input[type="search"]:focus,
    body:has(.theater-mode-container) input[type="search"]:hover,
    body:has(.theater-mode-container) .search-input:focus,
    body:has(.theater-mode-container) .search-input:hover,
    body:has(.theater-mode-container) .header-search .search-input:focus,
    body:has(.theater-mode-container) .header-search .search-input:hover {
        border-color: hsl(0, 0%, 28%) !important; /* Lighter grey */
        background-color: hsl(0, 0%, 7%) !important;
        outline-color: hsl(0, 0%, 35%) !important;
    }

    /* 4. Fix Search Icon Color (Magnifying Glass) */
    body:has(.theater-mode-container) .header-search .search-submit,
    body:has(.theater-mode-container) .search-icon span {
        color: #fff !important;
    }

    /* 5. THE LOGO SWAP (The Professional Fix) */
    /* This replaces the image ONLY in Theater Mode */
    body:has(.theater-mode-container) .site-branding img {
        content: url('https://thumbnails-cloudflare.flixgaze.com/2026/01/flixgaze-logo-white-2026.svg');
        
        /* Reset dimensions to match Parent Theme settings */
        width: auto !important;
        height: auto !important; 
        max-height: 48px !important; /* Matches parent_style.css line 559 */
        
        /* Remove the old filters */
        filter: none !important; 
    }

    /* Space between video player and title */
    body:has(.theater-mode-container) .single-wrap {
        padding-top: 20px !important;
  }

    /* Overrides the title size */
    body:has(.theater-mode-container) .error404 h1.entry-title, .single
        h1.entry-title, .page h1.entry-title {
        font-size: 1.4em;
  }

}


/* ==============================================
   FIX: White Bar & Elastic Scroll (Desktop Only)
   Restricted to min-width: 960px to prevent mobile issues
   ============================================== */

@media only screen and (min-width: 960px) {

    /* 1. The Shadow Patch */
    /* Only needed on Desktop where the header is sticky and creates a gap */
    .theater-mode-container {
        box-shadow: 0 -100px 0 0 #000000; 
    }

    /* 2. Paint the "Void" Black (Fixes Elastic Scroll) */
    html:has(.theater-mode-container) {
        background-color: #000000 !important;
    }

    /* 3. Keep the Page Content White */
    /* Ensures the black background doesn't bleed into your actual content */
    body:has(.theater-mode-container) #page {
        background-color: #ffffff !important;
        min-height: 100vh; 
    }
}

/* Force the comment cookie consent checkbox to a new line */
.comment-form-cookies-consent {
    clear: both;
    display: block;
    width: 100%;
    grid-column: 1 / -1; /* Ensures it spans full width if your theme uses CSS Grid */
    margin-top: 15px; /* Adds a little breathing room above it */
}