:root { --brand-green: #16a34a; }

body { background:#fff; }
.sidebar { border-right:1px solid #eee; }

.group-list .list-group-item { cursor:pointer; }
.channel-card { cursor:pointer; transition:transform .05s ease; }
.channel-card:hover { transform:translateY(-1px); box-shadow:0 .25rem .5rem rgba(0,0,0,.05); }
.channel-logo { width:38px; height:38px; object-fit:contain; border-radius:.375rem; flex:0 0 auto; }

.video-wrap { background:#000; border-radius:.5rem; overflow:hidden; }
#video { width:100%; height:auto; aspect-ratio:16/9; background:#000; }

.sticky-header { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; }

#leftScroll { overflow-y:auto; }
.col-left  { order:2; }
.col-right { order:1; }
@media (min-width: 992px) {
  .col-left  { order:1; min-height:100vh; }
  .col-right { order:2; }
}
@media (max-width: 991.98px) {
  #leftScroll { max-height:45vh; }
  .video-wrap { margin-top:.25rem; }
}

.now-playing {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border:1px solid #e9ecef; border-left:4px solid var(--brand-green);
  border-radius:.5rem; background:#f8f9fa; color:#111; font-weight:600;
}
.now-playing .dot { width:10px; height:10px; border-radius:50%; background:var(--brand-green); display:inline-block; }
.pill-audio {
  font-weight:600; border:1px solid rgba(22,163,74,.2);
  color:var(--brand-green); background:rgba(22,163,74,.08);
}

/* reCAPTCHA badge visibility toggled by JS */
.grecaptcha-badge { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body.show-badge .grecaptcha-badge { visibility: visible; opacity: 1; pointer-events: auto; }

/* --- Tiny LIVE dot after brand (WebPlayer only) --- */
.wp-live-dot{
  position:relative; width:.7rem; height:.7rem; border-radius:50%;
  background:#dc3545; flex:0 0 auto;
  animation: wpPulse 2.4s ease-in-out infinite;
}
.wp-live-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(220,53,69,.24);
  animation: wpRipple 2.4s ease-in-out infinite;
}
@keyframes wpPulse{
  0%{transform:scale(.92)}
  50%{transform:scale(1.12)}
  100%{transform:scale(.92)}
}
@keyframes wpRipple{
  0%{box-shadow:0 0 0 0 rgba(220,53,69,.22)}
  50%{box-shadow:0 0 0 .45rem rgba(220,53,69,.10)}
  100%{box-shadow:0 0 0 0 rgba(220,53,69,0)}
}

/* --- Animated playlist loader --- */
.ls-loading{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem; background:#f8f9fa;
  border:1px solid #e9ecef; border-left:4px solid var(--brand-green);
  border-radius:.5rem; font-weight:600; color:#111;
  font-size:1rem !important;      /* break out of parent .small */
  min-height:48px;                 /* presence */
}
.ls-loading .label{ font-size:1.05rem; font-weight:600; }
.ls-loading .dots{ display:inline-flex; gap:.35rem; margin-left:.25rem; transform:translateY(1px); }
.ls-loading .dot{
  display:block; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--brand-green);
  animation: lstvDot 1.05s ease-in-out infinite both;
}
.ls-loading .dot:nth-child(2){ animation-delay:.15s; }
.ls-loading .dot:nth-child(3){ animation-delay:.30s; }
@keyframes lstvDot{
  0%, 80%, 100% { transform: translateY(0) scale(.85); opacity:.55; }
  40%           { transform: translateY(-6px) scale(1);   opacity:1;  }
}