/* Radio Player UK — floating unified player, Phase 1 (station pages).
   Deliberately namespaced: never change existing station-page button styles. */
html { scroll-padding-bottom: 165px; }
body.rpuk-dock-active { padding-bottom: 158px !important; }
#nowPlayingBox { display: none !important; } /* old radio-player.js floating label */
.rpuk-dock, .rpuk-dock *, .rpuk-dock *::before, .rpuk-dock *::after { box-sizing: border-box; }
.rpuk-dock {
  --rd-navy: #090f2f; --rd-cyan: #22b8f0; --rd-purple: #8b5cf6;
  --rd-pink: #ed4fc0;
  position: fixed; z-index: 9000; left: 20px; right: 20px; bottom: 16px;
  padding: 12px 20px 14px; max-height: calc(100dvh - 20px); overflow-y: auto;
  color: white; background: linear-gradient(100deg,#09112f,#152354 53%,#1b285c);
  border: 1px solid rgba(255,255,255,.22); border-radius: 24px;
  box-shadow: 0 18px 58px rgba(6,11,35,.34);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.4; isolation: isolate;
}
.rpuk-dock::before { content:''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg,var(--rd-cyan),var(--rd-purple),var(--rd-pink)); }
.rpuk-dock button, .rpuk-dock input { font: inherit; cursor: pointer; }
.rpuk-dock button:focus-visible, .rpuk-dock a:focus-visible, .rpuk-dock input:focus-visible {
  outline: 3px solid var(--rd-cyan); outline-offset: 3px; }
.rpuk-dock button[hidden], .rpuk-dock [hidden] { display: none !important; }
.rpuk-dock__inner { max-width: 1190px; margin: auto; display: grid; align-items: center;
  grid-template-columns: minmax(250px,1.3fr) auto minmax(170px,.6fr); gap: 22px; min-height: 76px; }
