/*
Theme Name: Mẹt Phim
Theme URI: Mẹt Phim
Author: Mẹt Phim Team
Author URI: Mẹt Phim
Description: Mẹt Phim
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Mẹt Phim
Tags: Mẹt Phim
Mẹt Phim
*/

/* ============================================
   CSS Variables
============================================ */
:root {
    --primary-color: #ffc107;
    --secondary-color: #ff8c00;
    --accent-color: #ffc107;
    --bg-dark: #0f1120;
    --bg-darker: #0a0c15;
    --bg-card: #1a1d2e;
    --bg-card-hover: #242842;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #6c6c7c;
    --border-color: #2a2d45;
    --gradient-primary: linear-gradient(135deg, #ffc107 0%, #ff6300 100%);
    --gradient-accent: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
}

/* Light Mode Overrides */
body.light-mode {
    --bg-dark: #f0f2f5;
    --bg-darker: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --text-primary: #1a1d2e;
    --text-secondary: #4a4d5e;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Specific Light Mode Adjustments */
body.light-mode .site-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-color);
}

body.light-mode .navbar-nav .nav-link {
    color: var(--text-secondary);
}

body.light-mode .navbar-nav .nav-link:hover,
body.light-mode .navbar-nav .nav-link:focus {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

body.light-mode .header-search .input-group {
    background: #f1f3f5;
    border: 1px solid var(--border-color);
}

body.light-mode .header-search .form-control {
    color: var(--text-primary);
}

body.light-mode .hero-overlay {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0.4) 100%);
}

body.light-mode .hero-title {
    text-shadow: none;
    color: #1a1d2e;
}

body.light-mode .hero-desc {
    color: #4a4d5e;
}

body.light-mode .meta-tag {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

body.light-mode .meta-tag:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body.light-mode .category-name {
    color: var(--text-primary);
}

body.light-mode .category-link {
    color: var(--text-muted);
}



/* Theme Toggle Button */
.btn-theme-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    color: #ffffff !important;
    transition: var(--transition);
}

.btn-theme-toggle i {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.btn-theme-toggle:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

body.light-mode .btn-theme-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

body.light-mode .btn-theme-toggle:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Fix Navbar Toggler in Light Mode */
body.light-mode .navbar-toggler-icon {
    filter: invert(1);
}




/* ============================================
   Base Styles
============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

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

.container {
    max-width: 1400px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ============================================
   Header & Navigation
============================================ */
.site-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(15, 17, 32, 0.98) 0%, rgba(15, 17, 32, 0.85) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar {
    padding: 12px 0;
}

.navbar>.container {
    max-width: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color) !important;
}

