/* FM Clemic Player – player.css */
*,*::before,*::after{box-sizing:border-box}

#fmcp-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:999999;
  background:rgba(10,10,10,0.97);
  border-top:3px solid #972165;
  box-shadow:0 -4px 32px rgba(0,0,0,.6);
  font-family:'Barlow','Helvetica Neue',Arial,sans-serif;
  transition:height .35s cubic-bezier(.4,0,.2,1);
  height:72px;overflow:hidden;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#fmcp-bar.fmcp-expanded{height:min(530px,84vh)}

/* ── Bar row ── */
.fmcp-row{
  display:flex;align-items:center;
  height:72px;padding:0 14px;gap:10px;
}

.fmcp-logo{height:42px;width:auto;flex-shrink:0;object-fit:contain}

.fmcp-live{
  display:flex;align-items:center;gap:4px;
  background:#972165;color:#fff;
  font-size:.63rem;font-weight:700;letter-spacing:1.5px;
  padding:2px 7px 2px 5px;border-radius:3px;flex-shrink:0;
}
.fmcp-dot{
  width:6px;height:6px;background:#fff;border-radius:50%;
  animation:fmcp-blink 1.2s ease-in-out infinite;
}
@keyframes fmcp-blink{0%,100%{opacity:1}50%{opacity:.15}}

.fmcp-info{flex:1;min-width:0}
.fmcp-name{
  font-size:.98rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;
}
.fmcp-freq{font-size:.66rem;color:#972165;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}

/* Volume */
.fmcp-vol-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}
.fmcp-vol-icon{font-size:1rem;color:#aaa;cursor:pointer;user-select:none}
.fmcp-vol-slider{
  -webkit-appearance:none;width:62px;height:3px;
  background:#333;border-radius:3px;outline:none;cursor:pointer;
}
.fmcp-vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#972165;
}
.fmcp-vol-slider::-moz-range-thumb{
  width:11px;height:11px;border:none;border-radius:50%;background:#972165;
}

/* Play button */
.fmcp-play{
  width:42px;height:42px;border-radius:50%;border:none;
  background:#972165;color:#fff;font-size:1.05rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s,transform .1s;
}
.fmcp-play:hover{background:#7a1a52}
.fmcp-play:active{transform:scale(.92)}

/* Ad button */
.fmcp-ad-btn{
  display:flex;align-items:center;gap:5px;
  background:transparent;border:1.5px solid #972165;color:#972165;
  font-size:.7rem;font-weight:700;letter-spacing:.8px;
  padding:5px 9px;border-radius:6px;cursor:pointer;
  flex-shrink:0;text-decoration:none;
  transition:background .2s,color .2s;white-space:nowrap;
}
.fmcp-ad-btn:hover{background:#972165;color:#fff}
.fmcp-ad-label{display:none}
@media(min-width:530px){.fmcp-ad-label{display:inline}}

/* Podcasts toggle */
.fmcp-pod-btn{
  display:flex;align-items:center;gap:5px;
  background:transparent;border:1.5px solid #333;color:#aaa;
  font-size:.7rem;font-weight:700;letter-spacing:.5px;
  padding:5px 9px;border-radius:6px;cursor:pointer;
  flex-shrink:0;transition:border-color .2s,color .2s;
}
.fmcp-pod-btn:hover,.fmcp-pod-btn.fmcp-active{border-color:#1DB954;color:#1DB954}
.fmcp-pod-label{display:none}
@media(min-width:460px){.fmcp-pod-label{display:inline}}

/* ── Podcast panel ── */
.fmcp-panel{
  height:calc(100% - 72px);overflow-y:auto;
  padding:0 14px 16px;
  scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;
}
.fmcp-panel::-webkit-scrollbar{width:4px}
.fmcp-panel::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:4px}

/* Panel header */
.fmcp-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 8px;border-bottom:1px solid #1e1e1e;margin-bottom:6px;
  position:sticky;top:0;background:rgba(10,10,10,.97);z-index:2;
}
.fmcp-panel-title{font-weight:800;font-size:1.1rem;color:#fff;letter-spacing:.3px}
.fmcp-sp-badge{
  display:flex;align-items:center;gap:4px;
  background:#1DB954;color:#000;
  font-size:.63rem;font-weight:700;letter-spacing:1px;
  padding:3px 8px;border-radius:20px;
}

/* Show tabs */
.fmcp-tabs{
  display:flex;gap:6px;overflow-x:auto;
  padding:8px 0;border-bottom:1px solid #1a1a1a;margin-bottom:10px;
  scrollbar-width:none;
}
.fmcp-tabs::-webkit-scrollbar{display:none}
.fmcp-tab{
  display:flex;align-items:center;gap:7px;
  background:#181818;border:1.5px solid #222;color:#aaa;
  border-radius:20px;padding:5px 12px 5px 7px;cursor:pointer;
  white-space:nowrap;font-size:.8rem;font-weight:700;letter-spacing:.3px;
  transition:border-color .2s,color .2s,background .2s;flex-shrink:0;
}
.fmcp-tab.fmcp-active{border-color:#972165;color:#fff;background:#1c1c1c}
.fmcp-tab img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#333}

/* Episodes */
.fmcp-ep-list{display:flex;flex-direction:column;gap:8px}
.fmcp-ep-card{
  display:flex;align-items:center;gap:10px;
  background:#181818;border:1px solid #1e1e1e;border-radius:8px;
  padding:9px 11px;transition:border-color .2s,background .2s;
}
.fmcp-ep-card:hover{border-color:#1DB954;background:#1c1c1c}
.fmcp-ep-art{width:46px;height:46px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#2a2a2a}
.fmcp-ep-info{flex:1;min-width:0}
.fmcp-ep-title{
  font-weight:700;font-size:.9rem;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fmcp-ep-meta{font-size:.68rem;color:#555;margin-top:2px}
.fmcp-ep-play{
  width:30px;height:30px;border-radius:50%;border:none;
  background:#1DB954;color:#000;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:transform .15s;
}
.fmcp-ep-play:hover{transform:scale(1.1)}

/* Loading spinner on play button */
.fmcp-play.fmcp-loading{
  animation:fmcp-spin .8s linear infinite;
  background:#7a1a52;
}
@keyframes fmcp-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.fmcp-msg{text-align:center;padding:28px 0;color:#444;font-size:.88rem}
.fmcp-err{text-align:center;padding:28px 0;color:#972165;font-size:.88rem}
.fmcp-embed-wrap{margin-top:10px;border-radius:10px;overflow:hidden}

@media(max-width:360px){
  .fmcp-vol-wrap{display:none}
  .fmcp-row{gap:7px;padding:0 8px}
}