@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap');
* { font-family: 'Satoshi', sans-serif; }

html, body { margin: 0; padding: 0; background-color: #121212; color: white; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; }

a { color: #888; font-size: 12px; text-decoration: none; }
a:hover { color: white; }

.container { display: flex; height: 100%; width: 100%; gap: 1rem; padding: 1rem; box-sizing: border-box; }

.video-container { position: relative; flex: 1; background-color: black; border-radius: 0.75rem; overflow: hidden; display: flex; justify-content: center; align-items: center; }

#player, .jwplayer { width: 100% !important; height: 100% !important; position: absolute !important; top: 0; left: 0; }

#fallbackMessage.fallback-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; color: #D2042D; font-size: 20px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; border-radius: 0.75rem; z-index: 10; box-sizing: border-box; }

#clock { position: absolute; top: 10px; right: 15px; background-color: #D2042D; color: white; padding: 5px 15px; border-radius: 20px; font-size: 15px; z-index: 1000; }

#epgOverlay { position: absolute; top: 10px; left: 15px; background-color: rgba(210, 4, 45, 0.85); color: white; padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 1000; max-width: 40%; white-space: normal; line-height: 1.4; opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }

#epgOverlay.show { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition-delay: 0s; }

#epgDetailsBox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 1100; }

#epgDetailsContent { background: #1a1a1a; border: 2px solid #D2042D; border-radius: 12px; padding: 30px 20px 20px 20px; max-width: 90%; width: 350px; max-height: 80vh; overflow-y: auto; color: white; box-shadow: 0 0 20px #D2042Daa; position: relative; animation: fadeIn 0.3s ease; }

#epgDetailsBody div + div { margin-top: 10px; font-size: 14px; }

#epgCloseBtn { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: none; border-radius: 50%; background-color: #2a2a2a; color: white; font-size: 16px; font-weight: bold; cursor: pointer; line-height: 28px; text-align: center; padding: 0; transition: background 0.2s ease, color 0.2s ease; }

#epgCloseBtn:hover { background-color: #D2042D; color: white; }

.sidebar { width: 320px; background-color: #222; border-radius: 0.75rem; display: flex; flex-direction: column; padding: 1rem; box-sizing: border-box; overflow: hidden; }

.top-controls { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }

select, input { background-color: #2a2a2a; color: white; border: none; border-radius: 0.375rem; padding: 0.5rem; font-size: 0.875rem; }

input.search-input { margin-top: 0.5rem; }

.channel-text { text-align: center; font-size: 25px; margin-bottom: 2px; width: 100%; }

.credits { text-align: center; font-size: 12px; color: #888; width: 100%; }

#channelCount { text-align: center; font-size: 14px; margin-bottom: 5px; color: #D2042D; }

ul.channel-list { list-style: none; padding: 0; margin: 0; }

ul.channel-list li { padding: 0.5rem; cursor: pointer; border-radius: 0.375rem; display: flex; justify-content: space-between; align-items: center; }

ul.channel-list li.active { background-color: #D2042D; color: white; }

ul.channel-list li:hover:not(.active) { background-color: #333; }

.list-container { flex: 1; overflow-y: auto; }

.list-container::-webkit-scrollbar { width: 8px; }

.list-container::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; border: 2px solid #1c1c1c; }

.list-container::-webkit-scrollbar-thumb:hover { background-color: #D2042D; }

#password-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; z-index: 9999; }

#password-container { background: #DC143C; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0px 4px 15px rgba(204, 85, 0, 0.4); width: 300px; }

#password-container h2 { font-size: 18px; margin-bottom: 10px; color: white; }

#password-container p { font-size: 14px; margin-bottom: 15px; color: white; }

#password-container a { color: white; cursor: pointer; text-decoration: none; }

#password-container a:hover { color: gray; }

#password-box { width: 90%; padding: 12px; font-size: 14px; border: none; border-radius: 5px; background: #880808; color: white; text-align: center; outline: none; box-shadow: inset 0px 2px 5px rgba(222, 49, 99, 0.4); }

#password-box::placeholder { color: rgba(255, 255, 255, 0.4); }

button { width: 95%; padding: 12px; font-size: 14px; background: #880808; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; transition: background 0.3s ease; }

button:hover { background: #800020; }

#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; display: flex; align-items: center; justify-content: center; z-index: 9998; }

.loader { border: 6px solid #333; border-top: 6px solid #BD3039; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#popup-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; z-index: 9999; }

.popup-content { background: #111; border: 2px solid #BD3039; border-radius: 12px; padding: 25px; color: white; text-align: center; box-shadow: 0 0 15px #711d22; max-width: 90%; width: 300px; font-size: 14px; }

.popup-content a { color: #DC143C; cursor: pointer; text-decoration: none; }
.popup-content a:hover { color: #880808; }

#popup-ok { margin-top: 15px; padding: 10px 20px; background-color: #DC143C; border: none; border-radius: 5px; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s; }

#popup-ok:hover { background-color: #711d22; }

.jwplayer .jw-controlbar { background: linear-gradient(to top, rgba(220, 20, 60, 0.5), rgba(210, 4, 45, 0.2)) !important; backdrop-filter: blur(2px); }

.jwplayer .jw-button-color, .jwplayer .jw-icon, .jwplayer .jw-text-elapsed, .jwplayer .jw-text-duration { color: rgba(210, 4, 45, 0.6) !important; fill: rgba(210, 4, 45, 0.6) !important; transition: color 0.3s ease; }

.jwplayer .jw-icon:hover { color: #D2042D !important; fill: #D2042D !important; }

.jwplayer .jw-progress, .jwplayer .jw-slider-volume .jw-progress, .jwplayer .jw-knob { background-color: rgba(210, 4, 45, 0.5) !important; }

.jwplayer .jw-slider-volume .jw-knob, .jwplayer .jw-slider-horizontal .jw-knob { background-color: #D2042D !important; }

.jwplayer .jw-background-color { background-color: transparent !important; }

.jw-svg-icon-buffer path { display: none; }

.jw-svg-icon-buffer { background-image: url('https://s4.gifyu.com/images/bL7xg.gif'); background-repeat: no-repeat; background-position: center; background-size: 80px 80px; width: 80px; height: 80px; opacity: 0.8; }

@keyframes fadeIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#epgDetailsContent::-webkit-scrollbar { width: 8px; }

#epgDetailsContent::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; }

#epgDetailsContent::-webkit-scrollbar-thumb { background-color: #D2042D; border-radius: 4px; border: 2px solid #1a1a1a; }

#epgDetailsContent::-webkit-scrollbar-thumb:hover { background-color: #880808; }

@media screen and (max-width: 768px), (orientation: portrait) {
  .container { flex-direction: column; height: auto; }
  .video-container { width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom: 0.5rem; border-radius: 0.5rem; position: relative; }
  .sidebar { width: 100%; height: auto; }
  .list-container { max-height: 240px; }
  #fallbackMessage.fallback-box { font-size: 16px; padding: 2rem 1rem; }
  #clock { font-size: 12px; padding: 5px 10px; }
  #epgOverlay { font-size: 12px; padding: 4px 10px; top: 40px; }
  #epgDetailsContent { width: 90%; padding: 28px 16px 20px 16px; }
  #epgCloseBtn { top: 6px; right: 8px; width: 24px; height: 24px; font-size: 14px; line-height: 24px; }
}