/* F6 Elementor Audio Card v1.0.4 */
.f6-audio-card{
  --bg:#A31F1F;
  --text:#FFFFFF;
  --accent:#F25A4A;
  display:grid; grid-template-columns:240px 1fr; gap:0;
  background:var(--bg); color:var(--text);
  border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.f6-audio__image{ min-height:220px; background-size:cover; background-position:center; }
.f6-audio__body{ padding:28px 28px 18px; position:relative; }
.f6-audio__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.f6-title{ font-size:28px; line-height:1.2; margin:0 0 6px; font-weight:700; }
.f6-artist{ opacity:.9; font-size:15px; }

/* BUTTON STATES per verzoek:
   - Idle: white circle, red play icon
   - Playing: red circle, white pause bars
*/
.f6-play{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:999px; background:#fff; border:none; cursor:pointer;
  transition:background .2s, transform .06s; flex-shrink:0; position:relative; z-index:5;
}
.f6-play:active{ transform:scale(.98); }

/* Play triangle in bg color */
.f6-play__icon{
  width:14px; height:16px; background:var(--bg);
  clip-path:polygon(0 0, 0 100%, 100% 50%); display:block;
}

/* Playing -> pause bars */
.f6-play.is-playing{ background:var(--bg); }
.f6-play.is-playing .f6-play__icon{
  width:16px; height:16px; background:none; clip-path:unset; position:relative;
}
.f6-play.is-playing .f6-play__icon:before,
.f6-play.is-playing .f6-play__icon:after{
  content:""; position:absolute; top:0; bottom:0; width:4px; background:#fff;
}
.f6-play.is-playing .f6-play__icon:before{ left:2px; }
.f6-play.is-playing .f6-play__icon:after{ right:2px; }

/* Hover: subtiel – respecteer states */
.f6-play:hover{ filter:brightness(1.04); }

/* Progressbar */
.f6-progress{ position:relative; height:8px; margin:22px 0; cursor:pointer; z-index:1; }
.f6-progress__track{ position:absolute; inset:0; background:rgba(255,255,255,.18); border-radius:4px; }
.f6-progress__fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent); border-radius:4px; }

.f6-audio__footer{ display:flex; gap:8px; align-items:center; font-size:14px; opacity:.95; }
.f6-time-sep{ opacity:.8; }

@media (max-width:768px){
  .f6-audio-card{ grid-template-columns:1fr; }
  .f6-audio__image{ min-height:160px; }
}