/* ============================================================
   K - tv-controls.css
   TV focus rings (only under body.tv-mode), card scale-up,
   and the watch-page transport bar + seek toast.
   ============================================================ */

/* --- focus rings: Netflix white ring, no default outline --- */
body.tv-mode :focus { outline: none; }

/* hide-on-scroll must never hide the header in TV mode (spatial nav relies
   on it being reachable, and isVisible() skips `.nav-hidden` anyway) */
body.tv-mode .nav {
  transform: none;
}

body.tv-mode :focus-visible,
body.tv-mode button:focus,
body.tv-mode a:focus,
body.tv-mode [role="button"]:focus,
body.tv-mode [tabindex]:focus {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 10px;
}

body.tv-mode .btn:focus,
body.tv-mode .nav-link:focus,
body.tv-mode .browse-item:focus,
body.tv-mode .drop-item:focus,
body.tv-mode .dock-item:focus,
body.tv-mode .top-search-row:focus,
body.tv-mode .result-card:focus,
body.tv-mode .np-item:focus,
body.tv-mode .episode-row:focus,
body.tv-mode .grid-card:focus,
body.tv-mode .season-select:focus {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 24px rgba(255, 255, 255, 0.28);
}

/* --- horizontal-row cards: scale the artwork, ring the media --- */
body.tv-mode .card:focus { outline: none; }

body.tv-mode .card .card-media {
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

body.tv-mode .card:focus .card-media {
  transform: scale(1.08);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 28px rgba(255, 255, 255, 0.35);
  z-index: 6;
}

body.tv-mode .card:focus .card-poster { transform: scale(1.06); }
body.tv-mode .card:focus .card-filter,
body.tv-mode .card:focus .card-play { opacity: 1; }
body.tv-mode .card:focus .card-title { color: #fff; }

/* grid cards */
body.tv-mode .grid-card:focus img { transform: scale(1.06); }
body.tv-mode .grid-card:focus .gc-overlay { opacity: 1; }
body.tv-mode .grid-card:focus .gc-remove { display: flex; }

/* --- watch page: transport bar + toast --- */
.watch-transport {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.watch-mode.controls-visible .watch-transport,
.watch-transport.show {
  opacity: 1;
  pointer-events: auto;
}

.watch-transport .btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  background: rgba(11, 15, 20, 0.85);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.watch-transport .btn .icon {
  width: 15px;
  height: 15px;
}

.watch-transport .btn:first-child .icon { margin-right: 6px; }
.watch-transport .btn:last-child .icon { margin-left: 6px; }

.watch-toast {
  position: fixed;
  left: 50%;
  bottom: 20vh;
  transform: translateX(-50%);
  z-index: 16;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(11, 15, 20, 0.9);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.watch-toast.show { opacity: 1; }

/* TV remote should still be able to reach hidden watch controls */
body.tv-mode .watch-back:focus,
body.tv-mode .watch-subs-inner:focus-within,
body.tv-mode .watch-transport:focus-within {
  opacity: 1;
  pointer-events: auto;
}