/* ============================================================
   WEBRADIO PLAYER — player.css  v1.4  (Infiny Radio theme)
   ============================================================ */

:root {
  --wr-bg:     #1a1f8f;
  --wr-text:   #ffffff;
  --wr-muted:  rgba(255,255,255,.6);
  --wr-radius: 16px;
  --wr-shadow: 0 8px 32px rgba(10,12,60,.5), 0 2px 8px rgba(0,0,0,.2);
}

/* ----- BARRE FLOTTANTE ----- */
#wr-player {
  position:      fixed;
  bottom:        16px;
  left:          50%;
  transform:     translateX(-50%) translateY(120px);
  z-index:       99999;

  width:         min(700px, calc(100vw - 32px));
  height:        68px;

  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       0 18px;

  background:    var(--wr-bg);
  border-radius: var(--wr-radius);
  box-shadow:    var(--wr-shadow);

  font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color:         var(--wr-text);

  transition:    transform .5s cubic-bezier(.22,.68,0,1.2);
  will-change:   transform;
}

#wr-player.wr-visible {
  transform: translateX(-50%) translateY(0);
}

/* Bordure subtile */
#wr-player::before {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  var(--wr-radius);
  border:         1.5px solid rgba(255,255,255,.15);
  pointer-events: none;
  transition:     border-color .4s;
}
#wr-player.wr-playing::before { border-color: rgba(255,255,255,.35); }

/* ----- COVER ----- */
#wr-cover-wrap {
  position:    relative;
  flex-shrink: 0;
  width:  46px;
  height: 46px;
}

#wr-cover {
  width:         46px;
  height:        46px;
  border-radius: 10px;
  object-fit:    cover;
  display:       block;
  transition:    opacity .3s;
}
#wr-cover.wr-cover-fade { opacity: 0; }

#wr-cover-placeholder {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45);
}
#wr-cover-placeholder svg { width:22px; height:22px; }

/* halo pulsé */
#wr-pulse {
  position: absolute; inset: -4px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.65);
  opacity: 0; pointer-events: none;
}
#wr-player.wr-playing #wr-pulse { animation: wr-pulse 2.2s ease-in-out infinite; }

/* ----- INFOS — parfaitement centrées ----- */
#wr-info {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             4px;
}

#wr-now {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  overflow:       hidden;
}

/* TITRE — en haut, gras */
#wr-artist {
  font-size:      14px;
  font-weight:    700;
  color:          #ffffff;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.2;
}

/* ARTISTE — en dessous, gris clair */
#wr-title {
  font-size:      13px;
  font-weight:    400;
  color:          rgba(255,255,255,.6);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.2;
}

/* Égaliseur masqué */
#wr-equalizer { display: none; }

/* ----- CONTRÔLES ----- */
#wr-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; }

#wr-play-btn {
  width:           42px;
  height:          42px;
  border-radius:   50%;
  border:          none;
  background:      rgba(255,255,255,.18);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      transform .15s, background .2s;
}
#wr-play-btn svg { width:16px; height:16px; }
#wr-play-btn:hover  { background:rgba(255,255,255,.3); transform:scale(1.08); }
#wr-play-btn:active { transform:scale(.93); }
#wr-player.wr-loading #wr-play-btn { animation: wr-blink 1s step-start infinite; }

#wr-volume-wrap { display:flex; align-items:center; gap:8px; }

#wr-mute-btn {
  background:none; border:none; color:rgba(255,255,255,.6);
  cursor:pointer; padding:0; display:flex; align-items:center; transition:color .2s;
}
#wr-mute-btn:hover { color:#fff; }
#wr-mute-btn svg { width:16px; height:16px; }

#wr-volume {
  -webkit-appearance:none; appearance:none;
  width:90px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.2); outline:none; cursor:pointer;
}
#wr-volume::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; cursor:pointer;
  transition:transform .15s; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
#wr-volume::-webkit-slider-thumb:hover { transform:scale(1.2); }
#wr-volume::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
}

/* ----- KEYFRAMES ----- */
@keyframes wr-pulse {
  0%  { opacity:.6; transform:scale(1);    }
  70% { opacity:0;  transform:scale(1.35); }
  100%{ opacity:0;  transform:scale(1.35); }
}
@keyframes wr-blink { 50%{ opacity:.3; } }

/* ----- RESPONSIVE ----- */
@media (max-width:560px) {
  #wr-player { height:62px; gap:10px; padding:0 14px; bottom:10px; }
  #wr-volume { width:60px; }
  #wr-cover-wrap, #wr-cover { width:40px; height:40px; }
  #wr-play-btn { width:38px; height:38px; }
}
@media (max-width:380px) { #wr-volume-wrap { display:none; } }