/*-----------------------------------------------------------------------------------
    VileMetalVids - Dark Metal Theme
    Custom CSS overlay for Echo 3.1 template
-----------------------------------------------------------------------------------*/

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
    --vmv-black: #0a0a0a;
    --vmv-darker: #0f0f0f;
    --vmv-dark: #141414;
    --vmv-gray: #1a1a1a;
    --vmv-medium: #242424;
    --vmv-light: #2a2a2a;
    --vmv-border: #333333;

    --vmv-text-primary: #d0d0d0;
    --vmv-text-secondary: #b8b8b8;
    --vmv-text-muted: #888888;
    --vmv-text-dim: #555555;

    --vmv-accent-red: #8b0000;
    --vmv-accent-red-bright: #cc0000;
    --vmv-blood-red: #5a0000;
}

/* ============================================
   GLOBAL / BODY - TILED BACKGROUND
   ============================================ */
html {
    background-color: transparent !important;
    color: var(--vmv-text-secondary) !important;
    min-height: 100%;
}

body {
    background-color: #0a0a0a !important;
    background-image: url('/images/bg-vmvlogo-tile.png') !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-position: top left !important;
    min-height: 100%;
}

/* ============================================
   VMV LOGO TILED BACKGROUND
   ============================================ */
/* Let the body tiled background show through - make these transparent */
.pm-section-highlighted,
.pm-video-watch-featured,
.bg-dark,
.video-player-wrapper,
.pm-player-bg,
.player-wrapper {
    background-color: transparent !important;
    background-image: none !important;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.pm-header,
.navbar,
.navbar-default,
.pm-nav,
header,
#header,
.pm-header-wrapper {
    background-color: var(--vmv-darker) !important;
    border-color: var(--vmv-border) !important;
}

.navbar-default .navbar-nav > li > a,
.pm-nav a,
.navbar-nav > li > a {
    color: var(--vmv-text-secondary) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.pm-nav a:hover {
    color: var(--vmv-text-primary) !important;
    background-color: var(--vmv-gray) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: var(--vmv-gray) !important;
    color: var(--vmv-text-primary) !important;
}

/* Site title / logo */
.navbar-brand,
.pm-site-title,
.pm-site-title a {
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   MAIN CONTENT AREAS
   ============================================ */
.pm-content,
.pm-main,
.container,
.container-fluid,
main,
#content,
.content-wrapper {
    background-color: transparent !important;
}

.pm-section,
.pm-wrap,
.pm-box,
section {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

/* Section headings */
.pm-section-head,
.pm-section-title,
.pm-heading,
.section-title,
h2.pm-section-head {
    background-color: transparent !important;
    color: var(--vmv-text-primary) !important;
    border-color: var(--vmv-border) !important;
}

/* ============================================
   VIDEO THUMBNAILS / CARDS
   ============================================ */
.pm-video-thumb,
.pm-thumb,
.thumbnail,
.pm-vi-thumb,
.video-item,
.pm-video-item,
.card {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.pm-video-thumb:hover,
.pm-thumb:hover,
.thumbnail:hover,
.card:hover {
    background-color: rgba(26, 26, 26, 0.7) !important;
    border-color: var(--vmv-medium) !important;
}

/* Video titles */
.pm-video-thumb h3,
.pm-video-thumb h4,
.pm-video-thumb .title,
.pm-vi-title,
.pm-vi-title a,
.thumbnail .caption h3,
.thumbnail .caption h3 a,
.video-title,
.video-title a {
    color: var(--vmv-text-primary) !important;
}

.pm-video-thumb h3 a:hover,
.pm-vi-title a:hover,
.thumbnail .caption h3 a:hover,
.video-title a:hover,
.pm-video-title a:hover {
    color: var(--vmv-blood-red) !important;
}

/* Video meta info */
.pm-video-thumb .meta,
.pm-vi-meta,
.video-meta,
.thumbnail .caption .text-muted {
    color: var(--vmv-text-muted) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.pm-sidebar,
.sidebar,
aside,
#sidebar {
    background-color: transparent !important;
}

.pm-sidebar .pm-box,
.sidebar .widget,
.pm-sidebar-widget {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.pm-sidebar .pm-box-head,
.sidebar .widget-title,
.pm-sidebar-widget h4 {
    background-color: transparent !important;
    color: var(--vmv-text-primary) !important;
    border-color: var(--vmv-border) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.pm-footer,
footer,
#footer,
.footer,
.pm-footer-wrap,
.pm-bottom-footer,
.footer-bottom,
.pm-footer-bottom,
.pm-footer-widgets,
.pm-footer-copyright {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--vmv-text-muted) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove white lines/borders from footer sections */
.pm-footer *,
footer *,
.pm-footer-wrap *,
.mastcontent-wrap + *,
.pm-footer::before,
.pm-footer::after,
footer::before,
footer::after {
    border-color: var(--vmv-border) !important;
}

.pm-footer hr,
footer hr {
    border-color: var(--vmv-border) !important;
    background-color: var(--vmv-border) !important;
}

.pm-footer a,
footer a {
    color: var(--vmv-text-secondary) !important;
}

.pm-footer a:hover,
footer a:hover {
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    background-color: var(--vmv-accent-red) !important;
    border-color: var(--vmv-accent-red) !important;
    color: var(--vmv-text-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--vmv-accent-red-bright) !important;
    border-color: var(--vmv-accent-red-bright) !important;
}

.btn-default,
.btn-secondary {
    background-color: var(--vmv-gray) !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-secondary) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background-color: var(--vmv-medium) !important;
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   FORMS / INPUTS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-control {
    background-color: var(--vmv-gray) !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background-color: var(--vmv-medium) !important;
    border-color: var(--vmv-accent-red) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.2);
}

input::placeholder,
textarea::placeholder {
    color: var(--vmv-text-dim) !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
.dropdown-menu {
    background-color: var(--vmv-darker) !important;
    border-color: var(--vmv-border) !important;
}

.dropdown-menu > li > a {
    color: var(--vmv-text-secondary) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--vmv-gray) !important;
    color: var(--vmv-text-primary) !important;
}

.dropdown-menu .divider {
    background-color: var(--vmv-border) !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
    background-color: var(--vmv-dark) !important;
    border-color: var(--vmv-border) !important;
}

.modal-header {
    background-color: var(--vmv-darker) !important;
    border-color: var(--vmv-border) !important;
}

.modal-header .close {
    color: var(--vmv-text-muted) !important;
}

.modal-title {
    color: var(--vmv-text-primary) !important;
}

.modal-body {
    color: var(--vmv-text-secondary) !important;
}

.modal-footer {
    background-color: var(--vmv-darker) !important;
    border-color: var(--vmv-border) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--vmv-gray) !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-secondary) !important;
}

.pagination > li > a:hover {
    background-color: var(--vmv-medium) !important;
    color: var(--vmv-text-primary) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--vmv-accent-red) !important;
    border-color: var(--vmv-accent-red) !important;
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
    background-color: var(--vmv-darker) !important;
}

.breadcrumb > li,
.breadcrumb > li > a {
    color: var(--vmv-text-muted) !important;
}

.breadcrumb > li > a:hover {
    color: var(--vmv-text-primary) !important;
}

.breadcrumb > .active {
    color: var(--vmv-text-secondary) !important;
}

/* ============================================
   ALERTS / BADGES
   ============================================ */
.alert {
    border-color: var(--vmv-border) !important;
}

.badge,
.label {
    background-color: var(--vmv-gray) !important;
    color: var(--vmv-text-secondary) !important;
}

.badge-primary,
.label-primary {
    background-color: var(--vmv-accent-red) !important;
}

/* ============================================
   PLAYER AREA
   ============================================ */
.pm-player,
.pm-player-wrap,
.video-player,
#player {
    background-color: var(--vmv-black) !important;
}

/* ============================================
   VIDEO WATCH PAGE
   ============================================ */
.pm-video-info,
.video-info,
.pm-watch-info {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.pm-video-info h1,
.video-title-main,
.pm-watch-title {
    color: var(--vmv-text-primary) !important;
}

.pm-video-desc,
.video-description,
.pm-video-desc *,
.video-description *,
.pm-video-description,
.pm-video-description *,
.pm-desc,
.pm-desc *,
#video-description,
#video-description *,
.video-desc-content,
.video-desc-content *,
.pm-watch-description,
.pm-watch-description *,
[itemprop="description"],
[itemprop="description"] * {
    color: var(--vmv-text-secondary) !important;
}

/* ============================================
   COMMENTS
   ============================================ */
.pm-comments,
.comments-section,
#comments {
    background-color: transparent !important;
}

.pm-comment,
.comment {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.pm-comment-author,
.comment-author {
    color: var(--vmv-text-primary) !important;
}

.pm-comment-text,
.comment-text {
    color: var(--vmv-text-secondary) !important;
}

.pm-comment-meta,
.comment-meta {
    color: var(--vmv-text-muted) !important;
}

/* ============================================
   CATEGORIES PAGE
   ============================================ */
.pm-category-item,
.category-card {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.pm-category-item:hover,
.category-card:hover {
    background-color: rgba(26, 26, 26, 0.7) !important;
}

.pm-category-item h3,
.pm-category-item h4,
.category-title {
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   SEARCH
   ============================================ */
.pm-search,
.search-form,
#search {
    background-color: transparent !important;
}

.pm-search input,
.search-form input {
    background-color: var(--vmv-gray) !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   TABLES
   ============================================ */
table,
.table {
    background-color: transparent !important;
    color: var(--vmv-text-secondary) !important;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background-color: transparent !important;
    color: var(--vmv-text-primary) !important;
    border-color: var(--vmv-border) !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-color: var(--vmv-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(26, 26, 26, 0.5) !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(36, 36, 36, 0.7) !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--vmv-text-secondary) !important;
}

a:hover {
    color: var(--vmv-text-primary) !important;
    text-decoration: none;
}

/* Video links in Up Next / Related sections */
#pm-related a,
#pm-related a.ellipsis,
.pm-related a,
.pm-related a.ellipsis {
    color: var(--vmv-text-secondary) !important;
}

#pm-related a:hover,
.pm-related a:hover {
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   SCROLLBAR (Webkit browsers)
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--vmv-black);
}

::-webkit-scrollbar-thumb {
    background: var(--vmv-gray);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vmv-medium);
}

/* ============================================
   MISC OVERRIDES
   ============================================ */
.well {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.panel {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.panel-heading {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-primary) !important;
}

.panel-body {
    background-color: transparent !important;
}

hr {
    border-color: var(--vmv-border) !important;
    background-color: var(--vmv-border) !important;
    color: var(--vmv-border) !important;
    opacity: 0.5;
}

.text-muted {
    color: var(--vmv-text-muted) !important;
}

/* Bootstrap overrides */
.bg-light {
    background-color: transparent !important;
}

.bg-white {
    background-color: transparent !important;
}

/* Override any remaining white backgrounds */
.page-header,
.jumbotron {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

/* Ensure all headings are light colored */
h1, h2, h3, h4, h5, h6,
h1[itemprop="name"],
.pm-video-heading h1,
.pm-video-heading h1[itemprop="name"],
#pm-related h4,
.pm-vi-title,
.pm-vi-title a,
.video-title,
.video-title a,
h1.video-title,
.pm-video-title,
.pm-video-title a {
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   VMV HORIZONTAL HEADER
   ============================================ */

/* Header container with blood splatter overlay */
.vmv-header {
    background-color: var(--vmv-black) !important;
    background-image: url('/images/blood-splatter-header.png?v=2') !important;
    background-repeat: repeat-x !important;
    background-position: center center !important;
    background-size: auto 100% !important;
    border-bottom: 1px solid var(--vmv-border) !important;
    padding: 8px 0;
    position: relative;
}

.vmv-header .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 70px;
}

/* Logo section */
.vmv-header .header-logo {
    padding: 5px 0;
}

.vmv-header .header-logo img,
.vmv-logo-img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
}

.vmv-header .header-logo h3 {
    margin: 0;
}

.vmv-header .header-logo h3 a {
    color: var(--vmv-text-primary) !important;
    text-decoration: none;
}

/* Desktop Navigation - CENTERED */
.vmv-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70px;
}

.vmv-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vmv-nav-list > li {
    margin: 0 25px;
    position: relative;
}

.vmv-nav-list > li > a {
    color: var(--vmv-text-secondary) !important;
    text-decoration: none;
    padding: 10px 0;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.vmv-nav-list > li > a:hover {
    color: var(--vmv-text-primary) !important;
}

/* VMV Mega Menu */
.vmv-mega-dropdown {
    position: relative;
}

.vmv-mega-toggle {
    cursor: pointer;
}

.vmv-mega-toggle .caret {
    margin-left: 4px;
}

.vmv-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--vmv-darker) !important;
    border: 1px solid var(--vmv-border);
    padding: 15px;
    z-index: 9999;
}

.vmv-mega-dropdown:hover .vmv-mega-menu {
    display: flex;
}

.vmv-mega-small {
    min-width: 200px !important;
    display: none;
}

.vmv-mega-dropdown:hover .vmv-mega-small {
    display: block;
}

.vmv-mega-column {
    flex: 1;
    padding: 0 10px;
    border-right: 1px solid var(--vmv-border);
}

.vmv-mega-column:last-child {
    border-right: none;
}

.vmv-cat-item {
    position: relative;
    padding: 5px 0;
}

.vmv-cat-item > a {
    color: var(--vmv-text-secondary) !important;
    text-decoration: none;
    display: block;
    padding: 4px 8px;
    white-space: nowrap;
}

.vmv-cat-item > a:hover {
    color: var(--vmv-text-primary) !important;
    background-color: var(--vmv-blood-red) !important;
}

/* Hover flyout for (Live) submenu */
.vmv-sub {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--vmv-darker);
    border: 1px solid var(--vmv-border);
    list-style: none;
    margin: 0;
    padding: 5px 0;
    min-width: 180px;
    z-index: 10000;
}

.vmv-cat-item:hover .vmv-sub {
    display: block;
}

.vmv-sub li a {
    color: var(--vmv-text-secondary) !important;
    padding: 6px 15px;
    display: block;
    white-space: nowrap;
}

.vmv-sub li a:hover {
    color: var(--vmv-text-primary) !important;
    background-color: var(--vmv-blood-red) !important;
}

.vmv-cat-special > a {
    color: var(--vmv-text-primary) !important;
    background-color: var(--vmv-blood-red) !important;
}

.vmv-cat-special > a:hover {
    background-color: #6a0000 !important;
}

/* Social icons column - right aligned with content */
.vmv-social-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 70px;
    padding-right: 0;
}

