/* ============================================================
   Live World TV — phpFox Module CSS  (v4)
   All rules scoped under #lwtv-app — never bleeds into the
   surrounding phpFox site header / footer / theme.
   ============================================================ */

/* ── DESIGN TOKENS — Light theme matching phpFox site ──────── */
#lwtv-app {
  /* Core palette — white/light grey base */
  --bg:        #f4f6f9;
  --bg2:       #edf0f5;
  --panel:     #ffffff;
  --panel2:    #f0f3f8;
  --panel3:    #e4e9f2;
  --line:      #d0d8e8;
  --line2:     #bbc6dc;
  --line3:     #a8b6d0;

  /* Text */
  --txt:       #1a2540;
  --txt2:      #344060;
  --muted:     #6878a0;
  --muted2:    #8898bc;

  /* Accent — keep the blue from the phpFox header */
  --acc:       #2196f3;
  --acc2:      #1565c0;
  --acc3:      #0d47a1;
  --glow:      #64b5f6;
  --glow2:     rgba(33,150,243,.14);

  /* Status */
  --live:      #e53935;
  --live2:     rgba(229,57,53,.10);
  --gold:      #f9a825;
  --gold2:     rgba(249,168,37,.14);
  --green:     #43a047;
  --green2:    rgba(67,160,71,.12);

  /* Sizing */
  --hdr:       58px;
  --panel-w:   340px;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

/* ── RESET + BASE ───────────────────────────────────────────── */
#lwtv-app,
#lwtv-app * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#lwtv-app {
  position: relative;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  color: var(--txt);
  background:
    radial-gradient(ellipse 1200px 500px at 80% -10%, rgba(33,150,243,.06), transparent 60%),
    radial-gradient(ellipse 800px 600px at -10% 110%, rgba(33,150,243,.04), transparent 55%),
    var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 0 0 1px rgba(33,150,243,.12);
  /* Height: 100vh minus phpFox header (~70px) + footer (~80px) + margin (20px each) */
  height: min(880px, calc(100vh - 190px));
  min-height: 580px;
}

/* ── STARFIELD ──────────────────────────────────────────────── */
#lwtv-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
}

/* ── INNER WRAPPER ──────────────────────────────────────────── */
#lwtv-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ════════════════════════════════════════════════════════════
   APP HEADER
   ════════════════════════════════════════════════════════════ */
#lwtv-hdr {
  height: var(--hdr);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: linear-gradient(180deg, #ffffff, #f8fafd);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(33,150,243,.08);
}

/* Brand */
.lwtv-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.lwtv-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 32%, var(--glow), var(--acc) 44%, var(--acc2) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px rgba(41,168,255,.5), inset 0 0 12px rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}
.lwtv-logo svg {
  width: 26px;
  height: 26px;
  color: #011a36;
}
.lwtv-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: lwtv-sheen 6s ease-in-out infinite;
}

@keyframes lwtv-sheen {
  0%, 70%  { transform: translateX(-120%); }
  85%, 100%{ transform: translateX(130%);  }
}

.lwtv-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.lwtv-brand-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .5px;
}
.lwtv-brand-sub {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-top: 3px;
}

/* Search */
.lwtv-search-wrap {
  flex: 1;
  max-width: 320px;
  position: relative;
  margin: 0 auto;
}
.lwtv-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}
#lwtv-search {
  width: 100%;
  background: var(--panel2);
  border: 1.5px solid var(--line);
  color: var(--txt);
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  padding: 9px 32px 9px 33px;
  border-radius: 24px;
  outline: none;
  transition: border-color .2s, background .2s, width .25s;
}
#lwtv-search::placeholder { color: var(--muted2); }
#lwtv-search:focus {
  border-color: var(--acc);
  background: #fff;
}
.lwtv-search-clear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  transition: color .15s;
}
.lwtv-search-clear:hover { color: var(--txt); }
.lwtv-search-clear svg { width: 13px; height: 13px; }

