/*
 * apiJAV Futuristic Enhancement
 * Visual upgrade layer — overrides aesthetics only, never breaks layout.
 * Loaded after wpst-style so it cascades cleanly.
 */

/* ============================================================
   GOOGLE FONTS — Orbitron (headings) + Exo 2 (body)
   font-display:swap prevents render-blocking
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap&font-display=swap');

/* ============================================================
   CSS VARIABLES — Cyber Blue (default)
   ============================================================ */
:root {
    --aj-bg:              #080810;
    --aj-bg2:             #0c0c1a;
    --aj-surface:         #12121e;
    --aj-surface2:        #1a1a2e;
    --aj-border:          rgba(0, 200, 255, 0.12);
    --aj-border-hot:      rgba(0, 200, 255, 0.45);
    --aj-accent:          #00c8ff;
    --aj-accent-dim:      rgba(0, 200, 255, 0.18);
    --aj-accent-glow:     rgba(0, 200, 255, 0.55);
    --aj-accent2:         #7c3aed;
    --aj-accent2-dim:     rgba(124, 58, 237, 0.20);
    --aj-accent3:         #e040fb;
    --aj-text:            #dde0ee;
    --aj-text-dim:        #7a7d96;
    --aj-text-bright:     #f0f4ff;
    --aj-glow-top:        rgba(0, 200, 255, 0.06);
    --aj-glow-btm:        rgba(124, 58, 237, 0.05);
    --aj-grad-btn:        linear-gradient(135deg, #7c3aed 0%, rgba(0,200,255,0.85) 100%);
    --aj-grad-btn-hover:  linear-gradient(135deg, #6d28d9 0%, #00c8ff 100%);
    --aj-grad-nav-hover:  linear-gradient(180deg, rgba(0,200,255,0.10) 0%, rgba(0,200,255,0.04) 100%);
    --aj-nav-active-line: #00c8ff;
    --aj-grad-meter:      linear-gradient(90deg, #7c3aed 0%, #00c8ff 100%);
    --aj-title-grad:      linear-gradient(135deg, #fff 30%, #00c8ff 70%);
    --aj-logo-grad:       linear-gradient(135deg, #fff 30%, #00c8ff 100%);
    --aj-sep-grad:        linear-gradient(90deg, transparent 0%, #00c8ff 40%, #7c3aed 60%, transparent 100%);
    --aj-footer-sep:      linear-gradient(90deg, transparent 0%, #7c3aed 35%, #00c8ff 65%, transparent 100%);
    --aj-radius:          6px;
    --aj-radius-lg:       10px;
    --aj-transition:      0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   GLOBAL FOUNDATION
   ============================================================ */
body {
    background-color: var(--aj-bg) !important;
    background-image:
        radial-gradient(ellipse 80% 40% at 50% 0%, var(--aj-glow-top) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 80% 100%, var(--aj-glow-btm) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--aj-text) !important;
    font-family: 'Exo 2', 'Helvetica Neue', sans-serif !important;
    font-size: 14px;
}

/* Subtle scanline overlay on body */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.04) 2px,
        rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title a,
.title-block h1.entry-title {
    font-family: 'Orbitron', 'Exo 2', sans-serif !important;
    letter-spacing: 0.03em;
}

a {
    color: var(--aj-accent);
    transition: color var(--aj-transition), text-shadow var(--aj-transition);
}
a:hover {
    color: #fff;
    text-shadow: 0 0 12px var(--aj-accent-glow);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    background: linear-gradient(90deg, #05050d 0%, #0a0a18 50%, #05050d 100%) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    box-shadow: 0 1px 20px var(--aj-accent-dim) !important;
}

.top-bar small { color: var(--aj-text-dim) !important; }

.top-bar .social-share a {
    background: var(--aj-accent-dim) !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius) !important;
    transition: all var(--aj-transition) !important;
}
.top-bar .social-share a:hover {
    background: var(--aj-accent-dim) !important;
    border-color: var(--aj-border-hot) !important;
    box-shadow: 0 0 12px var(--aj-accent-dim) !important;
}
.top-bar .social-share i { color: var(--aj-text-dim) !important; }
.top-bar .social-share a:hover i { color: var(--aj-accent) !important; }


/* ============================================================
   MEMBERSHIP / TOP BAR LOGIN-LOGOUT
   Bug Fix: explicitly style login, logout, welcome and register
   links so they are always visible against the top-bar background.
   ============================================================ */
.top-bar .membership { color: var(--aj-text-dim) !important; }
.top-bar .membership .welcome { color: var(--aj-text-dim) !important; }
.top-bar .membership .or { color: var(--aj-text-dim) !important; }
.top-bar .membership a {
    color: var(--aj-accent) !important;
    display: inline-block !important;
    margin: 0 8px !important;
    transition: color var(--aj-transition), text-shadow var(--aj-transition) !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0.04em !important;
}
.top-bar .membership a:hover {
    color: var(--aj-text-bright) !important;
    text-shadow: 0 0 10px var(--aj-accent-glow) !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
}
.top-bar .membership a i { color: inherit !important; margin-right: 4px !important; }
.top-bar .membership .login a { color: var(--aj-accent) !important; font-weight: 600 !important; }
.top-bar .membership .login a:hover { color: var(--aj-text-bright) !important; }

/* ============================================================
   SITE BRANDING / HEADER
   ============================================================ */
.site-branding {
    background: linear-gradient(180deg, #080812 0%, #0a0a18 100%) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    position: relative;
    overflow: visible;
}

.site-branding::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 1px;
    background: var(--aj-sep-grad);
    opacity: 0.6;
}

.site-title,
.site-title a {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    background: var(--aj-title-grad) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.site-description { color: var(--aj-text-dim) !important; }

/* Search input */
.site-branding .header-search input,
input[type="search"],
input[type="text"] {
    background: var(--aj-surface2) !important;
    border: 1px solid var(--aj-border) !important;
    color: var(--aj-text) !important;
    border-radius: var(--aj-radius) !important;
    transition: border-color var(--aj-transition), box-shadow var(--aj-transition) !important;
}
.site-branding .header-search input:focus,
input[type="search"]:focus,
input[type="text"]:focus {
    border-color: var(--aj-border-hot) !important;
    box-shadow: 0 0 0 3px var(--aj-accent-dim), 0 0 18px var(--aj-accent-dim) !important;
    outline: none !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#site-navigation {
    background: linear-gradient(180deg, #0c0c1c 0%, #090914 100%) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}

#site-navigation > ul > li {
    border-right: 1px solid rgba(from var(--aj-accent) r g b / 0.07) !important;
}
#site-navigation > ul > li:first-child {
    border-left: 1px solid rgba(from var(--aj-accent) r g b / 0.07) !important;
}

#site-navigation > ul > li > a {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.82em !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--aj-text-dim) !important;
    transition: color var(--aj-transition), background var(--aj-transition) !important;
}

#site-navigation > ul > li:hover > a,
#site-navigation ul li.current-menu-item > a {
    color: var(--aj-accent) !important;
    text-shadow: 0 0 14px var(--aj-accent-glow) !important;
}

#site-navigation > ul > li:hover,
#site-navigation ul li.current-menu-item {
    background: linear-gradient(180deg, var(--aj-accent-dim) 0%, rgba(from var(--aj-accent) r g b / 0.04) 100%) !important;
    box-shadow: inset 0 -2px 0 var(--aj-accent) !important;
}

/* Dropdown */
#site-navigation ul ul {
    background: rgba(8, 8, 20, 0.97) !important;
    border: 1px solid var(--aj-border) !important;
    border-top: 2px solid var(--aj-accent) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 20px var(--aj-accent-dim) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0 0 var(--aj-radius) var(--aj-radius) !important;
}
#site-navigation ul ul li a {
    color: var(--aj-text-dim) !important;
    font-size: 0.82em !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    transition: all var(--aj-transition) !important;
}
#site-navigation ul ul li:hover > a,
#site-navigation ul ul li a:hover {
    color: var(--aj-accent) !important;
    background: var(--aj-accent-dim) !important;
    padding-left: 20px !important;
}

/* ============================================================
   BUTTONS & LABELS — general
   ============================================================ */
button, .button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.label, .label:visited,
.pagination ul li a {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    background: var(--aj-grad-btn) !important;
    border: 1px solid rgba(from var(--aj-accent) r g b / 0.3) !important;
    border-radius: var(--aj-radius) !important;
    color: #fff !important;
    transition: all var(--aj-transition) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}
button:hover, .button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.label:hover,
.pagination ul li a:hover {
    background: var(--aj-grad-btn-hover) !important;
    box-shadow: 0 0 18px var(--aj-accent-dim), 0 4px 12px rgba(0,0,0,0.4) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   PAGE HEADER / SECTION TITLES
   ============================================================ */
.page-header {
    background: linear-gradient(135deg, var(--aj-surface) 0%, var(--aj-surface2) 100%) !important;
    border-left: 3px solid var(--aj-accent) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,200,255,0.03) !important;
    border-radius: var(--aj-radius) !important;
    padding: 0.8em 1.2em !important;
}
.page-header .page-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.1em !important;
    letter-spacing: 0.1em !important;
    color: var(--aj-accent) !important;
    text-shadow: 0 0 20px var(--aj-accent-glow) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* ============================================================
   VIDEOS LIST & GRID WRAPPER
   ============================================================ */
.videos-list {
    background: transparent !important;
}

/* ============================================================
   THUMBNAIL BLOCK — the star of the show
   ============================================================ */
.thumb-block {
    transition: transform var(--aj-transition) !important;
    will-change: transform;
}
.thumb-block:hover {
    transform: translateY(-3px) !important;
    z-index: 2;
    position: relative;
}

/* Entry header (title below thumb) */
.thumb-block .entry-header {
    background: linear-gradient(180deg, var(--aj-surface) 0%, var(--aj-bg2) 100%) !important;
    border: 1px solid var(--aj-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--aj-radius) var(--aj-radius) !important;
    color: var(--aj-text) !important;
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    padding: 0.55em 0.6em 0.45em !important;
    transition: background var(--aj-transition), color var(--aj-transition) !important;
}
.thumb-block:hover .entry-header {
    background: linear-gradient(180deg, var(--aj-surface2) 0%, #161626 100%) !important;
    color: var(--aj-text-bright) !important;
    border-color: rgba(from var(--aj-accent) r g b / 0.25) !important;
}

/* Thumbnail image container */
.thumb-block .post-thumbnail {
    background-color: var(--aj-surface) !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius) var(--aj-radius) 0 0 !important;
    overflow: hidden !important;
    transition: border-color var(--aj-transition), box-shadow var(--aj-transition) !important;
}
.thumb-block:hover .post-thumbnail {
    border-color: var(--aj-border-hot) !important;
    box-shadow:
        0 0 0 1px rgba(0,200,255,0.3),
        0 0 25px rgba(0,200,255,0.22),
        0 8px 32px rgba(0,0,0,0.7) !important;
}

/* Smooth image zoom on hover */
.thumb-block .post-thumbnail img {
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease !important;
    filter: brightness(0.88) saturate(0.95) !important;
}
.thumb-block:hover .post-thumbnail img {
    transform: scale(1.04) !important;
    filter: brightness(1.0) saturate(1.1) !important;
}

/* Dark gradient overlay at bottom of thumb for badges readability */
.thumb-block .post-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(5,5,15,0.85) 0%, transparent 100%);
    z-index: 15;
    pointer-events: none;
    border-radius: 0 !important;
    transition: opacity var(--aj-transition);
}
.thumb-block:hover .post-thumbnail::after {
    opacity: 0.7;
}

