/* ============================================================
   Disco Pasadena — Sonaar Sticky Player Override
   - White background, black text/icons, mint waveform
   - Player at TOP of page, TOP button at BOTTOM
   - Copperplate Light font matching site
   ============================================================ */

/* --- CSS variable overrides --- */
:root {
    --srp-global-sticky_player_background: rgba(255, 255, 255, 1) !important;
    --srp-global-sticky_player_labelsandbuttons: rgba(0, 0, 0, 1) !important;
    --srp-global-sticky_player_featured_color: rgba(0, 0, 0, 1) !important;
    --srp-global-sticky_player_waveform_background_color: rgba(210, 210, 210, 1) !important;
    --srp-global-sticky_player_waveform_progress_color: #bbfaeb !important;
}

/* ============================================================
   POSITION: Move sticky player to TOP of page
   ============================================================ */
div#sonaar-player {
    bottom: auto !important;
    top: 0 !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

/* Extended/mobile full-screen panel opens downward from top */
#sonaar-player.sr-float div.playlist {
    bottom: auto !important;
    top: 100% !important;
}

/* ============================================================
   TOP BUTTON: Move to bottom right (below the player)
   ============================================================ */
.dc-totop {
    top: auto !important;
    bottom: 12px !important;
}

/* ============================================================
   BACKGROUND + COLORS: White player, black controls
   ============================================================ */
div#sonaar-player,
#sonaar-player .player,
#sonaar-player .player .volume .slider-container,
#sonaar-player.sr-float div.playlist,
#sonaar-player.sr-float .close.btn-player,
.srp_extendedPlayer {
    background-color: #ffffff !important;
}

#sonaar-player .player .timing,
#sonaar-player .album-title,
#sonaar-player .playlist .tracklist li,
#sonaar-player .playlist .tracklist li a,
#sonaar-player .track-store li,
#sonaar-player .sonaar-extend-button,
#sonaar-player .sr_skip_number,
#sonaar-player .track-name,
#sonaar-player .mobileProgress .track-name {
    color: #000000 !important;
}

#sonaar-player .control,
#sonaar-player .sricon-volume {
    color: #000000 !important;
}

#sonaar-player div.sr_speedRate div {
    background: #000000 !important;
    color: #000000 !important;
}

#sonaar-player .playlist button.play,
#sonaar-player .close.btn-player,
#sonaar-player .mobileProgress,
#sonaar-player .ui-slider-handle,
.ui-slider-range {
    background-color: #000000 !important;
}

#sonaar-player .playlist .tracklist li.active,
#sonaar-player .playlist .tracklist li.active span,
#sonaar-player .playlist .title {
    color: #000000 !important;
}

#sonaar-player .player .store .track-store li .sr_store_round_bt,
#sonaar-player .ui-slider-handle,
#sonaar-player .ui-slider-range {
    background-color: #000000 !important;
}

#sonaar-player .close.btn-player rect {
    fill: #ffffff !important;
}

#sonaar-player .mobilePanel,
#sonaar-player .player .player-row:before {
    background-color: #ffffff !important;
}

#sonaar-player .player div.mobilePanel {
    border-color: #e8e8e8 !important;
}

@media only screen and (max-width: 1025px) {
    #sonaar-player .store {
        background-color: #ffffff !important;
    }
}

/* ============================================================
   WAVEFORM: mint green progress, light grey base
   High specificity to override Sonaar inline CSS
   ============================================================ */
html body #sonaar-player .sonaar_fake_wave .sonaar_wave_base rect,
html #sonaar-player .sonaar_fake_wave .sonaar_wave_base rect {
    fill: rgba(210, 210, 210, 1) !important;
}
html body #sonaar-player .sonaar_fake_wave .sonaar_wave_cut rect,
html #sonaar-player .sonaar_fake_wave .sonaar_wave_cut rect {
    fill: #bbfaeb !important;
}

html body #sonaar-player .mobileProgressing,
html body #sonaar-player .progressDot,
html #sonaar-player .mobileProgressing,
html #sonaar-player .progressDot {
    background-color: #bbfaeb !important;
}

/* ============================================================
   TYPOGRAPHY: Copperplate — slightly larger for usability
   ============================================================ */
#sonaar-player,
#sonaar-player .track-name,
#sonaar-player .album-title,
#sonaar-player .playlist .tracklist li,
#sonaar-player .player .timing,
#sonaar-player .mobileProgress .track-name,
#sonaar-player .control,
#sonaar-player [class*="sricon-"] {
    font-family: "Copperplate", "Copperplate Gothic Light", "Copperplate Gothic", sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Track name */
#sonaar-player .track-name,
#sonaar-player .mobileProgress .track-name {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
}

/* Controls/icons */
#sonaar-player .control,
#sonaar-player [class*="sricon-"] {
    font-size: 14px !important;
}

/* Timing */
#sonaar-player .player .timing {
    font-size: 8px !important;
    opacity: 0.6;
}

/* General player text */
#sonaar-player .album-title,
#sonaar-player .playlist .tracklist li {
    font-size: 10px !important;
}

/* ============================================================
   MOBILE: Shuffle button always visible
   Force shuffle into mobile controls bar
   ============================================================ */
@media only screen and (max-width: 1025px) {

    /* Make shuffle always visible in mobile bar */
    #sonaar-player .mobileControls .sricon-shuffle,
    #sonaar-player .mobileButtons .sricon-shuffle,
    #sonaar-player .mobilePanel .control.shuffle,
    #sonaar-player .player .mobilePanel [data-action="shuffle"],
    #sonaar-player .sr_sticky_shuffle {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile track name slightly larger */
    #sonaar-player .mobileProgress .track-name {
        font-size: 9px !important;
    }

    /* Mobile controls row: ensure shuffle is part of it */
    #sonaar-player .mobilePanel .player-row {
        display: flex !important;
        align-items: center !important;
    }
}

/* ============================================================
   EXTENDED PLAYER (mobile full-screen)
   ============================================================ */
.srp_extendedPlayer {
    background-color: #ffffff !important;
}
.srp_ext_track_info .srp_track_title,
.srp_ext_track_info .srp_artist,
.srp_ext_header .srp_playlist_title,
.srp_ext_control .control,
.srp_ext_control [class*="sricon-"] {
    color: #000000 !important;
    font-family: "Copperplate", "Copperplate Gothic Light", sans-serif !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
/* ============================================================
   "PLAY THE SITE" BUTTON — exactly matches .dc-totop / TOP button
   text-transform:uppercase, font-size:8px, color:#000, same margins
   ============================================================ */
#dp-play-btn {
    text-align: center;
    position: fixed;
    z-index: 5000;
    width: 120px;
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px dotted #efefef;
    margin-left: 50px;
    left: 0;
    bottom: 25px;
    background-color: transparent;
    border-radius: 8px 8px 0 0;
}

#dp-play-btn a,
#dp-play-link {
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #000 !important;
    font-size: 8px !important;
    font-family: "Copperplate", "Copperplate Gothic Light", "Copperplate Gothic", sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
    display: block;
}

#dp-play-btn:hover a,
#dp-play-btn:hover #dp-play-link {
    background-color: #bbfaeb !important;
}