.vmv-social-col a {
    color: var(--vmv-text-muted) !important;
    margin: 0 10px;
    font-size: 18px;
    transition: color 0.2s;
}

.vmv-social-col a:last-child {
    margin-right: 0;
}

.vmv-social-col a:hover {
    color: var(--vmv-text-primary) !important;
}

/* User section */
.navbar-pmuser {
    margin: 0;
    padding: 0;
    text-align: right;
}

.navbar-pmuser > li {
    display: inline-block;
    margin-left: 10px;
}

.navbar-pmuser .dropdown-menu {
    background-color: var(--vmv-darker) !important;
    border: 1px solid var(--vmv-border) !important;
}

.navbar-pmuser .dropdown-menu > li > a {
    color: var(--vmv-text-secondary) !important;
}

.navbar-pmuser .dropdown-menu > li > a:hover {
    background-color: var(--vmv-gray) !important;
    color: var(--vmv-text-primary) !important;
}

/* Mobile offcanvas menu */
#myNavmenu {
    background-color: var(--vmv-darker) !important;
}

#myNavmenu a {
    color: var(--vmv-text-secondary) !important;
}

#myNavmenu a:hover {
    color: var(--vmv-text-primary) !important;
}

.navslide-header {
    color: var(--vmv-text-muted) !important;
    padding: 10px 15px;
    font-weight: bold;
}

