/* RESET & CORE */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #0f0f13; color: #ffffff;
    display: flex; height: 100vh; overflow: hidden;
    position: relative;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f0f13; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* MOBILE HEADER */
.mobile-header {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: #16161e; z-index: 999; align-items: center; justify-content: space-between;
    padding: 0 20px; border-bottom: 1px solid #333;
}
.mobile-toggle { font-size: 24px; cursor: pointer; color: #00e5ff; }
.mobile-logo { font-size: 20px; font-weight: bold; }

/* SIDEBAR */
.sidebar {
    width: 250px; background: #16161e; display: flex; flex-direction: column;
    padding: 20px; border-right: 1px solid #2a2a35;
    transition: transform 0.3s ease; z-index: 1000; flex-shrink: 0;
    height: 100vh; /* Ensures full height so footer stays at bottom */
}
.logo h2 { color: #fff; font-size: 24px; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; }
.logo span { color: #00e5ff; }

/* SCROLLABLE AREA (With Hidden Scrollbar) */
.sidebar ul { 
    list-style: none; flex: 1; overflow-y: auto; 
    /* Hide Scrollbar for Firefox */
    scrollbar-width: none; 
    /* Hide Scrollbar for IE/Edge */
    -ms-overflow-style: none; 
}
/* Hide Scrollbar for Chrome/Safari */
.sidebar ul::-webkit-scrollbar { 
    display: none; 
}

.sidebar ul li { margin-bottom: 15px; }
.sidebar ul li a {
    text-decoration: none; color: #8b8b9b; font-size: 16px; display: flex;
    align-items: center; transition: 0.3s; padding: 12px; border-radius: 8px;
}
.sidebar ul li a i { margin-right: 15px; width: 20px; text-align: center; }
.sidebar ul li a:hover, .sidebar ul li a.active { background: rgba(0, 229, 255, 0.1); color: #00e5ff; }
.user-profile button {
    width: 100%; padding: 12px; background: linear-gradient(45deg, #00e5ff, #2979ff);
    border: none; color: #fff; border-radius: 50px; font-weight: bold; cursor: pointer; margin-top: 10px;
}

/* MAIN CONTENT */
.content-area {
    flex: 1; padding: 30px; overflow-y: auto; overflow-x: hidden; position: relative;
    background: radial-gradient(circle at top right, #1a1a2e, #0f0f13); scroll-behavior: smooth;
}

/* HERO PLAYER */
.hero-player {
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
    border-radius: 20px; padding: 30px; display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 40px; border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; min-height: 200px;
}
.hero-player::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #00e5ff, #d500f9);
}
.current-track-info { z-index: 2; flex: 1; padding: 0 20px; }
.current-track-info h4 { color: #00e5ff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
.current-track-info h1 { font-size: 32px; margin: 0 0 20px; line-height: 1.2; word-break: break-word; }
.controls { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.controls button { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; transition: 0.2s; }
.controls button:hover { color: #00e5ff; }
#btn-play {
    width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%;
    font-size: 18px; display: flex; align-items: center; justify-content: center;
}
#volume-slider { width: 80px; accent-color: #00e5ff; }
.player-visualizer { display: flex; align-items: flex-end; height: 50px; gap: 4px; }
.bar { width: 6px; background: #d500f9; animation: bounce 1s infinite ease-in-out; }
.bar:nth-child(even) { background: #00e5ff; }
@keyframes bounce { 0%, 100% { height: 5px; } 50% { height: 40px; } }

/* CARDS & GRIDS */
.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;
}
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }
.card {
    background: #16161e; border-radius: 12px; overflow: hidden; cursor: pointer;
    transition: 0.3s; border: 1px solid rgba(255,255,255,0.05);
}
.card:hover { transform: translateY(-5px); border-color: #00e5ff; }
.card-image {
    height: 100px; background: linear-gradient(135deg, #2a2a35, #16161e);
    display: flex; align-items: center; justify-content: center; font-size: 30px; color: #555;
}
.card-details { padding: 12px; }
.card-details h4 { font-size: 14px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-details p { font-size: 11px; color: #888; }
.special-card .card-image { background: linear-gradient(135deg, #d500f9, #2979ff); color: #fff; }
.see-all-card h4 { color: #00e5ff; }

/* INFO BAR */
.info-bar {
    display: flex; align-items: center; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 15px 25px;
    margin-bottom: 40px; backdrop-filter: blur(5px);
}
.info-date {
    background: #00e5ff; color: #000; font-weight: bold; padding: 5px 15px;
    border-radius: 6px; margin-right: 20px; font-size: 14px; white-space: nowrap;
}
.info-message { color: #bbb; font-size: 14px; letter-spacing: 0.5px; }
.info-message i { color: #d500f9; margin-right: 8px; }

/* FILTER BAR */
.filter-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; background: #16161e; padding: 15px; border-radius: 10px;
}
.filter-bar select {
    background: #2a2a35; border: 1px solid #333; color: #fff;
    padding: 8px 15px; border-radius: 5px; font-size: 14px;
}

/* COOKIE BANNER */
.cookie-banner {
    position: fixed; bottom: -100px; left: 0; width: 100%;
    background: #16161e; border-top: 1px solid #00e5ff; padding: 20px;
    text-align: center; z-index: 9999; transition: bottom 0.5s ease;
    display: flex; justify-content: center; align-items: center; gap: 20px;
}
.cookie-banner.show { bottom: 0; }
.cookie-btn {
    background: #00e5ff; color: #000; padding: 8px 20px;
    border: none; border-radius: 5px; cursor: pointer; font-weight: bold;
}

/* MODAL & MINIMIZED PLAYER */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px);
    z-index: 2000; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: #16161e; width: 90%; max-width: 800px; border-radius: 20px;
    border: 1px solid #333; box-shadow: 0 0 50px rgba(0, 229, 255, 0.2); overflow: hidden;
}
.modal-header {
    background: #1a1a2e; padding: 15px 20px; display: flex;
    justify-content: space-between; align-items: center; border-bottom: 1px solid #333;
}
.modal-body { padding: 0; background: #000; min-height: 400px; display: flex; align-items: center; justify-content: center; }
.modal-body iframe, .modal-body video { width: 100%; height: 100%; border: none; }
.audio-wrapper { padding: 40px; text-align: center; width: 100%; }
.audio-player-control { width: 100%; margin-top: 20px; }
.modal-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    font-weight: bold; color: #fff; margin-left: 5px;
}
.btn-min { background: #444; }
.btn-close { background: #ff3d00; }
.minimized-player {
    display: none; position: fixed; bottom: 20px; right: 20px; background: #16161e;
    padding: 15px; border-radius: 12px; border: 1px solid #00e5ff; z-index: 2001; width: 300px;
    align-items: center; justify-content: space-between; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.minimized-player.active { display: flex; }
.min-controls button { background: none; border: none; color: #fff; margin-left: 10px; cursor: pointer; }

/* MOBILE RESPONSIVE FIX (THE FIX FOR SCROLLBAR) */
@media screen and (max-width: 768px) {
    body { flex-direction: column; height: 100vh; }
    .mobile-header { display: flex; }
    
    .sidebar {
        position: fixed; top: 60px; left: 0; height: calc(100vh - 60px); width: 100%;
        transform: translateX(-100%); background: #0f0f13; z-index: 998;
        padding: 10px 20px; /* Reduced vertical padding */
    }
    .sidebar.active { transform: translateX(0); }
    
    /* OVERRIDES TO REMOVE SCROLLBAR */
    .logo h2 { margin-bottom: 15px; font-size: 20px; } /* Smaller logo space */
    .sidebar ul li { margin-bottom: 5px; } /* Tighter list items */
    .sidebar ul li a { padding: 10px; } /* Smaller click area */
    .user-profile { margin-top: 5px; } /* Tighten button space */

    .content-area { padding: 80px 15px 30px 15px; width: 100%; }
    .hero-player { flex-direction: column; text-align: center; gap: 20px; padding: 20px; }
    .player-visualizer { order: 1; width: 100%; justify-content: center; }
    .current-track-info { order: 2; padding: 0; }
    .controls { justify-content: center; width: 100%; }
    .grid-container { grid-template-columns: repeat(2, 1fr); }
    .info-bar { flex-direction: column; text-align: center; gap: 10px; }
}

/* --- MINI PLAYER (Hidden by default) --- */
.mini-player-bar {
    position: fixed; bottom: -100px; left: 0; width: 100%;
    height: 70px; background: #0f0f13; border-top: 1px solid #00e5ff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; z-index: 9999;
    transition: bottom 0.4s ease;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.9);
}
.mini-player-bar.show { bottom: 0; }

.mp-info { display: flex; flex-direction: column; width: 30%; }
.mp-title { color: #fff; font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-artist { color: #00e5ff; font-size: 11px; }

.mp-controls { display: flex; align-items: center; gap: 15px; }
.mp-btn { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.mp-btn:hover { color: #00e5ff; }
.mp-play { width: 35px; height: 35px; background: #00e5ff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Mobile Adjustment */
@media (max-width: 768px) {
    .mini-player-bar { padding: 0 10px; }
    .mp-info { width: 40%; }
}

/* --- BIGGER VIDEO MODAL --- */
.modal-content {
    background: #16161e;
    width: 90%;                /* Make it wide */
    max-width: 1200px;         /* Maximum width for large screens */
    height: 80vh;              /* Force it to be tall (80% of screen height) */
    border-radius: 15px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;    /* Stack Header and Body */
    overflow: hidden;          /* Keep corners rounded */
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.modal-header {
    padding: 15px 25px;
    border-bottom: 1px solid #333;
    background: #1f1f2a;
    flex-shrink: 0;            /* Prevent header from shrinking */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    flex-grow: 1;              /* Fill ALL remaining space */
    width: 100%;
    background: #000;          /* Black background for cinema feel */
    position: relative;
}

/* Force the YouTube Player to fill the new big space */
#modal-video-placeholder, .modal-body iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* --- CONTACT FORM STYLES --- */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input, .contact-form textarea {
    background: #1f1f2a;
    border: 1px solid #333;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    font-family: inherit;
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: #00e5ff;
    outline: none;
}

.contact-form button {
    background: #00e5ff;
    color: #000;
    border: none;
    padding: 15px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.contact-form button:hover {
    background: #fff;
}