/*
Theme Name: Thanos Video
Theme URI: https://thanos.video
Author: Thanos MasterHub
Author URI: https://thanos.video
Description: Theme WordPress chuyên nghiệp cho phim 18+ - Chuẩn SEO, tốc độ cao, tương thích MasterHub API. Tùy chỉnh hoàn toàn qua wp-admin.
Version: 1.0.1
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thanos-theme
Tags: video, adult, seo, fast, customizable, responsive, dark-mode

Thanos Video Theme - Designed for MasterHub Client
*/

/* ==========================================================================
   CSS Variables - Theme Colors & Settings
   ========================================================================== */
:root {
    /* Primary Colors */
    --thanos-primary: #e50914;
    --thanos-primary-hover: #b2070f;
    --thanos-secondary: #ff6b35;
    --thanos-accent: #ffd700;

    /* Background Colors */
    --thanos-bg-dark: #0d0d0d;
    --thanos-bg-card: #1a1a1a;
    --thanos-bg-hover: #2a2a2a;
    --thanos-bg-input: #262626;

    /* Surface Colors (for components) */
    --thanos-surface: #1a1a1a;
    --thanos-surface-hover: #2a2a2a;

    /* Text Colors */
    --thanos-text: #ffffff;
    --thanos-text-muted: #a0a0a0;
    --thanos-text-dim: #666666;

    /* Borders */
    --thanos-border: #333333;
    --thanos-border-light: #444444;

    /* Shadows */
    --thanos-shadow: 0 4px 20px rgba(0,0,0,0.5);
    --thanos-shadow-hover: 0 8px 30px rgba(229,9,20,0.3);

    /* Spacing */
    --thanos-gap: 20px;
    --thanos-gap-sm: 10px;
    --thanos-gap-md: 15px;
    --thanos-gap-lg: 30px;

    /* Border Radius */
    --thanos-radius: 8px;
    --thanos-radius-sm: 4px;
    --thanos-radius-lg: 12px;

    /* Transitions */
    --thanos-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Container */
    --thanos-container: 1400px;
    --thanos-container-narrow: 1200px;

    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;

    /* Legacy color aliases (for component CSS compatibility) */
    --color-primary: var(--thanos-primary);
    --color-primary-dark: var(--thanos-primary-hover);
    --color-text: var(--thanos-text);
    --color-text-muted: var(--thanos-text-muted);
    --color-surface: var(--thanos-surface);
    --color-surface-hover: var(--thanos-surface-hover);
    --color-border: var(--thanos-border);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--thanos-text);
    background-color: var(--thanos-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Selection */
::selection {
    background: var(--thanos-primary);
    color: var(--thanos-text);
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
    transition: var(--thanos-transition);
}

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

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

/* Lists */
ul, ol {
    list-style: none;
}

/* Buttons */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Inputs */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ==========================================================================
   Accessibility - Screen Reader & Skip Links
   ========================================================================== */
/* Screen reader text - ẩn hoàn toàn nhưng accessible cho screen readers */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip link - hiển thị khi focus (cho keyboard navigation) */
.screen-reader-text:focus,
.sr-only:focus,
.skip-link:focus {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--thanos-primary, #e50914) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    z-index: 100000 !important;
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1em;
}

/* ==========================================================================
   Layout - Container
   ========================================================================== */
.thanos-site {
    overflow-x: hidden;
    width: 100%;
}

.thanos-site-content {
    overflow-x: hidden;
    width: 100%;
}

.thanos-container {
    width: 100%;
    max-width: var(--thanos-container);
    margin: 0 auto;
    padding: 0 var(--thanos-gap);
    overflow-x: hidden;
    box-sizing: border-box;
}

.thanos-container-narrow {
    max-width: var(--thanos-container-narrow);
}

/* ==========================================================================
   Page Layout
   ========================================================================== */
.thanos-page-layout {
    display: flex;
    gap: var(--thanos-gap-lg);
}

.thanos-page-content {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
}

.thanos-page-header {
    margin-bottom: var(--thanos-gap-lg);
}

.thanos-page-title {
    font-size: 2rem;
    margin-bottom: var(--thanos-gap);
}

.thanos-page-body {
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    padding: var(--thanos-gap-lg);
}

/* Entry Content - for WordPress content */
.entry-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
    max-width: 100%;
    height: auto;
}

.entry-content table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

.entry-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */
.thanos-header {
    position: relative;
    z-index: var(--z-sticky);
    background: var(--thanos-header-bg, rgba(13, 13, 13, 0.95));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--thanos-border);
    padding: 15px 0;
}

/* Header Styles from Customizer */
.thanos-header.header-sticky {
    position: sticky;
    top: 0;
}

.thanos-header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.thanos-header.header-static {
    position: relative;
}

/* Add body padding when header is fixed */
/* Uses --header-height CSS variable set by JS for accurate height on all screen sizes */
body.has-fixed-header {
    padding-top: var(--header-height, 70px);
}

.thanos-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--thanos-gap);
}

/* Header Navigation - positioning context for mega-menu */
.thanos-header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Logo */
.thanos-logo {
    flex-shrink: 0;
}

.thanos-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--thanos-primary);
}

.thanos-logo img {
    height: 40px;
    width: auto;
}

/* Navigation */
.thanos-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.thanos-nav-list {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.thanos-nav-list li {
    position: relative;
}

.thanos-nav a,
.thanos-nav-list a {
    display: block;
    padding: 10px 16px;
    border-radius: var(--thanos-radius);
    font-weight: 500;
    color: var(--thanos-text);
    text-decoration: none;
    transition: var(--thanos-transition);
    white-space: nowrap;
}

.thanos-nav a:hover,
.thanos-nav a.active,
.thanos-nav-list a:hover,
.thanos-nav-list li.current-menu-item > a {
    background: var(--thanos-bg-hover);
    color: var(--thanos-primary);
}

/* Dropdown menu */
.thanos-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    border-radius: var(--thanos-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.thanos-nav-list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.thanos-nav-list .sub-menu a {
    padding: 10px 16px;
    border-radius: 0;
}

/* Mobile Navigation - Hidden on desktop */
.thanos-mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--thanos-bg-card);
    border-top: 1px solid var(--thanos-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.thanos-mobile-nav.active {
    position: fixed;
    top: var(--header-height, 70px);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height, 70px));
    overflow-y: auto;
    z-index: calc(var(--z-fixed) + 1);
}

.thanos-mobile-nav-inner {
    padding: 20px;
}

.thanos-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thanos-mobile-menu li {
    border-bottom: 1px solid var(--thanos-border);
}

.thanos-mobile-menu li:last-child {
    border-bottom: none;
}

.thanos-mobile-menu a {
    display: block;
    padding: 15px 0;
    color: var(--thanos-text);
    font-weight: 500;
    text-decoration: none;
}

.thanos-mobile-menu a:hover {
    color: var(--thanos-primary);
}

.thanos-mobile-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
}

.thanos-mobile-menu .sub-menu a {
    padding: 10px 0;
    font-weight: 400;
    font-size: 0.95rem;
}

@media (max-width: 992px) {
    .thanos-mobile-nav {
        display: block;
    }
}

/* Search Box */
.thanos-search {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.thanos-search form {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.thanos-search input {
    width: 100%;
    padding: 12px 45px 12px 20px;
    background: var(--thanos-bg-input);
    border: 1px solid var(--thanos-border);
    border-radius: 50px;
    color: var(--thanos-text);
    outline: none;
    transition: var(--thanos-transition);
}

.thanos-search input:focus {
    border-color: var(--thanos-primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2);
}

.thanos-search input::placeholder {
    color: var(--thanos-text-dim);
}

.thanos-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--thanos-primary);
    border-radius: 50%;
    color: white;
    transition: var(--thanos-transition);
}

.thanos-search button:hover {
    background: var(--thanos-primary-hover);
}

/* Live Search Dropdown */
#thanos-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    border-radius: var(--thanos-radius);
    margin-top: 8px;
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
    box-shadow: var(--thanos-shadow);
}

#thanos-search-results.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Fix stacking context: Make search container escape header's stacking context */
.thanos-search {
    position: relative;
}

.thanos-header .thanos-search:has(#thanos-search-results.active) {
    position: static;
}

.thanos-header .thanos-search:has(#thanos-search-results.active) #thanos-search-results {
    position: fixed;
    top: 70px; /* Header height */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    z-index: 1001;
}

/* Fallback for browsers not supporting :has() */
@supports not selector(:has(*)) {
    .thanos-search {
        position: static;
    }
    #thanos-search-results {
        position: fixed;
        top: 70px;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        width: 100%;
        max-width: 500px;
    }
    #thanos-search-results.active {
        transform: translateX(-50%) translateY(0);
    }
}

.thanos-search-list {
    padding: 8px 0;
}

