/* ======================================================
PLAYER CARD
====================================================== */

.music-player {

  position: relative;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 14px;

  max-width: 340px;
  width: 100%;

  margin: 0 auto 40px auto;

  padding: 16px 18px;

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .08);

}


/* ======================================================
FUNDO BLUR DA CAPA
====================================================== */

.music-player::before {

  content: "";

  position: absolute;
  inset: 0;

  background-image: var(--cover);
  background-size: cover;
  background-position: center;

  filter: blur(40px) brightness(.55);

  opacity: .9;

  z-index: 0;

}

.music-player::after {

  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(120deg,
      rgba(0, 0, 0, .65),
      rgba(0, 0, 0, .45));

  backdrop-filter: blur(12px);

  z-index: 1;

}

.music-player>* {
  position: relative;
  z-index: 2;
}


/* ======================================================
CAPA
====================================================== */

.music-cover {

  width: 64px;
  height: 46px;

  border-radius: 10px;
  overflow: hidden;

  flex-shrink: 0;

}

.music-cover img {

  width: 100%;
  height: 100%;
  object-fit: cover;

}


/* ======================================================
CONTEÚDO CENTRAL
====================================================== */

.music-content {

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 6px;

  min-width: 0;

}


/* ======================================================
TEXTO
====================================================== */

.music-name {

  font-size: .9rem;
  font-weight: 600;

  color: #ffffff;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.music-artist {
  font-size: .75rem;
  color: rgba(255, 255, 255, .7);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ======================================================
BARRA DE PROGRESSO
====================================================== */

.progress-container {

  width: 80%;

  height: 4px;

  background: rgba(255, 255, 255, .25);

  border-radius: 10px;

  overflow: hidden;

  margin-top: 4px;

}

.progress-bar {

  width: 0%;
  height: 100%;

  background: #ffffff;

}


/* ======================================================
TEMPO
====================================================== */

.music-time {

  font-size: .7rem;

  color: rgba(255, 255, 255, .75);

  margin-top: 4px;

}


/* ======================================================
BOTÃO PLAY
====================================================== */

#play-btn {

  width: 48px;
  height: 48px;

  border-radius: 50%;

  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  background: #f1f1f1;

  color: #000;

  font-size: 18px;
  font-weight: bold;

  flex-shrink: 0;

  transition: .25s;

}

#play-btn:hover {

  transform: scale(1.08);

}



@media (max-width: 768px) {
  .music-player {
  max-width: 340px;
  width: calc(100% - 32px); /* 👈 cria respiro lateral */
  margin: 0 auto 40px auto; /* 👈 mantém centralizado */
  }
}


/* =========================================
PROTEÇÃO RESPONSIVA DO PLAYER (ESSENCIAL)
========================================= */

.music-player{
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* impede quebra de texto */
.music-name,
.music-artist,
.music-time{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}





.music-content{
  min-width: 0;
  width: 100%;
  overflow: hidden;
}