#play { position: fixed; width: 100%; height: 90px; bottom: 0; left: 0; background-color: #1B1B1B; box-shadow: 0 -4px 12px rgba(0,0,0,0.35); z-index: 1000;}
#play .controles { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: 90px; padding: 0 24px; box-sizing: border-box; background-color: #1B1B1B; }

/* -- Esquerda: capa + título/artista -- */
#play .controles .jp-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 0; width: 200px;}
#play .controles .jp-left .jp-cover { width: 55px; height: 55px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
#play .controles .jp-left .jp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#play .controles .jp-left .jp-info-text { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
#play .controles .jp-left .jp-song-title { color: #FFFFFF; font-weight: bold; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
#play .controles .jp-left .jp-song-artist { color: #B3B3B3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; margin-top: 3px; }

/* -- Centro: controles principais + progresso -- */
#play .controles .jp-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; max-width: 520px; gap: 3px; }

#play .controles .jp-center .jp-controls { position: relative; display: flex; align-items: center; justify-content: space-between; width: 150px; height: 60px; list-style: none; margin: 0; padding: 0; font-size: 0;}
#play .controles .jp-center .jp-controls li { list-style: none; float: none; }
#play .controles .jp-center .jp-controls a { display: flex; align-items: center; justify-content: center; cursor: pointer; outline: 0; }

#play .controles .jp-center .jp-previous,
#play .controles .jp-center .jp-next { position: relative; width: 16px; height: 16px; margin: 0; opacity: 0.85; background-repeat: no-repeat; background-position: center; background-size: contain; }
#play .controles .jp-center .jp-previous:hover,
#play .controles .jp-center .jp-next:hover { opacity: 1; }
#play .controles .jp-center .jp-previous { background-image: url("../imagens/previous.png"); }
#play .controles .jp-center .jp-next { background-image: url("../imagens/next.png"); }

#play .controles .jp-center .jp-play,
#play .controles .jp-center .jp-pause { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-position: center; background-size: contain; }
#play .controles .jp-center .jp-play { background-image: url("../imagens/play.png"); }
#play .controles .jp-center .jp-pause { background-image: url("../imagens/pause.png"); }

#play .controles .jp-center .jp-progress { display: flex; align-items: center; width: 100%; gap: 10px; margin: 0; }
#play .controles .jp-center .jp-progress .jp-current-time,
#play .controles .jp-center .jp-progress .jp-duration { color: #B3B3B3; font-size: 12px; flex: 0 0 auto; }
#play .controles .jp-center .jp-progress .marca { flex: 1 1 auto; width: auto; margin: 0; }
#play .controles .jp-center .jp-progress .marca .jp-seek-bar { position: relative; width: 100%; height: 4px; background-color: #3A3A3A; border-radius: 4px; overflow: visible; cursor: pointer; }
#play .controles .jp-center .jp-progress .marca .jp-play-bar { position: relative; height: 4px; background-color: #E53935; border-radius: 4px; overflow: visible; }
#play .controles .jp-center .jp-progress .marca .jp-play-bar::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: #E53935; border-radius: 50%; box-shadow: 0 0 0 2px #1B1B1B; }

/* -- Direita: volume, stop, shuffle, repeat, playlist -- */
#play .controles .jp-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; font-size: 0;}

#play .controles .jp-right .jp-volume-controls { display: flex; align-items: center; gap: 6px; margin: 0; }
#play .controles .jp-right .jp-volume-controls img { width: 16px; height: 16px; opacity: 0.85; content: url("../imagens/volume.png"); }
#play .controles .jp-right .jp-volume-bar { width: 70px; height: 4px; margin: 0; background-color: #3A3A3A; border-radius: 4px; overflow: hidden; cursor: pointer; }
#play .controles .jp-right .jp-volume-bar-value { height: 4px; background-color: #E53935; border-radius: 4px; }

#play .controles .jp-right .jp-stop { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0; opacity: 0.85; cursor: pointer; background-image: url("../imagens/stop.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }
#play .controles .jp-right .jp-stop:hover { opacity: 1; }

#play .controles .jp-right .jp-toggles { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; float: none; }
#play .controles .jp-right .jp-toggles li { list-style: none; float: none; display: block; }
#play .controles .jp-right .jp-toggles a { position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0; text-indent: 0; cursor: pointer; opacity: 0.7; }
#play .controles .jp-right .jp-toggles a:hover { opacity: 1; }

#play .controles .jp-right .jp-shuffle,
#play .controles .jp-right .jp-shuffle-off { background-image: url("../imagens/shuffle.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }

#play .controles .jp-right .jp-repeat,
#play .controles .jp-right .jp-repeat-off { background-image: url("../imagens/repeat.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }

/* -- Playlist (só no novo layout) -- */
#play .jp-playlist { position: absolute; left: 0; bottom: 90px; width: 100%; max-height: 0; overflow-y: auto; overflow-x: hidden; background-color: #F5F5F5; box-shadow: 0 -4px 10px rgba(0,0,0,0.15); transition: max-height 0.3s ease; }
#play .jp-playlist.ativa { max-height: 320px; }
#play .jp-playlist ul { width: 100%; list-style: none; margin: 0; padding: 0; }
#play .jp-playlist li { position: relative; overflow: hidden; padding: 10px 16px; border-bottom: 1px solid #E0E0E0; transition: background-color 0.15s ease; }
#play .jp-playlist li:hover { background-color: #E8E8E8; }
#play .jp-playlist .jp-playlist-item { font-size: 14px; color: #222222; outline: 0; }
#play .jp-playlist .jp-playlist-current { background-color: #E0E0E0; }

@media only screen and (max-width: 1000px) {
	#play .controles { justify-content: center; padding: 0 4% 0 2%;}
	#play .controles .jp-left { width: 55px;}
	#play .controles .jp-left .jp-info-text { display: none;}
	#play .controles .jp-center .jp-controls { width: 120px;}
	#play .controles .jp-center .jp-progress { width: 80%;}
	#play .controles .jp-right { display: none;}
}