/* Sound Radio — Listen Live bar */
.sr-player{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;align-items:center;
  gap:.85rem;padding:.6rem clamp(.75rem,3vw,1.5rem);
  background:rgba(38,33,32,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-family:Montserrat,system-ui,sans-serif;font-size:.85rem;
  box-shadow:0 -2px 18px rgba(0,0,0,.22)}
@supports not (backdrop-filter:blur(1px)){.sr-player{background:#262120}}

.sr-player__play{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;
  border:0;border-radius:50%;background:#aa6815;color:#fff;cursor:pointer;
  transition:background .15s ease,transform .15s ease}
.sr-player__play:hover{background:#c27a19;transform:scale(1.05)}
.sr-player__play:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sr-ico--pause{display:none}
.sr-player.is-playing .sr-ico--play{display:none}
.sr-player.is-playing .sr-ico--pause{display:block}

.sr-player__live{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;
  font-weight:700;letter-spacing:.09em;font-size:.68rem}
.sr-dot{width:8px;height:8px;border-radius:50%;background:#7c7572;flex:0 0 8px}
.sr-player__live[data-state="live"] .sr-dot{background:#2ecc5a;animation:srpulse 1.8s ease-in-out infinite}
.sr-player__live[data-state="live"]{color:#2ecc5a}
.sr-player__live[data-state="connecting"] .sr-dot{background:#f0ad2e;animation:srpulse .9s ease-in-out infinite}
.sr-player__live[data-state="connecting"] .sr-live-text::after{content:"\2026"}
.sr-player__live[data-state="error"] .sr-dot{background:#e5484d}
.sr-player__live[data-state="error"]{color:#ff9ea1}
.sr-player__live[data-state="error"] .sr-live-text::after{content:" \2014 unavailable"}
@keyframes srpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sr-dot{animation:none!important}}

.sr-player__title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;opacity:.92}

.sr-player__vol{display:flex;align-items:center;flex:0 0 clamp(80px,14vw,130px)}
.sr-player__vol input[type=range]{width:100%;accent-color:#aa6815;cursor:pointer}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* On a phone the station name is the first thing to go. */
@media (max-width:600px){
  .sr-player__title{display:none}
  .sr-player{gap:.6rem}
}