/*
 * Full CSS for freezap - Simplified Stable Version
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; color: #ffffff; background-color: #000; overflow: hidden; }
#video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
#video { width: 100%; height: 100%; object-fit: contain; }
.shaka-controls-container { display: none !important; }

/* Infobar Styles */
#infobar { position: fixed; bottom: 0; left: 0; width: 100%; height: 40vh; background: rgba(20, 20, 20, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; padding: 3vh 4vw; opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
#infobar.visible { opacity: 1; transform: translateY(0); }
.channel-nav { flex-basis: 15%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#channel-nav-number { font-size: 10vh; font-weight: 500; margin: 2vh 0; }
.chevron svg { fill: rgba(255, 255, 255, 0.6); width: 6vh; height: 6vh; }
.channel-details { flex-grow: 1; display: flex; flex-direction: column; padding-left: 3vw; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.info-header { display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.7); font-size: 2.2vh; }
#stream-info-container { display: none; align-items: center; gap: 1.5vw; }
#stream-info-container.visible { display: flex; }
.info-audio, .info-quality { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.1); padding: 0.5vh 1.2vh; border-radius: 4px; }
.info-audio .material-icons { font-size: 2.5vh; margin-right: 0.8vh; }
#info-channel-name { font-size: 4.5vh; font-weight: 700; margin-top: 1.5vh; }
#epg-progress-container { width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; margin: 2vh 0; overflow: hidden; }
#epg-progress-bar { width: 0%; height: 100%; background-color: #f7a400; border-radius: 3px; transition: width 0.5s ease-out; }
#info-program-title { font-size: 4vh; font-weight: 500; }
#info-program-times { font-size: 2.2vh; color: rgba(255, 255, 255, 0.7); margin: 0.5vh 0; }
#info-program-description { font-size: 2.2vh; font-weight: 300; color: rgba(255, 255, 255, 0.8); margin-top: 1.5vh; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }