.custom-audio-controls{bottom:0;left:0;opacity:0;position:absolute;right:0;transition:opacity .3s ease;z-index:10}.custom-audio-controls.visible{opacity:1}.audio-controls-overlay{background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);bottom:0;height:60px;left:0;position:absolute;right:0;z-index:-1}.audio-controls-bar{gap:15px;padding:10px}.audio-control-button,.audio-controls-bar{align-items:center;display:flex;justify-content:center}.audio-control-button{background:none;background-color:rgba(0,0,0,.3);border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:16px;height:36px;transition:background-color .2s;width:36px}.audio-control-button:hover{background-color:rgba(0,0,0,.5)}.audio-control-button.play-button{font-size:18px;height:44px;width:44px}.audio-control-button.mute-mode-button{background-color:rgba(0,0,0,.3);margin-left:8px}.audio-control-button.mute-mode-button.active{background-color:rgba(255,0,0,.5)}.volume-control{margin-left:10px;position:relative}.volume-button,.volume-control{align-items:center;display:flex}.volume-button{background:none;background-color:rgba(0,0,0,.3);border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:16px;height:36px;justify-content:center;margin-right:8px;transition:background-color .2s;width:36px}.volume-button:hover{background-color:rgba(0,0,0,.5)}.volume-slider-container{align-items:center;display:flex;overflow:hidden;transition:width .3s ease;width:0}.volume-control:hover .volume-slider-container,.volume-slider-container.active{width:80px}.volume-slider{-webkit-appearance:none;background:hsla(0,0%,100%,.3);border-radius:2px;height:4px;outline:none;width:80px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;cursor:pointer;height:12px;width:12px}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.favorite-button-audio{align-items:center;background-color:hsla(0,0%,100%,.2);border:none;border-radius:50%;color:#ffc107;cursor:pointer;display:flex;height:36px;justify-content:center;margin-left:8px;transition:all .2s;width:36px}.favorite-button-audio:hover{background-color:hsla(0,0%,100%,.3);transform:scale(1.1)}.favorite-button-audio.active{color:#ffc107}.favorite-button-audio.inactive{color:hsla(0,0%,100%,.7)}