body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; transition: 0.5s ease; overflow-x: hidden; } 
/* DARK (Default) */ 
body.dark { background:#0a0a0a; color:white; } 
/* LIGHT */ 
body.light { background:#f2f2f2; color:black; } 

header { background:black; color:white; padding:15px; text-align:center; box-shadow: 0 2px 10px rgba(0,0,0,0.5); } 
header button { background:crimson; border:none; color:white; padding:8px 12px; border-radius:5px; cursor:pointer; font-weight: bold; transition: 0.3s; }
header button:hover { transform: scale(1.05); background: #ff0033; }

.neon-logo {
    font-family: 'Arial Black', sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px crimson, 0 0 40px crimson;
    animation: flicker 2s infinite alternate;
}
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px crimson, 0 0 40px crimson;
    }
    20%, 22%, 24%, 55% { text-shadow: none; }
}

.slider { position:relative; height:400px; overflow: hidden; } 
.slider img { width:100%; height:400px; object-fit:cover; transition: 0.5s; } 
.slider-info { position:absolute; bottom:0; left:0; right:0; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 40px 20px; } 

#searchInput { width:90%; max-width: 600px; padding:12px 20px; display:block; margin:10px auto; border-radius: 30px; border: 1px solid #444; background: #222; color: white; transition: 0.3s; }
#searchInput:focus { width: 95%; border-color: crimson; outline: none; box-shadow: 0 0 15px rgba(220, 20, 60, 0.4); }

.categories { text-align:center; padding: 10px; } 
.categories button { margin:5px; padding:8px 18px; background:#222; border: 1px solid #444; color:white; border-radius:20px; cursor: pointer; transition: 0.3s; }
.categories button:hover { background: crimson; border-color: crimson; transform: translateY(-3px); }

#movies { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:20px; padding:20px; } 
.movie { background:#1a1a1a; padding:0; border-radius:12px; cursor:pointer; overflow: hidden; transition: 0.3s; border: 1px solid #333; position: relative; } 
.movie:hover { transform: translateY(-10px); border-color: crimson; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
body.light .movie { background:white; border-color: #ddd; } 
.movie img { width:100%; height: 240px; object-fit: cover; } 
.movie p { text-align:center; padding: 10px; margin: 0; font-weight: bold; font-size: 0.9rem; } 

.ad-box { width: 95%; margin: 20px auto; padding: 15px; background: #111; color: #888; text-align: center; border: 1px dashed #444; font-size: 14px; border-radius: 8px; }

footer { background:#0a0a0a; color:#666; text-align:center; padding:30px; border-top: 1px solid #222; } 
.footer-links a { color:crimson; margin:0 10px; text-decoration:none; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; }

/* Existing Glow Buttons */
button[onclick^="setTrending"], button[onclick^="setTopRated"] {
    background: linear-gradient(45deg, #ff416c, #ff4b2b); border: none; box-shadow: 0 0 10px rgba(255, 65, 108, 0.5);
}
button[onclick^="setKorean"] {
    background: linear-gradient(45deg, #8e2de2, #4a00e0); border: none; box-shadow: 0 0 10px rgba(142, 45, 226, 0.5);
}

/* ================= NEW THEMES & FIXES ================= */

/* 1. Midnight Blue Theme */
body.midnight { background: #0f172a; color: #f1f5f9; }
body.midnight .movie { background: #1e293b; border-color: #334155; }
body.midnight header { background: #1e293b; border-bottom: 2px solid #38bdf8; }
body.midnight .neon-logo { text-shadow: 0 0 10px #38bdf8, 0 0 20px #38bdf8; }
body.midnight #searchInput { background: #1e293b; border-color: #38bdf8; }

/* 2. Blood Red Theme */
body.blood { background: #1a0000; color: #ffcccc; }
body.blood .movie { background: #2d0000; border-color: #4d0000; }
body.blood header { background: #2d0000; border-bottom: 2px solid #ff0000; }
body.blood .neon-logo { text-shadow: 0 0 10px #ff0000, 0 0 20px #7a0000; }
body.blood #searchInput { background: #2d0000; border-color: #ff0000; }

/* Light Theme Adjustments */
body.light header { background: white; color: black; border-bottom: 2px solid crimson; }
body.light #searchInput { background: white; color: black; border: 1px solid #ccc; }
body.light .categories button { background: #eee; color: #333; border: 1px solid #ddd; }

/* Theme Button Styling */
button[onclick="toggleTheme()"] { transition: 0.3s; min-width: 80px; }

@media (max-width: 600px) {
    #movies { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ================= NEW: TRENDING BADGE & LIVE COUNTER ================= */
.trending-badge {
    position: absolute; top: 10px; left: 10px;
    color: white; padding: 4px 10px; border-radius: 5px;
    font-size: 11px; font-weight: bold; z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); text-transform: uppercase;
}
.badge-1 { background: linear-gradient(45deg, #FFD700, #FFA500); color: black; } /* Gold */
.badge-2 { background: linear-gradient(45deg, #C0C0C0, #808080); } /* Silver */
.badge-3 { background: linear-gradient(45deg, #CD7F32, #8B4513); } /* Bronze */

.live-counter {
    position: absolute; bottom: 45px; right: 10px;
    background: rgba(0, 0, 0, 0.75); color: #00ffcc;
    padding: 3px 8px; border-radius: 4px; font-size: 10px;
    font-weight: bold; display: flex; align-items: center; gap: 5px;
}
.dot { height: 6px; width: 6px; background-color: #00ffcc; border-radius: 50%; display: inline-block; animation: blink 1s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }