/*
 * apiJAV — Onyx Red
 * Ultra-premium dark cinema skin. Deep black surfaces, rich blood-red accents,
 * warm champagne highlights. Designed for professional adult video platforms.
 * Loaded after wpst-style — cascades cleanly, never breaks layout.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap&font-display=swap');

/* ============================================================
   CSS VARIABLES — Onyx Red
   ============================================================ */
:root {
    --aj-bg:              #0a0707;
    --aj-bg2:             #0f0909;
    --aj-surface:         #160d0d;
    --aj-surface2:        #1e1010;
    --aj-border:          rgba(200, 30, 30, 0.12);
    --aj-border-hot:      rgba(220, 40, 40, 0.50);
    --aj-accent:          #e02020;
    --aj-accent-dim:      rgba(220, 32, 32, 0.16);
    --aj-accent-glow:     rgba(220, 32, 32, 0.55);
    --aj-accent2:         #c8a96e;
    --aj-accent2-dim:     rgba(200, 169, 110, 0.15);
    --aj-accent3:         #ff6b6b;
    --aj-text:            #e8ddd8;
    --aj-text-dim:        #7a6a65;
    --aj-text-bright:     #fff5f0;
    --aj-glow-top:        rgba(200, 20, 20, 0.07);
    --aj-glow-btm:        rgba(180, 10, 10, 0.04);
    --aj-grad-btn:        linear-gradient(135deg, #a50000 0%, #e02020 100%);
    --aj-grad-btn-hover:  linear-gradient(135deg, #c20000 0%, #ff3030 100%);
    --aj-grad-nav-hover:  linear-gradient(180deg, rgba(220,32,32,0.10) 0%, rgba(220,32,32,0.04) 100%);
    --aj-nav-active-line: #e02020;
    --aj-grad-meter:      linear-gradient(90deg, #a50000 0%, #e02020 60%, #c8a96e 100%);
    --aj-title-grad:      linear-gradient(135deg, #fff5f0 30%, #e02020 100%);
    --aj-logo-grad:       linear-gradient(135deg, #fff5f0 20%, #c8a96e 60%, #e02020 100%);
    --aj-sep-grad:        linear-gradient(90deg, transparent 0%, #a50000 40%, #e02020 60%, transparent 100%);
    --aj-footer-sep:      linear-gradient(90deg, transparent 0%, #c8a96e 35%, #e02020 65%, transparent 100%);
    --aj-radius:          5px;
    --aj-radius-lg:       9px;
    --aj-transition:      0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   GLOBAL FOUNDATION
   ============================================================ */
body {
    background-color: var(--aj-bg) !important;
    background-image:
        radial-gradient(ellipse 90% 45% at 50% 0%, var(--aj-glow-top) 0%, transparent 65%),
        radial-gradient(ellipse 50% 25% at 20% 100%, rgba(180,10,10,0.05) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--aj-text) !important;
    font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
    font-size: 14px;
}

/* Subtle vignette */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 120% 120% at 50% 50%,
        transparent 40%,
        rgba(0,0,0,0.35) 100%);
    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: 'Playfair Display', 'Inter', serif !important;
    letter-spacing: 0.01em;
}

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

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    background: linear-gradient(90deg, #060404 0%, #0c0707 50%, #060404 100%) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    box-shadow: 0 1px 18px rgba(180,0,0,0.18) !important;
}
.top-bar small { color: var(--aj-text-dim) !important; }
.top-bar .social-share a {
    background: rgba(220,32,32,0.10) !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 rgba(220,32,32,0.25) !important;
}
.top-bar .social-share i { color: var(--aj-text-dim) !important; }
.top-bar .social-share a:hover i { color: var(--aj-accent) !important; }

.top-bar .membership { color: var(--aj-text-dim) !important; }
.top-bar .membership .welcome,
.top-bar .membership .or { color: var(--aj-text-dim) !important; }
.top-bar .membership a {
    color: var(--aj-accent2) !important;
    display: inline-block !important;
    margin: 0 8px !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    letter-spacing: 0.04em !important;
    transition: color var(--aj-transition), text-shadow var(--aj-transition) !important;
}
.top-bar .membership a:hover {
    color: var(--aj-text-bright) !important;
    text-shadow: 0 0 10px rgba(200,169,110,0.6) !important;
    background: none !important;
}
.top-bar .membership a i { color: inherit !important; margin-right: 4px !important; }

/* ============================================================
   SITE BRANDING / HEADER
   ============================================================ */
.site-branding {
    background: linear-gradient(180deg, #080505 0%, #0d0808 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.7;
}
.site-title,
.site-title a {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    background: var(--aj-logo-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; }

.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 20px var(--aj-accent-dim) !important;
    outline: none !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#site-navigation {
    background: linear-gradient(180deg, #0e0808 0%, #0a0606 100%) !important;
    border-bottom: 1px solid var(--aj-border) !important;
    box-shadow: 0 4px 28px rgba(0,0,0,0.7) !important;
}
#site-navigation > ul > li > a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.80em !important;
    letter-spacing: 0.10em !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-accent2) !important;
    text-shadow: 0 0 12px rgba(200,169,110,0.5) !important;
}
#site-navigation > ul > li:hover,
#site-navigation ul li.current-menu-item {
    background: linear-gradient(180deg, rgba(220,32,32,0.08) 0%, transparent 100%) !important;
    box-shadow: inset 0 -2px 0 var(--aj-accent) !important;
}
#site-navigation ul ul {
    background: rgba(10, 5, 5, 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.9), 0 0 20px rgba(180,0,0,0.2) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    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-accent2) !important;
    background: var(--aj-accent-dim) !important;
    padding-left: 20px !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
button, .button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.label, .label:visited,
.pagination ul li a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    background: var(--aj-grad-btn) !important;
    border: 1px solid rgba(220,32,32,0.35) !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.6) !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 22px rgba(220,32,32,0.4), 0 4px 14px rgba(0,0,0,0.5) !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.6), inset 0 0 40px rgba(180,0,0,0.04) !important;
    border-radius: var(--aj-radius) !important;
    padding: 0.8em 1.2em !important;
}
.page-header .page-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: var(--aj-accent2) !important;
    text-shadow: 0 0 20px rgba(200,169,110,0.4) !important;
    margin: 0 !important;
}