/* Stats pill */
.lwtv-stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 20px;
}
.lwtv-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 9px var(--live);
  animation: lwtv-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lwtv-pulse {
  0%, 100%{ opacity: 1;  box-shadow: 0 0 9px var(--live);  }
  50%     { opacity: .3; box-shadow: 0 0 3px var(--live);  }
}

/* ════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ════════════════════════════════════════════════════════════ */
#lwtv-main {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* ── GLOBE STAGE ────────────────────────────────────────────── */
#lwtv-stage {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

#lwtv-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* 2D canvas — JS sets canvas.width/height in resize() */
  image-rendering: pixelated;
}
#lwtv-globe:active { cursor: grabbing; }

/* Region chips */
#lwtv-regions {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 6;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
  padding: 6px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.lwtv-chip {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--txt2);
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  letter-spacing: .3px;
}
.lwtv-chip:hover {
  border-color: var(--acc);
  color: var(--txt);
}
.lwtv-chip.on {
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 14px rgba(41,168,255,.4);
}

/* Hint text */
#lwtv-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: var(--muted2);
  font-size: .71rem;
  letter-spacing: .5px;
  text-align: center;
  pointer-events: none;
  background: rgba(255,255,255,.82);
  padding: 6px 15px;
  border-radius: 22px;
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  transition: opacity .4s;
}

/* Globe loader overlay */
#lwtv-globe-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 7;
  background: radial-gradient(circle at 50% 45%, rgba(220,235,255,.8), var(--bg));
  transition: opacity .7s;
}
.lwtv-loader-inner { text-align: center; }
.lwtv-loader-inner p {
  color: var(--txt2);
  font-size: .8rem;
  letter-spacing: .4px;
  margin-top: 14px;
}

/* Globe tooltip */
#lwtv-tooltip {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  background: #fff;
  border: 1px solid var(--acc);
  border-radius: var(--radius-xs);
  padding: 7px 12px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .12s;
  box-shadow: 0 4px 16px rgba(33,150,243,.15), 0 0 0 1px rgba(33,150,243,.08);
}
#lwtv-tooltip .lwtv-tip-sub {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 500;
  margin-top: 2px;
}

/* Spinner */
.lwtv-spin {
  width: 32px;
  height: 32px;
  border: 3px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: lwtv-rot .75s linear infinite;
  margin: 0 auto;
}
@keyframes lwtv-rot { to { transform: rotate(360deg); } }

/* ── SIDE PANEL ─────────────────────────────────────────────── */
#lwtv-panel {
  width: var(--panel-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff, #f8fafd);
  border-left: 1px solid var(--line);
  min-height: 0;
}
.lwtv-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.lwtv-panel-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: #fff;
}
.lwtv-panel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lwtv-panel-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .5px;
}

/* Favourite toggle button */
.lwtv-fav-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel2);
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: .15s;
  letter-spacing: .3px;
}
.lwtv-fav-toggle svg { width: 13px; height: 13px; }
.lwtv-fav-toggle:hover  { border-color: var(--gold); color: var(--gold); }
.lwtv-fav-toggle.on     { background: var(--gold2); border-color: var(--gold); color: var(--gold); }

/* Mini selects */
.lwtv-mini-sel {
  background: var(--panel2);
  border: 1.5px solid var(--line);
  color: var(--txt);
  font-family: 'Outfit', sans-serif;
  font-size: .73rem;
  font-weight: 500;
  padding: 7px 26px 7px 11px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236878a0' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .15s;
}
.lwtv-mini-sel:focus { border-color: var(--acc); }
.lwtv-mini-sel option { background: #fff; color: var(--txt); }
.lwtv-mini-sel.lwtv-region-sel { margin-left: auto; }

/* Scrollable list */
.lwtv-scroll-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 6px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) var(--bg2);
}
.lwtv-scroll-list::-webkit-scrollbar { width: 5px; }
.lwtv-scroll-list::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 6px;
}

/* Empty / loading state */
.lwtv-list-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 52px 20px;
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
  line-height: 1.7;
  background: var(--panel);
}
.lwtv-list-state .lwtv-spin { margin: 0; }

