/* Player view + EPG guide */
.player-view { position: fixed; inset: 0; z-index: 150; background: #000; display: flex; flex-direction: column; animation: fade .2s; }
.player-stage { flex: 1; position: relative; min-height: 0; display: flex; }
.player-video-wrap { flex: 1; position: relative; background: #000; display: grid; place-items: center; min-width: 0; }
/* Default to contain so the picture keeps its aspect ratio and is never
   stretched (important on tall mobile screens). */
.player-video-wrap video { width: 100%; height: 100%; background: #000; object-fit: contain; }
/* resize modes (user choice) */
video.rz-fit { object-fit: contain; }
video.rz-fill { object-fit: fill; }
video.rz-cover { object-fit: cover; }
video.rz-original { object-fit: none; }

.player-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 1; transition: opacity .3s; }
.player-overlay.hidden { opacity: 0; pointer-events: none; }
.po-top { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; background: linear-gradient(180deg, rgba(0,0,0,.75), transparent); }
.po-top .p-title { flex: 1; min-width: 0; }
.po-top .p-ch-name { font-size: 20px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.6); display: flex; align-items: center; gap: 10px; }
.po-top .p-prog { color: #d8dce6; font-size: 14px; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.po-clock { font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; }

.po-center { flex: 1; display: grid; place-items: center; }
.po-bigplay { width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 85%, transparent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-lg); transition: transform .15s; }
.po-bigplay:hover { transform: scale(1.06); }

.po-bottom { padding: 14px 22px 20px; background: linear-gradient(0deg, rgba(0,0,0,.82), transparent); color: #fff; }
.po-epg-info { margin-bottom: 12px; max-width: 62%; }
.po-epg-info .now-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.po-epg-info .now-when { font-size: 12px; color: #cfd4de; margin-top: 3px; font-variant-numeric: tabular-nums; }
.po-epg-info .now-desc { font-size: 13px; color: #c4c9d4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-epg-info .next-line { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; color: #c4c9d4; }
.epg-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: #fff; flex: none; }
.epg-tag.next { background: rgba(255,255,255,.16); color: #e6e9f0; }
.po-seek { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.po-seek .t { font-size: 12.5px; color: #cfd4de; font-variant-numeric: tabular-nums; min-width: 46px; }
.seekbar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.22); position: relative; cursor: pointer; touch-action: none; }
.seekbar::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; } /* larger drag hit-area */
.seekbar > .buf { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.28); border-radius: 6px; }
.seekbar > .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 6px; }
.seekbar > .knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.seekbar.live { pointer-events: none; opacity: .5; }
.po-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.po-controls .pbtn { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; transition: background .14s; }
.po-controls .pbtn:hover { background: rgba(255,255,255,.14); }
.po-controls .pbtn.wide { width: auto; padding: 0 12px; gap: 7px; font-weight: 600; font-size: 13px; }
.po-controls .pbtn.primary { background: var(--accent); }
.po-controls .flex-sp { flex: 1; }
.po-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.po-controls .live-label { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; padding: 0 10px; }

/* popover menus (tracks, speed, resize) */
.pop { position: absolute; bottom: 74px; right: 22px; background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 210px; z-index: 30; animation: pop .16s var(--ease); max-height: 60vh; overflow-y: auto; }
/* App-shell popovers (playlist switch, sort, context menu) must sit above the
   mobile off-canvas sidebar (z-index 120) and scrim (119) — otherwise on phones
   the playlist switcher opens behind the sidebar and can't be tapped. */
.pop.pl-menu, .pop.sort-menu, .pop.ctx-menu { z-index: 160; }
.pop h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); padding: 8px 12px 4px; }
.pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; color: var(--text-dim); font-size: 13.5px; }
.pop button:hover { background: var(--surface); color: var(--text); }
.pop button.active { color: var(--accent); }
.pop button .check { margin-left: auto; opacity: 0; }
.pop button.active .check { opacity: 1; }

/* volume popover — vertical slider (bottom → top) */
.pop.vol-pop { min-width: 0; width: auto; }
.vol-col { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px 10px; }
.vol-pct { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-height: 14px; }
.vol-col .pbtn { width: 34px; height: 34px; flex: none; color: var(--text); display: grid; place-items: center; border-radius: 8px; }
.vol-col .pbtn:hover { background: var(--surface); }
/* Standardized vertical range (writing-mode) — no deprecated slider-vertical. */
.vol-slider {
  writing-mode: vertical-lr; direction: rtl;
  width: 22px; height: 120px; cursor: pointer; accent-color: var(--accent);
}

