/* Het ON AIR-teken en de knop "Listen live" — overgenomen uit css/nav.css en css/episodes.css
   van de website. Zie jr-live.js. */

/* het rode teken achter de lopende regel in de voettekst */
.onair { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem;
  padding: .05rem .45rem; border-radius: 4px; background: #d9534f; color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.onair-stip { width: .42rem; height: .42rem; border-radius: 50%; background: #fff;
  animation: onair-klop 1.6s ease-in-out infinite; }
@keyframes onair-klop { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .onair-stip { animation: none; } }
.ee-tijden li.nu-bezig { color: #fff; font-weight: 700; }

/* de band onder de kop van de pagina, zolang déze show wordt uitgezonden */
.onair-band { position: sticky; top: 0; z-index: 68;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .9rem; padding: .5rem 1rem; background: #d9534f; color: #fff;
  font: 600 15px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, .25); }
.onair-band .onair { background: rgba(0, 0, 0, .28); margin-left: 0; font-size: .75rem; }
.onair-band .onair-zin { opacity: .97; }
.onair-knop { border: 0; border-radius: 999px; background: #fff; color: #b3413d; font: inherit;
  font-weight: 700; padding: .25rem 1rem; cursor: pointer; }
.onair-knop:hover { background: #ffe9e8; }
.onair-knop.aan { background: #4a1a19; color: #fff; }

/* de losse knop boven de lijst met uitzendingen */
.jr-band .live { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem .9rem; margin: 0 0 .8rem; }
.jr-band .live-knop { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: 999px; background: #ff5500; color: #fff; font: inherit; font-weight: 700;
  padding: .5rem 1.4rem; cursor: pointer; }
.jr-band .live-knop:hover { background: #e04b00; }
.jr-band .live-knop:active { transform: scale(.98); }
.jr-band .live-knop.aan { background: #1c1c1c; }
.jr-band .live-knop.aan:hover { background: #333; }
.jr-band .live-nu { color: #6c757d; font-size: .82rem; overflow-wrap: anywhere; }
.jr-band .live-nu:empty { display: none; }
.jr-band .live-nu i { margin-right: .3rem; opacity: .65; }

/* in de kleuren van Extra Elvis, net als de kaarten — uit css/elvis-dark.css */
.jr-band.jr-elvis .live-knop { background: #dc0a0a; }
.jr-band.jr-elvis .live-knop:hover { background: #d8b45a; color: #111; }
.jr-band.jr-elvis .live-knop.aan { background: #2a2a2a; }
.jr-band.jr-elvis .live-nu { color: #9b9b9b; }