/* ── COUNTRY ROWS ───────────────────────────────────────────── */
.lwtv-country-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  position: relative;
}
.lwtv-country-row:hover  { background: var(--panel2); border-color: var(--acc); }
.lwtv-country-row.on     { background: linear-gradient(135deg,rgba(249,201,35,.13),rgba(249,180,0,.06)); border-color: #f9c923; box-shadow: 0 0 0 1px rgba(249,201,35,0.25); }
.lwtv-country-row.on .lwtv-flag { border-color: #f9c923; box-shadow: 0 0 8px rgba(249,201,35,0.7); }
.lwtv-country-row:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.lwtv-flag {
  width: 36px;
  height: 27px;
  border-radius: 4px;
  object-fit: cover;
  border: 2px solid #f9c923;
  box-shadow: 0 0 6px rgba(249,201,35,0.45);
  flex-shrink: 0;
  display: block;
}
.lwtv-flag-ph {
  width: 36px;
  height: 27px;
  border-radius: 4px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--panel3);
  border: 1px solid var(--line2);
  font-family: 'Rajdhani', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: .5px;
}
.lwtv-country-info { flex: 1; min-width: 0; }
.lwtv-country-name-text {
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwtv-country-code {
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .5px;
  margin-top: 1px;
}
.lwtv-country-ch-count {
  font-size: .7rem;
  color: var(--acc);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(41,168,255,.1);
  border: 1px solid rgba(41,168,255,.2);
  padding: 2px 7px;
  border-radius: 10px;
}

/* Back row */
.lwtv-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lwtv-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--panel2);
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: .73rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: .15s;
  flex-shrink: 0;
}
.lwtv-back-btn:hover { border-color: var(--acc); color: var(--txt); }
.lwtv-country-meta { display: flex; flex-direction: column; min-width: 0; }
.lwtv-country-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .96rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwtv-channel-count { font-size: .65rem; color: var(--muted); margin-top: 1px; }

/* Filter row */
.lwtv-filter-row {
  display: flex;
  gap: 7px;
  margin-top: 2px;
}
.lwtv-cat-sel, .lwtv-sort-sel { flex: 1; }

/* ── CHANNEL ROWS ───────────────────────────────────────────── */
.lwtv-ch-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.lwtv-ch-row:hover  { background: var(--panel2); border-color: var(--acc); }
.lwtv-ch-row.on     { background: linear-gradient(135deg,rgba(33,150,243,.12),rgba(13,71,161,.04)); border-color: var(--acc); }
.lwtv-ch-row:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.lwtv-ch-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--line2);
  padding: 3px;
}
.lwtv-ch-ph {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--panel2), var(--panel3));
  border: 1px solid var(--line);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .76rem;
  color: var(--acc);
  letter-spacing: .3px;
}
.lwtv-ch-meta { flex: 1; min-width: 0; }
.lwtv-ch-name {
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwtv-ch-cat {
  font-size: .64rem;
  color: var(--muted);
  text-transform: capitalize;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwtv-ch-fav-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted2);
  transition: color .14s, background .14s;
  border: none;
  background: transparent;
}
.lwtv-ch-fav-btn svg { width: 14px; height: 14px; }
.lwtv-ch-fav-btn:hover { color: var(--gold); background: var(--gold2); }
.lwtv-ch-fav-btn.on   { color: var(--gold); }

/* Section headers inside lists */
.lwtv-list-section-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted2);
}
.lwtv-list-section-hd svg { width: 11px; height: 11px; }
.lwtv-list-section-hd.fav { color: var(--gold); }

/* Retry button */
.lwtv-retry-btn-sm {
  margin-top: 6px;
  background: var(--acc);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  transition: background .15s;
}
.lwtv-retry-btn-sm:hover { background: var(--acc2); }

/* ════════════════════════════════════════════════════════════
   PLAYER MODAL — absolute inside #lwtv-app so it stays within
   the phpFox header/footer and never breaks out of the widget
   ════════════════════════════════════════════════════════════ */
#lwtv-player {
  position: absolute;   /* stays inside #lwtv-app, NOT the viewport */
  inset: 0;
  z-index: 200;         /* above globe + panel but inside the widget */
  display: none;
  background: rgba(20,30,60,.75);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--radius); /* match parent corner rounding */
}
#lwtv-player.show { display: flex; }

