/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* { box-sizing: border-box; }
body { 
    margin: 0; 
    background: #000; 
    color: #fff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    overflow: hidden; 
    height: 100vh; 
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
#sidebar { 
    position: fixed; 
    left: -300px; 
    top: 0; 
    width: 300px; 
    height: 100%; 
    background: rgba(18, 18, 18, 0.95); 
    z-index: 1000;
    transition: left 0.3s ease; 
    border-right: 1px solid #333;
    overflow-y: auto;
}
#sidebar.active { left: 0; }

#search-bar {
    width: 90%;
    margin: 10px 15px;
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
}

#channel-list { list-style: none; padding: 0; margin: 0; }
#channel-list li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #222;
    transition: background 0.2s;
}
#channel-list li a:focus, #channel-list li a:hover { 
    background: #d32f2f; 
    outline: none; 
}

/* ==========================================================================
   PLAYER & MODAL
   ========================================================================== */
#player-container { width: 100vw; height: 100vh; position: relative; background: #000; }
#jw-player-element { width: 100%; height: 100%; }

#category-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 3000;
    display: none; align-items: center; justify-content: center;
}
.category-btn {
    padding: 15px 30px; margin: 10px; font-size: 18px;
    background: #d32f2f; color: #fff; border: none; cursor: pointer;
}
.category-btn:focus { outline: 3px solid #fff; }

/* ==========================================================================
   EPG OVERLAY
   ========================================================================== */
#epg-bottom {
    position: absolute; bottom: 20px; left: 50px; right: 50px;
    background: #d32f2f; border-radius: 8px; z-index: 500;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
}
#epg-bottom.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }

.epg-header { padding: 10px 20px; display: flex; justify-content: space-between; font-weight: bold; }
.epg-body { background: #000; padding: 15px 20px; display: flex; gap: 20px; align-items: center; }
.logo-placeholder { width: 60px; height: 60px; background: #333; border-radius: 4px; }

/* ==========================================================================
   AUTOPLAY TRIGGER
   ========================================================================== */
#autoplay-trigger {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 4000; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}