.thanos-search-item {
    list-style: none;
}

.thanos-search-item.focused .thanos-search-link,
.thanos-search-link:hover {
    background: var(--thanos-bg-hover);
}

.thanos-search-link {
    display: flex;
    gap: 12px;
    padding: 10px 15px;
    transition: background 0.2s;
}

.thanos-search-thumb {
    width: 80px;
    aspect-ratio: 16/9;
    border-radius: var(--thanos-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

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

.thanos-search-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.thanos-search-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--thanos-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.thanos-search-title mark {
    background: var(--thanos-primary);
    color: white;
    padding: 0 2px;
    border-radius: 2px;
}

.thanos-search-meta {
    font-size: 0.8rem;
    color: var(--thanos-text-muted);
    margin-top: 4px;
    display: flex;
    gap: 8px;
}

.thanos-search-meta .badge {
    background: var(--thanos-primary);
    color: white;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.thanos-search-viewall {
    display: block;
    padding: 12px 15px;
    text-align: center;
    color: var(--thanos-primary);
    font-size: 0.9rem;
    border-top: 1px solid var(--thanos-border);
}

.thanos-search-viewall:hover {
    background: var(--thanos-bg-hover);
}

.thanos-search-loading,
.thanos-search-empty,
.thanos-search-error {
    padding: 30px 15px;
    text-align: center;
    color: var(--thanos-text-muted);
}

.thanos-search-empty a {
    color: var(--thanos-primary);
    display: block;
    margin-top: 10px;
}

/* Mobile Menu Toggle */
/* Theme Toggle Button */
.thanos-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    border-radius: var(--thanos-radius);
    cursor: pointer;
    transition: var(--thanos-transition);
    color: var(--thanos-text);
}

.thanos-theme-toggle:hover {
    background: var(--thanos-bg-hover, var(--thanos-surface-hover));
    border-color: var(--thanos-primary);
    color: var(--thanos-primary);
}

.thanos-theme-icon {
    width: 20px;
    height: 20px;
}

/* Show sun icon in dark mode, moon in light mode */
[data-theme="dark"] .thanos-theme-icon.sun,
:root:not([data-theme]) .thanos-theme-icon.sun {
    display: block;
}

[data-theme="dark"] .thanos-theme-icon.moon,
:root:not([data-theme]) .thanos-theme-icon.moon {
    display: none;
}

[data-theme="light"] .thanos-theme-icon.sun {
    display: none;
}

[data-theme="light"] .thanos-theme-icon.moon {
    display: block;
}

.thanos-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius);
}

.thanos-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--thanos-text);
    transition: var(--thanos-transition);
}

/* ==========================================================================
   Video Grid - Using CSS Variables from Customizer
   ========================================================================== */
.thanos-video-grid {
    display: grid;
    /* Uses --thanos-grid-cols from customizer, responsive via media queries */
    grid-template-columns: repeat(var(--thanos-grid-cols, 5), 1fr);
    gap: var(--thanos-gap, 20px);
    padding: var(--thanos-gap-lg, 30px) 0;
}

/* Fallback classes for backwards compatibility */
/* Desktop columns - can be overridden by customizer CSS variables */
.thanos-video-grid.cols-2 { --thanos-grid-cols: 2; }
.thanos-video-grid.cols-3 { --thanos-grid-cols: 3; }
.thanos-video-grid.cols-4 { --thanos-grid-cols: 4; }
.thanos-video-grid.cols-5 { --thanos-grid-cols: 5; }
.thanos-video-grid.cols-6 { --thanos-grid-cols: 6; }
.thanos-video-grid.cols-7 { --thanos-grid-cols: 7; }
.thanos-video-grid.cols-8 { --thanos-grid-cols: 8; }

/* Tablet: Use customizer setting (thanos_grid_cols_tablet) via CSS variable from wp_head */
@media (max-width: 992px) {
    /* Reset the cols-* class overrides to let :root media query take effect */
    .thanos-video-grid.cols-2,
    .thanos-video-grid.cols-3,
    .thanos-video-grid.cols-4,
    .thanos-video-grid.cols-5,
    .thanos-video-grid.cols-6,
    .thanos-video-grid.cols-7,
    .thanos-video-grid.cols-8 {
        --thanos-grid-cols: var(--thanos-grid-cols-tablet, 4);
    }
    .thanos-video-grid[class*="cols-"] {
        grid-template-columns: repeat(var(--thanos-grid-cols), 1fr);
    }
}

/* Mobile: Use customizer setting (thanos_grid_cols_mobile) via CSS variable from wp_head */
@media (max-width: 576px) {
    /* Reset the cols-* class overrides to let :root media query take effect */
    .thanos-video-grid.cols-2,
    .thanos-video-grid.cols-3,
    .thanos-video-grid.cols-4,
    .thanos-video-grid.cols-5,
    .thanos-video-grid.cols-6,
    .thanos-video-grid.cols-7,
    .thanos-video-grid.cols-8 {
        --thanos-grid-cols: var(--thanos-grid-cols-mobile, 2);
    }
    .thanos-video-grid[class*="cols-"] {
        grid-template-columns: repeat(var(--thanos-grid-cols), 1fr);
    }
}

/* Video Card */
.thanos-video-card {
    position: relative;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius);
    overflow: hidden;
    transition: var(--thanos-transition);
}

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

.thanos-video-card:hover .thanos-video-thumb img {
    transform: scale(1.05);
}

/* Thumbnail */
.thanos-video-thumb {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
}

.thanos-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--thanos-transition);
}

/* Lazy loading placeholder */
.thanos-video-thumb img[data-src] {
    background: var(--thanos-bg-input);
}

/* Quality Badge */
.thanos-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    background: var(--thanos-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--thanos-radius-sm);
    text-transform: uppercase;
}

.thanos-badge.vietsub {
    background: #00a651;
}

.thanos-badge.new {
    background: var(--thanos-accent);
    color: #000;
}

/* Duration */
.thanos-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--thanos-radius-sm);
}

/* Play Overlay */
.thanos-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: var(--thanos-transition);
}

.thanos-video-card:hover .thanos-play-overlay {
    opacity: 1;
}

.thanos-play-btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--thanos-primary);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    transform: scale(0.8);
    transition: var(--thanos-transition);
}

.thanos-video-card:hover .thanos-play-btn {
    transform: scale(1);
}

/* Video Info */
.thanos-video-info {
    padding: 15px;
}

.thanos-video-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.thanos-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--thanos-text-muted);
}

.thanos-video-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Single Video Page
   ========================================================================== */
.thanos-single-video {
    /* padding: var(--thanos-gap-lg) 0; */
}

.thanos-player-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto var(--thanos-gap-lg);
    background: #000;
    border-radius: var(--thanos-radius-lg);
    overflow: hidden;
}

.thanos-player-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.thanos-player-container video,
.thanos-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video Details */
.thanos-video-details {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--thanos-gap-lg);
    margin-top: var(--thanos-gap-lg);
}

.thanos-video-main {
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    padding: var(--thanos-gap-lg);
}

.thanos-video-main h1 {
    font-size: 1.75rem;
    margin-bottom: var(--thanos-gap);
    color: var(--thanos-text);
}

/* Video Info Table */
.thanos-info-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: var(--thanos-gap-lg) 0;
    padding: var(--thanos-gap);
    background: var(--thanos-bg-input);
    border-radius: var(--thanos-radius);
}

.thanos-info-item {
    display: flex;
    gap: 10px;
}

.thanos-info-item .label {
    color: var(--thanos-text-muted);
    min-width: 80px;
}

.thanos-info-item .value {
    color: var(--thanos-text);
    font-weight: 500;
}

.thanos-info-item .value a {
    color: var(--thanos-primary);
}

.thanos-info-item .value a:hover {
    text-decoration: underline;
}

/* Video Description */
.thanos-description {
    margin-top: var(--thanos-gap-lg);
    padding-top: var(--thanos-gap-lg);
    border-top: 1px solid var(--thanos-border);
}

.thanos-description h3 {
    margin-bottom: var(--thanos-gap);
}

.thanos-description-content {
    color: var(--thanos-text-muted);
    line-height: 1.8;
}

/* Tags */
.thanos-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--thanos-gap);
}

.thanos-tag {
    padding: 6px 14px;
    background: var(--thanos-bg-input);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--thanos-text-muted);
    transition: var(--thanos-transition);
}

.thanos-tag:hover {
    background: var(--thanos-primary);
    color: white;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.thanos-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--thanos-gap-lg);
}

.thanos-widget {
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    padding: var(--thanos-gap);
}

.thanos-widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--thanos-gap);
    padding-bottom: var(--thanos-gap-sm);
    border-bottom: 2px solid var(--thanos-primary);
}

/* Related Videos List */
.thanos-related-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.thanos-related-item {
    display: flex;
    gap: 12px;
}

.thanos-related-thumb {
    flex-shrink: 0;
    width: 100px;
    aspect-ratio: 3/2;
    border-radius: var(--thanos-radius-sm);
    overflow: hidden;
}

.thanos-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--thanos-transition);
}

.thanos-related-item:hover .thanos-related-thumb img {
    transform: scale(1.1);
}

.thanos-related-info {
    flex: 1;
    min-width: 0;
}

.thanos-related-title {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

.thanos-related-meta {
    font-size: 0.8rem;
    color: var(--thanos-text-dim);
}

/* ==========================================================================
   Category / Archive Page
   ========================================================================== */
.thanos-archive-header {
    padding: var(--thanos-gap-lg) 0;
    background: linear-gradient(180deg, var(--thanos-bg-card) 0%, var(--thanos-bg-dark) 100%);
    margin-bottom: var(--thanos-gap);
}

.thanos-archive-title {
    font-size: 2rem;
    margin-bottom: var(--thanos-gap-sm);
}

.thanos-archive-desc {
    color: var(--thanos-text-muted);
    max-width: 600px;
}

/* Filter Bar - Moved to /css/components/filter-bar.css */

/* ==========================================================================
   Load More Button
   ========================================================================== */
.thanos-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: var(--thanos-gap-md) 0;
    margin-bottom: var(--thanos-gap-sm);
}

.thanos-load-more {
    display: flex;
    justify-content: center;
    padding: var(--thanos-gap-md) 0;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.thanos-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: var(--thanos-gap-lg) 0;
}

.thanos-pagination a,
.thanos-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    border-radius: var(--thanos-radius);
    font-weight: 500;
    transition: var(--thanos-transition);
}

.thanos-pagination a:hover {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-primary);
    color: var(--thanos-primary);
}

.thanos-pagination .current {
    background: var(--thanos-primary);
    border-color: var(--thanos-primary);
    color: white;
}

.thanos-pagination .dots {
    border: none;
    background: none;
}

/* Pagination Style: Rounded */
.thanos-pagination.pagination-rounded a,
.thanos-pagination.pagination-rounded span {
    border-radius: 50%;
    min-width: 40px;
    width: 40px;
    padding: 0;
}

/* Pagination Style: Minimal */
.thanos-pagination.pagination-minimal a,
.thanos-pagination.pagination-minimal span {
    background: transparent;
    border: none;
    min-width: auto;
    padding: 8px 12px;
}

.thanos-pagination.pagination-minimal .current {
    background: var(--thanos-primary);
    border-radius: var(--thanos-radius);
}

.thanos-pagination.pagination-minimal a:hover {
    background: var(--thanos-bg-hover);
    border-radius: var(--thanos-radius);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.thanos-footer {
    background: var(--thanos-bg-card);
    border-top: 1px solid var(--thanos-border);
    padding: var(--thanos-gap-lg) 0;
    margin-top: var(--thanos-gap-lg);
}

/* Footer Search Section */
.thanos-footer-search {
    padding-bottom: var(--thanos-gap-lg);
    margin-bottom: var(--thanos-gap-lg);
    border-bottom: 1px solid var(--thanos-border);
}

.footer-search-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--thanos-text);
    margin: 0 0 var(--thanos-gap) 0;
}

.footer-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-search-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--thanos-surface);
    border: 1px solid var(--thanos-border);
    border-radius: 20px;
    color: var(--thanos-text);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.footer-search-tag:hover {
    background: var(--thanos-primary);
    border-color: var(--thanos-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .footer-search-tag.desktop-only {
        display: none;
    }
}

.thanos-footer-inner {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--thanos-gap-lg);
}

.thanos-footer-brand {
    max-width: 300px;
}

.thanos-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--thanos-primary);
    margin-bottom: var(--thanos-gap);
}

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

.thanos-footer-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--thanos-gap);
    color: var(--thanos-text);
}

.thanos-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.thanos-footer-links a:hover {
    color: var(--thanos-primary);
    padding-left: 5px;
}

.thanos-copyright {
    text-align: center;
    padding: var(--thanos-gap);
    margin-top: var(--thanos-gap-lg);
    border-top: 1px solid var(--thanos-border);
    color: var(--thanos-text-dim);
    font-size: 0.85rem;
}

/* ==========================================================================
   Breadcrumb (SEO Important)
   ========================================================================== */
.thanos-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: var(--thanos-gap) 0;
    font-size: 0.9rem;
    color: var(--thanos-text-muted);
}

.thanos-breadcrumb a {
    color: var(--thanos-text-muted);
}

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

.thanos-breadcrumb .separator {
    color: var(--thanos-text-dim);
}

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

/* ==========================================================================
   Loading States
   ========================================================================== */
.thanos-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--thanos-gap-lg);
}

.thanos-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--thanos-border);
    border-top-color: var(--thanos-primary);
    border-radius: 50%;
    animation: thanos-spin 0.8s linear infinite;
}

@keyframes thanos-spin {
    to { transform: rotate(360deg); }
}

/* Skeleton Loading */
.thanos-skeleton {
    background: linear-gradient(90deg, var(--thanos-bg-input) 25%, var(--thanos-bg-hover) 50%, var(--thanos-bg-input) 75%);
    background-size: 200% 100%;
    animation: thanos-skeleton 1.5s ease-in-out infinite;
}

@keyframes thanos-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Filter Loading State */
.thanos-video-grid.loading {
    position: relative;
    min-height: 300px;
    pointer-events: none;
}

.thanos-video-grid.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--thanos-bg-rgb, 23, 23, 23), 0.7);
    z-index: 10;
    border-radius: var(--thanos-radius);
}

.thanos-video-grid.loading .thanos-video-card {
    opacity: 0.5;
    filter: blur(1px);
    transition: opacity 0.2s, filter 0.2s;
}

.thanos-filter-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--thanos-gap);
    padding: var(--thanos-gap-lg);
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius);
    box-shadow: var(--thanos-shadow-lg);
}

.thanos-filter-loading .thanos-spinner {
    width: 48px;
    height: 48px;
}

.thanos-filter-loading::after {
    content: 'Đang tải...';
    color: var(--thanos-text-muted);
    font-size: var(--thanos-font-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.thanos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--thanos-radius);
    transition: var(--thanos-transition);
    cursor: pointer;
}

.thanos-btn-primary {
    background: var(--thanos-primary);
    color: white;
}

.thanos-btn-primary:hover {
    background: var(--thanos-primary-hover);
    transform: translateY(-2px);
}

.thanos-btn-outline {
    background: transparent;
    border: 2px solid var(--thanos-primary);
    color: var(--thanos-primary);
}

.thanos-btn-outline:hover {
    background: var(--thanos-primary);
    color: white;
}

.thanos-btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.thanos-btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* ==========================================================================
   Age Verification Popup
   ========================================================================== */
.thanos-age-verify {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    padding: var(--thanos-gap);
}

.thanos-age-verify-box {
    max-width: 500px;
    text-align: center;
    padding: var(--thanos-gap-lg);
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    box-shadow: var(--thanos-shadow);
}

.thanos-age-verify-icon {
    font-size: 4rem;
    margin-bottom: var(--thanos-gap);
    color: var(--thanos-primary);
}

.thanos-age-verify h2 {
    font-size: 1.5rem;
    margin-bottom: var(--thanos-gap-sm);
}

.thanos-age-verify p {
    color: var(--thanos-text-muted);
    margin-bottom: var(--thanos-gap-lg);
}

