/* reusable voice-memo style audio player: play button + waveform + time.
   used for testimonials and song players across the site. */

.voice-memo-player{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--black-soft);
  border: 1.5px solid var(--cream-line);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  max-width: 420px;
  margin: 0 auto;
}
.voice-memo-play{
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--flame), var(--gold));
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, filter .25s ease;
}
.voice-memo-play:hover{ filter: brightness(1.1); transform: scale(1.05); }
.voice-memo-play svg{ width: 14px; height: 14px; }
.voice-memo-play .icon-pause{ display: none; }
.voice-memo-play.is-playing .icon-play{ display: none; }
.voice-memo-play.is-playing .icon-pause{ display: block; }

.voice-memo-waveform{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  cursor: pointer;
}
.voice-memo-waveform .bar{
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--cream-line);
  transition: background .15s ease;
}
.voice-memo-waveform .bar.is-played{ background: var(--gold-light); }

.voice-memo-time{
  font-size: 12px;
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
}

.voice-memo-player-wrap{ display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto; }
.signature-caption{ font-size: 12.5px; letter-spacing: .04em; color: var(--cream-dim); }
.voice-memo-download{ font-size: 12.5px; letter-spacing: .04em; color: var(--gold-light); text-decoration: underline; }

.voice-memo-featured{
  max-width: 460px;
  margin: 0 auto 40px;
  text-align: center;
}
.voice-memo-badge{
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.voice-memo-featured .voice-memo-player{ margin-bottom: 8px; }
.voice-memo-featured .signature-caption{ font-size: 13px; letter-spacing: .04em; color: var(--cream-dim); }