.bfp-player{width:100% !important;}
.bfp-player-container{width:100%;overflow-x:clip;}
.bfp-player.track.custom .mejs-controls,
.bfp-player.track.custom .mejs-controls::before{background:transparent !important;}
.bfp-player.custom:not(.track),
.bfp-player.light:not(.track){min-height:65px !important;}
.bfp-player.mejs-container:not(.bfp-custom-skin){background: transparent !important;}
.bfp-player.mejs-container{margin-bottom:0;}
.bfp-player.track{width:25px !important;height:26px !important;position:relative;float:left;margin-right:5px;overflow:hidden;}
.bfp-player.track.light{width:49px !important;height:28px !important;border-radius:16%;}
.bfp-player.track.light .mejs-controls{height:28px !important; background:transparent !important;}
.bfp-player.track.custom .mejs-playpause-button,
.bfp-player.track.light .mejs-playpause-button{top:0 !important;left:0 !important; margin: 0 !important;}

.bfp-player.track.custom{width:40px !important;height:40px !important;}
.bfp-player.track.custom .mejs-controls{height:40px !important; width:40px !important; background:transparent !important;}

.bfp-player:not(.track){min-width:200px !important;}

.bfp-player .mejs-currenttime,
.bfp-player .mejs-duration{white-space:nowrap;}
.bfp-player .mejs-time-total.mejs-time-slider{overflow-x: clip;}

.bfp-player-list{width:100%; border:0;overflow:visible;margin-bottom:10px;}
.bfp-player-list *{word-break:normal !important;}
.bfp-player-list td{border:0;padding:5px;}
.bfp-player-list table{width:100%;margin:0;}
.bfp-player-list table tr,
.bfp-player-list table td{border:0;}
.bfp-odd-row td,
.bfp-even-row td{padding:5px;vertical-align:middle;}
.bfp-odd-row td{background-color:#FAFAFA; border-top: 1px solid #DADADA; border-bottom: 1px solid #DADADA;}
.bfp-column-player-title{/* width:100%; */ vertical-align:middle;}
.bfp-column-player-title:not(td){display:flex;}
.bfp-column-player-title .bfp-file-duration {flex-grow: 1;text-align:right;font-size:16px;align-self:center;}
.bfp-column-player-dark{width:30px; min-height:30px;}
.bfp-column-player-light{width:54px; min-height:28px;}
.bfp-column-player-custom{width:45px; min-height:40px;}
.bfp-message{font-style:italic;}
.mejs-controls{/* overflow:hidden !important; */}
.bfp-player .mejs-controls .mejs-time-rail .mejs-time-float{border:0;}

.bfp-player .mejs-time-hovered,
.bfp-player .mejs-time-handle-content{display:none !important;}
.bfp-player .mejs-controls .mejs-time{height:auto;}
.bfp-player .mejs-controls .mejs-time-rail .mejs-time-buffering,
.bfp-player .mejs-controls .mejs-time-rail .mejs-time-current,
.bfp-player .mejs-controls .mejs-time-rail .mejs-time-hovered,
.bfp-player .mejs-controls .mejs-time-rail .mejs-time-loaded{width:100%;}

.bfp-player.custom .mejs-time-rail{height:26px; padding-top:0;}
.bfp-player.light .mejs-time-rail{height:26px; padding:5px 0;margin:0;}
.bfp-player.custom .mejs-time{padding:10px 3px 0;}
.bfp-player.light .mejs-time{padding:2px 3px 0;height:17px;}
.bfp-player.custom .mejs-controls .mejs-time-rail .mejs-time-total {
    background: #333;
    background: rgba(50,50,50,.8);
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));
    background: -webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));
    background: -moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));
    background: -o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));
    background: -ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));
    background: linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8));
}

.bfp-player.light .mejs-controls .mejs-time-rail .mejs-time-current{background:rgba(203,0,3,.3) !important;}
.bfp-player.light .mejs-controls .mejs-volume-button .mejs-volume-current{left:0;}

.bfp-player.track.dark .mejs-controls{padding:0 !important; height:26px;}
.bfp-player.track.dark .mejs-playpause-button button{position: absolute;top: 50%;left: 50%;margin:0;transform: translate(-50%, -50%);}