.lwtv-player-box {
  width: min(1000px, 92%);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(20,40,100,.25), 0 0 0 1px rgba(33,150,243,.10);
  display: flex;
  flex-direction: column;
  max-height: 92%;   /* fit inside the widget, not the full viewport */
}

/* Player top bar */
.lwtv-player-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #f8fafd, #eef2f8);
  border-bottom: 1px solid var(--line);
}
#lwtv-pl-icon img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  flex-shrink: 0;
}
.lwtv-pl-ph {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--panel2);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .7rem;
  color: var(--acc);
}
.lwtv-pl-info { min-width: 0; flex: 1; }
.lwtv-pl-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--txt);
}
.lwtv-pl-meta {
  font-size: .67rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.lwtv-live-badge {
  color: var(--live);
  font-weight: 700;
  letter-spacing: .3px;
  font-size: .65rem;
}
.lwtv-pl-cat {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: .62rem;
  text-transform: capitalize;
}

.lwtv-player-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lwtv-pl-fav-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--muted2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .14s;
}
.lwtv-pl-fav-btn svg { width: 14px; height: 14px; }
.lwtv-pl-fav-btn:hover { background: var(--gold2); border-color: var(--gold); color: var(--gold); }
.lwtv-pl-fav-btn.on   { background: var(--gold2); border-color: var(--gold); color: var(--gold); }

.lwtv-pl-close {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--txt);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .14s;
}
.lwtv-pl-close:hover { background: var(--live2); border-color: var(--live); color: var(--live); }

/* Video wrapper */
.lwtv-player-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0e1a;
  flex-shrink: 0;
}
.lwtv-player-video video,
.lwtv-player-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

/* Loading / error state overlay */
.lwtv-player-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  background: linear-gradient(180deg, #0a1020, #050810);
  font-size: .82rem;
}
.lwtv-player-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  background: linear-gradient(180deg, #0a1020, #050810);
  font-size: .82rem;
  text-align: center;
}
.lwtv-player-error svg { color: var(--live); opacity: .7; }
.lwtv-retry-btn {
  background: var(--acc);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  transition: background .15s;
}
.lwtv-retry-btn:hover { background: var(--acc2); }

/* ════════════════════════════════════════════════════════════
   PLAYER CONTROLS BAR
   ════════════════════════════════════════════════════════════ */
.lwtv-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 10;
  gap: 10px;
  pointer-events: none;
}
/* Show on hover over the video area */
.lwtv-player-video:hover .lwtv-controls,
.lwtv-controls:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Always show controls when paused */
.lwtv-player-video.paused .lwtv-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Live badge inside controls */
.lwtv-ctrl-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: var(--live);
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.lwtv-ctrl-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: lwtv-pulse 1.5s infinite;
}

/* Button group */
.lwtv-ctrl-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

/* Individual control button */
.lwtv-ctrl-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s, transform .1s;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.lwtv-ctrl-btn:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.08);
}
.lwtv-ctrl-btn:active { transform: scale(.95); }

/* Volume group */
.lwtv-ctrl-volume {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lwtv-vol-track {
  position: relative;
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 4px;
  cursor: pointer;
}
.lwtv-vol-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: var(--acc);
  border-radius: 4px;
  pointer-events: none;
  transition: width .05s;
}
/* Range input sits over the track */
.lwtv-vol-slider {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  height: calc(100% + 16px);
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Fullscreen button — pushed to right */
.lwtv-ctrl-fs {
  margin-left: auto;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   Sources bar */
.lwtv-sources-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  flex-shrink: 0;
  background: var(--panel2);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.lwtv-sources-label {
  font-size: .67rem;
  color: var(--muted);
  white-space: nowrap;
}
.lwtv-sources-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.lwtv-src-btn {
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--txt);
  cursor: pointer;
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  font-size: .68rem;
  font-family: 'Outfit', sans-serif;
  transition: .14s;
}
.lwtv-src-btn:hover { border-color: var(--acc); }
.lwtv-src-btn.on    { background: rgba(41,168,255,.2); border-color: var(--acc); color: var(--glow); font-weight: 700; }

/* span fallbacks for broken images */
span.lwtv-ch-ph, span.lwtv-flag-ph, span.lwtv-pl-ph {
  display: none;
}
span.lwtv-ch-ph  { width:44px;height:44px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--panel2),var(--panel3));
  border:1px solid var(--line2);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.76rem;color:var(--acc);letter-spacing:.3px;
  align-items:center;justify-content:center;flex-shrink:0; }
