/* ======================================================
   PLAYER WRAPPER – pillola compatta fissa in basso
====================================================== */
.player-wrapper {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: none !important;

  background: linear-gradient(135deg, #1a3a6e 0%, #0d2247 100%);
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  z-index: 9999 !important;

  padding: 7px 16px 7px 7px;
  box-sizing: border-box;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ======================================================
   PLAYER INLINE
====================================================== */
.player-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

/* ======================================================
   LOGO
====================================================== */
.player-logo-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 107, 53, 0.9);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
  flex-shrink: 0;
  display: block;
}

/* ======================================================
   LABEL "Radio Gump"
====================================================== */
.player-label {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  opacity: 0.95;
}

/* ======================================================
   MINI STATUS – non più usato, nascosto
====================================================== */
#miniStatus {
  display: none !important;
}

/* ======================================================
   BUTTON TOGGLE – cerchio arancione
====================================================== */
.btn-toggle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;

  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: #ff6b35;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;

  box-shadow: 0 3px 12px rgba(255, 107, 53, 0.55);

  /* iOS */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  touch-action: manipulation;

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.btn-toggle:hover {
  background: #e55c28;
  transform: scale(1.1);
  box-shadow: 0 5px 16px rgba(255, 107, 53, 0.75);
}

.btn-toggle:active {
  transform: scale(0.95);
}

/* stato ON AIR */
.btn-toggle.active {
  background: #2ecc71;
  box-shadow: 0 3px 12px rgba(46, 204, 113, 0.55);
}

.btn-toggle.active:hover {
  background: #27ae60;
  box-shadow: 0 5px 16px rgba(46, 204, 113, 0.75);
}

/* focus accessibilità */
.btn-toggle:focus-visible {
  outline: 2px solid #ff6b35;
  outline-offset: 3px;
}

/* stato LOADING – giallo con animazione */
.btn-toggle.loading {
  background: #f39c12;
  box-shadow: 0 3px 12px rgba(243, 156, 18, 0.55);
  animation: spinLoad 1s linear infinite;
}

.btn-toggle.loading:hover {
  background: #e67e22;
  box-shadow: 0 5px 16px rgba(243, 156, 18, 0.75);
}

@keyframes spinLoad {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* stato ERROR – rosso con pulsazione */
.btn-toggle.error {
  background: #e74c3c;
  box-shadow: 0 3px 12px rgba(231, 76, 60, 0.55);
  animation: pulseError 1.5s ease-in-out infinite;
}

.btn-toggle.error:hover {
  background: #c0392b;
  box-shadow: 0 5px 16px rgba(231, 76, 60, 0.75);
}

@keyframes pulseError {
  0%, 100%  { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Nasconde link podcast (non usato) */
.btn-podcast {
  display: none !important;
}

/* ======================================================
   PULSE logo quando ON AIR
====================================================== */
.player-wrapper.on-air .player-logo-circle {
  animation: ringPulse 1.8s ease-out infinite;
}

@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* ======================================================
   LOADING STATE – borderde animate
====================================================== */
.player-wrapper.loading {
  box-shadow: 0 6px 24px rgba(243, 156, 18, 0.4);
  animation: loadingGlow 1.5s ease-in-out infinite;
}

@keyframes loadingGlow {
  0%, 100%  { box-shadow: 0 6px 24px rgba(243, 156, 18, 0.4); }
  50%       { box-shadow: 0 6px 24px rgba(243, 156, 18, 0.8); }
}

.player-wrapper.loading .player-logo-circle {
  animation: spinLogo 2s linear infinite;
}

@keyframes spinLogo {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ======================================================
   ERROR STATE – borderde rossa
====================================================== */
.player-wrapper.error {
  box-shadow: 0 6px 24px rgba(231, 76, 60, 0.4);
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 480px) {
  .player-wrapper {
    bottom: 14px !important;
    padding: 6px 14px 6px 6px;
  }

  .player-inline {
    gap: 10px;
  }

  .player-logo-circle {
    width: 38px;
    height: 38px;
  }

  .player-label {
    font-size: 0.76rem;
  }

  .btn-toggle {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }
}