/* ============================================================
   PLAY ICON HOVER OVERLAY
   ============================================================ */
.play-icon-hover {
    background: radial-gradient(ellipse at center,
        var(--aj-accent-dim) 0%,
        rgba(0,0,10,0.35) 70%) !important;
    transition: opacity var(--aj-transition) !important;
    border-radius: var(--aj-radius) var(--aj-radius) 0 0 !important;
}

.play-icon-hover i {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow:
        0 0 20px var(--aj-accent-glow),
        0 0 40px rgba(0,200,255,0.4),
        0 4px 8px rgba(0,0,0,0.8) !important;
    filter: drop-shadow(0 0 12px var(--aj-accent)) !important;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.post-thumbnail:hover .play-icon-hover i::before {
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ============================================================
   DURATION / VIEWS / HD BADGES
   ============================================================ */
span.views,
span.duration {
    background: rgba(5, 5, 18, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e0e4f0 !important;
    font-family: 'Exo 2', monospace !important;
    font-size: 0.72em !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em !important;
    z-index: 25 !important;
    transition: all var(--aj-transition) !important;
}
span.duration {
    color: var(--aj-accent) !important;
    border-color: rgba(0,200,255,0.2) !important;
}
.thumb-block:hover span.views,
.thumb-block:hover span.duration {
    background: var(--aj-accent-dim) !important;
    border-color: rgba(from var(--aj-accent) r g b / 0.35) !important;
}

span.hd-video {
    background: linear-gradient(135deg, #ff8c00 0%, #e040fb 100%) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.6em !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(224,64,251,0.5), 0 2px 6px rgba(0,0,0,0.5) !important;
    z-index: 25 !important;
}

/* ============================================================
   CATEGORY LABELS on thumbnails
   ============================================================ */
.category-label {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.68em !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    z-index: 25 !important;
    transition: all var(--aj-transition) !important;
}
.category-label:hover {
    transform: scale(1.08) translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
.category-label.censored {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
}
.category-label.uncensored {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
    color: #a5d6a7 !important;
}
.category-label.uncensored-leaked,
.category-label.reducing-mosaic {
    background: linear-gradient(135deg, #01579b 0%, #0288d1 100%) !important;
}
.category-label.english-subtitle {
    background: linear-gradient(135deg, #6a1b9a 0%, var(--aj-accent3) 100%) !important;
}
.category-label.combined-label {
    background: linear-gradient(135deg, #880e4f 0%, #c2185b 100%) !important;
}

/* ============================================================
   VIDEO DEBOUNCE LOADING BAR
   ============================================================ */
.video-debounce-bar {
    background: var(--aj-grad-meter) !important;
    height: 3px !important;
    opacity: 1 !important;
    box-shadow: 0 0 8px var(--aj-accent-glow) !important;
}

/* ============================================================
   NO THUMB PLACEHOLDER
   ============================================================ */
.no-thumb {
    background: linear-gradient(135deg, var(--aj-surface) 0%, var(--aj-surface2) 100%) !important;
    border: 1px dashed var(--aj-border) !important;
}
.no-thumb span { color: var(--aj-text-dim) !important; }

/* ============================================================
   RATING BAR
   ============================================================ */
.rating-bar-meter {
    background: var(--aj-grad-meter) !important;
    box-shadow: 0 0 8px var(--aj-accent-dim) !important;
}
.rating-bar {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 2px !important;
    border: 1px solid var(--aj-border) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#secondary {
    background: transparent !important;
}
.widget {
    background: var(--aj-surface) !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius-lg) !important;
    padding: 1em !important;
    margin-bottom: 1.2em !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    transition: border-color var(--aj-transition) !important;
}
.widget:hover {
    border-color: rgba(0,200,255,0.25) !important;
}
.widget-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.72em !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--aj-accent) !important;
    text-shadow: 0 0 14px rgba(0,200,255,0.4) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    padding-bottom: 0.6em !important;
    margin-bottom: 0.8em !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination ul li a,
.pagination ul li span {
    background: var(--aj-surface) !important;
    border: 1px solid var(--aj-border) !important;
    color: var(--aj-text-dim) !important;
    border-radius: var(--aj-radius) !important;
    transition: all var(--aj-transition) !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
}
.pagination ul li a:hover,
.pagination ul li.active a,
.pagination ul li span.current {
    background: linear-gradient(135deg, var(--aj-accent2-dim) 0%, var(--aj-accent-dim) 100%) !important;
    border-color: var(--aj-border-hot) !important;
    color: var(--aj-accent) !important;
    box-shadow: 0 0 14px var(--aj-accent-dim) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   CATEGORIES LIST (thumbnail grid pages)
   ============================================================ */
.categories-list .thumb-block .entry-header,
.actors-list .thumb-block .entry-header {
    background: linear-gradient(180deg, var(--aj-accent-dim) 0%, rgba(0,200,255,0.04) 100%) !important;
    color: var(--aj-text-bright) !important;
    border-color: var(--aj-border) !important;
}
.categories-list .thumb-block .entry-header .cat-title,
.actors-list .thumb-block .entry-header .actor-title {
    color: var(--aj-text-bright) !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
}
.categories-list .thumb-block .entry-header .cat-title:before,
.actors-list .thumb-block .entry-header .actor-title:before {
    color: var(--aj-accent) !important;
}
.categories-list .thumb-block:hover .entry-header,
.actors-list .thumb-block:hover .entry-header {
    background: linear-gradient(180deg, var(--aj-accent-dim) 0%, var(--aj-accent-dim) 100%) !important;
    border-color: var(--aj-border-hot) !important;
}

/* ============================================================
   SINGLE VIDEO PAGE
   ============================================================ */
.title-block {
    background: linear-gradient(135deg, var(--aj-surface) 0%, var(--aj-surface2) 100%) !important;
    border-left: 3px solid var(--aj-accent) !important;
    border-radius: var(--aj-radius) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
    padding: 0.8em 1.2em !important;
    margin-bottom: 0.8em !important;
}

.title-block h1.entry-title {
    color: var(--aj-text-bright) !important;
    font-family: 'Orbitron', sans-serif !important;
    text-shadow: 0 0 30px rgba(0,200,255,0.2) !important;
}

#video-buttons a,
#video-buttons button,
span.post-like {
    background: var(--aj-surface2) !important;
    border: 1px solid var(--aj-border) !important;
    color: var(--aj-text-dim) !important;
    border-radius: var(--aj-radius) !important;
    transition: all var(--aj-transition) !important;
}
#video-buttons a:hover,
#video-buttons button:hover,
span.post-like:hover {
    background: var(--aj-accent-dim) !important;
    border-color: var(--aj-border-hot) !important;
    color: var(--aj-accent) !important;
    box-shadow: 0 0 14px var(--aj-accent-dim) !important;
}

/* Rating bar on single page */
.entry-content .rating-bar {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}
.entry-content .rating-bar-meter {
    background: var(--aj-grad-meter) !important;
}

/* Video views */
.entry-content #video-views {
    color: var(--aj-text-dim) !important;
    font-family: 'Exo 2', sans-serif !important;
}
.entry-content #video-views span {
    color: var(--aj-accent) !important;
    font-weight: 700 !important;
}

/* ============================================================
   VIDEO PLAYER
   ============================================================ */
.video-player,
.responsive-player {
    border-radius: var(--aj-radius-lg) !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 1px var(--aj-border),
        0 0 40px var(--aj-accent-dim),
        0 12px 48px rgba(0,0,0,0.8) !important;
}

.video-js .vjs-big-play-button {
    background: linear-gradient(135deg, rgba(0,0,15,0.7) 0%, var(--aj-accent-dim) 100%) !important;
    border: 2px solid rgba(0,200,255,0.6) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 30px rgba(0,200,255,0.5) !important;
    transition: all var(--aj-transition) !important;
}
.video-js .vjs-big-play-button:hover {
    background: rgba(from var(--aj-accent) r g b / 0.28) !important;
    box-shadow: 0 0 50px rgba(0,200,255,0.7) !important;
    transform: scale(1.1) !important;
}

.video-js .vjs-control-bar {
    background: linear-gradient(to top, rgba(0,0,10,0.95) 0%, rgba(0,0,10,0.7) 100%) !important;
}

.video-js .vjs-play-progress,
.video-js .vjs-play-progress::before {
    background: var(--aj-accent) !important;
    box-shadow: 0 0 6px var(--aj-accent-glow) !important;
}

/* ============================================================
   FEATURED CAROUSEL
   ============================================================ */
.bx-wrapper {
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius-lg) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7) !important;
    background: transparent !important;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: var(--aj-text-dim) !important;
    border-radius: 50% !important;
    transition: all var(--aj-transition) !important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: var(--aj-accent) !important;
    box-shadow: 0 0 10px var(--aj-accent-glow) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: linear-gradient(180deg, #070710 0%, #050508 100%) !important;
    border-top: 1px solid var(--aj-border) !important;
    color: var(--aj-text-dim) !important;
    font-family: 'Exo 2', sans-serif !important;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--aj-footer-sep);
    opacity: 0.5;
}
.site-footer a { color: var(--aj-text-dim) !important; }
.site-footer a:hover { color: var(--aj-accent) !important; }

.logo-footer a {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    background: var(--aj-logo-grad) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.footer-widget-area {
    background: transparent !important;
}

/* ============================================================
   CONTENT AREA / SITE CONTENT
   ============================================================ */
#content { background: transparent !important; }
.site-content { background: transparent !important; }

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.content-search-header {
    background: var(--aj-surface) !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius) !important;
    padding: 0.8em 1.2em !important;
}

/* ============================================================
   FILTERS (sort/order controls)
   ============================================================ */
.content-filters {
    background: var(--aj-surface) !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius) !important;
    padding: 0.5em 1em !important;
    margin-bottom: 0.8em !important;
}
.content-filters a,
.content-filters .active {
    color: var(--aj-text-dim) !important;
    border-radius: 4px !important;
    padding: 0.2em 0.6em !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.78em !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: all var(--aj-transition) !important;
}
.content-filters a:hover,
.content-filters .active {
    color: var(--aj-accent) !important;
    background: var(--aj-accent-dim) !important;
}

/* ============================================================
   FORMS (login, register, submit video)
   ============================================================ */
.video-submit-area input,
.video-submit-area textarea,
.video-submit-area select {
    background: var(--aj-surface2) !important;
    border: 1px solid var(--aj-border) !important;
    color: var(--aj-text) !important;
    border-radius: var(--aj-radius) !important;
    font-family: 'Exo 2', sans-serif !important;
    transition: border-color var(--aj-transition), box-shadow var(--aj-transition) !important;
}
.video-submit-area input:focus,
.video-submit-area textarea:focus,
.video-submit-area select:focus {
    border-color: var(--aj-border-hot) !important;
    box-shadow: 0 0 0 3px var(--aj-accent-dim) !important;
    outline: none !important;
}
.video-submit-area label {
    color: var(--aj-text-dim) !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.82em !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* ============================================================
   SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--aj-bg);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--aj-accent2) 0%, var(--aj-accent) 100%);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--aj-accent);
    box-shadow: 0 0 8px var(--aj-accent-glow);
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
    background: rgba(0,200,255,0.25);
    color: #fff;
}