/* ============================================================
   THUMBNAIL BLOCK
   ============================================================ */
.thumb-block {
    transition: transform var(--aj-transition) !important;
    will-change: transform;
}
.thumb-block:hover {
    transform: translateY(-4px) !important;
    z-index: 2;
    position: relative;
}
.thumb-block .entry-header {
    background: linear-gradient(180deg, var(--aj-surface) 0%, #100808 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: 'Inter', 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%, #180a0a 100%) !important;
    color: var(--aj-text-bright) !important;
    border-color: rgba(220,32,32,0.28) !important;
}
.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: rgba(220,32,32,0.5) !important;
    box-shadow:
        0 0 0 1px rgba(220,32,32,0.3),
        0 0 28px rgba(180,0,0,0.30),
        0 10px 36px rgba(0,0,0,0.8) !important;
}
.thumb-block .post-thumbnail img {
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease !important;
    filter: brightness(0.85) saturate(0.9) !important;
}
.thumb-block:hover .post-thumbnail img {
    transform: scale(1.05) !important;
    filter: brightness(1.0) saturate(1.08) !important;
}
/* Dark cinematic bottom gradient on thumbs */
.thumb-block .post-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(8,3,3,0.90) 0%, transparent 100%);
    z-index: 15;
    pointer-events: none;
    transition: opacity var(--aj-transition);
}
.thumb-block:hover .post-thumbnail::after { opacity: 0.65; }

/* ============================================================
   PLAY ICON HOVER OVERLAY
   ============================================================ */