.thanos-age-verify-actions {
    display: flex;
    gap: var(--thanos-gap);
    justify-content: center;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1200px) {
    /* Grid columns now controlled by CSS variables from customizer */

    .thanos-video-details {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 992px) {
    /* Grid columns now controlled by CSS variables from customizer */

    /* Hide header nav, but keep nav inside mobile menu visible */
    .thanos-header-nav .thanos-nav,
    .thanos-header > .thanos-container .thanos-header-inner > .thanos-nav {
        display: none;
    }

    /* Ensure nav inside mobile menu is visible */
    .thanos-mobile-nav .thanos-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .thanos-menu-toggle {
        display: flex;
    }

    .thanos-info-table {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --thanos-gap: 15px;
        --thanos-gap-lg: 20px;
    }

    /* Prevent horizontal overflow on mobile */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    .thanos-container {
        padding: 0 15px;
        width: 100%;
        max-width: 100%;
    }

    /* Page Layout - Stack on mobile */
    .thanos-page-layout {
        flex-direction: column;
    }

    .thanos-page-content {
        width: 100%;
    }

    .thanos-page-body {
        padding: 15px;
    }

    .thanos-page-title {
        font-size: 1.5rem;
        word-wrap: break-word;
    }

    .thanos-page-thumbnail img {
        width: 100%;
        height: auto;
    }

    /* Sidebar on mobile */
    .thanos-sidebar {
        width: 100%;
    }

    /* Grid columns controlled by CSS variables from customizer */
    .thanos-video-grid {
        gap: var(--thanos-gap-sm, 12px);
    }

    .thanos-header-inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Header row 1: Logo + Theme Toggle + Menu Toggle */
    .thanos-logo {
        order: 1;
        flex: 1;
    }

    .thanos-header-nav {
        display: none;
    }

    .thanos-theme-toggle {
        order: 2;
        flex-shrink: 0;
    }

    .thanos-menu-toggle {
        order: 3;
        flex-shrink: 0;
    }

    /* Header row 2: Search full width */
    .thanos-search {
        order: 4;
        max-width: 100%;
        flex-basis: 100%;
        margin-top: 5px;
    }

    .thanos-search form {
        width: 100%;
    }

    .thanos-search input {
        width: 100%;
        padding-right: 50px;
    }

    .thanos-search button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }

    .thanos-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .thanos-footer-brand {
        max-width: 100%;
    }

    .thanos-archive-header {
        padding: 15px 0;
    }

    .thanos-archive-title {
        font-size: 1.5rem;
        word-wrap: break-word;
    }

    .thanos-archive-desc {
        font-size: 0.9rem;
    }

    .thanos-video-main h1 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    /* Grid columns controlled by CSS variables from customizer */

    .thanos-video-info {
        padding: 10px;
    }

    .thanos-video-title {
        font-size: 0.85rem;
    }

    .thanos-pagination a,
    .thanos-pagination span {
        min-width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.thanos-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--thanos-bg-dark, #0d0d0d);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.thanos-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    text-align: center;
}

/* Spinner Style */
.preloader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--thanos-border, rgba(255, 255, 255, 0.1));
    border-top-color: var(--thanos-primary, #e50914);
    border-radius: 50%;
    animation: preloader-spin 1s linear infinite;
}

@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

/* Dots Style */
.preloader-dots {
    display: flex;
    gap: 8px;
}

.preloader-dots span {
    width: 12px;
    height: 12px;
    background: var(--thanos-primary, #e50914);
    border-radius: 50%;
    animation: preloader-dots 1.4s infinite ease-in-out both;
}

.preloader-dots span:nth-child(1) { animation-delay: -0.32s; }
.preloader-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes preloader-dots {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Progress Style */
.preloader-progress {
    width: 200px;
    height: 4px;
    background: var(--thanos-border, rgba(255, 255, 255, 0.1));
    border-radius: 2px;
    overflow: hidden;
}

.preloader-progress-bar {
    width: 100%;
    height: 100%;
    background: var(--thanos-primary, #e50914);
    animation: preloader-progress 2s ease-in-out infinite;
    transform-origin: left;
}

@keyframes preloader-progress {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* Logo Style */
.preloader-logo {
    animation: preloader-pulse 1.5s ease-in-out infinite;
}

.preloader-logo img {
    max-width: 150px;
    height: auto;
}

.preloader-logo .site-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--thanos-primary, #e50914);
}

@keyframes preloader-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.95); }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .thanos-header,
    .thanos-footer,
    .thanos-sidebar,
    .thanos-player-wrapper,
    .thanos-age-verify {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.thanos-hidden { display: none !important; }
.thanos-visible { display: block !important; }
.thanos-flex { display: flex !important; }
.thanos-grid { display: grid !important; }
.thanos-text-center { text-align: center; }
.thanos-text-left { text-align: left; }
.thanos-text-right { text-align: right; }
.thanos-mt-1 { margin-top: var(--thanos-gap-sm); }
.thanos-mt-2 { margin-top: var(--thanos-gap); }
.thanos-mt-3 { margin-top: var(--thanos-gap-lg); }
.thanos-mb-1 { margin-bottom: var(--thanos-gap-sm); }
.thanos-mb-2 { margin-bottom: var(--thanos-gap); }
.thanos-mb-3 { margin-bottom: var(--thanos-gap-lg); }

/* ==========================================================================
   Video Player Styles
   ========================================================================== */
.thanos-player-wrapper {
    width: 100%;
    margin-bottom: var(--thanos-gap-lg);
}

.thanos-player-wrapper.thanos-container-narrow {
    max-width: var(--thanos-container-narrow);
    margin-left: auto;
    margin-right: auto;
}

.thanos-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--thanos-radius);
    overflow: hidden;
}

.thanos-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.thanos-player-controls {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.thanos-player.show-ui .thanos-player-controls,
.thanos-player:hover .thanos-player-controls {
    opacity: 1;
}

.thanos-player.playing {
    cursor: none;
}

.thanos-player.playing.show-ui {
    cursor: default;
}

/* Center Play Button */
.thanos-player-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.thanos-player-play-big {
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.9);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, background 0.3s;
}

.thanos-player-play-big:hover {
    transform: scale(1.1);
    background: var(--thanos-primary);
}

.thanos-player-play-big svg {
    width: 40px;
    height: 40px;
}

.thanos-player.playing .thanos-player-play-big {
    opacity: 0;
    pointer-events: none;
}

/* Progress Bar */
/*
.thanos-player-progress {
    position: relative;
    padding: 10px 0;
    cursor: pointer;
}
*/

.thanos-progress-bar {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: visible;
}

.thanos-progress-loaded {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

.thanos-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--thanos-primary);
    border-radius: 2px;
}

.thanos-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 14px;
    height: 14px;
    background: var(--thanos-primary);
    border-radius: 50%;
    transition: transform 0.1s;
}

.thanos-player-progress:hover .thanos-progress-handle {
    transform: translate(-50%, -50%) scale(1);
}

.thanos-progress-tooltip {
    position: absolute;
    bottom: 100%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(0,0,0,0.9);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 8px;
}

.thanos-progress-tooltip.visible {
    opacity: 1;
}

/* Bottom Controls */
.thanos-player-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px 15px;
}

.thanos-player-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.thanos-player-left,
.thanos-player-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon Buttons */
.thanos-btn-icon {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--thanos-radius-sm);
    transition: background 0.2s;
}

.thanos-btn-icon:hover {
    background: rgba(255,255,255,0.1);
}

.thanos-btn-icon svg {
    width: 24px;
    height: 24px;
}

/* Volume Control */
.thanos-volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.thanos-volume-slider {
    width: 0;
    overflow: hidden;
    transition: width 0.3s;
}

.thanos-volume-control:hover .thanos-volume-slider {
    width: 80px;
}

.thanos-volume-bar {
    position: relative;
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
}

.thanos-volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: white;
    border-radius: 2px;
}

.thanos-volume-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
}

/* Time Display */
.thanos-time {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    display: flex;
    gap: 4px;
}

.thanos-time-separator {
    color: rgba(255,255,255,0.5);
}

/* Quality Button */
.thanos-btn-quality {
    width: auto;
    padding: 0 12px;
}

.thanos-btn-quality .quality-label {
    font-size: 12px;
    font-weight: 600;
}

/* Menu Dropdowns */
.thanos-player-menu {
    position: relative;
}

.thanos-menu-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    background: rgba(20,20,20,0.95);
    border-radius: var(--thanos-radius);
    min-width: 150px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
}

.thanos-player-menu.open .thanos-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.thanos-menu-title {
    padding: 10px 15px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.thanos-menu-items {
    padding: 5px 0;
}

.thanos-menu-item {
    display: block;
    width: 100%;
    padding: 8px 15px;
    border: none;
    background: transparent;
    color: white;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.thanos-menu-item:hover {
    background: rgba(255,255,255,0.1);
}

.thanos-menu-item.active {
    color: var(--thanos-primary);
}

.thanos-menu-item.active::before {
    content: '✓';
    margin-right: 8px;
}

/* Loading Spinner */
.thanos-player-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    z-index: 30;
}

.thanos-spinner-large {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: var(--thanos-primary);
    border-radius: 50%;
    animation: thanos-spin 1s linear infinite;
}

/* Error State */
.thanos-player-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(0,0,0,0.9);
    z-index: 40;
    text-align: center;
    padding: 20px;
}

.thanos-player-error .error-icon svg {
    width: 60px;
    height: 60px;
    color: var(--thanos-primary);
}

.thanos-player-error .error-message {
    color: var(--thanos-text-muted);
}

/* Fullscreen */
.thanos-player.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: 0;
}

/* Player Extras */
.thanos-player-extras {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

/* Lights Off Mode - Uses overlay instead of opacity for better control */
body.lights-off {
    background: #000;
}

/* Create dark overlay that covers everything */
body.lights-off::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 999;
    pointer-events: none;
}

