/*
  TME Sticky Player — vast onderaan, BR6-kleur als balk
  Layout geïnspireerd op jouw voorbeeld: Now Playing kaart links + controls rechts.
*/

:root{
  --tme-brand:#214c6e;
  --tme-accent:#ecea59;
  --tme-bar-h:86px;
}

.tme-sp{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  z-index:999999;
}

/* Sticky onderaan */
.tme-sp--sticky{
  position:fixed;
  left:0; right:0;
  bottom:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events:none; /* alleen inner is klikbaar */
}

/* Inline shortcode */
.tme-sp--inline{
  position:relative;
  padding:0;
  pointer-events:auto;
}

/* De balk */
.tme-sp__inner{
  pointer-events:auto;
  max-width: 1200px;
  margin: 0 auto;
  height: var(--tme-bar-h);
  background: var(--tme-brand);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  gap:14px;
  padding: 10px 12px;
  overflow:hidden;
  position:relative;
}

/* Left group: two separate white blocks (Now Live + Nu on air) */
.tme-sp__left{
  display:flex;
  align-items:stretch;
  gap:12px;
  min-width:0;
  flex: 1 1 auto;
}

.tme-sp__card--now{
  flex: 0 1 520px;
  min-width: 320px;
}

.tme-sp__card--onair{
  flex: 0 0 280px;
  min-width: 220px;
  max-width: 320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding: 10px 12px;
}

.tme-sp__onair-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.tme-sp__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#9ca3af;
  opacity:0;
  box-shadow:none;
}

.tme-sp__dot.is-on{ opacity:1; }
.tme-sp__dot.is-live{
  background:#16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
  animation: tmePulse 1.6s ease-in-out infinite;
}
.tme-sp__dot.is-nonstop{
  background:#94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,.18);
}
@keyframes tmePulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.2); }
  100%{ transform:scale(1); }
}



/* subtiele glans */
.tme-sp__inner::before{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width:220px;
  height:220px;
  background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
  transform: rotate(18deg);
  pointer-events:none;
}

/* Now Playing kaart */
.tme-sp__card{
  display:flex;
  align-items:center;
  gap:12px;
  background: #ffffff;
  color: #0c1320;
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 0;
  max-width: 520px;
  box-shadow: 0 10px 20px rgba(0,0,0,.20);
}

.tme-sp__cover{
  width:56px;
  height:56px;
  border-radius: 14px;
  object-fit: cover;
  background: #f3f6ff;
  flex:0 0 auto;
}

.tme-sp__meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }

.tme-sp__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tme-brand);
  display:flex;
  align-items:center;
  gap:8px;
}

.tme-sp__label::after{
  content:"";
  width:8px; height:8px;
  border-radius:999px;
  background:#25d366;
  box-shadow: 0 0 0 4px rgba(37,211,102,.18);
}

 .tme-sp__title{
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: #0c1320;

  /* 2 regels max */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tme-sp__sub{
  font-size: 12px;
  color: rgba(12,19,32,.66);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Controls rechts */
.tme-sp__controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  color: #ffffff;
}

.tme-sp__btn{
  appearance:none;
  border:0;
  width:44px;
  height:44px;
  border-radius: 12px;
  cursor:pointer;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .12s ease, background .12s ease;
  position:relative;
}

.tme-sp__btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.22); }
.tme-sp__btn:active{ transform: translateY(0); background: rgba(255,255,255,.16); }
.tme-sp__btn:focus{ outline: 2px solid rgba(236,234,89,.55); outline-offset: 2px; }

.tme-sp__btn::before{
  content:"";
  width:18px;
  height:18px;
  background: currentColor;
  display:block;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
}

/* Play / Pause */
.tme-sp__btn--play{ background: rgba(255,58,58,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 18px rgba(0,0,0,.20); }
.tme-sp__btn--play:hover{ background: rgba(255,58,58,1); }
.tme-sp__btn--play::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8 5v14l11-7z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8 5v14l11-7z'/></svg>");
}
.tme-sp__btn--play.is-playing::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h4v14H6zM14 5h4v14h-4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h4v14H6zM14 5h4v14h-4z'/></svg>");
}

/* Mute */
.tme-sp__btn--mute::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 10v4h4l5 4V6L7 10H3zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 10v4h4l5 4V6L7 10H3zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03z'/></svg>");
}
.tme-sp__btn--mute.is-muted{ color:#ffb3b8; background: rgba(255,89,100,.20); }
.tme-sp__btn--mute.is-muted::after{
  content:"";
  position:absolute;
  width:22px;
  height:2px;
  background:#ff5964;
  transform: rotate(40deg);
}

/* Volume slider */
.tme-sp__vol{ display:flex; align-items:center; }
.tme-sp__range{
  width: 160px;
  height: 10px;
  border-radius: 999px;
  appearance:none;
  -webkit-appearance:none;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  cursor:pointer;
}
.tme-sp__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px; height:18px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid rgba(236,234,89,.55);
}
.tme-sp__range::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid rgba(236,234,89,.55);
}

/* Live klok */
.tme-sp__time{
  display:flex;
  align-items:center;
  gap:8px;
  font-variant-numeric: tabular-nums;
}
.tme-sp__live{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,211,102,.14);
  border: 1px solid rgba(37,211,102,.25);
}
.tme-sp__clock{ font-size: 12px; opacity:.85; min-width:44px; text-align:right; }

/* Zorg dat de pagina niet onder de balk verdwijnt */
body.tme-sp-bodypad{ padding-bottom: calc(var(--tme-sp-pad, 96px) + env(safe-area-inset-bottom, 0px)); }

/* Responsive */
@media (max-width: 860px){
  .tme-sp__card{ min-width: 260px; max-width: 420px; }
  .tme-sp__range{ width: 120px; }
}

@media (max-width: 640px){
  .tme-sp__sub{ display:none; }
  .tme-sp__range{ display:none; }
}

@media (max-width: 460px){
  .tme-sp__card{ min-width: 0; max-width: 999px; flex: 1 1 auto; }
  .tme-sp__time{ display:none; }
}


/* NU ON AIR */
.tme-sp__onair{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 0;
}

.tme-sp__pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(236,234,89,.18);
  border:1px solid rgba(236,234,89,.35);
  color: #ecea59;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.68rem;
}

.tme-sp__onair-title{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color:#0c1320;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tme-sp__onair--bar{
  margin:0;
  background:#ffffff;
  color:#0c1320;
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.70);
  min-width:220px;
  max-width:420px;
  flex:0 0 auto;
}

.tme-sp__onair--bar .tme-sp__pill{
  background: var(--tme-brand);
  border-color: rgba(0,0,0,.08);
  color:#ffffff;
}

.tme-sp__onair--bar .tme-sp__onair-title{
  color:#0c1320;
  font-weight:800;
  /* 2 regels max (zelfde als Now Playing) */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
}


@media (max-width:720px){
  .tme-sp__onair-title{ max-width: 170px; }
}


@media (max-width: 720px){
  .tme-sp__inner{ gap:10px; }
  .tme-sp__left{ flex-direction:column; gap:10px; }
  .tme-sp__card--now{ min-width: 0; }
  .tme-sp__card--onair{ max-width: none; flex: 0 0 auto; }
  .tme-sp__controls{ margin-left:auto; }
}


/* NON STOP subtiel grijs */
.tme-sp__onair.is-nonstop{
  opacity:.92;
}
.tme-sp__onair.is-nonstop .tme-sp__pill{
  background:#e5e7eb;
  color:#334155;
}
.tme-sp__onair.is-nonstop .tme-sp__onair-title{
  color:#334155;
}