html,
body.rb-player-page {
    min-height: 100%;
}

body.rb-player-page {
    margin: 0;
    color: #fff;
    background:
        linear-gradient(rgba(8, 58, 55, 0.82), rgba(8, 58, 55, 0.9)),
        url('/assets/images/radiobury-hero.png') center / cover fixed;
}

.rb-player-page__main {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.rb-player-page__stage {
    width: min(100%, 920px);
}

.rb-player-card {
    width: 100%;
}

.rb-player-card audio {
    display: none;
}

.rb-live-player__button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.6rem;
    padding: 0.45rem 1.35rem 0.45rem 0.45rem;
    border: 0;
    border-radius: 999px;
    color: #07150f;
    background: var(--rb-green, #60BF7D);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.rb-live-player__button:hover {
    background: #72ca8d;
    transform: translateY(-1px);
}

.rb-live-player__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.rb-live-player__button:disabled {
    cursor: wait;
    opacity: 0.78;
}

.rb-live-player__icon {
    width: 3.7rem;
    height: 3.7rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--rb-green, #60BF7D);
    background: #000;
    font-size: 1.15rem;
}




.rb-live-player__button.is-loading .rb-live-player__icon i {
    animation: rb-player-spin 0.9s linear infinite;
}

.rb-live-player__button.has-error {
    color: #fff;
    background: #a9383d;
}

/* Never leave an unexplained empty artwork column. */
.rb-player-card .rb-track__fallback:not([hidden]) {
    display: grid;
}

.rb-player-page__back {
    margin: 0.85rem 0 0;
    text-align: center;
}

.rb-player-page__back a {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    text-decoration: none;
}

.rb-player-page__back a:hover,
.rb-player-page__back a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

@keyframes rb-player-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .rb-player-page__main {
        display: block;
        padding: 0.45rem;
    }

    .rb-player-card {
        border-radius: 22px;
    }

    .rb-live-player__button {
        min-height: 4rem;
    }

    .rb-live-player__icon {
        width: 3.15rem;
        height: 3.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-live-player__button {
        transition: none;
    }
}

/* Exact current embedded-player play/pause geometry */
.rb-live-player__button:not(.is-loading):not(.has-error)
.rb-live-player__icon {
    background: transparent;
}

.rb-live-player__icon .fa-play,
.rb-live-player__icon .fa-pause {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.rb-live-player__icon .fa-play {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M23 46C35.7025 46 46 35.7025 46 23S35.7025 0 23 0 0 10.2975 0 23s10.2975 23 23 23ZM16.56 11.04l2.5089 1.7122v20.8472L16.56 35.3088V11.04Zm5.0182 3.0109 2.5089 1.7123v14.8252l-2.5089 1.7094V14.0509Zm5.0181 3.4213 2.5089 1.7123v7.9826l-2.5089 1.7094V17.4722Zm5.0182 3.4217L34.96 23.1758l-3.3455 2.2819v-4.5638Z'/%3E%3C/svg%3E");
}

.rb-live-player__icon .fa-pause {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M23 0c12.7025 0 23 10.2975 23 23S35.7025 46 23 46 0 35.7025 0 23 10.2975 0 23 0Zm-1.8208 15.3333h-4.3125v15.3334h4.3125V15.3333Zm8.1458 0h-4.3125v15.3334h4.3125V15.3333Z'/%3E%3C/svg%3E");
}

.rb-live-player__icon .fa-play::before,
.rb-live-player__icon .fa-pause::before {
    content: none;
}

.rb-live-player__button {
    width: 11.25rem;
}

.rb-live-player__button [data-rb-live-label] {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
}