/* player favorite button */
.po-controls .pbtn.fav-btn-p.on { color: var(--warn); }
.po-controls .pbtn.fav-btn-p.on .icon svg { fill: var(--warn); }

/* channel info popover */
.pop.info-pop { min-width: 280px; max-width: 360px; padding: 0; overflow: hidden; }
.info-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--surface); }
.info-head .ch-logo { width: 40px; height: 40px; }
.info-name { font-weight: 700; }
.info-grp { font-size: 12px; color: var(--text-faint); }
.info-prog { padding: 10px 14px; border-top: 1px solid var(--border); }
.info-when { font-size: 11.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.info-title { font-weight: 600; margin-top: 3px; }
.info-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
.info-tech-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 3px 0; color: var(--text-faint); }
.info-tech-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.po-seek .t.live-edge { color: var(--danger); font-weight: 700; }

/* channel strip (zapping) */
.channel-strip { width: 340px; flex: none; background: var(--bg-1); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; transition: margin-right .25s var(--ease); }
.channel-strip.hidden { margin-right: -340px; }
.strip-tabs { display: flex; padding: 10px; gap: 4px; border-bottom: 1px solid var(--border); }
.strip-tabs button { flex: 1; padding: 8px; border-radius: 9px; color: var(--text-dim); font-weight: 600; font-size: 13px; }
.strip-tabs button.active { background: var(--surface-2); color: var(--text); }
.strip-list { flex: 1; overflow-y: auto; padding: 6px; }
/* Strip channel list: search + collapsible group accordion. */
.strip-search-wrap { padding: 4px 4px 8px; position: sticky; top: 0; background: var(--bg-1); z-index: 1; }
.strip-search { width: 100%; padding: 8px 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.strip-search::placeholder { color: var(--text-faint); }
.strip-group { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; color: var(--text-dim); font-weight: 600; font-size: 13.5px; transition: background .12s; }
.strip-group:hover { background: var(--surface); }
.strip-group.open { color: var(--text); }
.strip-group > .icon { flex: none; opacity: .8; }
.strip-group .sg-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-group .sg-count { font-size: 12px; color: var(--text-faint); background: var(--surface-2); padding: 1px 8px; border-radius: 999px; flex: none; }
.strip-more { text-align: center; color: var(--text-faint); font-size: 12px; padding: 8px; }

/* archive/catchup timeline */
.archive-panel { padding: 14px; overflow-y: auto; }
.archive-day { font-weight: 700; font-size: 13px; color: var(--text-dim); margin: 12px 4px 6px; position: sticky; top: 0; background: var(--bg-1); padding: 4px; }
.archive-prog { display: flex; gap: 10px; padding: 9px 11px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.archive-prog:hover { background: var(--surface); }
.archive-prog.live { opacity: .6; }
/* The archive programme that's currently playing. */
.archive-prog.selected { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 3px 0 0 var(--accent); opacity: 1; }
.archive-prog.selected .ap-title { color: var(--text); font-weight: 700; }
.archive-prog .ap-time { font-size: 12px; color: var(--text-faint); min-width: 44px; font-variant-numeric: tabular-nums; }
.archive-prog .ap-title { font-size: 13.5px; font-weight: 550; }
.archive-prog .ap-badge { margin-left: auto; }
/* Upcoming (future) programmes in the Schedule tab: informational, not clickable. */
.archive-prog.upcoming { cursor: default; }
.archive-prog.upcoming:hover { background: transparent; }
.archive-prog.upcoming .ap-time { color: var(--accent); }
/* The programme airing right now, at the top of the Schedule list. */
.archive-prog.on-now { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.archive-prog.on-now .ap-title { color: var(--text); font-weight: 700; }
.ap-nowbadge { margin-left: auto; align-self: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--accent-contrast); background: var(--accent); padding: 2px 7px; border-radius: 6px; }

/* ---- EPG guide grid ---- */
.guide { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.guide-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
/* Day picker */
.guide-days { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.guide-days .gd-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s, border-color .12s; text-transform: capitalize; }
.guide-days .gd-chip:hover { background: var(--surface-2); }
.guide-days .gd-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.guide-scroll { flex: 1; overflow: auto; min-height: 0; position: relative; }
.guide-grid { position: relative; }
.guide-timeline { position: sticky; top: 0; z-index: 5; height: 34px; background: var(--bg-1); border-bottom: 1px solid var(--border); }
.guide-tick { position: absolute; top: 0; height: 34px; border-left: 1px solid var(--border); padding: 8px 0 0 8px; font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.guide-row { display: flex; height: 62px; border-bottom: 1px solid var(--border); }
.guide-ch { position: sticky; left: 0; z-index: 4; width: 190px; flex: none; background: var(--bg-1); border-right: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; }
.guide-ch:hover { background: var(--surface); }
.guide-ch img { width: 34px; height: 34px; object-fit: contain; border-radius: 7px; }
.guide-ch .gc-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-progs { position: relative; flex: 1; }
.guide-prog { position: absolute; top: 5px; bottom: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; overflow: hidden; cursor: pointer; transition: background .12s; }
.guide-prog:hover { background: var(--surface-2); border-color: var(--border-strong); }
.guide-prog.now { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.guide-prog .gp-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-prog .gp-time { font-size: 11px; color: var(--text-faint); }
.guide-nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 6; box-shadow: 0 0 8px var(--danger); }
.guide-nowline::before { content:''; position: absolute; top: 34px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

/* clock overlay positions */
.overlay-clock { position: absolute; top: 16px; z-index: 25; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; }
.overlay-clock.left { left: 22px; }
.overlay-clock.center { left: 50%; transform: translateX(-50%); }
.overlay-clock.right { right: 22px; }

/* VOD details */
.vod-hero { display: flex; gap: 24px; margin-bottom: 22px; }
.vod-poster { width: 220px; flex: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2); aspect-ratio: 2/3; box-shadow: var(--shadow); }
.vod-poster img { width: 100%; height: 100%; object-fit: cover; }
.vod-meta h1 { font-size: 26px; letter-spacing: -0.5px; }
.vod-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.vod-tag { font-size: 12px; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }
.vod-plot { color: var(--text-dim); max-width: 640px; line-height: 1.6; }
.vod-info-line { display: flex; gap: 8px; margin-top: 8px; font-size: 13px; }
.vod-info-line b { color: var(--text-dim); font-weight: 600; min-width: 90px; }
.season-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.episode { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); margin-bottom: 6px; cursor: pointer; transition: all .14s; }
.episode:hover { border-color: var(--border-strong); background: var(--surface-2); }
.episode .ep-num { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--accent); flex: none; }
.episode .ep-main { flex: 1; min-width: 0; }
.episode .ep-title { font-weight: 600; }
.episode .ep-plot { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* mobile menu button hidden on desktop */
.menu-toggle { display: none; }

@media (max-width: 920px) {
  :root { --sidebar-w: 0px; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 270px; z-index: 120; transform: translateX(-100%); transition: transform .25s var(--ease); }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .app-shell { grid-template-columns: 1fr; }
  .menu-toggle { display: grid; }
  .sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 119; }
  .searchbox { min-width: 0; }
  .channel-strip { position: absolute; right: 0; top: 0; bottom: 0; z-index: 40; }
  .po-epg-info { max-width: 100%; }
  .vod-hero { flex-direction: column; }
  .vod-poster { width: 160px; }
}

@media (max-width: 640px) {
  .po-top { padding: 12px 14px; }
  .po-top .p-ch-name { font-size: 16px; }
  .po-bottom { padding: 10px 12px 14px; }
  /* Keep every control on a single bottom row; scroll horizontally if they
     don't all fit rather than wrapping into rows that cover the video. */
  .po-controls { gap: 2px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .po-controls::-webkit-scrollbar { display: none; }
  .po-controls .pbtn { width: 40px; height: 40px; flex: 0 0 auto; }
  .po-controls .flex-sp { display: none; } /* no spacer — buttons pack together */
  .po-controls .resize-btn-p { display: none; } /* aspect-ratio hidden on small screens */
  /* Channel-list button: moved first (order:-1) and pinned to the LEFT edge so
     it's always visible from scroll-start and never pushed away when the seek
     bar / rewind buttons appear after playback starts. Accented to stand out. */
  .po-controls .list-btn-p { order: -1; position: sticky; left: 0; background: var(--accent); color: #fff; box-shadow: 16px 0 14px 6px rgba(0,0,0,.62); z-index: 2; margin-right: 4px; }
  .po-controls .list-btn-p:hover { background: var(--accent); }
  .po-controls .pbtn.wide span { display: none; } /* icon-only on small screens */
  .po-controls .pbtn.wide { width: 40px; padding: 0; }
  .channel-strip { width: 86vw; }
  .channel-strip.hidden { margin-right: -90vw; }
  .overlay-clock { font-size: 17px; }
  .guide-ch { width: 132px; }
  .vod-hero { gap: 14px; }
  .vod-meta h1 { font-size: 21px; }
  .season-tabs { gap: 5px; }
}