#ct-radio-player {
    --ct-cyan: #00B1D2;
    --ct-black: #111111;
    --ct-grey: #666666;

    position: fixed !important;
    left: var(--ct-horizontal-offset, 14px) !important;
    right: var(--ct-horizontal-offset, 14px) !important;
    bottom: var(--ct-bottom-offset, 14px) !important;
    z-index: 999999 !important;

    display: flex !important;
    align-items: center !important;
    gap: var(--ct-player-gap, 18px) !important;

    min-height: 88px !important;
    width: var(--ct-player-width, fit-content) !important;
    max-width: calc(100vw - var(--ct-horizontal-space, 28px)) !important;
    box-sizing: border-box !important;
    padding: var(--ct-player-padding, 20px) !important;

    background: var(--ct-player-bg, #fff) !important;
    border: var(--ct-border-width, 0px) solid var(--ct-border-color, #111) !important;
    border-radius: 0 !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,var(--ct-shadow-opacity, .25)) !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,var(--ct-shadow-opacity, .25)) !important;
    font-family: "Poppins", sans-serif !important;
}

#ct-radio-play {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--ct-play-size, 54px) !important;
    width: var(--ct-play-size, 54px) !important;
    height: var(--ct-play-size, 54px) !important;
    min-width: var(--ct-play-size, 54px) !important;
    min-height: var(--ct-play-size, 54px) !important;
    padding: 0 !important;
    margin: 0 4px 4px 0 !important;
    background: var(--ct-cyan) !important;
    color: var(--ct-black) !important;
    border: 2px solid var(--ct-black) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--ct-black) !important;
    cursor: pointer !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

#ct-radio-play::before,
#ct-radio-play::after,
#ct-radio-mute::before,
#ct-radio-mute::after,
#ct-radio-return::before,
#ct-radio-return::after {
    display: none !important;
    content: none !important;
}

#ct-radio-play:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 0 0 0 var(--ct-black) !important;
}

#ct-radio-play svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    fill: currentColor !important;
}

#ct-radio-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#ct-radio-title {
    --ct-title-gap: 48px;
    --ct-marquee-distance: 0px;
    --ct-marquee-duration: 10s;

    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ct-black) !important;
    font-size: var(--ct-title-size, 17px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

#ct-radio-title .ct-radio-title-track {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    will-change: transform;
}

#ct-radio-title .ct-radio-title-copy {
    display: inline-block !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

#ct-radio-title.ct-marquee .ct-radio-title-track {
    gap: var(--ct-title-gap) !important;
    animation: ct-radio-title-marquee var(--ct-marquee-duration) linear infinite !important;
}

#ct-radio-title.ct-marquee:hover .ct-radio-title-track {
    animation-play-state: paused !important;
}

@keyframes ct-radio-title-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(-1 * var(--ct-marquee-distance)), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #ct-radio-title.ct-marquee .ct-radio-title-track {
        animation: none !important;
        transform: none !important;
    }
}

#ct-radio-subtitle {
    display: block !important;
    margin-top: 3px !important;
    color: var(--ct-grey) !important;
    font-size: var(--ct-subtitle-size, 11px) !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

#ct-radio-progress {
    --progress-fill: 0%;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: none !important;
    width: 220px !important;
    max-width: 100% !important;
    height: 4px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: linear-gradient(to right, var(--ct-cyan) 0%, var(--ct-cyan) var(--progress-fill), #ddd var(--progress-fill), #ddd 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    cursor: pointer !important;
}

#ct-radio-player.ct-track-mode #ct-radio-progress {
    display: block !important;
}

#ct-radio-progress::-webkit-slider-runnable-track {
    height: 4px !important;
    background: transparent !important;
}

#ct-radio-progress::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -4px !important;
    background: var(--ct-cyan) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

#ct-radio-progress::-moz-range-track {
    height: 4px !important;
    background: #ddd !important;
}

#ct-radio-progress::-moz-range-progress {
    height: 4px !important;
    background: var(--ct-cyan) !important;
}

#ct-radio-progress::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    background: var(--ct-cyan) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

#ct-radio-return {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 5px 9px !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--ct-black) !important;
    border: 1px solid var(--ct-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
}

#ct-radio-player.ct-track-mode #ct-radio-return:not([hidden]) {
    display: inline-flex !important;
}

#ct-radio-return:hover {
    background: var(--ct-black) !important;
    color: #fff !important;
}

#ct-radio-volume-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}

#ct-radio-mute {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--ct-black) !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#ct-radio-mute svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

#ct-radio-volume {
    --volume-fill: 80%;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 110px !important;
    height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(to right, var(--ct-cyan) 0%, var(--ct-cyan) var(--volume-fill), #ddd var(--volume-fill), #ddd 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    cursor: pointer !important;
}

#ct-radio-volume::-webkit-slider-runnable-track {
    height: 5px !important;
    background: transparent !important;
}

#ct-radio-volume::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -4.5px !important;
    background: var(--ct-cyan) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

#ct-radio-volume::-moz-range-track {
    height: 5px !important;
    background: #ddd !important;
}

#ct-radio-volume::-moz-range-progress {
    height: 5px !important;
    background: var(--ct-cyan) !important;
}

#ct-radio-volume::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    background: var(--ct-cyan) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

#ct-radio-player.ct-hide-subtitle #ct-radio-subtitle {
    display: none !important;
}

#ct-radio-player.ct-hide-volume-slider #ct-radio-volume {
    display: none !important;
}

body { padding-bottom: 120px; }

@media (max-width: 767px) {
    #ct-radio-player {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        min-height: 72px !important;
        width: fit-content !important;
        max-width: calc(100vw - 16px) !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    #ct-radio-play {
        flex-basis: 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    #ct-radio-title { font-size: 14px !important; }
    #ct-radio-subtitle { font-size: 10px !important; }
    #ct-radio-progress { width: 150px !important; }
    #ct-radio-return { padding: 5px 7px !important; font-size: 9px !important; }
    #ct-radio-volume { display: none !important; }
    body { padding-bottom: 105px; }
}