/**
 * YouTube lab player only — /plyr-stock/
 * Scoped under .ta-yt-player so zplayer-skin.css (audio bar) never applies here.
 *
 * Stock Plyr video chrome + fixed 16:9 stage + WTV playlist list.
 */

.ta-yt-player {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5rem;
  box-sizing: border-box;
}

/* ---- Stage: locked 16:9 (4:3 YT videos letterbox, don't resize box) ---- */
.ta-yt-player .ta-yt-stage {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* While idle, show playlist-track poster behind/through the embed chrome */
.ta-yt-player .ta-yt-stage .plyr__poster {
  background-size: cover !important;
  background-position: center !important;
}

.ta-yt-player .ta-yt-stage .plyr {
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* Do not inherit audio-bar CSS variables */
  --plyr-color-main: #00b3ff;
  --plyr-video-control-color: #fff;
  --plyr-video-control-background-hover: var(--plyr-color-main, #00b3ff);
  aspect-ratio: 16 / 9;
}

.ta-yt-player .ta-yt-stage .plyr__video-wrapper,
.ta-yt-player .ta-yt-stage .plyr__video-embed,
.ta-yt-player .ta-yt-stage .plyr__video-embed__container {
  height: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ta-yt-player .ta-yt-stage .plyr--video {
  /* Stock Plyr video look — not the charcoal audio skin */
  background: #000;
}

/* ---- Playlist list (YouTube section only) ---- */
.ta-yt-player .yt-playlist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
  border: 1px solid #2a2a2a;
  background: #151515;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #111;
}

.ta-yt-player .yt-playlist::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ta-yt-player .yt-playlist::-webkit-scrollbar-track {
  background: #111;
  border-left: 1px solid #222;
}
.ta-yt-player .yt-playlist::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 6px;
  border: 2px solid #111;
  background-clip: padding-box;
}
.ta-yt-player .yt-playlist::-webkit-scrollbar-thumb:hover {
  background: #FF4C41;
  border: 2px solid #111;
  background-clip: padding-box;
}
.ta-yt-player .yt-playlist::-webkit-scrollbar-corner {
  background: #111;
}

.ta-yt-player .yt-playlist li {
  border-bottom: 1px solid #222;
}

.ta-yt-player .yt-playlist li:last-child {
  border-bottom: 0;
}

.ta-yt-player .yt-playlist a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  color: #bbb;
  text-decoration: none;
  font-size: 0.9rem;
}

.ta-yt-player .yt-playlist a:hover {
  color: #fff;
  background: #1c1c1c;
}

/* Stock Plyr cyan — NOT zplayer/audio green (#1ec503) */
.ta-yt-player .yt-playlist li.is-playing a {
  color: #00b3ff;
}

.ta-yt-player .yt-playlist li.is-playing a:hover {
  color: #5ccfff;
  background: #1a2430;
}

.ta-yt-player .yt-playlist img {
  width: 64px;
  height: 36px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 2px;
  background: #000;
}

.ta-yt-player .yt-playlist .pls-meta {
  min-width: 0;
}

.ta-yt-player .yt-playlist .pls-title {
  font-weight: 600;
  display: block;
}

.ta-yt-player .yt-playlist .pls-author {
  font-size: 0.8rem;
  color: #777;
}

.ta-yt-player .yt-playlist li.is-playing .pls-author {
  color: inherit;
  opacity: 0.85;
}