.custom-logo-img {
    max-height: 60px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.logo-icon {
    font-size: 1.8rem;
}

.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-nav .nav-link {
    color: var(--text-secondary);
    padding: 8px 16px !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.navbar-nav .nav-link i {
    font-size: 1.1rem;
}

/* Mega Dropdown */
.dropdown-mega .dropdown-menu {
    min-width: 500px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.dropdown-menu-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.dropdown-menu-categories .dropdown-menu-inner,
.dropdown-menu-countries .dropdown-menu-inner {
    grid-template-columns: repeat(4, 1fr);
}

.dropdown-mega .dropdown-item {
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    white-space: nowrap;
}

.dropdown-mega .dropdown-item:hover {
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.15);
}

/* Year Dropdown */
.dropdown-menu-year {
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.dropdown-menu-year .dropdown-item {
    color: var(--text-secondary);
}

.dropdown-menu-year .dropdown-item:hover {
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.15);
}

/* Header Search */
.header-search {
    max-width: 300px;
}

.header-search .input-group {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.header-search .form-control {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 10px 16px;
}

.header-search .form-control::placeholder {
    color: var(--text-muted);
}

.header-search .form-control:focus {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
}

.header-search .btn-search {
    background: var(--gradient-primary);
    border: none;
    color: white;
    padding: 10px 16px;
}

.header-search .btn-search:hover {
    opacity: 0.9;
}

/* Search Results Dropdown */
.header-search {
    position: relative;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.search-results-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results-dropdown li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-results-dropdown li:last-child {
    border-bottom: none;
}

.search-item {
    display: flex;
    gap: 15px;
    padding: 10px;
    transition: var(--transition);
}

.search-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-item-poster {
    width: 45px;
    height: 65px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

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

.search-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-item-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-item-meta .badge-ep {
    background: var(--accent-color);
    color: black;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
}

.no-results {
    padding: 15px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   Main Content
============================================ */
.site-main {
    padding-top: 70px;
    min-height: 100vh;
    margin-bottom: 20px;
}

/* ============================================
   Hero Slider
============================================ */
.hero-slider-section {
    position: relative;
    height: 80vh;
    min-height: 600px;
    max-height: 800px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    transform: scale(1.05);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(15, 17, 32, 0.95) 0%,
            rgba(15, 17, 32, 0.7) 50%,
            rgba(15, 17, 32, 0.4) 100%);
}

.hero-slide .container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 40px 0;
}

.hero-info {
    flex: 1;
    max-width: 600px;
}

.hero-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.hero-badges .badge {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.badge-episode {
    background: var(--accent-color);
}

.badge-quality {
    background: rgb(207 207 207 / 25%);
    backdrop-filter: blur(10px);
}

.badge-lang {
    background: rgba(102, 126, 234, 0.3);
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.meta-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.meta-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.hero-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
}

.btn-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-play i {
    font-size: 1.3rem;
}

.btn-favorite {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: var(--radius-md);
    color: var(--text-color);
    transition: var(--transition);
}

.btn-favorite:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.hero-poster {
    flex-shrink: 0;
    width: 250px;
    display: none;
}

.hero-poster img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Hero Thumbnails */
.hero-thumbnails {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;
}

.thumbnails-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.thumbnail-item {
    width: 60px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: var(--transition);
    border: 2px solid transparent;
}

.thumbnail-item.active {
    opacity: 1;
    border-color: var(--primary-color);
}

.thumbnail-item:hover {
    opacity: 0.8;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   Categories Section
============================================ */
.categories-section {
    padding: 50px 0;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-primary);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
}

.category-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 20px;
    border-radius: var(--radius-md);
    text-align: left;
    min-height: 100px;
    transition: var(--transition);
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.category-name {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.category-link {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 5px;
}

.category-more {
    background: var(--bg-card) !important;
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-text {
    color: var(--text-secondary);
    font-weight: 600;
}


/* Movies Wrapper */
.movies-wrapper {
    background: linear-gradient(0deg, rgba(40, 43, 58, 0) 20%, #cbcbcb35);
    padding: 20px 0;
    margin-bottom: 20px;
    border-radius: 8px;
    /* Optional: adds nice rounded corners */
}

/* Override padding for nested container-like div */
.row-inner-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    /* Normally .container has padding, but if .movies-wrapper is already .container, 
       we often want this inside to just fill. 
       However, the user wants the WRAPPER to have background = container.
       So .movies-wrapper IS constrained. 
       .row-inner-container just needs to be 100% of that. */
}

/* ============================================
   Movie Sections
============================================ */
.movie-section {
    padding: 20px 0;
    background: var(--bg-darker);
    margin-bottom: 2px;
}

.movie-section:nth-child(even) {
    background: var(--bg-dark);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*margin-bottom: 25px;*/
}

.section-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.section-link:hover {
    color: var(--primary-color);
}

/* Movies Slider */
.movies-slider {
    position: relative;
    overflow: hidden;
}

.movies-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.movies-track::-webkit-scrollbar {
    display: none;
}

/* Movie Card */
.movie-card {
    flex-shrink: 0;
    width: 160px;
}

.movie-poster {
    position: relative;
    display: block;
    aspect-ratio: 2/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
}

.movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.movie-card:hover .movie-poster img {
    transform: scale(1.08);
}

.movie-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.movie-card:hover .movie-overlay {
    opacity: 1;
}

.movie-overlay i {
    font-size: 3rem;
    color: white;
}

.movie-badge {
    position: absolute;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
}

.movie-badge.badge-episode {
    top: 10px;
    left: 10px;
    background: var(--accent-color);
    color: white;
}

.movie-badge.badge-lang {
    bottom: 10px;
    left: 10px;
    right: auto;
    background: #4caf50;
    backdrop-filter: blur(5px);
    color: white;
}

.movie-badge.badge-quality {
    top: 33px;
    left: 10px;
    right: auto;
    background: #2196f3;
    /* Default Blue or keep from screenshot */
    color: white;
}

.movie-info {
    padding: 12px 5px;
}

.movie-title {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.movie-title a {
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* Slider Navigation */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.slider-nav:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.slider-prev {
    left: 0;
}

.slider-next {
    right: 0;
}

/* ============================================
   Footer
============================================ */
.site-footer {
    background: var(--bg-darker);
    padding: 30px 0 10px;
    border-top: 1px solid var(--border-color);
}

.footer-widget {
    margin-bottom: 20px;
}

.footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.footer-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

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

.footer-contact li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact i {
    color: var(--primary-color);
}

.footer-divider {
    border-color: var(--border-color);
}

.footer-bottom {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.copyright,
.disclaimer {
    margin: 0;
}

/* ============================================
   Archive Pages (Taxonomy)
============================================ */
.archive-section {
    padding: 40px 0 60px;
}

.archive-header {
    margin-bottom: 10px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

.archive-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.archive-breadcrumb a {
    color: var(--text-secondary);
}

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

.archive-breadcrumb i {
    font-size: 0.7rem;
}

.archive-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.title-icon {
    font-size: 2.5rem;
}

.archive-desc {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.archive-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.archive-count strong {
    color: var(--primary-color);
}

/* Filter Bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin-bottom: 30px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.filter-select {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 30px 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0b0' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-filter:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}


/* Movies Grid */
.movies-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.movies-grid .movie-card {
    width: 100%;
}

.movies-grid .movie-info {
    padding: 12px 0;
}

.movie-year {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.movies-grid .movie-badge.badge-quality {
    bottom: auto;
    top: 33px;
    left: 10px;
    right: auto;
    background: #2196f3;
    color: white;
}

/* Pagination */
.archive-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: var(--transition);
}

.archive-pagination .page-numbers:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.archive-pagination .page-numbers.current {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.archive-pagination .page-numbers.prev,
.archive-pagination .page-numbers.next {
    gap: 5px;
}

/* No Movies */
.no-movies {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.no-movies i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-movies p {
    font-size: 1.1rem;
}

/* ============================================
   Categories Overview Page
============================================ */
.categories-overview {
    background: var(--bg-dark);
}

.category-row {
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}

.category-row:last-child {
    border-bottom: none;
}

.category-row-header {
    margin-bottom: 20px;
}

.category-row-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.category-row-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0;
}

.category-row-title .highlight {
    font-weight: 700;
    color: var(--primary-color);
}

.category-row-link {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.category-row-link:hover {
    color: var(--primary-color);
}

/* Category Slider */
.category-slider {
    position: relative;
    padding: 0 50px;
}

.category-slider .movies-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 5px 0;
}

.category-slider .movies-track::-webkit-scrollbar {
    display: none;
}

/* Wide Movie Cards (Landscape) */
.movie-card-wide {
    flex-shrink: 0;
    width: 200px;
}

.movie-poster-wide {
    aspect-ratio: 16/10;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.movie-poster-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Nav Positioning for Category Rows */
.category-slider .slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.category-slider .slider-prev {
    left: 0;
}

.category-slider .slider-next {
    right: 0;
}

/* ============================================
   Search Page
============================================ */
.search-section .search-keyword {
    color: var(--primary-color);
}

.search-form-wrap {
    margin-bottom: 40px;
}

.search-form-large {
    max-width: 600px;
}

.search-form-large .input-group {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.search-form-large .form-control {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 15px 20px;
    font-size: 1rem;
}

.search-form-large .form-control::placeholder {
    color: var(--text-muted);
}

.search-form-large .form-control:focus {
    box-shadow: none;
}

.btn-search-large {
    background: var(--gradient-primary);
    border: none;
    color: white;
    padding: 15px 25px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-search-large:hover {
    opacity: 0.9;
}

.search-results-section {
    margin-bottom: 50px;
}

.results-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.results-section-title i {
    color: var(--primary-color);
}

.related-section {
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.related-section .section-title {
    margin-bottom: 30px;
}

.related-section .section-title i {
    color: var(--primary-color);
}

/* ============================================
   Single Movie Detail Page
============================================ */
/* Backdrop & Layout */
.movie-detail-container {
    padding-top: 40px;
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.movie-backdrop-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center top;
    filter: blur(40px);
    opacity: 0.2;
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.movie-backdrop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-dark) 80%);
    z-index: 1;
}

.relative-z {
    position: relative;
    z-index: 2;
}

/* Sidebar */
.movie-sidebar {
    position: relative;
}

.movie-poster-large {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: 25px;
    background: var(--bg-card);
}

.movie-poster-large img {
    display: block;
    width: 100%;
    height: auto;
}

.badge-ep-large {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.movie-title-large {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1.3;
}

.movie-origin-title {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 15px;
}

.movie-badges-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.movie-badges-list span {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.tag-year {
    background: white;
    color: black;
}

.tag-quality {
    background: #333;
    border: 1px solid #555;
    color: white;
}

body.light-mode .tag-quality {
    background: #e9ecef;
    border-color: #dee2e6;
    color: var(--text-primary);
}

.tag-lang {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light-mode .tag-lang {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: var(--text-secondary);
}

/* Progress Bar (Fake) */
.movie-progress-bar {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    margin-bottom: 25px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .movie-progress-bar {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: var(--text-primary);
}

.current-ep .highlight {
    color: var(--accent-color);
    font-weight: 700;
}

.total-ep {
    color: var(--text-muted);
}

/* Info Table */
.movie-info-table {
    margin-bottom: 30px;
}

.info-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.info-row .label {
    width: 100px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.info-row .value {
    color: var(--text-secondary);
}

.info-row .value a {
    color: var(--text-secondary);
}

.info-row .value a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Sidebar Widget */
.sidebar-widget {
    background: transparent;
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-movie-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.sidebar-movie-thumb {
    width: 60px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-movie-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-movie-info h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
    line-height: 1.4;
}

.sidebar-movie-info .meta-year {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Main Content Area */
.movie-main-content {
    padding-left: 20px;
    padding-top: 20px;
}

.movie-actions {
    margin-bottom: 30px;
}

.btn-watch-now {
    background: #ffc107;
    /* Yellow as per image */
    color: #000;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    border: none;
}

.btn-watch-now:hover {
    background: #ffcd38;
    transform: scale(1.05);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

.movie-synopsis {
    margin-bottom: 40px;
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

/* Episodes Grid */
.movie-episodes-section {
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius-md);
    margin-bottom: 40px;
    border: 1px solid var(--border-color);
}

.section-heading {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 4px solid var(--primary-color);
}

.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

@media (min-width: 992px) {
    .episodes-grid {
        grid-template-columns: repeat(9, 1fr);
    }
}

.btn-episode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 10px 5px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-episode:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-episode i {
    font-size: 0.8rem;
}

body.light-mode .btn-episode {
    background: #f8f9fa;
    color: var(--text-primary);
    border-color: #dee2e6;
}

body.light-mode .btn-episode:hover {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
}

/* Related Movies */
.related-movies-section {
    margin-bottom: 40px;
}


.grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ============================================
   Watch Page
============================================ */
.watch-container {
    background: var(--bg-dark);
    min-height: 100vh;
}

.watch-header {
    padding: 20px 0;
}

.watch-breadcrumb {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.watch-breadcrumb a {
    color: var(--text-secondary);
}

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

.watch-breadcrumb .divider {
    margin: 0 10px;
    color: var(--text-color);
}

.watch-breadcrumb .current {
    color: var(--text-color);
}

/* Player Section */
.player-section-bg {
    padding: 0;
    margin-bottom: 30px;
}

.player-section-bg .container {
    max-width: 1250px !important;
}

.video-player-frame {
    background: #000;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.player-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #333;
    font-size: 5rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.player-placeholder iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* Info Block */
.watch-info-block {
    margin-bottom: 25px;
}

.watch-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.3;
}

.watch-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}

.btn-movie-info {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Telegram Banner */
.telegram-banner {
    background: linear-gradient(90deg, #9c27b0, #E040FB);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 30px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.telegram-banner .bell-icon {
    font-size: 1.2rem;
    margin-right: 10px;
}

/* Control Block (Episodes) */
.watch-control-block {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.server-label {
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.episodes-list-watch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-ep-watch {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 2px dashed var(--border-color)
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-ep-watch:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.btn-ep-watch.active {
    background: #ffc107;
    color: black;
    border-color: #ffc107;
    font-weight: 700;
}

/* Comments Dark */
.comments-area-dark {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.section-heading-watch {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Watch Sidebar */
.sidebar-watch-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.related-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.related-item-v {
    display: flex;
    gap: 15px;
    padding: 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.related-item-v:hover {
    background: var(--bg-card-hover);
}

.related-item-v .rel-thumb {
    width: 60px;
    height: 85px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.related-item-v .rel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-item-v .rel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.related-item-v .rel-info h4 {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1.4;
}

.related-item-v .rel-info h4 a {
    color: var(--text-secondary);
}

.related-item-v .rel-info h4 a:hover {
    color: var(--primary-color);
}

.related-item-v .rel-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.related-item-v .rel-quality {
    font-weight: 700;
    font-size: 0.7rem;
}

/* Comments */
.comments-section .comments-area {
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/* ============================================
   Responsive
============================================ */
@media (min-width: 1200px) {
    .hero-poster {
        display: block;
    }
}

@media (max-width: 1199px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .movies-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 991px) {
    .dropdown-mega .dropdown-menu {
        min-width: 100%;
    }

    .dropdown-menu-inner {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-slider-section {
        height: 70vh;
        min-height: 500px;
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .movies-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .archive-title {
        font-size: 1.5rem;
    }

    .filter-bar {
        flex-direction: column;
        gap: 15px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select {
        flex: 1;
    }
}



@media (max-width: 575px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .movies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .archive-pagination .page-numbers {
        min-width: 35px;
        height: 35px;
        padding: 0 10px;
        font-size: 0.8rem;
    }
}

/*============================================Stats 
Section============================================*/
.stats-section {
    padding-botom: 30px;
    margin-bottom: 30px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: var(--bg-card, #11131f);
    /* Use var with fallback */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #1f2130);
    transition: background 0.3s, border-color 0.3s;
}

body.light-mode .stats-grid {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stats-col {
    position: relative;
    padding-right: 15px;
    min-width: 0;
}

.stats-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--border-color, #1f2130);
}

body.light-mode .stats-col:not(:last-child)::after {
    background: #e0e0e0;
}

.stats-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.light-mode .stats-title {
    color: #333;
}

.stats-title i {
    color: #ffc107;
}

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

.stats-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    padding-bottom: 0px;
}

.stats-rank {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted, #444);
    min-width: 25px;
}

.rank-1 {
    color: #f5c518;
}

.rank-2 {
    color: #c0c0c0;
}

/* Fixed invalid color name #silver */
.rank-3 {
    color: #cd7f32;
}

.stats-trend {
    color: #4caf50;
    font-size: 0.9rem;
}

.stats-trend.sub {
    color: var(--text-muted, #666);
}

.stats-thumb {
    width: 35px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: #222;
}

.stats-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stats-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.stats-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

body.light-mode .stats-name {
    color: #333;
}

.stats-link:hover .stats-name {
    color: #ffc107;
}

.stats-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    margin-top: 2px;
}

.stats-more {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-top: 10px;
    text-decoration: none;
    transition: color 0.3s;
}

.stats-more:hover {
    color: #ffc107;
}


/* Responsive */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-col:nth-child(2)::after {
        display: none;
    }

    .stats-col::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Section Row Layout (Sidebar + Slider)
============================================ */
.movie-section-row {
    background: transparent;
}

.section-row-inner {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin: 0 20px;
}

.section-sidebar {
    width: 200px;
    flex-shrink: 0;
    padding-top: 10px;
}

.section-row-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.section-row-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #a0a0b0;
    font-weight: 500;
    transition: color 0.3s;
}

.section-row-link:hover {
    color: #ffc107;
}

.section-content {
    flex: 1;
    min-width: 0;
    /* Prevent flex item from overflowing */
    position: relative;
}

/* ============================================
   Isolated Landscape Slider Styles
============================================ */
.landscape-slider {
    position: relative;
    overflow: hidden;
}

.landscape-slider .movies-track {
    display: flex;
    gap: 15px;
    padding-bottom: 10px;
}

.item-landscape {
    width: 260px;
    flex-shrink: 0;
    position: relative;
}

.poster-landscape {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.poster-landscape img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-landscape:hover .poster-landscape img {
    transform: scale(1.05);
}

.overlay-landscape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-landscape:hover .overlay-landscape {
    opacity: 1;
}

.overlay-landscape i {
    font-size: 2.5rem;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.badge-landscape {
    position: absolute;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    line-height: normal;
}

.badge-episode-land {
    bottom: 8px;
    left: 8px;
    background: #4caf50;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-landscape {
    margin-top: 10px;
}

.title-landscape {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
}

.title-landscape a {
    text-decoration: none;
    transition: color 0.2s;
}

.title-landscape a:hover {
    color: #ffc107;
}

/* Slider Nav */
.landscape-slider .slider-nav {
    position: absolute;
    top: 40%;
    /* Center relative to the container */
    transform: translateY(-50%);
    width: 40px;
    /* Larger size */
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    font-size: 1.2rem;
    /* Larger icon */
    transition: all 0.2s ease;
    opacity: 0.8;
}

.landscape-slider .slider-nav:hover {
    background: #ffc107;
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.landscape-slider .slider-prev {
    left: 10px;
}

/* Move inside */
.landscape-slider .slider-next {
    right: 10px;
}

/* Move inside */

/* Responsive - Moved to end for priority */
@media (max-width: 768px) {
    .site-main {
        padding-top: 60px;
    }

    .hero-slider-section {
        height: 60vh;
        min-height: 450px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    /* Mobile-only horizontal scroll for landscape slider */
    .landscape-slider .movies-track {
        overflow-x: auto !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        padding-bottom: 10px;
        display: flex !important;
        /* Ensure flex persistence */
    }

    .landscape-slider .movies-track::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .item-landscape {
        width: 170px !important;
        /* Force smaller width */
        flex-shrink: 0;
    }

    .section-row-inner {
        flex-direction: column !important;
        gap: 15px;
        margin: 0 10px !important;
    }

    .section-sidebar {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
    }

    .section-row-title {
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    .title-landscape {
        font-size: 0.85rem;
    }

    /* Hide nav buttons on mobile */
    .landscape-slider .slider-nav {
        display: none !important;
    }

    .movies-wrapper {
        padding: 10px 0 !important;
    }

    .hero-desc {
        display: none;
    }

    .hero-buttons .btn-play {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .hero-thumbnails {
        display: none;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-card {
        padding: 20px 15px;
        min-height: 80px;
    }

    .movie-card {
        width: 130px;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .dropdown-menu-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Force 3 columns for categories and countries on mobile as requested */
    .dropdown-menu-categories .dropdown-menu-inner,
    .dropdown-menu-countries .dropdown-menu-inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .header-search {
        margin-top: 15px;
        max-width: 100%;
    }

    .movies-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .archive-breadcrumb {
        font-size: 0.8rem;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .navbar-collapse {
        display: flex;
        flex-direction: column;
    }

    .header-search {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .header-search .input-group {
        width: 100%;
    }

    /* Ensure results dropdown is visible over nav items */
    .search-results-dropdown {
        z-index: 1050;
        /* Higher than bootstrap default dropdowns */
    }
}

/* Responsive - Consolidated and prioritized */
@media (max-width: 768px) {
    .site-main {
        padding-top: 60px;
    }

    .hero-slider-section {
        height: 60vh;
        min-height: 450px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    /* Important: Constrain the slider container width */
    .section-content {
        width: 100% !important;
        overflow: hidden !important;
        display: block !important;
    }

    .landscape-slider {
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Mobile-only horizontal scroll */
    .landscape-slider .movies-track {
        display: flex !important;
        overflow-x: auto !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        /* Snap effect */
        padding-right: 20px;
        width: auto !important;
    }

    .landscape-slider .movies-track::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .item-landscape {
        width: 170px !important;
        flex-shrink: 0;
        scroll-snap-align: start;
        margin-right: 0;
        /* Let gap handle spacing */
    }

    .section-row-inner {
        flex-direction: column !important;
        gap: 15px;
        margin: 0 10px !important;
    }

    .section-sidebar {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
    }

    .section-row-title {
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    .title-landscape {
        font-size: 0.85rem;
    }

    .landscape-slider .slider-nav {
        display: none !important;
    }

    .movies-wrapper {
        padding: 10px 0 !important;
        overflow: hidden !important;
    }

    .hero-desc {
        display: none;
    }

    .hero-buttons .btn-play {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .hero-thumbnails {
        display: none;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-card {
        padding: 20px 15px;
        min-height: 80px;
    }

    .movie-card {
        width: 130px;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .dropdown-menu-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .dropdown-menu-categories .dropdown-menu-inner,
    .dropdown-menu-countries .dropdown-menu-inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .header-search {
        margin-top: 15px;
        max-width: 100%;
    }

    .movies-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .archive-breadcrumb {
        font-size: 0.8rem;
    }

    /* Stats Section Mobile: Show only Trending (1) and Favorites (2), hide others */
    .stats-col:nth-child(3),
    .stats-col:nth-child(4) {
        display: none !important;
    }

    /* Ensure the remaining 2 columns stack nicely or sit side-by-side */
    .stats-grid {
        grid-template-columns: 1fr !important;
        /* Stack them for better readability on phone */
        gap: 20px;
    }
}


/* Trailer Button & Modal */
.btn-trailer {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid rgb(6 6 6 / 23%);
    border-radius: 30px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    padding: 12px 18px;
    gap: 10px;
}

.btn-trailer:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}


.trailer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.trailer-modal.active {
    opacity: 1;
    visibility: visible;
}

.trailer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.trailer-content {
    position: relative;
    width: 90%;
    max-width: 1250px;
    z-index: 10001;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.close-trailer {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.close-trailer:hover {
    transform: scale(1.1);
    color: var(--primary-color);
}

/* Featured Sections */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 20px;
}

.featured-section .movie-card {
    width: 100%;
    /* Full width of grid cell */
}

/* Scroll snap for mobile smoothness */
@media (max-width: 768px) {
    .featured-grid {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .featured-grid::-webkit-scrollbar {
        display: none;
    }

    .featured-grid .movie-card {
        min-width: 140px;
        /* Adjust based on design preference */
        width: 140px;
        scroll-snap-align: start;
    }
}

/* Single Page & Post Styles */

.breadcrumb-simple {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.breadcrumb-simple {
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
    margin-bottom: 30px;
    text-align: left;
    width: 100%;
    display: block;
}

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

.entry-title {
    color: var(--text-primary);
    margin-bottom: 20px;
}

.entry-meta {
    font-size: 0.9rem;
}

.content-box {
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.content-box h1,
.content-box h2,
.content-box h3,
.content-box h4,
.content-box h5,
.content-box h6 {
    color: var(--text-primary);
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
}

.content-box p {
    margin-bottom: 20px;
}

.content-box ul,
.content-box ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.content-box li {
    margin-bottom: 10px;
}

.content-box a {
    color: var(--primary-color);
    text-decoration: none;
}

.content-box a:hover {
    text-decoration: underline;
}

.content-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

@media (min-width: 768px) and (max-width: 1199px) {

    /* Hide slider buttons on tablet */
    .section-content .slider-nav {
        display: none;
    }

    /* Adjust track for 2 rows, horizontal scroll */
    .landscape-slider .movies-track {
        display: grid;
        grid-template-rows: repeat(2, auto);
        /* 2 rows */
        grid-auto-flow: column;
        /* Fill columns first (Top->Bottom, then Next Col) */
        grid-auto-columns: calc((100% - 5 * 15px) / 6);
        /* 6 columns visible */
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 20px;
        /* Space for scrollbar */
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        /* Firefox */
        width: 100%;
        /* Ensure track takes container width */
    }

    /* Reset item width since grid controls it */
    .item-landscape {
        width: auto !important;
        /* Override inline styles if any */
        scroll-snap-align: start;
    }

    /* Custom Scrollbar for Webkit */
    .landscape-slider .movies-track::-webkit-scrollbar {
        height: 6px;
    }

    .landscape-slider .movies-track::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .landscape-slider .movies-track::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }
}