/* ===== PLAYER BOTTOM ===== */
#play {
  float: left;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  background-color: #111111;
	padding: 5px 0;
}

#play .jp-audio {
  float: left;
  width: 100%;
}

#play .controles {
  display: flex;
  align-items: center;
  padding: 0 5%;
  height: 58px;
  gap: 0;
  position: relative;
}

/* ===== BOTÕES ===== */
#play .controles .jp-controls {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

#play .controles .jp-controls li {
  display: flex;
  float: none;
}

#play .controles .jp-controls a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 0;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  outline: 0;
  float: none;
}

#play .controles .jp-controls a:hover { background-color: #333333;}

#play .controles .jp-controls .jp-previous {
  background-image: url('../sons/imagens/novo-previous.png?v4');
}

#play .controles .jp-controls .jp-play {
  background-image: url('../sons/imagens/novo-play.png?v4');
  background-color: transparent;
}

#play .controles .jp-controls .jp-pause {
  background-image: url('../sons/imagens/novo-pause.png?v4');
  background-color: transparent;
}

#play .controles .jp-controls .jp-next {
  background-image: url('../sons/imagens/novo-next.png?v4');
}

#play .controles .jp-controls .jp-stop { display: none; }

/* ===== VOLUME ===== */
#play .controles .jp-volume-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  float: none;
  margin: 0 12px 0 4px;
  flex-shrink: 0;
}

#play .controles .jp-volume-controls img {
  float: none;
  width: 18px;
}

#play .controles .jp-volume-bar {
  width: 70px;
  height: 4px;
  background-color: #444;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  display: block !important;
  float: none;
  margin: 0;
}

#play .controles .jp-volume-bar-value {
  height: 4px;
  background-color: #ffffff;
  display: block !important;
  float: none;
}

/* ===== PROGRESSO (centro) ===== */
#play .controles .jp-progress {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: static;
  width: auto;
  top: auto;
  left: auto;
  max-width: 600px; /* limita a largura da barra */
}

#play .controles .jp-progress .jp-current-time {
  position: static;
  font-size: 12px;
  font-weight: 400;
  color: #aaaaaa;
  flex-shrink: 0;
  top: auto;
  right: auto;
}

#play .controles .jp-progress .jp-barra {
  display: none;
}

#play .controles .jp-progress .jp-duration {
  position: static;
  font-size: 12px;
  font-weight: 400;
  color: #aaaaaa;
  flex-shrink: 0;
  top: auto;
  right: auto;
}

#play .controles .jp-progress .marca {
  width: 100%;
  max-width: 400px; /* barra menor */
  float: none;
}

#play .controles .jp-progress .marca .jp-seek-bar {
  width: 100%;
  height: 4px;
  background-color: #444444;
  border-radius: 2px;
  cursor: pointer;
  overflow: visible;
  float: none;
  position: relative;
}

#play .controles .jp-progress .marca .jp-play-bar {
  height: 4px;
  background-color: #ff6600;
  border-radius: 2px;
  float: none;
  position: relative;
}

/* bolinha laranja na ponta da barra */
#play .controles .jp-progress .marca .jp-play-bar::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #ff6600;
  border-radius: 50%;
}

#play .controles .jp-titulo {
	flex-shrink: 0;
	margin-left: 16px;
	font-size: 13px;
	color: #cccccc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

/* ===== PLAYLIST (oculta) ===== */
#jp_containerPlaylist.none { display: none; }

#jp_container_4523 { float: left; width: 100%; }

@media only screen and (max-width: 1000px) {
	#play .controles { padding: 0 10px 0 0;}
	#play .controles .jp-controls a { width: 44px;}
	#play .controles .jp-controls .jp-play { width: 35px;}
	#play .controles .jp-controls .jp-pause { width: 35px;}
  #play .controles .jp-volume-controls { display: none !important; }
	#play .controles .jp-progress { margin: 0 0 0 10px;}
	#play .controles .jp-titulo { display: none;}
}