/* ------------------------------------------------------------------
   Sing Song Radio - station front end
   Added alongside the vendor stylesheet; main.css is left untouched.
   ------------------------------------------------------------------ */

:root {
    --ssr-bar-height: 58px;
    --ssr-base: #cc2e94;
    --ssr-base-rgb: 204, 46, 148;
}

/* ---------- compact station bar, pinned to the top of every page ---------- */

.radio-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ssr-bar-height);
    z-index: 1030;
    background: rgba(11, 11, 18, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.radio-bar__shape {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
}

.radio-bar__shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radio-bar__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    max-width: 1600px;
    margin: 0 auto;
}

.radio-bar__toggle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--ssr-base);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 0 rgba(var(--ssr-base-rgb), 0.55);
}

.radio-bar__toggle:hover {
    transform: scale(1.06);
}

.radio-bar.is-playing .radio-bar__toggle {
    animation: ssrPulse 2.4s infinite;
}

.radio-bar__toggle i {
    margin-left: 2px;
}

.radio-bar.is-playing .radio-bar__toggle i {
    margin-left: 0;
}

.radio-bar__live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    padding: 4px 10px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.radio-bar__dot,
.onair-card__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b52;
    display: inline-block;
    animation: ssrBlink 1.4s infinite;
}

.radio-bar__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.radio-bar__station {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.radio-bar__track {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-bar__with {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

/* the equalizer only animates while audio is actually playing */
.radio-bar__eq,
.onair-card__eq {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}

.radio-bar__eq span,
.onair-card__eq span {
    display: block;
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: var(--ssr-base);
    opacity: 0.45;
}

.radio-bar.is-playing .radio-bar__eq span,
.radio-bar.is-playing .onair-card__eq span {
    opacity: 1;
    animation: ssrBars 0.9s ease-in-out infinite;
}

.radio-bar.is-playing .radio-bar__eq span:nth-child(2),
.radio-bar.is-playing .onair-card__eq span:nth-child(2) { animation-delay: 0.12s; }
.radio-bar.is-playing .radio-bar__eq span:nth-child(3),
.radio-bar.is-playing .onair-card__eq span:nth-child(3) { animation-delay: 0.24s; }
.radio-bar.is-playing .radio-bar__eq span:nth-child(4),
.radio-bar.is-playing .onair-card__eq span:nth-child(4) { animation-delay: 0.36s; }
.radio-bar.is-playing .radio-bar__eq span:nth-child(5),
.radio-bar.is-playing .onair-card__eq span:nth-child(5) { animation-delay: 0.48s; }
.radio-bar.is-playing .onair-card__eq span:nth-child(6) { animation-delay: 0.60s; }
.radio-bar.is-playing .onair-card__eq span:nth-child(7) { animation-delay: 0.72s; }
.radio-bar.is-playing .onair-card__eq span:nth-child(8) { animation-delay: 0.84s; }

.radio-bar__volume {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-bar__mute {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.radio-bar__mute:hover {
    color: #fff;
}

#radioVolume {
    width: 92px;
    height: 4px;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
}

#radioVolume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ssr-base);
    border: 0;
}

#radioVolume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ssr-base);
    border: 0;
}

/* The vendor header is fixed at top:0. Move it below the bar and push the
   document down by the same amount so nothing ends up hidden underneath. */
.header {
    top: var(--ssr-bar-height) !important;
}

body {
    padding-top: var(--ssr-bar-height);
}

/* keep the on-air card clear of the fixed bar on short viewports */
.hero-onair {
    padding-top: var(--ssr-bar-height);
}

@media (max-width: 991px) {
    .radio-bar__volume {
        display: none;
    }
}

@media (max-width: 575px) {
    :root {
        --ssr-bar-height: 52px;
    }

    .radio-bar__inner {
        gap: 10px;
        padding: 0 12px;
    }

    .radio-bar__live,
    .radio-bar__eq {
        display: none;
    }

    .radio-bar__track {
        font-size: 13px;
    }
}

/* ---------- on-air card over the hero slider ---------- */

.hero {
    position: relative;
}

.hero-onair {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 3;
}

.hero-onair .container {
    width: 100%;
}

.onair-card {
    pointer-events: auto;
    max-width: 560px;
    padding: 28px 30px;
    border-radius: 18px;
    background: rgba(12, 12, 20, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.onair-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.onair-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 40px;
    background: rgba(255, 59, 82, 0.16);
    border: 1px solid rgba(255, 59, 82, 0.4);
}

.onair-card__clock {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}

.onair-card__station {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 20px;
    color: #fff;
}

.onair-card__row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.onair-card__play {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: var(--ssr-base);
    color: #fff;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    animation: ssrPulse 2.6s infinite;
}

.onair-card__play:hover {
    transform: scale(1.05);
}

.onair-card__play i {
    margin-left: 3px;
}

.radio-bar.is-playing ~ * .onair-card__play i,
body.ssr-playing .onair-card__play i {
    margin-left: 0;
}

.onair-card__now {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onair-card__label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.onair-card__title {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onair-card__sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.onair-card__eq {
    height: 34px;
}

.onair-card__eq span {
    width: 4px;
}

.onair-card__next {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.onair-card__time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

.onair-card__schedule {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
}

.onair-card__schedule li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.onair-card__slot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .onair-card {
        padding: 22px 20px;
    }

    .onair-card__station {
        font-size: 26px;
    }

    .onair-card__play {
        width: 54px;
        height: 54px;
        font-size: 21px;
    }

    .onair-card__schedule {
        grid-template-columns: 1fr;
    }
}

/* ---------- the hero on a phone ----------

   The card is centred over the slide by absolute positioning, which only
   works while the slide is taller than the card. Below xl the slide loses
   most of its padding and the card keeps its full height - the song titles
   are whatever is on air, so it can be two lines taller still - and it ran
   out past both ends of the hero: under the fixed header at the top and over
   the section below at the bottom.

   So on narrow screens the card stops floating. It sits in the flow, clear of
   the radio bar and the header, and the slider follows it as a banner. The
   hero then grows with the card instead of clipping it, whatever is playing. */

@media (max-width: 991px) {
    .hero-onair {
        position: static;
        display: block;
        pointer-events: auto;
        /* The body already leaves room for the fixed bar; this clears the
           header that hangs under it (logo 4.25rem inside 0.9375rem of
           padding, so about 80px) and then some, so the card opens the page
           with air above it rather than tucked under the logo. */
        padding: 124px 0 22px;
    }

    .onair-card {
        max-width: 100%;
        padding: 22px 20px;
    }

    /* The slide has nothing to say on a phone: its only column is
       d-none d-xl-block, so below 1200px it was a full-bleed JPEG and a row
       of dots and nothing else. Hidden, the hero is the on-air card, and the
       page reaches the app block and the first section that much sooner. */
    .hero-slider {
        display: none;
    }

    /* ...which leaves the card on bare background, so the hero brings its
       own light with it. */
    .hero {
        background:
            radial-gradient(120% 100% at 50% 0%, rgba(var(--ssr-base-rgb, 204, 46, 148), 0.18) 0%, rgba(var(--ssr-base-rgb, 204, 46, 148), 0) 62%),
            radial-gradient(90% 80% at 85% 10%, rgba(79, 172, 249, 0.14) 0%, rgba(79, 172, 249, 0) 60%);
    }
}

@media (max-width: 575px) {
    .hero-onair {
        padding-top: 112px;        /* the logo is smaller here, so is the header */
    }

    .onair-card__row {
        gap: 14px;
    }

    /* The bars are decoration; the title needs the width more than they do. */
    .onair-card__eq {
        display: none;
    }
}

/* ---------- shared animations ---------- */

@keyframes ssrBars {
    0%, 100% { height: 4px; }
    50%      { height: 18px; }
}

@keyframes ssrBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@keyframes ssrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--ssr-base-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(var(--ssr-base-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ssr-base-rgb), 0); }
}

/* -----------------------------------------------------------------------
   Autoplay was refused by the browser. The bar asks for the one tap that
   the autoplay policy requires before sound is allowed.
   ----------------------------------------------------------------------- */
.radio-bar__hint {
    display: none;
}

/* The visitor pressed pause. It holds on every page of the site until they
   press play or close the browser, so the bar says why it is silent. */
.radio-bar.is-paused .radio-bar__hint,
.radio-bar.is-blocked .radio-bar__hint {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ssr-base);
}

.radio-bar.is-blocked .radio-bar__toggle {
    animation: ssrPulse 1.6s infinite;
}

/* The station is already playing, silently - so it is the sound that is being
   asked for, and the speaker is the control to point at, not the play button
   (which is showing a pause and would be the wrong thing to press). */
.radio-bar.is-muted .radio-bar__toggle {
    animation: none;
}

.radio-bar.is-muted .radio-bar__mute {
    animation: ssrPulse 1.6s infinite;
    color: var(--ssr-base);
}

@media (max-width: 575px) {
    .radio-bar.is-paused .radio-bar__hint,
    .radio-bar.is-blocked .radio-bar__hint {
        font-size: 11px;
        letter-spacing: 0;
    }

    .radio-bar.is-paused .radio-bar__meta,
    .radio-bar.is-blocked .radio-bar__meta {
        display: none;
    }
}

/* The subtitle is written by the server and is often empty (a station ident, a
   live takeover). Only space it away from the title when it actually has text. */
.radio-bar__with:not(:empty) {
    margin-left: 6px;
}