.rpuk-dock__station { min-width: 0; display: flex; align-items: center; gap: 14px; }
.rpuk-dock__art { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 13px;
  display: grid; place-items: center; color: white; font-size: 19px; font-weight: 950;
  letter-spacing: -.05em; background: linear-gradient(135deg,#334bc3,#0695ab);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 17px rgba(0,0,0,.19); overflow: hidden; }
.rpuk-dock__art img { display: block; width: 100%; height: 100%; object-fit: contain; background: white; }
.rpuk-dock__meta { min-width: 0; flex: 1 1 auto; }
.rpuk-dock__label { display: inline-flex; align-items: center; gap: 7px; color: #92dfff;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 850; }
.rpuk-dock__label::before { content:''; width: 6px; height: 6px; border-radius: 50%; background:#53e2c6; }
.rpuk-dock__name { font-size: 1.08rem; font-weight: 850; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin: 4px 0 3px; color: #fff; }
.rpuk-dock__now-row { display: flex; align-items: center; gap: 9px; min-width: 0;
  max-width: 100%; min-height: 26px; margin-top: 4px; }
.rpuk-dock__status { flex: 1 1 0%; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: .75rem; color: #d5e1f6; line-height: 1.5; }
.rpuk-dock__status-text { display: inline-block; white-space: nowrap; vertical-align: middle; }
.rpuk-dock__status-text.is-scrolling { animation: rpuk-dock-ticker var(--rd-duration, 13s) ease-in-out infinite; }
@keyframes rpuk-dock-ticker { 0%,14% {transform:translateX(0)} 65%,84% {transform:translateX(calc(-1 * var(--rd-travel, 0px)))} 100% {transform:translateX(0)} }
.rpuk-dock__artist { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; max-width: min(53%, 170px); margin: 0; padding: 5px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  border-radius: 999px; border: 1px solid rgba(92,224,234,.52);
  background: rgba(35,190,215,.12); color: #aaf2fa; font-size: .69rem; font-weight: 850; line-height: 1.2;
  box-shadow: 0 3px 12px rgba(0,0,0,.1); }
.rpuk-dock__artist:hover, .rpuk-dock__artist:focus-visible { background: rgba(35,190,215,.26); color: #fff; }
.rpuk-dock__buttons { display: flex; align-items: center; gap: 12px; }
.rpuk-dock__icon { width: 39px; height: 39px; display: grid; place-items: center; padding:0;
  border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: rgba(255,255,255,.075); color:white; }
.rpuk-dock__icon:hover { background: rgba(255,255,255,.16); }
.rpuk-dock__icon svg { width: 17px; height: 17px; fill: currentColor; }
.rpuk-dock__main-play { width: 58px; height: 58px; display: grid; place-items: center;
  border: 0; border-radius: 50%; color: #09204e; background: white;
  box-shadow: 0 8px 24px rgba(2,10,35,.3); }
.rpuk-dock__main-play:hover { background: #bfeefe; transform: translateY(-1px); }
.rpuk-dock__main-play svg { width: 24px; height: 24px; fill: currentColor; }
.rpuk-dock__extras { display: flex; justify-content: flex-end; gap: 13px; align-items: center; }
.rpuk-dock__volume-icon { width: 19px; height: 19px; fill: #cfdbf4; flex: none; }
.rpuk-dock__volume { accent-color: #56d0fa; width: min(100%, 113px); min-width: 55px; }
.rpuk-dock__expand { color: #cfd9ee; font-size: .8rem; border: 0; padding: 9px 5px;
  background: transparent; font-weight: 700; white-space: nowrap; }
.rpuk-dock__expand:hover { color: #fff; }
.rpuk-dock__drawer { max-width: 1190px; margin: 12px auto 0; padding: 20px 3px 5px;
  border-top: 1px solid rgba(255,255,255,.13); display: none; }
.rpuk-dock.is-expanded .rpuk-dock__drawer { display: block; }
.rpuk-dock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rpuk-dock__block { padding: 17px; border-radius: 15px; background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12); }
.rpuk-dock__block strong { display: block; margin-bottom: 7px; color: #fff; }
.rpuk-dock__block p { margin: 0; font-size: .86rem; color: #d3def3; line-height: 1.6; }
.rpuk-dock__artist-block { margin-bottom: 16px; }
.rpuk-dock__results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 11px; }
.rpuk-dock__result { display: flex; align-items: center; min-width: 0; gap: 11px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 13px; padding: 11px 12px;
  color: #fff; background: rgba(255,255,255,.055); text-decoration: none; }
.rpuk-dock__result:hover { background: rgba(255,255,255,.12); color: #fff; }
.rpuk-dock__result img { flex: 0 0 38px; width: 38px; height: 38px; object-fit: contain;
  border-radius: 9px; background: #eaf2ff; }
.rpuk-dock__result-text { min-width: 0; }
.rpuk-dock__result-text strong { margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.rpuk-dock__result-text small { color: #c9d8f1; display: block; font-size: .74rem; }
.rpuk-dock__sr { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 820px) {
  body.rpuk-dock-active { padding-bottom: 136px !important; }
  .rpuk-dock { left: 10px; right: 10px; bottom: 10px; padding: 10px 15px 12px; border-radius: 20px; }
  .rpuk-dock__inner { grid-template-columns: minmax(0,1fr) auto; gap: 13px; min-height: 66px; }
  .rpuk-dock__extras { display: none; }
  .rpuk-dock__status { font-size: .7rem; }
  .rpuk-dock__artist { font-size: .66rem; padding: 5px 8px; }
  .rpuk-dock__art { flex-basis: 51px; width: 51px; height: 51px; border-radius: 11px; font-size: 16px; }
  .rpuk-dock__station { gap: 11px; }
  .rpuk-dock__buttons { gap: 7px; }
  .rpuk-dock__main-play { width: 49px; height: 49px; }
  .rpuk-dock__icon { width: 35px; height: 35px; }
  .rpuk-dock__grid, .rpuk-dock__results { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  body.rpuk-dock-active { padding-bottom: 166px !important; }
  .rpuk-dock { left: 8px; right: 8px; bottom: 8px; border-radius: 17px; }
  .rpuk-dock__name { font-size: .94rem; }
  .rpuk-dock__inner { position: relative; min-height: 91px; padding-bottom: 30px; }
  .rpuk-dock__now-row { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; min-height: 25px; gap: 7px; }
  .rpuk-dock__status { font-size: .69rem; }
  .rpuk-dock__artist { max-width: min(44%, 154px); font-size: .63rem; padding: 5px 8px; }
  .rpuk-dock__label { font-size: .59rem; }
  .rpuk-dock__buttons .rpuk-dock__stop { display: none; }
  .rpuk-dock__expand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rpuk-dock__status-text.is-scrolling { animation: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}