/* --- CINEMATIC STREAMING THEME --- */
:root {
    /* Default Dark Mode (Netflix Style) */
    --bg-color: #141414;
    --text-color: #e5e5e5;
    --nav-bg: rgba(20, 20, 20, 0.95);
    --card-bg: #222;
    --accent-color: #E50914; /* Netflix Red */
    --headpage-fade: linear-gradient(to top, #141414 0%, rgba(20,20,20,0.5) 50%, rgba(20,20,20,0.1) 100%);
}

body.light-mode {
    /* Day Mode (Apple TV Style) */
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --card-bg: #ffffff;
    --accent-color: #007aff; /* Apple Blue */
    --headpage-fade: linear-gradient(to top, #f8f9fa 0%, rgba(248,249,250,0.7) 50%, rgba(248,249,250,0.2) 100%);
}

/* Global Changes */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.4s ease, color 0.4s ease;
}

h1, h2, h3, h4, h5, h6, a {
    color: var(--text-color);
}
a:hover { color: var(--accent-color); text-decoration: none; }

/* Navbar Styling */
.navbar.navbar-default {
    background-color: var(--nav-bg);
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: background-color 0.4s ease;
}
.navbar-default .navbar-nav > li > a { color: var(--text-color); font-weight: bold; }
.navbar-default .navbar-nav > li > a:hover { color: var(--accent-color); }
.navbar-brand img { filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5)); }

/* The Grid Hover Effect (Netflix Style) */
.page-item, .side-item {
    background: var(--card-bg);
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
    border: 1px solid transparent;
}
.page-item:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 28px rgba(0,0,0,0.7);
    z-index: 10;
    border-color: var(--accent-color);
}
.info h3 a { color: var(--text-color); }

/* Cinematic Backdrop for Single Pages (movie_main.php & tv_main.php) */
.headpageoverlay {
    background: var(--headpage-fade);
    padding-bottom: 40px;
}
.headpageinfo {
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
}
.product-title {
    font-size: 3em;
    font-weight: 800;
}

/* Buttons */
.btn-warning { background-color: var(--accent-color) !important; color: #fff !important; }
.btn-warning:hover { filter: brightness(1.2); }

/* --- FIX FOR SINGLE MOVIE / TV SHOW PAGES --- */

/* 1. Make the main content boxes match the theme */
.postmain, .post-sidebar-box {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* 2. Fix the Box Titles */
.postmaintitle {
    border-bottom: 1px solid rgba(150, 150, 150, 0.2) !important;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.postmaintitle h3 {
    color: var(--text-color) !important;
    margin-top: 0;
}

/* 3. Fix the TV Show Episode Tables */
.table > thead > tr > th {
    color: var(--text-color) !important;
    border-bottom: 2px solid rgba(150, 150, 150, 0.2) !important;
}
.table > tbody > tr > td {
    color: var(--text-color) !important;
    border-top: 1px solid rgba(150, 150, 150, 0.1) !important;
}
.table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td {
    background-color: rgba(150, 150, 150, 0.1) !important;
    color: var(--text-color) !important;
}

/* 4. Fix the Reviews Section */
#reviews h4.tit {
    color: var(--text-color) !important;
    font-weight: bold;
}
#reviews .auth {
    color: #888 !important;
    font-size: 0.9em;
    margin-bottom: 8px;
}
#reviews .cont {
    color: var(--text-color) !important;
}
#reviews li {
    border-bottom: 1px solid rgba(150, 150, 150, 0.1) !important;
    padding-bottom: 15px;
    margin-bottom: 15px;
}