.cobo-player {
  /*min-width: 500px;*/
  margin: 0;
  padding: 8px 15px 8px 6px;
  border: 1px solid var(--cobo-border, #bbb);
  border-radius: 12px;
  //font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background-color: var(--cobo-box-bg, #ccc);
}

.cobo-player__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
/*  overflow: hidden; 
  text-overflow: ellipsis; */
} 

/* Il contenitore centrale ospita il tooltip e può restringersi */
.cobo-player__meta {
  position: relative;
  overflow: visible;    /* per il tooltip */
  flex: 1 1 auto;       /* si espande e si restringe */
  min-width: 0;         /* senza questo l’ellissi non parte nei flex */
  display: block;
}

.cobo-player__station {
  font-weight: 900;
font-size: 1.2em;
  color: var(--cobo-station-text, #111);
}

.cobo-player__now {
  font-size: 0.9em;
  color: var(--cobo-now-text, #555);
  display: block;
  width: 100%;          /* fondamentale per dare un limite al testo */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  line-height: 18px;
  margin-top: 2px;
}
/* Tooltip base: invisibile */
.cobo-player__meta::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-6px);
  background: #222;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: normal;
  max-width: 320px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 0.85em;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

/* Hover: mostra il tooltip */
.cobo-player__meta:hover::after {
  opacity: 1;
}

/* Se la barra è attaccata in basso e il tooltip resta fuori viewport,
   inverti direzione: */
/*
.cobo-player__meta::after { top: 100%; bottom: auto; transform: translateY(6px); }
*/

.cobo-player__fallback {
  margin-top: 8px;
  font-size: 0.8em;
  color: var(--cobo-fallback-text, #666);
}

.cobo-player__fallback a {
  color: var(--cobo-fallback-link, #0057ff);
text-decoration: none;
}

.cobo-player__fallback a:hover {
  color: var(--cobo-fallback-link, #0057ff);
  text-decoration: underline;
}

/* Bottoni play/pause - inizio */

/* Bottoni: base */
.cobo-player__play  {
  padding: 0;
  border-radius: 100px;
  font-size: 40px;
  line-height: 0;
  width: 25px;
  height: 25px;
  font-family: "Segoe UI Symbol", "San Francisco", "Noto Sans Symbols", "Arial Unicode MS", sans-serif;
}

.cobo-player__pause {
  padding: 0;
  border-radius: 100px;
  font-size: 32px;
  width: 28px;
  height: 25px;
  font-family: "Segoe UI Symbol", "San Francisco", "Noto Sans Symbols", "Arial Unicode MS", sans-serif;
  line-height: 0.7em;
}

button#cobo-player-play {
    display: block;
    width: 28px;
    height: 25px;
    font-size: 16px;
    transform: none;
    flex-shrink: 1;
    padding: 0px;
    margin: 0;
}

@media (max-width: 991px) {
  html body .fl-page button.cobo-player__play {
    font-size: 40px;
    line-height: 0.6em;
  }

  html body .fl-page button.cobo-player__pause {
    font-size: 32px;
    line-height: 0.6em;
  }

}
/* Varianti (valori dal backoffice via CSS vars) */
.cobo-player__play  {
  background-color: var(--cobo-play-bg, #111);
  color:            var(--cobo-play-text, #fff);
  border: solid 1px var(--cobo-play-bg, #111);
}
.cobo-player__pause {
  background-color: var(--cobo-pause-bg, #eee);
  color:            var(--cobo-pause-text, #111);
  border: solid 1px var(--cobo-pause-bg, #eee);
}

/* Stati interattivi comuni */

   .cobo-player button.cobo-player__play:hover:not(:disabled):not(#\0), .cobo-player button.cobo-player__play:active:not(#\0), .cobo-player button.cobo-player__play:focus:not(#\0),
   .cobo-player button.cobo-player__play:focus-visible:not(#\0) {
  background-color: var(--cobo-play-bg, #111);
  color:            var(--cobo-play-text, #fff);
  border: solid 1px var(--cobo-play-bg, #111);
              
}
 .cobo-player button.cobo-player__play:hover:not(:disabled):not(#\0), .cobo-player button.cobo-player__pause:hover:not(:disabled):not(#\0) {
 filter: brightness(1.1);  
 }
/*
.cobo-player button.cobo-player__pause:hover:not(:disabled),
.cobo-player button.cobo-player__pause:focus-visible {
  background-color: var(--cobo-pause-bg, #eee);
color:            var(--cobo-pause-text, #111);
border: solid 1px var(--cobo-pause-bg, #eee);
 filter: brightness(1.0);                
} */

/* duplica la classe per aumentare il peso */
.cobo-player button.cobo-player__pause:hover:not(:disabled):not(#\0), .cobo-player button.cobo-player__pause:active:not(#\0), .cobo-player button.cobo-player__pause:focus:not(#\0),
.cobo-player button.cobo-player__pause:focus-visible:not(#\0) {
  background-color: var(--cobo-pause-bg, #eee);
  color: var(--cobo-pause-text, #111);
  border: 1px solid var(--cobo-pause-bg, #eee);
}

/*Bottoni play/pause - fine */

/* .cobo-player__play  { background-color: var(--cobo-play-bg, #111); color: var(--cobo-play-text, #fff); }
.cobo-player__pause { background-color: var(--cobo-pause-bg, #eee); color: #111; } */



/* Stato playing */
.cobo-player--playing .cobo-player__play  { display: none !important; }
.cobo-player--playing .cobo-player__pause { display: inline-block !important; }

/* Focus tastiera */
.cobo-player :is(button):focus-visible {
  outline: 2px solid var(--cobo-focus, #0a84ff);
  outline-offset: 2px;
}

/* Variante locale via ID (opzionale) */
#cobo-player-hero.cobo-player {
 /* background: #111;
 color: #fff;
  border-color: #333;*/
}
//#cobo-player-hero .cobo-player__now { color: #ddd; }

/* Equalizzatore sempre visibile, fermo in pausa */
.cobo-player__waves {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 14px;
  margin-left: auto;
  opacity: 1;
  transform: none;
}

/* Barre: base statica + setup animazione senza shorthand */
.cobo-player__waves > span {
  width: 3px;
  height: 3px;                 /* altezza minima visibile */
  min-height: 3px;
  background: var(--cobo-wave, currentColor);
  border-radius: 2px;
  display: inline-block;

  /* Config animazione separata per evitare reset dei delay */
  animation-name: none;         /* in pausa: nessuna animazione */
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-delay: var(--d, 0s); /* delay per barra, via CSS var */
  opacity: .9;
}

/* Delay differenti per ogni barra (fase diversa) */
.cobo-player__waves > span:nth-child(1) { --d: 0s;   }
.cobo-player__waves > span:nth-child(2) { --d: .12s; }
.cobo-player__waves > span:nth-child(3) { --d: .24s; }
.cobo-player__waves > span:nth-child(4) { --d: .36s; }
.cobo-player__waves > span:nth-child(5) { --d: .48s; }

/* In play: attiva ANCHE solo il name e fai partire l'animazione */
.cobo-player--playing .cobo-player__waves > span {
  animation-name: cobo-wave;     /* non usiamo shorthand */
  animation-play-state: running;
}

/* Keyframes: picchi diversi nel tempo, min 6px */
@keyframes cobo-wave {
  0%   { height: 6px }
  25%  { height: 14px }
  50%  { height: 8px }
  75%  { height: 12px }
  100% { height: 6px }
}

/* Accessibilità: chi chiede meno animazioni vede barre statiche ma visibili */
@media (prefers-reduced-motion: reduce) {
  .cobo-player__waves > span { animation-name: none; }
}