/* Video player stays above the overlay */
body.lights-off .video-player-section {
    position: relative;
    z-index: 1000;
}

body.lights-off .thanos-player-wrapper {
    position: relative;
    z-index: 1000;
}

/* Lights toggle button stays visible and clickable */
body.lights-off .action-lights {
    position: relative;
    z-index: 1001;
    pointer-events: auto;
}

/* Toast Notifications */
.thanos-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    background: var(--thanos-bg-card);
    color: var(--thanos-text);
    border-radius: var(--thanos-radius);
    box-shadow: var(--thanos-shadow);
    z-index: var(--z-tooltip);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.thanos-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.thanos-toast-success {
    border-left: 3px solid #00b37c;
}

.thanos-toast-error {
    border-left: 3px solid var(--thanos-primary);
}

.thanos-toast-info {
    border-left: 3px solid #3498db;
}

/* Back to Top Button */
.thanos-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: var(--thanos-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: var(--z-fixed);
}

.thanos-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.thanos-back-to-top:hover {
    background: var(--thanos-primary-hover);
    transform: translateY(-3px);
}

/* Age Verification Modal */
.thanos-age-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.thanos-age-modal.active {
    opacity: 1;
}

body.age-verify-active {
    overflow: hidden;
}

.thanos-age-content {
    text-align: center;
    max-width: 450px;
    padding: 40px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
}

.thanos-age-icon {
    color: var(--thanos-primary);
    margin-bottom: 20px;
}

.thanos-age-content h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.thanos-age-content p {
    color: var(--thanos-text-muted);
    margin-bottom: 30px;
    line-height: 1.6;
}

.thanos-age-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 480px) {
    .thanos-age-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Mobile Menu Overlay - only for visual effect, doesn't block clicks */
.thanos-mobile-overlay {
    position: fixed;
    top: var(--header-height, 70px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: calc(var(--z-sticky) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    pointer-events: none;
}

.thanos-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Spinner Animation */
@keyframes thanos-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Small Spinner */
.thanos-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: thanos-spin 0.8s linear infinite;
}

/* ==========================================================================
   Actor Header Styles
   ========================================================================== */
.thanos-actor-header {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 30px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    margin-bottom: 30px;
}

.actor-avatar {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
}

.actor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.actor-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--thanos-primary), var(--thanos-secondary));
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.actor-info {
    flex: 1;
}

.actor-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.actor-bio {
    color: var(--thanos-text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.actor-stats {
    display: flex;
    gap: 20px;
}

.actor-stats .stat {
    color: var(--thanos-text-muted);
}

.actor-stats .stat strong {
    color: var(--thanos-primary);
    font-size: 1.2rem;
    margin-right: 5px;
}

/* ==========================================================================
   Country Header Styles
   ========================================================================== */
.thanos-country-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 30px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    margin-bottom: 30px;
}

.country-flag {
    font-size: 3rem;
}

.country-name {
    font-size: 1.6rem;
    font-weight: 700;
}

.country-desc {
    color: var(--thanos-text-muted);
    margin-top: 5px;
}

/* ==========================================================================
   Director Header Styles
   ========================================================================== */
.thanos-director-header {
    padding: 30px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    margin-bottom: 30px;
}

.director-label {
    display: inline-block;
    padding: 4px 12px;
    background: var(--thanos-primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--thanos-radius-sm);
    margin-bottom: 10px;
}

.director-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.director-bio {
    color: var(--thanos-text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.director-stats {
    color: var(--thanos-text-muted);
}

.director-stats strong {
    color: var(--thanos-primary);
    font-size: 1.2rem;
}

/* ==========================================================================
   Category Header Styles
   ========================================================================== */
.thanos-category-header {
    position: relative;
    overflow: hidden;
}

.category-banner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.category-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(13,13,13,0.95), rgba(13,13,13,0.7));
}

.thanos-category-header .archive-info {
    position: relative;
    z-index: 1;
}

/* Subcategories */
.thanos-subcategories {
    margin-bottom: 30px;
}

.subcategories-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--thanos-text-muted);
}

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

.subcategory-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius);
    color: var(--thanos-text);
    text-decoration: none;
    transition: var(--thanos-transition);
}

.subcategory-item:hover {
    background: var(--thanos-bg-hover);
    color: var(--thanos-primary);
}

.subcategory-item .count {
    font-size: 0.8rem;
    color: var(--thanos-text-dim);
}

/* ==========================================================================
   Categories Section (Homepage)
   ========================================================================== */
.thanos-categories-section {
    margin-bottom: 40px;
}

.thanos-categories-section .thanos-section-header {
    margin-bottom: 20px;
}

.thanos-categories-section .thanos-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--thanos-text);
    margin: 0;
}

.thanos-categories-section .thanos-section-title svg {
    width: 24px;
    height: 24px;
    color: var(--thanos-primary);
}

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

.thanos-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    text-decoration: none;
    transition: var(--thanos-transition);
    border: 1px solid transparent;
    text-align: center;
    min-height: 100px;
}

.thanos-category-card:hover {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.thanos-category-card .cat-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--thanos-text);
    margin-bottom: 5px;
    line-height: 1.3;
}

.thanos-category-card:hover .cat-name {
    color: var(--thanos-primary);
}

.thanos-category-card .cat-count {
    font-size: 0.8rem;
    color: var(--thanos-text-muted);
}

/* Categories Grid Responsive */
@media (max-width: 1200px) {
    .thanos-categories-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

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

@media (max-width: 768px) {
    .thanos-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

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

    .thanos-category-card .cat-name {
        font-size: 0.9rem;
    }

    .thanos-category-card .cat-count {
        font-size: 0.75rem;
    }
}

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

    .thanos-category-card {
        padding: 12px 8px;
        min-height: 70px;
    }
}

/* ==========================================================================
   Archive Header Styles
   ========================================================================== */
.thanos-archive-header {
    padding: 30px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    margin-bottom: 30px;
}