/* ============================================================
   ALERTS / NOTICES
   ============================================================ */
.alert-success, .notice-success {
    background: rgba(46,204,113,0.10) !important;
    border: 1px solid rgba(46,204,113,0.4) !important;
    color: #a8e6c1 !important;
    border-radius: var(--aj-radius) !important;
}
.alert-info, .notice-info {
    background: var(--aj-accent-dim) !important;
    border: 1px solid rgba(0,200,255,0.3) !important;
    color: var(--aj-accent) !important;
    border-radius: var(--aj-radius) !important;
}
.alert-warning, .notice-warning {
    background: rgba(255,214,0,0.08) !important;
    border: 1px solid rgba(255,214,0,0.3) !important;
    color: #ffe066 !important;
    border-radius: var(--aj-radius) !important;
}
.alert-danger, .notice-error {
    background: rgba(231,76,60,0.10) !important;
    border: 1px solid rgba(231,76,60,0.4) !important;
    color: #f8a9a1 !important;
    border-radius: var(--aj-radius) !important;
}

/* ============================================================
   MISC — related videos section
   ============================================================ */
.under-video-block {
    background: transparent !important;
}
.under-video-block .show-more-related a.button {
    background: linear-gradient(135deg, var(--aj-surface2) 0%, var(--aj-surface) 100%) !important;
    border: 1px solid var(--aj-border) !important;
    color: var(--aj-text-dim) !important;
    border-radius: var(--aj-radius) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    transition: all var(--aj-transition) !important;
}
.under-video-block .show-more-related a.button:hover {
    border-color: var(--aj-border-hot) !important;
    color: var(--aj-accent) !important;
    background: var(--aj-accent-dim) !important;
    box-shadow: 0 0 16px var(--aj-accent-dim) !important;
}

/* ============================================================
   MOBILE RESPONSIVE — preserve existing mobile styles
   ============================================================ */
@media screen and (max-width: 768px) {
    body { font-size: 13px; }
    .thumb-block:hover { transform: none !important; }
    .thumb-block:hover .post-thumbnail img { transform: none !important; }
    .category-label { font-size: 0.62em !important; }
    span.views, span.duration { font-size: 0.68em !important; }
}

/* ============================================================
   ANIMATION: fade-in for thumb blocks on page load
   ============================================================ */
@keyframes aj-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.thumb-block {
    animation: aj-fadein 0.4s ease both;
}
.thumb-block:nth-child(1)  { animation-delay: 0.02s; }
.thumb-block:nth-child(2)  { animation-delay: 0.05s; }
.thumb-block:nth-child(3)  { animation-delay: 0.08s; }
.thumb-block:nth-child(4)  { animation-delay: 0.11s; }
.thumb-block:nth-child(5)  { animation-delay: 0.14s; }
.thumb-block:nth-child(6)  { animation-delay: 0.17s; }
.thumb-block:nth-child(7)  { animation-delay: 0.20s; }
.thumb-block:nth-child(8)  { animation-delay: 0.23s; }
.thumb-block:nth-child(9)  { animation-delay: 0.26s; }
.thumb-block:nth-child(10) { animation-delay: 0.29s; }
.thumb-block:nth-child(11) { animation-delay: 0.32s; }
.thumb-block:nth-child(12) { animation-delay: 0.35s; }

/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* content-visibility: auto defers rendering of off-screen sections
   (major paint savings on long video listing pages)           */
.widget,
.under-video-block,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* Reduce paint cost on hover-animated elements */
.thumb-block .post-thumbnail img,
.thumb-block,
.play-icon-hover {
    will-change: transform;
    contain: layout style;
}

/* Force GPU-composited layer for the fixed switcher btn */
#aj-switcher-btn,
#aj-switcher-panel {
    will-change: transform, opacity;
}

/* Prevent layout shift from lazy-loaded images */
.post-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reduce animation for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .thumb-block,
    .thumb-block .post-thumbnail img,
    .play-icon-hover i,
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}