/* =============================================================================
   HLS Live Player — style.css
   Exact EPG app v54 CSS (style.css) with player forced full-width/no-border.
   Theme colours are CSS variables overridden by inline <style> from PHP/DB.
   ============================================================================= */

:root{
  --bg:#0b0c10;--panel:#12141a;--panel2:#0f1116;--text:#e7e8ee;--muted:#a9adbb;
  --line:#272a36;--accent2:#cfd2dc;--danger:#fb7185;
  --shadow:0 4px 20px rgba(0,0,0,.4);--radius:12px
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
     background:var(--bg);color:var(--text);display:flex;flex-direction:column}
a{color:var(--text);text-decoration:none}a:hover{opacity:.85}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.container{display:flex;flex-direction:column;width:100%;min-height:100vh;
           padding:8px 10px;gap:8px}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.brand{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.brand .brand-title{font-weight:700;font-size:16px;letter-spacing:.1px}
.brand .subtitle{color:var(--muted);font-size:11px}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 60%,#fff 5%),var(--panel));
     border:1px solid var(--line);color:var(--text);padding:7px 12px;border-radius:9px;
     cursor:pointer;font-size:13px;white-space:nowrap;line-height:1;font-family:inherit}
.btn:hover{border-color:color-mix(in srgb,var(--line) 60%,#fff 30%)}
.btn:active{transform:translateY(1px)}
.btn.small{padding:5px 10px;font-size:12px}

/* ── Inputs ────────────────────────────────────────────────────────────────── */
.input{background:var(--panel2);border:1px solid var(--line);color:var(--text);
       padding:7px 10px;border-radius:9px;outline:none;font-size:13px;
       font-family:inherit}
.input:focus{border-color:color-mix(in srgb,var(--line) 60%,#fff 30%)}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
           padding:9px 12px 8px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.card-head h2{margin:0;font-size:12px;letter-spacing:.3px;color:var(--accent2);
              font-weight:600;text-transform:uppercase}

/* ── Badge ─────────────────────────────────────────────────────────────────── */
.badge{font-size:11px;color:var(--muted);border:1px solid rgba(255,255,255,.07);
       padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.3);white-space:nowrap}

/* ── Live badge ────────────────────────────────────────────────────────────── */
.live-badge{color:#f87171;border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.08);
            display:flex;align-items:center;gap:5px;font-weight:600}
.live-badge::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
                    background:#f87171;flex-shrink:0;animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(248,113,113,.6)}
  50%{opacity:.7;box-shadow:0 0 0 4px rgba(248,113,113,0)}
}

/* ── Viewer count ──────────────────────────────────────────────────────────── */
.viewer-count{color:var(--accent2);border-color:rgba(255,255,255,.1);font-size:11px}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER SHELL — 100% width, no horizontal border, no radius on video
   ═══════════════════════════════════════════════════════════════════════════ */
.player-wrap{flex:1;min-height:0;display:flex;align-items:stretch;overflow:hidden;
             position:relative;padding:0}

/* video-inner: 16:9, full width, NO left/right/bottom border, no corner radius */
.video-inner{position:relative;width:100%;aspect-ratio:16/9;background:#000;
             overflow:hidden;border:none;border-radius:0}

/* ── Poster image ──────────────────────────────────────────────────────────── */
.video-poster{position:absolute;inset:0;width:100%;height:100%;
              object-fit:cover;background:#000;z-index:1;
              transition:opacity .4s ease;border-radius:0}
.video-poster.hidden{opacity:0;pointer-events:none}

/* ── Play overlay ──────────────────────────────────────────────────────────── */
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;
              justify-content:center;z-index:2;pointer-events:none;transition:opacity .4s ease}
.play-overlay.hidden{opacity:0}
.play-overlay-btn{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);
                  border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;
                  justify-content:center;pointer-events:auto;cursor:pointer;
                  transition:background .18s,border-color .18s,transform .15s}
.play-overlay-btn:hover{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.35);
                        transform:scale(1.06)}
