/* ======================================================
HALLOWEEN GLOBAL OVERRIDE ??
====================================================== */

:root{
--bg:#0a0a0f !important;
--panel:#1a1224 !important;
--panel2:#241433 !important;
--player:#2d1b3f !important;
--border:#3a2550 !important;
--accent:#ff7a00 !important;
--text:#f3e8ff !important;
}

/* ======================================================
GLOBAL BACKGROUND
====================================================== */

body{
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* ======================================================
PANELS / SECTIONS
====================================================== */

.topbar,
.sidebar,
.player-bar,
.now-playing-bar,
.top10,
.content,
.rightbar,
.song-card,
.shuffle-card,
.xr-card,
.auth-card,
.xr-quiz,
.live-slot{
background:var(--panel) !important;
border-color:var(--border) !important;
}

.sidebar a:hover{
    background:#241433;
    border-left:3px solid #ff7a00;
    box-shadow: inset 0 0 10px rgba(255,122,0,0.2);
}

/* ======================================================
HEADER
====================================================== */
.top-header,
.header-inner{
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================
SIDEBAR FIX (REMOVE WHITE + DARKEN)
========================================= */

/* kill any white background behind sidebar */
.main-grid{
    background:#0a0a0f !important;
}

/* sidebar itself darker */
.sidebar{
    background:#120a18 !important;
    border-right:1px solid #2a1a3a;
}

/* links */
.sidebar a{
    background:#120a18;
    border-bottom:1px solid #1f1230;
}

/* hover */
.sidebar a:hover{
    background:#1f1230;
    border-left:3px solid #ff7a00;
}

/* active feel (optional nice touch) */
.sidebar a.active{
    background:#241433;
    border-left:3px solid #ff7a00;
}

.content,
.content-area{
    background:#0a0a0f !important;
}

/* ======================================================
BUTTONS
====================================================== */

.btn,
.req-submit,
.request-btn,
.xr-btn{
background:linear-gradient(135deg,#ff7a00,#ff4500) !important;
color:#fff !important;
border:none !important;
}

.btn:hover,
.req-submit:hover{
background:linear-gradient(135deg,#ff4500,#ff7a00) !important;
}

/* ======================================================
PLAYER
====================================================== */

#play-btn,
.player-icon{
    background:#1a0f24;
    border:1px solid rgba(255,122,0,0.3);
}

#play-btn:hover,
.player-icon:hover{
    box-shadow:0 0 12px rgba(255,122,0,0.5);
}

/* ======================================================
TEXT / HEADINGS
====================================================== */

h1,h2,h3,h4{
color:#ffb347 !important;
}

/* ======================================================
TOP 10
====================================================== */

.top10 h3{
    color:#ff7a00;
    text-shadow:0 0 8px rgba(255,122,0,0.6);
}

/* ======================================================
HERO
====================================================== */

.np-badge{
background:#ff7a00 !important;
box-shadow:0 0 10px rgba(255,122,0,0.6);
animation:flicker 2s infinite;
}

.hero-info{
background:linear-gradient(to top, rgba(0,0,0,0.85), transparent) !important;
}

.hero-request{
color:#ffb347 !important;
}

/* ======================================================
INPUTS
====================================================== */

input,
textarea,
.req-textarea{
background:#140c1c !important;
border:1px solid var(--border) !important;
color:#fff !important;
}

input:focus,
textarea:focus{
border-color:var(--accent) !important;
box-shadow:0 0 8px rgba(255,122,0,0.4);
}

/* ======================================================
REQUEST STATUS
====================================================== */

.req-success{
background:linear-gradient(to right,#ff7a00,#ff4500) !important;
}

.req-error{
background:linear-gradient(to right,#7f1d1d,#991b1b) !important;
}

/* ======================================================
CARDS / GRID ITEMS
====================================================== */

.shuffle-card:hover,
.song-card:hover{
box-shadow:0 10px 25px rgba(255,122,0,0.2);
}

/* ======================================================
HALLOWEEN FOOTER
====================================================== */

.site-footer{
    position: relative !important;
    overflow: hidden;
    min-height: 670px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background-color: #05070d !important;
    background-image: url('/assets/imgs/themes/halloween/footer-halloween.png') !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
}
.footer-inner,
.footer-bottom{
    width:100%;
}

.footer-bottom{
    display:flex;
    justify-content: space-between;
    align-items:center;
}
/* ======================================================
DARK OVERLAY
====================================================== */

.site-footer::before{
    content:"";
    position:absolute;
    inset:0;

    background: linear-gradient(
        to top,
        rgba(5,7,13,0.75),
        rgba(5,7,13,0.4),
        rgba(5,7,13,0.1)
    );

    z-index:1;
    pointer-events:none;
}

/* ======================================================
FOG LAYER
====================================================== */

.site-footer::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;

    width:200%;
    height:720px;

    background: url('/assets/imgs/themes/halloween/fog.png') repeat-x;
    background-size: auto 160%;

    opacity:0.15;

    animation: fogMove 90s linear infinite;

    z-index:2;
    pointer-events:none;
}


/* ======================================================
BATS
====================================================== */

.site-footer .bats{
    position:absolute;
    top:40px;
    left:-300px;

    width:300px;
    height:120px;

    background:url('/assets/imgs/themes/halloween/bats.png') no-repeat center;
    background-size: contain;

    opacity:0.6;

    animation: batsFly 60s linear infinite;

    z-index:2;
    pointer-events:none;
}

@keyframes batsFly{
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(25vw) translateY(-8px); }
    50%  { transform: translateX(50vw) translateY(5px); }
    75%  { transform: translateX(75vw) translateY(-6px); }
    100% { transform: translateX(calc(100vw + 600px)) translateY(0); }
}

/* ======================================================
ANIMATION
====================================================== */

@keyframes fogMove{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

/* ======================================================
LIGHTNING FLASH
====================================================== */

.site-footer .lightning{
    position:absolute;
    inset:0;

    background:#ffffff;
    opacity:0;

    animation: lightningFlash 14s infinite;

    z-index:2;
    pointer-events:none;
    mix-blend-mode: overlay;
}

@keyframes lightningFlash{

    0%, 97%, 100%{
        opacity:0;
        filter:brightness(1);
    }

    /* first hit */
    98%{
        opacity:0.8;
        filter:brightness(2);
    }

    /* quick drop */
    98.5%{
        opacity:0;
    }

    /* second flicker */
    99%{
        opacity:0.6;
        filter:brightness(1.8);
    }

    99.5%{
        opacity:0;
    }
}

/* ======================================================
TYPING BAR
====================================================== */

.xr-typing-bar{
background:linear-gradient(90deg,#1a1224,#241433) !important;
border-left:4px solid var(--accent) !important;
}

/* ======================================================
LIVE SLOT
====================================================== */

.live-slot{
border-left:4px solid var(--accent) !important;
box-shadow:0 0 12px rgba(255,122,0,0.2);
}

/* ======================================================
SCROLLBAR
====================================================== */

::-webkit-scrollbar-thumb{
background:#ff7a00;
}

/* ======================================================
ANIMATION
====================================================== */

@keyframes flicker{
0%,100%{opacity:1;}
50%{opacity:0.92;}
}

/* =========================================
RECENT REQUESTS PANEL
========================================= */

.rightbar{
    background:#120a18 !important;
    border-left:1px solid #2a1a3a;
}

.rightbar h3{
    color:#ff7a00;
    text-shadow:0 0 6px rgba(255,122,0,0.4);
}

/* request items */
.request-item{
    border-bottom:1px solid #2a1a3a !important;
}

.request-item strong{
    color:#ffffff !important;
}

.request-item span{
    color:#9ca3af !important;
}

/* =========================================
STATUS ICONS (make them pop)
========================================= */

.btn-played{ color:#22c55e !important; }
.btn-queued{ color:#38bdf8 !important; }
.btn-processing{ color:#f59e0b !important; }
.btn-ignored{ color:#ef4444 !important; }

/* =========================================
XR REQUEST BUTTON
========================================= */

.request-btn{
    background:linear-gradient(135deg,#ff7a00,#ff4500) !important;
    border:none;
    box-shadow:0 0 12px rgba(255,122,0,0.4);
}

.request-btn:hover{
    box-shadow:0 0 18px rgba(255,122,0,0.7);
}

/* =========================================
STATS BOXES
========================================= */

.stat{
    background:#1a1224 !important;
    border:1px solid #2a1a3a !important;
    color:#fff !important;
    box-shadow:0 0 10px rgba(0,0,0,0.4);
}

.stat span{
    color:#9ca3af !important;
}

.stat strong{
    color:#ffb347 !important;
}

/* =========================================
SITE STATS GRID
========================================= */

.site-stats{
    border-top:1px solid #2a1a3a !important;
}

/* =========================================
TOP 100 / CHART ITEMS DARK MODE
========================================= */

.chart-item{
    background:#120a18 !important;
    border-bottom:1px solid #2a1a3a !important;
    border-radius:8px;
}

/* hover effect */
.chart-item:hover{
    background:#1a1224 !important;
    transform:translateY(-2px);
    box-shadow:0 0 12px rgba(255,122,0,0.15);
}

/* =========================================
TEXT FIXES
========================================= */

.chart-title a{
    color:#ffffff !important;
}

.chart-artist{
    color:#9ca3af !important;
}

/* =========================================
RANK NUMBER
========================================= */

.chart-position{
    color:#ff7a00 !important;
}

/* =========================================
META TAGS
========================================= */

.chart-tag{
    background:#1a1224 !important;
    color:#9ca3af !important;
    border:1px solid #2a1a3a;
}

/* =========================================
SWEEPER PLAYER BAR
========================================= */

.sweeper-player{
    background:#120a18 !important;
    border:1px solid #2a1a3a;
    border-radius:10px;
    padding:15px;
}

/* progress bar */
.sweeper-progress{
    background:#2a1a3a !important;
}

#progress{
    background:linear-gradient(90deg,#ff7a00,#ff4500) !important;
}

/* =========================================
PLAYER CONTROLS
========================================= */

.sweeper-controls button{
    background:#1a1224 !important;
    color:#ff7a00 !important;
    border:1px solid #2a1a3a;
}

.sweeper-controls button:hover{
    background:#241632 !important;
    box-shadow:0 0 10px rgba(255,122,0,0.4);
}

/* =========================================
PLAYLIST LIST
========================================= */

#playlist{
    margin-top:10px;
}

/* each row */
#playlist li{
    background:#120a18 !important;
    border-bottom:1px solid #2a1a3a !important;
    color:#e6edf3 !important;
    padding:12px;
    transition:0.2s;
}

/* hover */
#playlist li:hover{
    background:#1a1224 !important;
    transform:translateX(4px);
}

/* =========================================
ACTIVE TRACK
========================================= */

#playlist li.active{
    background:linear-gradient(90deg,#ff7a00,#ff4500) !important;
    color:#fff !important;
    border-left:4px solid #ff7a00;
}

/* =========================================
HEADINGS
========================================= */

.content h2,
.content h3{
    color:#ff7a00 !important;
}