.bfp-purchased-times{display:inline-block;margin-left:10px;margin-right:10px;font-size:0.8em;}
.mini_cart_item .bfp-player{display:none !important;}
.bfp-classic-layout .bfp-download-links{padding:0 5px;display:block;border-top: 1px dashed #D0D0D0;margin-top:5px;}
.bfp-new-layout .bfp-download-links{padding-left:10px;}

/* Single Player */
.bfp-single-player{position:relative;}
.bfp-single-player .bfp-player-container:not(.bfp-first-player){display:none;z-index:9999;position:absolute;}
.bfp-single-player .bfp-player-title{cursor:pointer;}
.bfp-single-player .bfp-player-title.bfp-playing{font-weight:bold;}
.bfp-single-player .bfp-player-title.bfp-playing::before{content: '\1F782';margin-right:10px;}
.bfp-single-player.group_cart_control_products .bfp-player-title.bfp-playing::before{display:none !important;}
/* table.bfp-single-player.group_cart_control_products{margin:0 !important;} */
.bfp-single-player.group_cart_control_products .bfp-odd-row>td,
.bfp-single-player.group_cart_control_products .bfp-even-row>td{padding:0;}
.bfp-single-player.group_cart_control_products .bfp-column-player-title>table{margin:0 !important;}

.bfp-download-link{font-weight:700;}

/* WaveSurfer.js Integration */
.bfp-waveform {
    width: 100%;
    margin: 10px 0;
    cursor: pointer;
    position: relative;
    background: #f5f5f5;
    border-radius: 3px;
}

.bfp-waveform wave {
    overflow: hidden !important;
    display: block !important;
}

.bfp-waveform canvas {
    max-width: 100%;
    height: auto;
}

.bfp-player-container.wavesurfer-ready audio {
    display: none;
}

.bfp-player-container .bfp-play-button {
    background: #333;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px 0;
}

.bfp-player-container .bfp-play-button:hover {
    background: #555;
}

/* Ensure WaveSurfer works with existing skins */
.dark .bfp-waveform,
.light .bfp-waveform,
.custom .bfp-waveform {
    margin-top: 10px;
    padding: 5px;
    background: rgba(0,0,0,0.05);
}

/* Loading state */
.bfp-waveform:empty::before {
    content: "Loading waveform...";
    display: block;
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

/* Responsive waveform */
@media (max-width: 768px) {
    .bfp-waveform {
        height: 40px !important;
    }
}

/* Audio Engine section styling to match existing admin styles */
.bfp-engine-info {
    margin-bottom: 15px;
    color: #666;
}

/* Play button on cover styles */
.bfp-play-on-cover.playing {
    background: rgba(0,0,0,0.8);
    color: white;
}

.bfp-play-on-cover.playing svg {
    display: none;
}

.bfp-play-on-cover.playing::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 3px solid #ddd;
    border-color: #ddd transparent transparent transparent;
    border-radius: 50%;
    animation: bfp-spin 1s linear infinite;
}

@keyframes bfp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide player container on shop pages when on_cover is enabled */
.woocommerce ul.products li.product .bfp-hidden-player-container {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

/* Skin Image Detection Support */
.bfp-player.bfp-has-skin-images .mejs-playpause-button button::before,
.bfp-player.bfp-has-skin-images .mejs-playpause-button button::after,
.bfp-player.bfp-has-skin-images .mejs-volume-button button::before,
.bfp-player.bfp-has-skin-images .mejs-volume-button button::after,
.bfp-player.bfp-has-skin-images .mejs-fullscreen-button button::before,
.bfp-player.bfp-has-skin-images .mejs-fullscreen-button button::after {
    display: none !important;
}

/* Ensure CSS-only skins work properly */
.bfp-player.bfp-css-only-skin .mejs-playpause-button button,
.bfp-player.bfp-css-only-skin .mejs-volume-button button,
.bfp-player.bfp-css-only-skin .mejs-fullscreen-button button {
    background-image: none !important;
}

/* Additional hover states for CSS controls */
.bfp-player.dark .mejs-playpause-button button:hover::before {
    border-left-color: #ffcc66cc;
}

.bfp-player.light .mejs-playpause-button button:hover {
    background: linear-gradient(#f7f7f7, #d0d0d0);
}

.bfp-player.custom .mejs-playpause-button button:hover {
    box-shadow: inset 0px 2px 8px 0px rgba(99,214,252,1);
}