.play-overlay-btn svg{width:28px;height:28px;fill:#fff;margin-left:3px}

/* ── Fullscreen button ─────────────────────────────────────────────────────── */
.vod-fullscreen-btn{position:absolute;bottom:12px;right:12px;z-index:5;width:32px;height:32px;
                    border-radius:8px;border:1px solid rgba(255,255,255,.12);
                    background:rgba(0,0,0,.4);display:flex;align-items:center;
                    justify-content:center;cursor:pointer;transition:border-color .15s}
.vod-fullscreen-btn:hover{border-color:rgba(255,255,255,.28)}
.vod-fullscreen-btn svg{width:15px;height:15px;fill:#fff;opacity:.85}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.vod-loading{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;
             align-items:center;justify-content:center;z-index:6;
             opacity:0;pointer-events:none;transition:opacity .3s}
.vod-loading.show{opacity:1;pointer-events:auto}
.vod-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.18);
             border-top-color:rgba(255,255,255,.85);border-radius:50%;
             animation:vod-spin .85s linear infinite}
@keyframes vod-spin{to{transform:rotate(360deg)}}

/* ── Player action bar (Share/Embed) ───────────────────────────────────────── */
.player-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;
                padding:5px 10px 0;flex-shrink:0}
.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;
            border:1px solid var(--line);background:transparent;color:var(--muted);
            font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;
            white-space:nowrap;font-family:inherit}
.action-btn i{font-size:12px}
.action-btn:hover{border-color:var(--accent2);color:var(--text)}

/* ── Controls bar (exact EPG app) ──────────────────────────────────────────── */
.vod-controls-bar{display:flex;align-items:center;gap:8px;padding:5px 10px 7px;
                  border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}
.ctrl-btn{background:none;border:none;cursor:pointer;padding:3px;display:flex;
          align-items:center;flex-shrink:0}
.ctrl-btn svg{width:19px;height:19px;fill:var(--text);opacity:.82}
.ctrl-btn:hover svg{opacity:1}
.vod-progress-track{flex:1;height:4px;background:rgba(255,255,255,.12);border-radius:4px;
                    cursor:pointer;overflow:hidden}
.vod-progress-fill{height:100%;background:var(--accent2);width:0;border-radius:4px;
                   transition:width .1s linear}
.vod-time-label{font-size:11px;color:var(--muted);white-space:nowrap;min-width:90px;text-align:right}
.vod-vol-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}
.vod-vol-track{width:58px;height:4px;background:rgba(255,255,255,.12);border-radius:4px;
               cursor:pointer;overflow:hidden}
.vod-vol-fill{height:100%;background:var(--accent2);width:75%;border-radius:4px}

/* ── Now Playing ───────────────────────────────────────────────────────────── */
.nowplaying{padding:8px 12px;border-top:1px solid rgba(255,255,255,.05);
            background:rgba(0,0,0,.25);flex-shrink:0}
.nowplaying .np-title{font-weight:700;margin:0 0 2px;font-size:13px}
.nowplaying .np-meta{color:var(--muted);font-size:11px;display:flex;gap:10px;flex-wrap:wrap}

/* ── Modals ────────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;
               display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
           box-shadow:var(--shadow);width:100%;max-width:520px;display:flex;
           flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
            border-bottom:1px solid var(--line);font-weight:700;font-size:14px;flex-shrink:0}
.modal-close{background:none;border:none;color:var(--muted);font-size:22px;
             cursor:pointer;line-height:1;padding:0 4px}
.modal-close:hover{color:var(--text)}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.copy-row{display:flex;gap:8px;align-items:stretch}
.field-label{color:var(--muted);font-size:11px;display:block;margin-bottom:3px}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:700px){
  .container{padding:6px;gap:6px}
  .topbar{flex-wrap:wrap;gap:6px}
  .brand .brand-title{font-size:14px}
  .brand .subtitle{font-size:10px}
  .btn{padding:6px 10px;font-size:12px}
  .btn.small{padding:4px 8px;font-size:11px}
  .nowplaying{padding:6px 10px}
  .nowplaying .np-title{font-size:12px}
}