.play-icon-hover {
    background: radial-gradient(ellipse at center,
        rgba(180,0,0,0.25) 0%,
        rgba(5,0,0,0.40) 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;
    text-shadow:
        0 0 24px rgba(220,32,32,0.9),
        0 0 50px rgba(180,0,0,0.5),
        0 4px 10px rgba(0,0,0,0.9) !important;
    filter: drop-shadow(0 0 14px var(--aj-accent)) !important;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ============================================================
   DURATION / VIEWS / HD BADGES
   ============================================================ */
span.views,
span.duration {
    background: rgba(8, 3, 3, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #d8cdc8 !important;
    font-family: 'Inter', 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-accent2) !important;
    border-color: rgba(200,169,110,0.25) !important;
}
.thumb-block:hover span.views,
.thumb-block:hover span.duration {
    background: rgba(180,0,0,0.22) !important;
    border-color: rgba(220,32,32,0.35) !important;
}
span.hd-video {
    background: linear-gradient(135deg, #8b0000 0%, #e02020 100%) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.60em !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    border-radius: 3px !important;
    box-shadow: 0 0 10px rgba(220,32,32,0.5), 0 2px 6px rgba(0,0,0,0.6) !important;
    z-index: 25 !important;
}

/* ============================================================
   CATEGORY LABELS
   ============================================================ */
.category-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.67em !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    z-index: 25 !important;
    transition: all var(--aj-transition) !important;
}
.category-label:hover { transform: scale(1.08) translateY(-1px) !important; }
.category-label.censored    { background: linear-gradient(135deg, #6b0000 0%, #a50000 100%) !important; }
.category-label.uncensored  { background: linear-gradient(135deg, #1a3a1a 0%, #2e5e2e 100%) !important; color: #a0d0a0 !important; }
.category-label.uncensored-leaked,
.category-label.reducing-mosaic { background: linear-gradient(135deg, #00274a 0%, #00406b 100%) !important; }
.category-label.english-subtitle { background: linear-gradient(135deg, #3a0050 0%, #6a0080 100%) !important; }
.category-label.combined-label { background: linear-gradient(135deg, #5a0000 0%, #8b0000 100%) !important; }

/* ============================================================
   VIDEO DEBOUNCE BAR
   ============================================================ */
.video-debounce-bar {
    background: var(--aj-grad-meter) !important;
    height: 3px !important;
    box-shadow: 0 0 10px rgba(220,32,32,0.7) !important;
}

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

/* ============================================================
   SIDEBAR & WIDGETS
   ============================================================ */
#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 22px rgba(0,0,0,0.6) !important;
    transition: border-color var(--aj-transition) !important;
}
.widget:hover { border-color: rgba(220,32,32,0.28) !important; }
.widget-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 0.85em !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--aj-accent2) !important;
    text-shadow: 0 0 14px rgba(200,169,110,0.3) !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;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    transition: all var(--aj-transition) !important;
}
.pagination ul li a:hover,
.pagination ul li.active a,
.pagination ul li span.current {
    background: linear-gradient(135deg, rgba(180,0,0,0.2) 0%, var(--aj-accent-dim) 100%) !important;
    border-color: var(--aj-border-hot) !important;
    color: var(--aj-accent2) !important;
    box-shadow: 0 0 14px var(--aj-accent-dim) !important;
    transform: translateY(-1px) !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 28px rgba(0,0,0,0.7) !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: 'Playfair Display', serif !important;
    text-shadow: 0 0 30px rgba(180,0,0,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-accent2) !important;
    box-shadow: 0 0 16px var(--aj-accent-dim) !important;
}
.entry-content #video-views span {
    color: var(--aj-accent2) !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 50px rgba(180,0,0,0.22),
        0 14px 56px rgba(0,0,0,0.9) !important;
}
.video-js .vjs-big-play-button {
    background: linear-gradient(135deg, rgba(8,0,0,0.75) 0%, rgba(180,0,0,0.3) 100%) !important;
    border: 2px solid rgba(220,32,32,0.7) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 35px rgba(180,0,0,0.6) !important;
    transition: all var(--aj-transition) !important;
}
.video-js .vjs-big-play-button:hover {
    background: rgba(180,0,0,0.4) !important;
    box-shadow: 0 0 55px rgba(220,32,32,0.75) !important;
    transform: scale(1.1) !important;
}
.video-js .vjs-control-bar {
    background: linear-gradient(to top, rgba(6,0,0,0.96) 0%, rgba(6,0,0,0.7) 100%) !important;
}
.video-js .vjs-play-progress,
.video-js .vjs-play-progress::before {
    background: var(--aj-accent) !important;
    box-shadow: 0 0 8px rgba(220,32,32,0.8) !important;
}

/* ============================================================
   FEATURED CAROUSEL
   ============================================================ */
.bx-wrapper {
    border: 1px solid var(--aj-border) !important;
    border-radius: var(--aj-radius-lg) !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.8) !important;
    background: transparent !important;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: var(--aj-text-dim) !important;
    border-radius: 50% !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 12px rgba(220,32,32,0.7) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: linear-gradient(180deg, #080404 0%, #050202 100%) !important;
    border-top: 1px solid var(--aj-border) !important;
    color: var(--aj-text-dim) !important;
    font-family: 'Inter', 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.6;
}
.site-footer a { color: var(--aj-text-dim) !important; }
.site-footer a:hover { color: var(--aj-accent2) !important; }
.logo-footer a {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    background: var(--aj-logo-grad) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================================
   CATEGORIES on grid pages
   ============================================================ */
.categories-list .thumb-block .entry-header,
.actors-list .thumb-block .entry-header {
    background: linear-gradient(180deg, rgba(180,0,0,0.12) 0%, rgba(180,0,0,0.04) 100%) !important;
    color: var(--aj-text-bright) !important;
}
.categories-list .thumb-block:hover .entry-header,
.actors-list .thumb-block:hover .entry-header {
    background: linear-gradient(180deg, rgba(220,32,32,0.18) 0%, rgba(180,0,0,0.10) 100%) !important;
    border-color: var(--aj-border-hot) !important;
}

/* ============================================================
   FILTERS / SEARCH / FORMS
   ============================================================ */
#content, .site-content { background: transparent !important; }
.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: 'Inter', 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-accent2) !important;
    background: var(--aj-accent-dim) !important;
}

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

/* ============================================================
   ALERTS
   ============================================================ */
.alert-success, .notice-success {
    background: rgba(40,100,40,0.10) !important;
    border: 1px solid rgba(46,160,46,0.35) !important;
    color: #90c890 !important;
    border-radius: var(--aj-radius) !important;
}
.alert-info, .notice-info {
    background: var(--aj-accent-dim) !important;
    border: 1px solid rgba(220,32,32,0.3) !important;
    color: var(--aj-accent3) !important;
    border-radius: var(--aj-radius) !important;
}
.alert-danger, .notice-error {
    background: rgba(180,0,0,0.12) !important;
    border: 1px solid rgba(220,32,32,0.4) !important;
    color: #f09090 !important;
    border-radius: var(--aj-radius) !important;
}

/* ============================================================
   MISC
   ============================================================ */
.widget,
.under-video-block,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}
.thumb-block .post-thumbnail img,
.thumb-block,
.play-icon-hover {
    will-change: transform;
    contain: layout style;
}
.no-thumb {
    background: linear-gradient(135deg, var(--aj-surface) 0%, var(--aj-surface2) 100%) !important;
    border: 1px dashed var(--aj-border) !important;
}

/* ============================================================
   FADE-IN ANIMATION
   ============================================================ */
@keyframes aj-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.thumb-block { animation: aj-fadein 0.45s 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; }

/* ============================================================
   MOBILE
   ============================================================ */
@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; }
}
@media (prefers-reduced-motion: reduce) {
    .thumb-block, .thumb-block .post-thumbnail img, * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}