/* ── UPlayer custom styles ─────────────────────────────────────────────── */

/* ── Scrollbar utilities ──────────────────────────────────────────────── */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Page-wide thin dark scrollbars */
* { scrollbar-width: thin; scrollbar-color: #1f2937 transparent; }
*::-webkit-scrollbar       { width: 4px; height: 4px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  { background: #1f2937; border-radius: 4px; }

/* ── Line clamp utilities ─────────────────────────────────────────────── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── YouTube TV App Shell ──────────────────────────────────────────────── */
/* Ensure the body fills the viewport when in app-shell mode */
body.h-screen { overflow: hidden; }

/* Left panel height on mobile — player gets the top, panel gets the rest */
@media (max-width: 1023px) {
  #left-panel { min-height: 180px; }
}

/* ── Panel tabs ───────────────────────────────────────────────────────── */
.panel-tab {
  border-bottom-width: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* ── Channel cards ────────────────────────────────────────────────────── */
.channel-card {
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.channel-card:hover { transform: translateY(-2px); }

/* ── Player controls ──────────────────────────────────────────────────── */
.ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  color: #d1d5db;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.ctrl-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* Controls bar fade-in on hover */
.player-wrapper .controls { transition: opacity 0.2s ease; }
.player-wrapper:hover .controls,
.player-wrapper:focus-within .controls { opacity: 1 !important; }

/* ── Go Live button ───────────────────────────────────────────────────── */
.go-live-btn {
  gap: 4px;
  padding: 3px 8px !important;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: rgba(220, 38, 38, 0.85);
  color: #fff !important;
  cursor: pointer;
  transition: background 0.15s;
}
.go-live-btn:hover {
  background: #dc2626 !important;
}

/* Pulse dot inside Go Live button */
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.live-dot-pulse { animation: live-dot-pulse 1.2s ease-in-out infinite; }

/* ── CC button active state ───────────────────────────────────────────── */
#ctrl-cc[data-cc-active="true"] { color: #dc2626; }

/* ── Range inputs ─────────────────────────────────────────────────────── */
input[type=range] { accent-color: #dc2626; }

/* ── Fullscreen ───────────────────────────────────────────────────────── */
:-webkit-full-screen .player-wrapper { background: #000; }
:-moz-full-screen     .player-wrapper { background: #000; }
:fullscreen            .player-wrapper { background: #000; }

/* ── LIVE badge pulse ─────────────────────────────────────────────────── */
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.animate-pulse { animation: pulse-live 2s ease-in-out infinite; }

/* ── Toast ────────────────────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.2s ease forwards; }

/* ── Guide channel list ───────────────────────────────────────────────── */
#guide-channel-list { scrollbar-width: thin; scrollbar-color: #1f2937 transparent; }
#guide-channel-list::-webkit-scrollbar { width: 3px; }
#guide-channel-list::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 2px; }

/* ── Schedule timeline ────────────────────────────────────────────────── */
#schedule-timeline { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #1f2937 transparent; }
#schedule-timeline::-webkit-scrollbar { height: 3px; }
#schedule-timeline::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 2px; }

/* ── Admin table ──────────────────────────────────────────────────────── */
#ch-tbody tr { border-bottom: 1px solid #1f2937; }

/* ── Category tabs ────────────────────────────────────────────────────── */
#category-tabs { scrollbar-width: none; }
#category-tabs::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Mobile overrides — YouTube TV app feel
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile search overlay ─────────────────────────────────────────────── */
/* Default: search is hidden on mobile (shown via JS toggle) */
@media (max-width: 639px) {
  .uplayer-search {
    /* Out of flow until activated */
    position: fixed !important;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 200;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px 8px;
    background: rgba(0, 0, 0, 0.97);
    border-bottom: 1px solid #1f2937;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Hidden until JS adds .search-active */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .uplayer-search.search-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Larger input on mobile */
  .uplayer-search #search-input {
    background: #111827;
    border-color: #374151;
    border-radius: 12px;
    padding: 12px 40px 12px 42px;
    font-size: 16px; /* prevents iOS zoom */
    color: #fff;
  }

  /* Show close button on mobile */
  .uplayer-search #mobile-search-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Results: full-width card below the input */
  #search-results {
    position: static !important;
    margin-top: 8px;
    border-radius: 12px;
    max-height: 60vh;
    border-color: #374151;
  }

  /* Bigger touch targets in results */
  #search-results > button {
    padding: 14px 16px !important;
    min-height: 60px;
    border-bottom: 1px solid #111827;
  }
  #search-results > button:last-child { border-bottom: none; }
  #search-results > button img { width: 42px !important; height: 42px !important; }
  #search-results > button span { font-size: 15px !important; }
  #search-results > p { padding: 16px !important; font-size: 14px !important; }

  /* Nav links: shrink text to free up space for search btn */
  header nav a { padding-left: 8px; padding-right: 8px; font-size: 12px; }
}

/* ── Guide channel list: bigger touch targets on mobile ────────────────── */
@media (max-width: 1023px) {
  #guide-channel-list > button {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 58px;
  }

  #guide-channel-list > button img,
  #guide-channel-list > button > div:first-of-type {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ── Channel grid: 2-col on small screens ──────────────────────────────── */
@media (max-width: 480px) {
  #channel-rows .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Slightly larger logo in 2-col cards */
  #channel-rows .channel-card img,
  #channel-rows .channel-card > div > div { width: 52px !important; height: 52px !important; }
}

/* ── Left panel: a bit taller on mobile so more channels show ──────────── */
@media (max-width: 1023px) {
  #left-panel { height: 50vh !important; }
}

/* ── Category pills: larger tap area on mobile ─────────────────────────── */
@media (max-width: 639px) {
  .category-tab { padding: 8px 14px !important; font-size: 13px !important; }
  .guide-cat    { padding: 8px 14px !important; font-size: 13px !important; }
}