/* =========================================================
   SVLZ – AUDIO MODULE
   Lazy-load preview + streaming service logo
   ========================================================= */

/* =========================
   WRAPPER GERAL
========================= */

.svlz-wrapper {
  width: 100%;
  margin: 1.5em 0;
  position: relative;
}

/* =========================
   AUDIO – CONTAINER BASE
========================= */

.svlz-wrapper[data-type="audio"] {
  min-height: 72px; /* altura confortável p/ preview */
}

/* =========================
   AUDIO – PREVIEW (IDLE)
========================= */

.svlz-audio-preview {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1em;
  background: var(--svlz-audiobackg); /* integra com tema claro/escuro */
  border-radius: 4px;
}

/* =========================
   CAPA (THUMB)
========================= */

.svlz-audio-cover {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* =========================
   METADADOS
========================= */

.svlz-audio-meta {
  flex: 1; /* ocupa todo espaço central disponível */
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--svlz-audiometa);
}

/* =========================
   LOGOTIPO DO SERVIÇO
========================= */

.svlz-service-icon {
  font-size: 1.1em; /* FA6 */
  opacity: 0.85;
  flex-shrink: 0;
  color: var(--svlz-servicelogo);
}

/* Spotify */
.svlz-service-icon.spotify {
  color: var(--svlz-servicelogo);
}

/* Deezer */
.svlz-service-icon.deezer {
  color: var(--svlz-servicelogo);
}

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

.svlz-audio-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--svlz-audiobuttonbackg);
  border: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

/* Ícone play (CSS puro) */

/* OBS:
   Sim, é totalmente possível mudar a cor da seta.
   Basta alterar o border-color abaixo.
*/

.svlz-audio-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #000; /* seta */
}

/* =========================
   MOBILE – AJUSTES FINOS
========================= */

@media (max-width: 480px) {

  /* botão play menor no mobile */
  .svlz-audio-play {
    width: 28px;
    height: 28px;
  }

  .svlz-audio-play::before {
    border-width: 6px 0 6px 9px;
  }

  /* capa ligeiramente menor */
  .svlz-audio-cover {
    width: 42px;
    height: 42px;
  }

  /* logo do serviço um pouco menor */
  .svlz-service-icon {
    font-size: 0.95em;
  }
}

/* =========================
   ESTADO LOADED (APÓS CLIQUE)
========================= */

.svlz-wrapper.svlz-loaded .svlz-audio-preview {
  display: none;
}

/* =========================
   EMBED (SPOTIFY / DEEZER)
========================= */

.svlz-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================
   FIX DEFINITIVO – SPOTIFY
   Spotify ignora height do container
========================= */

.svlz-wrapper[data-service="spotify"] .svlz-embed iframe {
  height: 152px !important;
}