.navslide-divider {
    border-bottom: 1px solid var(--vmv-border);
    margin: 10px 0;
}

/* Hide offcanvas toggle on desktop */
@media (min-width: 768px) {
    #navslide-toggle,
    .navmenu-fixed-left,
    #myNavmenu {
        display: none !important;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .vmv-header .row {
        flex-wrap: nowrap;
    }

    #navslide-toggle {
        display: inline-block;
        padding: 10px;
        color: var(--vmv-text-secondary) !important;
    }

    #navslide-toggle:hover {
        color: var(--vmv-text-primary) !important;
    }
}

/* ============================================
   CATEGORY PAGE HEADER / BREADCRUMB FIX
   ============================================ */
#category-header,
.pm-category-highlight,
.pm-category-header-subcats,
.pm-category-subcats,
.row-page-heading,
.pm-page-header {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#category-header .container-fluid,
#category-header .row,
.pm-category-highlight::before,
.pm-category-highlight::after {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}

#category-header h1,
.pm-category-highlight h1 {
    color: var(--vmv-text-primary) !important;
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 32px !important;
}

/* All page headings - metal font style */
h1, h2, h3,
.pm-section-head h4,
.pm-section-title {
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.pm-category-subcats h5 {
    color: var(--vmv-text-muted) !important;
}

.pm-category-subcats ul li a {
    color: var(--vmv-text-secondary) !important;
}

.pm-category-subcats ul li a:hover {
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   GLOBAL BORDER/LINE FIX - Replace all white lines with gray
   ============================================ */
*,
*::before,
*::after {
    border-color: var(--vmv-border) !important;
}

/* Catch any remaining white/light backgrounds */
.row,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    background-color: transparent !important;
}

/* Additional transparent overrides for common PHP Melody elements */
.pm-main-content,
.pm-content-wrap,
.mastcontent-wrap,
.pm-browse-videos,
.pm-video-listing,
.pm-video-list,
.pm-videos-grid,
.pm-grid,
.pm-row,
.pm-col,
.pm-wrap,
.pm-inner,
.pm-outer,
.pm-content-area,
.main-content,
.content-area,
.content,
.inner,
.outer,
.wrap,
.wrapper,
.page-content,
.site-content,
.site-main,
.entry-content,
.post-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* Video listing areas */
.pm-vi,
.pm-vi-wrap,
.pm-featured,
.pm-featured-wrap,
.pm-popular,
.pm-popular-wrap,
.pm-latest,
.pm-latest-wrap,
.pm-new,
.pm-new-wrap,
.pm-top,
.pm-top-wrap,
.pm-watched,
.pm-watched-wrap,
.pm-being-watched,
.being-watched,
.videos-being-watched {
    background-color: transparent !important;
    background-image: none !important;
}

/* Echo template specific */
.echo-section,
.echo-wrap,
.echo-content,
.echo-grid,
.echo-row {
    background-color: transparent !important;
    background-image: none !important;
}

/* Widget areas */
.widget,
.widget-area,
.sidebar-widget,
.pm-widget,
.pm-widget-wrap {
    background-color: transparent !important;
    background-image: none !important;
}

/* List groups and items */
.list-group,
.list-group-item {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

/* Nav tabs and pills */
.nav-tabs,
.nav-pills,
.nav-tabs > li > a,
.nav-pills > li > a {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.nav-tabs > li.active > a,
.nav-pills > li.active > a {
    background-color: var(--vmv-gray) !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-primary) !important;
}

/* ============================================
   NUCLEAR TRANSPARENCY - Override ALL light backgrounds from echo.css
   ============================================ */

/* Override all Echo utility background classes */
.bg-light,
.bg-white,
.bg-primary,
.bg-secondary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger {
    background-color: transparent !important;
}

/* Video browse/listing containers */
.pm-ul-browse-videos,
.pm-ul-browse-videos > li,
.pm-carousel-videos,
.pm-series-description {
    background-color: transparent !important;
    background-image: none !important;
}

/* Growl notifications - keep dark */
.growl {
    background-color: var(--vmv-darker) !important;
}

/* Search suggestions */
.pm-search-suggestions,
.pm-search-suggestions-list,
.pm-search-suggestions-list li {
    background-color: var(--vmv-darker) !important;
}

/* Profile elements */
.pm-profile-avatar-pic,
.pm-profile-avatar-preview,
.pm-profile-cover-preview,
.cropit-image-preview {
    background-color: var(--vmv-gray) !important;
}

/* Sticky header */
.sticky-head,
.header-bg {
    background-color: var(--vmv-darker) !important;
}

/* Override ALL white/light hex backgrounds globally */
[style*="background-color: #fff"],
[style*="background-color: #FFF"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background: #FFF"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color:#FFF"],
[style*="background:#fff"],
[style*="background:#FFF"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Echo-specific containers with light backgrounds */
.pm-page-content,
.pm-videos-list,
.pm-videos-wrap,
.pm-video-container,
.pm-video-wrap,
.pm-video-box,
.pm-video-card,
.pm-card,
.pm-list,
.pm-list-item,
.pm-item,
.pm-block,
.pm-module,
.pm-widget-content,
.pm-box-content,
.pm-panel,
.pm-panel-body,
.pm-article,
.pm-article-content,
.pm-post,
.pm-post-content,
.pm-entry,
.pm-entry-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* User/channel pages */
.pm-user-page,
.pm-channel-page,
.pm-profile-page,
.pm-account-page,
.pm-settings-page {
    background-color: transparent !important;
    background-image: none !important;
}

/* Tags and badges - keep slightly visible */
.pm-tag,
.pm-badge,
.tag,
.pm-label {
    background-color: var(--vmv-gray) !important;
}

/* Playlist containers */
.pm-playlist,
.pm-playlist-wrap,
.pm-playlist-item,
.pm-playlist-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* Comment sections */
.pm-comments-wrap,
.pm-comment-item,
.pm-comment-content,
.pm-comment-box {
    background-color: transparent !important;
    background-image: none !important;
}

/* Article/page content */
.pm-article-wrap,
.pm-page-wrap,
.pm-static-page,
.pm-content-page {
    background-color: transparent !important;
    background-image: none !important;
}

/* MASTER TRANSPARENCY OVERRIDE - Make ALL elements transparent to show tiled background */
/* Only specific elements like header, dropdowns, inputs should have solid backgrounds */
div:not(.vmv-header):not(.vmv-mega-menu):not(.vmv-mega-column):not(.dropdown-menu):not(.modal-content):not(.growl):not(.pm-search-suggestions),
section, article, aside, main, nav:not(.vmv-header):not(#myNavmenu) {
    background-color: transparent !important;
}

/* VMV Mega Menu - MUST have solid dark background */
.vmv-mega-menu,
.vmv-mega-menu .vmv-mega-column,
.vmv-sub {
    background-color: var(--vmv-darker) !important;
}

/* Specific containers still showing solid backgrounds */
.container-fluid,
.container-footer,
.mastcontent-wrap,
#content-main,
#content,
.content-narrow,
.content-video-handler {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Footer row sections */
.row-footer-vertical,
.container-footer footer {
    background-color: transparent !important;
    border-color: var(--vmv-border) !important;
}

.row-footer-horizontal,
.container-footer footer .row-footer-horizontal {
    background-color: transparent !important;
    border: none !important;
}

/* Language dropdown in footer */
.container-footer footer .pm-language a.btn.btn-link {
    background-color: var(--vmv-gray) !important;
    border-color: var(--vmv-border) !important;
    color: var(--vmv-text-secondary) !important;
}

/* Footer Tags Section - Full Width SEO Tags */
.row-footer-tags {
    padding: 15px 0;
    border-top: 1px solid var(--vmv-border);
    margin-top: 15px;
}

.footer-tags-wrap {
    text-align: center;
    line-height: 2;
}

.footer-tags-wrap a {
    display: inline-block;
    padding: 3px 10px;
    margin: 3px 5px;
    background-color: var(--vmv-gray) !important;
    border: 1px solid var(--vmv-border);
    border-radius: 3px;
    color: var(--vmv-text-muted) !important;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.footer-tags-wrap a:hover {
    background-color: var(--vmv-medium) !important;
    color: var(--vmv-text-primary) !important;
    border-color: var(--vmv-accent-red);
}

/* Footer Links Section - Full Width Horizontal Layout */
.row-footer-links {
    padding: 20px 0;
    border-bottom: 1px solid var(--vmv-border);
}

.vmv-footer-nav {
    margin-bottom: 15px;
}

.vmv-footer-nav li {
    margin: 0 15px;
}

.vmv-footer-nav li a {
    color: var(--vmv-text-secondary) !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif;
}

.vmv-footer-nav li a:hover {
    color: var(--vmv-text-primary) !important;
}

.vmv-footer-social {
    margin-bottom: 0;
}

.vmv-footer-social li {
    margin: 0 12px;
}

.vmv-footer-social li a {
    color: var(--vmv-text-muted) !important;
    font-size: 20px;
}

.vmv-footer-social li a:hover {
    color: var(--vmv-text-primary) !important;
}

/* Footer Site Title */
.vmv-footer-title {
    color: var(--vmv-text-secondary) !important;
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 24px !important;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Show less button styling - forced */
a.readmore-js-toggle {
    background-color: #2a2a2a !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 8px 15px !important;
    display: inline-block !important;
    border-radius: 3px !important;
}
a.readmore-js-toggle:hover {
    background-color: #3a3a3a !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Search bar - break out of column to right edge */
.vmv-header .container {
    position: relative;
}

.vmv-social-col {
    position: static;
}

.vmv-top-search {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    z-index: 100;
}

.vmv-top-search input {
    width: 345px;
    padding: 6px 10px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #fff;
    border-radius: 3px 0 0 3px;
    font-size: 12px;
}

.vmv-top-search button {
    padding: 6px 12px;
    background: #8b0000;
    border: 1px solid #8b0000;
    color: #fff;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
/* Search results keyword highlight */
.search-keyword,
.pm-search-keyword,
mark,
.highlight {
    background-color: #8b0000 !important;
    color: #fff !important;
}
/* ============================================
   MOBILE MENU FIX - Hide by default
   ============================================ */
@media (max-width: 767px) {
    /* Hide the offcanvas menu by default */
    #myNavmenu,
    .navmenu,
    .navmenu-fixed-left {
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        left: 0 !important;
        visibility: hidden;
    }
    
    /* Show when canvas-slid class is added */
    .canvas-slid #myNavmenu,
    #myNavmenu.in,
    .navmenu.in {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        visibility: visible;
    }
    
    /* Hide the desktop nav on mobile */
    .vmv-nav-center,
    .vmv-nav-list {
        display: none !important;
    }
    
    /* Show hamburger toggle on mobile */
    #navslide-toggle {
        display: inline-block !important;
    }
    
    /* Hide search on mobile header */
    .vmv-top-search {
        display: none !important;
    }
}

/* ============================================
   MOBILE MENU FIX - Force hide offcanvas
   ============================================ */
/* Hide offcanvas menu off-screen by default */
#myNavmenu.offcanvas,
.navmenu.offcanvas,
.navmenu-fixed-left.offcanvas {
    left: -300px !important;
    visibility: hidden !important;
}

/* Show when .in class is added (toggled open) */
#myNavmenu.offcanvas.in,
.navmenu.offcanvas.in,
.navmenu-fixed-left.offcanvas.in {
    left: 0 !important;
    visibility: visible !important;
}

/* ============================================
   MOBILE MENU - NUCLEAR FIX
   ============================================ */
/* Completely hide the offcanvas nav by default */
#myNavmenu {
    display: none !important;
    left: -300px !important;
}

/* Only show when JavaScript adds .in class */
#myNavmenu.in {
    display: block !important;
    left: 0 !important;
}