/* De spelerbalk onderaan — zie jr-speler.js. Overgenomen uit css/velvet-player.css van de website;
   de balk staat hier onderaan in plaats van bovenaan, en het stuk voor de schil (#site,
   body.sc-shell) is eruit omdat die er hier niet is. */
:root { --jr-balk-h: 56px; }

#jr-speler-balk { position: fixed; bottom: 0; left: 0; right: 0; min-height: 56px; z-index: 10000;
  background: #2e2e2e; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px;
  padding: 6px 10px; box-sizing: border-box;
  box-shadow: inset 0 1px 0 #4a4a4a, 0 -2px 8px rgba(0, 0, 0, .45); }
#jr-speler { flex: 1 1 200px; height: 20px; border: 0; min-width: 120px; }

#jr-skip { flex: 0 0 auto; display: flex; gap: 4px; }
#jr-skip button { position: relative; width: 34px; height: 32px; border: 1px solid #555; border-radius: 4px;
  background: #2b2b2b; color: #fff; cursor: pointer; font-size: 15px; padding: 0; }
#jr-skip button span { position: absolute; left: 0; right: 0; bottom: 1px; font: bold 8px/1 Arial, sans-serif; color: #ff5500; }
#jr-skip button:hover { border-color: #ff5500; }

#jr-door { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 0; color: #ccc;
  font: 13px/1 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; white-space: nowrap; }
#jr-door input { accent-color: #ff5500; }

#jr-dicht { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #444;
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; margin-left: auto; }
#jr-dicht:hover { background: #ff5500; }

/* hint boven de ▶ van de widget als de muziek niet vanzelf start (iOS en Safari staan dat vaak niet toe) */
#jr-hint { position: absolute; bottom: 100%; left: 8px; margin-bottom: 10px; background: #ff5500; color: #fff;
  font: bold 15px/1.2 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; padding: 9px 14px;
  border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); cursor: pointer; white-space: nowrap;
  animation: jr-hint-wip 1.2s ease-in-out infinite; }
#jr-hint small { display: block; font-weight: normal; font-size: 12px; opacity: .9; margin-top: 2px; }
#jr-hint .jr-hint-pijl { position: absolute; bottom: -8px; left: 14px; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ff5500; }
#jr-hint[hidden] { display: none; }
@keyframes jr-hint-wip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #jr-hint { animation: none; } }

/* de radio in dezelfde balk — uit css/velvet-player.css */
#jr-live { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff;
  font: 13px/1.25 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
#jr-live[hidden] { display: none; }
#jr-live-play { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #ff5500; color: #fff; cursor: pointer; font-size: 14px; padding: 0; }
#jr-live-play:hover { background: #e04b00; }
#jr-live-naam { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: #ddd; }
#jr-live-naam b { color: #fff; }
#jr-live-lamp { width: 8px; height: 8px; border-radius: 50%; background: #e33; box-shadow: 0 0 6px #e33;
  animation: jr-live-knip 1.6s ease-in-out infinite; }
@keyframes jr-live-knip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #jr-live-lamp { animation: none; } }
#jr-live-nu { flex: 1 1 auto; min-width: 0; color: #bdbdbd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575px) { #jr-live-naam { display: none; } }

/* ruimte onderaan de pagina zodat de balk niets afdekt */
body.jr-speler-aan { padding-bottom: var(--jr-balk-h); }

/* --- de schil ---------------------------------------------------------------------------------
   Zodra er iets speelt wordt deze pagina de buitenkant: de balk blijft staan en de site komt in
   een venster erboven. Alles wat er verder in <body> stond gaat uit. Dat gaat met :not() op de
   twee eigen elementen, en niet op de naam van een thema-wikkel, zodat dit blijft werken als het
   thema of Elementor iets anders neerzet. */
body.jr-schil { overflow: hidden; padding-bottom: 0; }
body.jr-schil > *:not(#jr-speler-balk):not(#jr-site) { display: none !important; }
#jr-site { position: fixed; top: 0; left: 0; width: 100%; height: calc(100% - var(--jr-balk-h));
  border: 0; background: #0b0b0b; z-index: 9999; }

/* telefoons: alles op één smalle rij */
@media (max-width: 575px) { #jr-door { display: none; } #jr-speler { min-width: 90px; } }

/* 'Now playing' op de kaart en de gloed eromheen — uit css/velvet-player.css */
.jr-band .card-reveal-container .card-header { position: relative; z-index: 2; }
.jr-band .card-reveal-container .card-header .playericon { z-index: 3; }
.jr-band .card-header .now-playing { position: absolute; top: 8px; left: 8px; z-index: 3; background: #ff5500;
  color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .03em; padding: .2rem .55rem;
  border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.jr-band .card-header .now-playing.paused { background: #666; }
.jr-band .card.is-playing { box-shadow: 0 0 0 3px #ff5500, 0 0 22px 6px rgba(255, 85, 0, .55) !important;
  animation: jr-gloed 2.4s ease-in-out infinite; }
@keyframes jr-gloed {
  0%, 100% { box-shadow: 0 0 0 3px #ff5500, 0 0 18px 4px rgba(255, 85, 0, .45); }
  50%      { box-shadow: 0 0 0 3px #ff5500, 0 0 30px 10px rgba(255, 85, 0, .75); }
}
@media (prefers-reduced-motion: reduce) { .jr-band .card.is-playing { animation: none; } }