span.lwtv-flag-ph { width:36px;height:27px;border-radius:4px;
  background:var(--panel3);border:1px solid var(--line2);
  font-family:'Rajdhani',sans-serif;font-size:.65rem;font-weight:700;
  color:var(--acc);letter-spacing:.5px;
  align-items:center;justify-content:center;flex-shrink:0; }
span.lwtv-pl-ph { width:36px;height:36px;border-radius:8px;
  background:var(--panel2);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.7rem;color:var(--acc);
  align-items:center;justify-content:center;flex-shrink:0; }
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #lwtv-app { --panel-w: 300px; }
  .lwtv-search-wrap { max-width: 220px; }
}

@media (max-width: 700px) {
  #lwtv-main { flex-direction: column; }
  #lwtv-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 44%;
  }
  #lwtv-stage { flex: 1; min-height: 230px; }
  #lwtv-regions { top: 8px; gap: 4px; padding: 5px 8px; }
  .lwtv-chip  { padding: 4px 9px; font-size: .62rem; }
  .lwtv-stats { display: none; }
  .lwtv-brand-sub { display: none; }
  .lwtv-player-box { width: 98vw; }
  #lwtv-hdr { padding: 0 12px; gap: 10px; }
}

@media (max-width: 480px) {
  .lwtv-search-wrap { max-width: 160px; }
  #lwtv-search { font-size: .75rem; padding: 7px 26px 7px 28px; }
}

/* ── Fullscreen — native API (video element goes fullscreen) ── */
#lwtv-pl-vid:-webkit-full-screen,
#lwtv-pl-vid:fullscreen {
  width: 100vw  !important;
  height: 100vh !important;
  background: #000;
  object-fit: contain;
}

/* ── Fullscreen — CSS override fallback (.fs-override class) ── */
/* Also handles the case where #lwtv-player itself is the FS element */
#lwtv-player.fs-override,
#lwtv-player:-webkit-full-screen,
#lwtv-player:-moz-full-screen,
#lwtv-player:-ms-fullscreen,
#lwtv-player:fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #000 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#lwtv-player.fs-override .lwtv-player-box,
#lwtv-player:-webkit-full-screen .lwtv-player-box,
#lwtv-player:-moz-full-screen .lwtv-player-box,
#lwtv-player:-ms-fullscreen .lwtv-player-box,
#lwtv-player:fullscreen .lwtv-player-box {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}
#lwtv-player.fs-override .lwtv-player-video,
#lwtv-player:-webkit-full-screen .lwtv-player-video,
#lwtv-player:-moz-full-screen .lwtv-player-video,
#lwtv-player:-ms-fullscreen .lwtv-player-video,
#lwtv-player:fullscreen .lwtv-player-video {
  flex: 1 !important;
  aspect-ratio: unset !important;
}
#lwtv-player.fs-override #lwtv-pl-vid,
#lwtv-player.fs-override #lwtv-pl-yt,
#lwtv-player:-webkit-full-screen #lwtv-pl-vid,
#lwtv-player:-webkit-full-screen #lwtv-pl-yt,
#lwtv-player:-moz-full-screen #lwtv-pl-vid,
#lwtv-player:-moz-full-screen #lwtv-pl-yt,
#lwtv-player:-ms-fullscreen #lwtv-pl-vid,
#lwtv-player:-ms-fullscreen #lwtv-pl-yt,
#lwtv-player:fullscreen #lwtv-pl-vid,
#lwtv-player:fullscreen #lwtv-pl-yt {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}