.archive-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--thanos-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.archive-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.archive-desc {
    color: var(--thanos-text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.archive-meta {
    display: flex;
    gap: 15px;
    color: var(--thanos-text-dim);
}

.archive-count {
    font-weight: 500;
}

/* ==========================================================================
   SEO Content
   ========================================================================== */
.thanos-seo-content {
    margin-top: 50px;
    padding: 30px;
    background: var(--thanos-bg-card);
    border-radius: var(--thanos-radius-lg);
    color: var(--thanos-text-muted);
    line-height: 1.8;
}

.thanos-seo-content h2,
.thanos-seo-content h3 {
    color: var(--thanos-text);
    margin-bottom: 15px;
}

.thanos-seo-content p {
    margin-bottom: 15px;
}

/* ==========================================================================
   Responsive Adjustments for New Components
   ========================================================================== */
@media (max-width: 768px) {
    .thanos-actor-header {
        flex-direction: column;
        text-align: center;
    }

    .actor-avatar {
        width: 100px;
        height: 100px;
    }

    .actor-name {
        font-size: 1.5rem;
    }

    .actor-stats {
        justify-content: center;
    }

    .thanos-country-header {
        flex-direction: column;
        text-align: center;
    }

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

    .thanos-archive-header {
        padding: 20px;
    }
}

/* ==========================================================================
   Light Mode - Comprehensive Styling
   ========================================================================== */
[data-theme="light"],
body.light-mode {
    /* Core Background Colors */
    --thanos-bg-dark: #ffffff;
    --thanos-bg-card: #f9fafb;
    --thanos-bg-hover: #f3f4f6;
    --thanos-bg-input: #ffffff;

    /* Surface Colors */
    --thanos-surface: #f9fafb;
    --thanos-surface-hover: #f3f4f6;

    /* Text Colors */
    --thanos-text: #111827;
    --thanos-text-muted: #6b7280;
    --thanos-text-dim: #9ca3af;

    /* Borders */
    --thanos-border: #e5e7eb;
    --thanos-border-light: #d1d5db;

    /* Shadows */
    --thanos-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --thanos-shadow-hover: 0 8px 30px rgba(229,9,20,0.15);

    /* Badge-year and other badges */
    --thanos-badge-bg: #e5e7eb;
    --thanos-badge-text: #374151;

    /* Legacy color aliases */
    --color-text: var(--thanos-text);
    --color-text-muted: var(--thanos-text-muted);
    --color-surface: var(--thanos-surface);
    --color-surface-hover: var(--thanos-surface-hover);
    --color-border: var(--thanos-border);
}

/* Light Mode - Body Background (uses CSS variables from Customizer) */
[data-theme="light"] body,
body.light-mode {
    background-color: var(--thanos-bg-dark, #ffffff);
    color: var(--thanos-text, #111827);
}

[data-theme="light"] .badge-year,
body.light-mode .badge-year {
    background: var(--thanos-badge-bg, var(--thanos-border)) !important;
    color: var(--thanos-badge-text, var(--thanos-text)) !important;
    border-color: var(--thanos-border-light, var(--thanos-border)) !important;
}

/* Video Actions */
[data-theme="light"] .video-actions,
body.light-mode .video-actions {
    background: transparent;
}

[data-theme="light"] .action-btn,
body.light-mode .action-btn {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .action-btn:hover,
body.light-mode .action-btn:hover {
    background: var(--thanos-border);
    border-color: var(--thanos-primary);
}

[data-theme="light"] .action-btn.active,
body.light-mode .action-btn.active {
    background: var(--thanos-primary);
    color: #fff;
}

[data-theme="light"] .action-label,
body.light-mode .action-label {
    color: var(--thanos-text-muted);
}

/* Category List */
[data-theme="light"] .category-list,
body.light-mode .category-list {
    color: var(--thanos-text);
}

[data-theme="light"] .category-tag,
body.light-mode .category-tag {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .category-tag:hover,
body.light-mode .category-tag:hover {
    background: var(--thanos-primary);
    color: #fff;
}

/* Info Sidebar / Info Card */
[data-theme="light"] .info-sidebar,
body.light-mode .info-sidebar {
    background: transparent;
}

[data-theme="light"] .info-card,
body.light-mode .info-card {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .info-card h4,
body.light-mode .info-card h4 {
    color: var(--thanos-text);
}

[data-theme="light"] .info-list li,
body.light-mode .info-list li {
    border-color: var(--thanos-border);
}

[data-theme="light"] .info-list .label,
body.light-mode .info-list .label {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .info-list .value,
body.light-mode .info-list .value {
    color: var(--thanos-text);
}

/* Header */
[data-theme="light"] .thanos-header,
body.light-mode .thanos-header {
    background: var(--thanos-header-bg-light, rgba(255, 255, 255, 0.95));
    border-bottom: 1px solid var(--thanos-border);
    backdrop-filter: blur(10px);
}

[data-theme="light"] .thanos-header.scrolled,
body.light-mode .thanos-header.scrolled {
    background: var(--thanos-header-bg-light-scrolled, rgba(255, 255, 255, 0.98));
    box-shadow: var(--thanos-shadow);
}

/* Search */
[data-theme="light"] .thanos-search-input,
body.light-mode .thanos-search-input {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-search-input::placeholder,
body.light-mode .thanos-search-input::placeholder {
    color: var(--thanos-text-dim);
}

[data-theme="light"] .thanos-search-input:focus,
body.light-mode .thanos-search-input:focus {
    background: var(--thanos-bg-card);
    border-color: var(--thanos-primary);
}

/* Mega Menu Trigger */
[data-theme="light"] .mega-menu-trigger,
body.light-mode .mega-menu-trigger {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .mega-menu-trigger:hover,
body.light-mode .mega-menu-trigger:hover {
    background: var(--thanos-border);
    border-color: var(--thanos-primary);
    color: var(--thanos-text);
}

/* Mega Menu Dropdown */
[data-theme="light"] .mega-menu,
body.light-mode .mega-menu {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    box-shadow: var(--thanos-shadow);
}

[data-theme="light"] .mega-menu-categories,
body.light-mode .mega-menu-categories {
    background: var(--thanos-bg-card);
    border-color: var(--thanos-border);
}

[data-theme="light"] .mega-category-item,
body.light-mode .mega-category-item {
    color: var(--thanos-text);
}

[data-theme="light"] .mega-category-item:hover,
[data-theme="light"] .mega-category-item.active,
body.light-mode .mega-category-item:hover,
body.light-mode .mega-category-item.active {
    background: var(--thanos-primary);
    color: #fff;
}

[data-theme="light"] .mega-video-title,
body.light-mode .mega-video-title {
    color: var(--thanos-text);
}

[data-theme="light"] .mega-quick-links,
body.light-mode .mega-quick-links {
    background: var(--thanos-bg-card);
    border-color: var(--thanos-border);
}

[data-theme="light"] .mega-quick-link,
body.light-mode .mega-quick-link {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .mega-quick-link:hover,
body.light-mode .mega-quick-link:hover {
    background: var(--thanos-primary);
    color: #fff;
    border-color: var(--thanos-primary);
}

[data-theme="light"] .mega-subcategory,
body.light-mode .mega-subcategory {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .mega-subcategory:hover,
body.light-mode .mega-subcategory:hover {
    background: var(--thanos-primary);
    color: #fff;
}

/* Footer Search */
[data-theme="light"] .thanos-footer-search,
body.light-mode .thanos-footer-search {
    border-color: var(--thanos-border);
}

[data-theme="light"] .footer-search-title,
body.light-mode .footer-search-title {
    color: var(--thanos-text);
}

[data-theme="light"] .footer-search-tag,
body.light-mode .footer-search-tag {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .footer-search-tag:hover,
body.light-mode .footer-search-tag:hover {
    background: var(--thanos-primary);
    border-color: var(--thanos-primary);
    color: #fff;
}

/* Section Title */
[data-theme="light"] .section-title,
body.light-mode .section-title {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-section-title,
body.light-mode .thanos-section-title {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-search-results,
body.light-mode .thanos-search-results {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    box-shadow: var(--thanos-shadow);
}

/* Video Cards */
[data-theme="light"] .thanos-video-card,
body.light-mode .thanos-video-card {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-video-card:hover,
body.light-mode .thanos-video-card:hover {
    border-color: var(--thanos-primary);
    box-shadow: var(--thanos-shadow);
}

[data-theme="light"] .thanos-video-title,
body.light-mode .thanos-video-title {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-video-meta,
body.light-mode .thanos-video-meta {
    color: var(--thanos-text-muted);
}

/* Modal */
[data-theme="light"] .thanos-modal-content,
body.light-mode .thanos-modal-content {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-modal-content h3,
body.light-mode .thanos-modal-content h3 {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-modal-close,
body.light-mode .thanos-modal-close {
    color: var(--thanos-text-muted);
}

/* Form Elements */
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group input,
body.light-mode .form-group select,
body.light-mode .form-group textarea,
body.light-mode .form-group input {
    background: var(--thanos-bg-card);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .form-group label,
body.light-mode .form-group label {
    color: var(--thanos-text);
}

/* Tabs */
[data-theme="light"] .video-tabs-nav,
body.light-mode .video-tabs-nav {
    border-color: var(--thanos-border);
}

[data-theme="light"] .tab-btn,
body.light-mode .tab-btn {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .tab-btn:hover,
body.light-mode .tab-btn:hover {
    color: var(--thanos-text);
}

[data-theme="light"] .tab-btn.active,
body.light-mode .tab-btn.active {
    color: var(--thanos-primary);
}

/* Share Buttons */
[data-theme="light"] .share-btn-item.copy,
body.light-mode .share-btn-item.copy {
    background: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .share-url input,
body.light-mode .share-url input {
    background: var(--thanos-bg-card);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

/* Footer */
[data-theme="light"] .thanos-footer,
body.light-mode .thanos-footer {
    background: var(--thanos-bg-card);
    border-top: 1px solid var(--thanos-border);
}

[data-theme="light"] .footer-links a,
body.light-mode .footer-links a {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .footer-links a:hover,
body.light-mode .footer-links a:hover {
    color: var(--thanos-primary);
}

/* Sidebar */
[data-theme="light"] .thanos-sidebar,
body.light-mode .thanos-sidebar {
    background: var(--thanos-bg-card);
}

/* Hero Section */
[data-theme="light"] .hero-tags .hero-tag,
body.light-mode .hero-tags .hero-tag {
    background: rgba(255, 255, 255, 0.9);
    color: var(--thanos-text);
}

/* Actor Cards */
[data-theme="light"] .actor-card,
body.light-mode .actor-card {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .actor-card:hover,
body.light-mode .actor-card:hover {
    background: var(--thanos-bg-hover);
}

[data-theme="light"] .actor-name,
body.light-mode .actor-name {
    color: var(--thanos-text);
}

[data-theme="light"] .actor-count,
body.light-mode .actor-count {
    color: var(--thanos-text-muted);
}

/* Description Text */
[data-theme="light"] .description-text,
body.light-mode .description-text {
    color: var(--thanos-text-muted);
}

/* Toast */
[data-theme="light"] .thanos-toast,
body.light-mode .thanos-toast {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    color: var(--thanos-text);
    box-shadow: var(--thanos-shadow);
}

/* Buttons */
[data-theme="light"] .thanos-btn-outline,
body.light-mode .thanos-btn-outline {
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-btn-outline:hover,
body.light-mode .thanos-btn-outline:hover {
    background: var(--thanos-bg-hover);
}

/* Pagination */
[data-theme="light"] .thanos-pagination a,
[data-theme="light"] .thanos-pagination span,
body.light-mode .thanos-pagination a,
body.light-mode .thanos-pagination span {
    background: var(--thanos-bg-hover);
    color: var(--thanos-text);
    border-color: var(--thanos-border);
}

[data-theme="light"] .thanos-pagination a:hover,
body.light-mode .thanos-pagination a:hover {
    background: var(--thanos-border);
}

[data-theme="light"] .thanos-pagination .current,
body.light-mode .thanos-pagination .current {
    background: var(--thanos-primary);
    color: #fff;
}

/* Carousel */
[data-theme="light"] .thanos-section-header h2,
body.light-mode .thanos-section-header h2 {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-carousel-arrow,
body.light-mode .thanos-carousel-arrow {
    background: rgba(0, 0, 0, 0.1);
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-carousel-arrow:hover,
body.light-mode .thanos-carousel-arrow:hover {
    background: var(--thanos-primary);
    color: #fff;
}

/* Mobile Nav */
[data-theme="light"] .thanos-bottom-nav,
body.light-mode .thanos-bottom-nav {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-bottom-nav-item,
body.light-mode .thanos-bottom-nav-item {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .thanos-bottom-nav-item.active,
body.light-mode .thanos-bottom-nav-item.active {
    color: var(--thanos-primary);
}

/* Age Verification */
[data-theme="light"] .thanos-age-content,
body.light-mode .thanos-age-content {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-age-content h2,
body.light-mode .thanos-age-content h2 {
    color: var(--thanos-text);
}

/* Archive Headers */
[data-theme="light"] .thanos-archive-header,
[data-theme="light"] .thanos-actor-header,
[data-theme="light"] .thanos-country-header,
[data-theme="light"] .thanos-director-header,
body.light-mode .thanos-archive-header,
body.light-mode .thanos-actor-header,
body.light-mode .thanos-country-header,
body.light-mode .thanos-director-header {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .archive-title,
[data-theme="light"] .actor-name,
[data-theme="light"] .country-name,
[data-theme="light"] .director-name,
body.light-mode .archive-title,
body.light-mode .actor-name,
body.light-mode .country-name,
body.light-mode .director-name {
    color: var(--thanos-text);
}

/* SEO Content */
[data-theme="light"] .thanos-seo-content,
body.light-mode .thanos-seo-content {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-seo-content h2,
[data-theme="light"] .thanos-seo-content h3,
body.light-mode .thanos-seo-content h2,
body.light-mode .thanos-seo-content h3 {
    color: var(--thanos-text);
}

/* Player Extras (Lights toggle button) */
[data-theme="light"] .thanos-player-extras .thanos-btn,
body.light-mode .thanos-player-extras .thanos-btn {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-player-extras .thanos-btn:hover,
[data-theme="light"] .thanos-player-extras .thanos-btn.active,
body.light-mode .thanos-player-extras .thanos-btn:hover,
body.light-mode .thanos-player-extras .thanos-btn.active {
    background: var(--thanos-primary);
    color: #fff;
}

/* Subcategories */
[data-theme="light"] .subcategory-item,
body.light-mode .subcategory-item {
    background: var(--thanos-bg-hover);
    border: 1px solid var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .subcategory-item:hover,
body.light-mode .subcategory-item:hover {
    background: var(--thanos-border);
    color: var(--thanos-primary);
}

/* ==========================================================================
   Comments Section
   ========================================================================== */
.thanos-comments {
    padding: 20px 0;
}

.thanos-comments-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--thanos-text);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--thanos-border);
}

/* Comment List */
.thanos-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thanos-comment {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--thanos-border);
}

.thanos-comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Nested Comments */
.thanos-comment .children {
    list-style: none;
    margin: 20px 0 0 0;
    padding-left: 30px;
    border-left: 2px solid var(--thanos-border);
}

.thanos-comment .children .thanos-comment {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

/* Comment Body */
.thanos-comment-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Comment Meta (Avatar + Author Info) */
.thanos-comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.thanos-comment-avatar {
    flex-shrink: 0;
}

.thanos-comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--thanos-border);
}

.thanos-comment-metadata {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thanos-comment-author {
    font-weight: 600;
    color: var(--thanos-text);
    font-size: 0.95rem;
}

.thanos-comment-author a {
    color: var(--thanos-text);
    text-decoration: none;
}

.thanos-comment-author a:hover {
    color: var(--thanos-primary);
}

.thanos-comment-metadata time {
    font-size: 0.8rem;
    color: var(--thanos-text-muted);
}

/* Comment Content */
.thanos-comment-content {
    color: var(--thanos-text);
    line-height: 1.6;
    font-size: 0.95rem;
    padding-left: 62px;
}

.thanos-comment-content p {
    margin: 0 0 10px 0;
}

.thanos-comment-content p:last-child {
    margin-bottom: 0;
}

/* Comment Actions */
.thanos-comment-actions {
    display: flex;
    gap: 15px;
    padding-left: 62px;
}

.thanos-comment-actions a {
    font-size: 0.85rem;
    color: var(--thanos-text-muted);
    text-decoration: none;
    transition: var(--thanos-transition);
}

.thanos-comment-actions a:hover {
    color: var(--thanos-primary);
}

.thanos-comment-actions .reply a,
.thanos-comment-actions .edit a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.thanos-comment-actions .reply a::before {
    content: "↩";
}

/* Awaiting Moderation */
.thanos-comment-awaiting {
    color: #f59e0b;
    font-size: 0.85rem;
    font-style: italic;
    padding-left: 62px;
    margin-top: 5px;
}

/* No Comments Message */
.thanos-no-comments {
    color: var(--thanos-text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Comment Navigation */
.thanos-comment-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--thanos-border);
}

.thanos-comment-nav a {
    color: var(--thanos-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.thanos-comment-nav a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Comment Form
   ========================================================================== */
.thanos-comment-form {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--thanos-border);
}

.thanos-comment-form .comment-reply-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--thanos-text);
    margin-bottom: 20px;
}

.thanos-comment-form .comment-reply-title small {
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 10px;
}

.thanos-comment-form .comment-reply-title small a {
    color: var(--thanos-primary);
    text-decoration: none;
}

.thanos-comment-form .logged-in-as {
    font-size: 0.9rem;
    color: var(--thanos-text-muted);
    margin-bottom: 15px;
}

.thanos-comment-form .logged-in-as a {
    color: var(--thanos-primary);
    text-decoration: none;
}

/* Form Fields */
.thanos-comment-form .comment-form-comment,
.thanos-comment-form .comment-form-author,
.thanos-comment-form .comment-form-email,
.thanos-comment-form .comment-form-url {
    margin-bottom: 15px;
}

.thanos-comment-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--thanos-text);
    margin-bottom: 8px;
}

.thanos-comment-form input[type="text"],
.thanos-comment-form input[type="email"],
.thanos-comment-form input[type="url"],
.thanos-comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    border-radius: var(--thanos-radius);
    color: var(--thanos-text);
    font-size: 0.95rem;
    transition: var(--thanos-transition);
    font-family: inherit;
}

.thanos-comment-form input[type="text"]:focus,
.thanos-comment-form input[type="email"]:focus,
.thanos-comment-form input[type="url"]:focus,
.thanos-comment-form textarea:focus {
    outline: none;
    border-color: var(--thanos-primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}

.thanos-comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Submit Button */
.thanos-comment-form .form-submit {
    margin-top: 20px;
}

.thanos-comment-form .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    background: var(--thanos-primary);
    color: #fff;
    border: none;
    border-radius: var(--thanos-radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--thanos-transition);
}

.thanos-comment-form .submit:hover {
    background: var(--thanos-primary-hover);
    transform: translateY(-2px);
}

/* Cookies Consent */
.thanos-comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.thanos-comment-form .comment-form-cookies-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--thanos-primary);
}

.thanos-comment-form .comment-form-cookies-consent label {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--thanos-text-muted);
}

/* Required Field Indicator */
.thanos-comment-form .required {
    color: var(--thanos-primary);
}

/* Comment Form Responsive */
@media (max-width: 768px) {
    .thanos-comment-content,
    .thanos-comment-actions,
    .thanos-comment-awaiting {
        padding-left: 0;
    }

    .thanos-comment-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .thanos-comment-avatar img {
        width: 40px;
        height: 40px;
    }

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

/* ==========================================================================
   Comments Light Mode
   ========================================================================== */
[data-theme="light"] .thanos-comments-title,
body.light-mode .thanos-comments-title {
    color: var(--thanos-text);
    border-color: var(--thanos-border);
}

[data-theme="light"] .thanos-comment,
body.light-mode .thanos-comment {
    border-color: var(--thanos-border);
}

[data-theme="light"] .thanos-comment .children,
body.light-mode .thanos-comment .children {
    border-color: var(--thanos-border);
}

[data-theme="light"] .thanos-comment-avatar img,
body.light-mode .thanos-comment-avatar img {
    border-color: var(--thanos-border);
}

[data-theme="light"] .thanos-comment-author,
[data-theme="light"] .thanos-comment-author a,
body.light-mode .thanos-comment-author,
body.light-mode .thanos-comment-author a {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-comment-content,
body.light-mode .thanos-comment-content {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-comment-form,
body.light-mode .thanos-comment-form {
    border-color: var(--thanos-border);
}

[data-theme="light"] .thanos-comment-form .comment-reply-title,
body.light-mode .thanos-comment-form .comment-reply-title {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-comment-form label,
body.light-mode .thanos-comment-form label {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-comment-form input[type="text"],
[data-theme="light"] .thanos-comment-form input[type="email"],
[data-theme="light"] .thanos-comment-form input[type="url"],
[data-theme="light"] .thanos-comment-form textarea,
body.light-mode .thanos-comment-form input[type="text"],
body.light-mode .thanos-comment-form input[type="email"],
body.light-mode .thanos-comment-form input[type="url"],
body.light-mode .thanos-comment-form textarea {
    background: var(--thanos-bg-card);
    border-color: var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-comment-form input:focus,
[data-theme="light"] .thanos-comment-form textarea:focus,
body.light-mode .thanos-comment-form input:focus,
body.light-mode .thanos-comment-form textarea:focus {
    border-color: var(--thanos-primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1);
}

[data-theme="light"] .thanos-comment-nav,
body.light-mode .thanos-comment-nav {
    border-color: var(--thanos-border);
}

/* ==========================================================================
   Light Mode - Categories Section
   ========================================================================== */
[data-theme="light"] .thanos-categories-section .thanos-section-title,
body.light-mode .thanos-categories-section .thanos-section-title {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-category-card,
body.light-mode .thanos-category-card {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-category-card:hover,
body.light-mode .thanos-category-card:hover {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-primary);
    box-shadow: var(--thanos-shadow);
}

[data-theme="light"] .thanos-category-card .cat-name,
body.light-mode .thanos-category-card .cat-name {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-category-card:hover .cat-name,
body.light-mode .thanos-category-card:hover .cat-name {
    color: var(--thanos-primary);
}

[data-theme="light"] .thanos-category-card .cat-count,
body.light-mode .thanos-category-card .cat-count {
    color: var(--thanos-text-muted);
}

/* ==========================================================================
   Light Mode - Related Videos Section
   ========================================================================== */
[data-theme="light"] .thanos-related-title,
body.light-mode .thanos-related-title {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-related-item:hover .thanos-related-title,
body.light-mode .thanos-related-item:hover .thanos-related-title {
    color: var(--thanos-primary);
}

[data-theme="light"] .thanos-related-meta,
body.light-mode .thanos-related-meta {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .thanos-related-thumb,
body.light-mode .thanos-related-thumb {
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] #related-videos-grid .thanos-video-card,
body.light-mode #related-videos-grid .thanos-video-card {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] #related-videos-grid .thanos-video-card:hover,
body.light-mode #related-videos-grid .thanos-video-card:hover {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-primary);
}

/* ==========================================================================
   Light Mode - Load More Button
   ========================================================================== */
[data-theme="light"] .thanos-load-more-wrap .thanos-btn,
[data-theme="light"] .related-load-more-wrap .thanos-btn,
body.light-mode .thanos-load-more-wrap .thanos-btn,
body.light-mode .related-load-more-wrap .thanos-btn {
    background: var(--thanos-bg-hover);
    border: 1px solid var(--thanos-border);
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-load-more-wrap .thanos-btn:hover,
[data-theme="light"] .related-load-more-wrap .thanos-btn:hover,
body.light-mode .thanos-load-more-wrap .thanos-btn:hover,
body.light-mode .related-load-more-wrap .thanos-btn:hover {
    background: var(--thanos-primary);
    border-color: var(--thanos-primary);
    color: #fff;
}

/* ==========================================================================
   Light Mode - Archive Header
   ========================================================================== */
[data-theme="light"] .thanos-archive-header,
body.light-mode .thanos-archive-header {
    background: linear-gradient(180deg, var(--thanos-bg-card) 0%, var(--thanos-bg-dark) 100%);
}

[data-theme="light"] .archive-title,
[data-theme="light"] .thanos-archive-title,
body.light-mode .archive-title,
body.light-mode .thanos-archive-title {
    color: var(--thanos-text);
}

[data-theme="light"] .archive-desc,
[data-theme="light"] .thanos-archive-desc,
body.light-mode .archive-desc,
body.light-mode .thanos-archive-desc {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .archive-meta,
body.light-mode .archive-meta {
    color: var(--thanos-text-dim);
}

/* ==========================================================================
   Light Mode - SEO Content
   ========================================================================== */
[data-theme="light"] .thanos-seo-content,
body.light-mode .thanos-seo-content {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
    color: var(--thanos-text-muted);
}

[data-theme="light"] .thanos-seo-content h2,
[data-theme="light"] .thanos-seo-content h3,
body.light-mode .thanos-seo-content h2,
body.light-mode .thanos-seo-content h3 {
    color: var(--thanos-text);
}

/* ==========================================================================
   Light Mode - Widgets & Sidebar
   ========================================================================== */
[data-theme="light"] .thanos-widget,
body.light-mode .thanos-widget {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-widget-title,
body.light-mode .thanos-widget-title {
    color: var(--thanos-text);
    border-bottom-color: var(--thanos-border);
}

[data-theme="light"] .widget a,
body.light-mode .widget a {
    color: var(--thanos-text);
}

[data-theme="light"] .widget a:hover,
body.light-mode .widget a:hover {
    color: var(--thanos-primary);
}

/* ==========================================================================
   Light Mode - 404 Page
   ========================================================================== */
[data-theme="light"] .thanos-404-content h1,
body.light-mode .thanos-404-content h1 {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-404-content p,
body.light-mode .thanos-404-content p {
    color: var(--thanos-text-muted);
}

/* ==========================================================================
   Light Mode - Search Page
   ========================================================================== */
[data-theme="light"] .thanos-search-header,
body.light-mode .thanos-search-header {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .search-query,
body.light-mode .search-query {
    color: var(--thanos-primary);
}

[data-theme="light"] .search-count,
body.light-mode .search-count {
    color: var(--thanos-text-muted);
}

/* ==========================================================================
   Light Mode - Breadcrumb
   ========================================================================== */
[data-theme="light"] .thanos-breadcrumb,
body.light-mode .thanos-breadcrumb {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .thanos-breadcrumb a,
body.light-mode .thanos-breadcrumb a {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-breadcrumb a:hover,
body.light-mode .thanos-breadcrumb a:hover {
    color: var(--thanos-primary);
}

[data-theme="light"] .thanos-breadcrumb .separator,
body.light-mode .thanos-breadcrumb .separator {
    color: var(--thanos-text-dim);
}

/* ==========================================================================
   Light Mode - Video Info Section
   ========================================================================== */
[data-theme="light"] .video-info-section,
body.light-mode .video-info-section {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .video-title,
body.light-mode .video-title {
    color: var(--thanos-text);
}

[data-theme="light"] .video-meta,
body.light-mode .video-meta {
    color: var(--thanos-text-muted);
}

[data-theme="light"] .video-description,
body.light-mode .video-description {
    color: var(--thanos-text-muted);
}

/* ==========================================================================
   Light Mode - Tab Content
   ========================================================================== */
[data-theme="light"] .tab-content,
body.light-mode .tab-content {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .tab-pane,
body.light-mode .tab-pane {
    color: var(--thanos-text);
}

/* ==========================================================================
   Light Mode - Actor/Director Cards
   ========================================================================== */
[data-theme="light"] .thanos-actor-card,
[data-theme="light"] .thanos-director-card,
body.light-mode .thanos-actor-card,
body.light-mode .thanos-director-card {
    background: var(--thanos-bg-card);
    border: 1px solid var(--thanos-border);
}

[data-theme="light"] .thanos-actor-card:hover,
[data-theme="light"] .thanos-director-card:hover,
body.light-mode .thanos-actor-card:hover,
body.light-mode .thanos-director-card:hover {
    background: var(--thanos-bg-hover);
    border-color: var(--thanos-primary);
}

[data-theme="light"] .thanos-actor-name,
[data-theme="light"] .thanos-director-name,
body.light-mode .thanos-actor-name,
body.light-mode .thanos-director-name {
    color: var(--thanos-text);
}

[data-theme="light"] .thanos-actor-count,
[data-theme="light"] .thanos-director-count,
body.light-mode .thanos-actor-count,
body.light-mode .thanos-director-count {
    color: var(--thanos-text-muted);
}