/**
 * Radio Bocconi Player - CSS Unificato e Ottimizzato
 * Versione: 2.0.0
 * Combinazione ottimizzata di player.css e sticky-player.css
 */

/* ============================================
   1. VARIABILI E RESET
   ============================================ */

:root {
  --rb-primary-color: #ff3333;
  --rb-secondary-color: #121212;
  --rb-text-color: #ffffff;
  --rb-accent-color: rgba(255, 51, 51, 0.8);
  --rb-font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --rb-transition-speed: 0.3s;
  --rb-player-height: 120px;
  --rb-player-height-compact: 80px;
  --rb-player-height-mobile: 70px;
  --rb-sticky-zindex: 99999;
}

/* Reset universale per il player */
.rb-player *,
.rb-player *::before,
.rb-player *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Rimuovi tutti gli effetti tap/focus per Safari/iOS */
.rb-player button,
.rb-player a,
.rb-player [role="button"],
.rb-sticky-toggle,
.rb-play-button,
.rb-pause-button,
.rb-volume-button,
.rb-mute-button {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  outline: none !important;
}

/* Rimuovi effetti focus/active su iOS */
.rb-player button:focus,
.rb-player button:active,
.rb-sticky-toggle:focus,
.rb-sticky-toggle:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ============================================
   2. PLAYER BASE
   ============================================ */

.rb-player {
  width: 100%;
  height: var(--rb-player-height);
  max-height: var(--rb-player-height);
  font-family: var(--rb-font-family);
  color: var(--rb-text-color);
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

/* Stile moderno con gradiente */
.rb-player.rb-style-modern {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
}

/* Immagine di sfondo */
.rb-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 1;
}

/* Container principale */
.rb-player-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* ============================================
   3. CONTROLLI E LAYOUT
   ============================================ */

/* Controlli Play/Pause */
.rb-controls-left {
  flex-shrink: 0;
  padding-left: 32px;
  display: flex;
  align-items: center;
  height: 100%;
}

.rb-controls-left button {
  background-color: transparent !important;
  color: var(--rb-text-color);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--rb-transition-speed) ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  outline: none !important;
  box-shadow: none !important;
}

.rb-controls-left button:active {
  transform: scale(0.95);
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.rb-controls-left button:focus,
.rb-controls-left button:focus-visible,
.rb-controls-left button:hover {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Rimuovi highlight su Safari/iOS */
.rb-controls-left button::-moz-focus-inner {
  border: 0;
}

/* Cover Image */
.rb-cover-container {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  margin-left: 16px;
  display: flex;
  align-items: center;
}

.rb-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform var(--rb-transition-speed) ease;
}

/* Content Container */
.rb-content-container {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  overflow: hidden;
  margin-left: 16px;
  margin-right: 32px;
}

/* Track Info */
.rb-track-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  max-height: 90px;
  overflow: hidden;
}

.rb-track-current {
  font-size: 12px;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 1px;
  color: #9f9f9f;
  margin-bottom: 1px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-track-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--rb-primary-color);
  font-style: italic;
  margin-bottom: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-wrap: break-word;
  line-height: 1.2;
}

.rb-track-artist {
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-wrap: break-word;
  line-height: 1.2;
}

.rb-track-metadata {
  font-size: 10px;
  font-style: italic;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-track-metadata .metadata-value {
  color: #ffffff;
  margin-right: 5px;
}

.rb-track-metadata .metadata-separator {
  display: inline-block;
  margin: 0 3px;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   4. CONTROLLI VOLUME
   ============================================ */

/* Volume Container */
.rb-volume-container {
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  width: auto;
  height: 60px;
  display: flex;
  align-items: center;
}

/* Volume Control Base */
.rb-volume-control {
  display: flex;
  align-items: center;
}

.rb-volume-control button {
  background: none;
  color: var(--rb-text-color);
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--rb-transition-speed) ease;
  opacity: 0.8;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.rb-volume-control button:hover {
  opacity: 1;
}

.rb-volume-control button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}

/* Volume Slider (nascosto) */
.rb-volume-slider,
.rb-volume-range {
  display: none;
}

/* Volume Control per modalità compatta */
.rb-volume-control.rb-compact-only {
  display: none;
}

/* ============================================
   5. VOLUME KNOB
   ============================================ */

.rb-volume-knob {
  display: none;
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
}

/* Mostra solo su desktop e non in modalità compatta */
@media screen and (min-width: 769px) {
  .rb-volume-knob {
    display: block !important;
  }

  .rb-player-compact .rb-volume-knob {
    display: none !important;
  }
}

/* SVG del knob */
.volume-knob-svg {
  width: 100%;
  height: 100%;
  transition: filter 0.2s ease;
}

.volume-knob-svg:hover {
  filter: brightness(1.1);
}

.volume-knob-svg.dragging {
  filter: brightness(1.2);
  cursor: grabbing;
}

/* Track e Progress del knob */
.knob-track,
.knob-progress {
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

.knob-track {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 5;
}

.knob-progress {
  stroke: var(--rb-primary-color);
  stroke-width: 4;
  transition: stroke-dashoffset 0.15s ease;
  filter: drop-shadow(0 0 4px rgba(255, 51, 51, 0.4));
}

/* Stati del knob */
.volume-knob-svg.muted .knob-progress {
  stroke: #666;
  filter: none;
}

.volume-knob-svg.zero-volume .knob-progress {
  stroke: #999;
  filter: none;
}

/* Bottone mute centrale del knob */
.knob-mute-button {
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 100 !important;
  position: relative;
  pointer-events: auto !important;
}

.knob-mute-button circle {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: auto !important;
}

.knob-mute-button:active {
  transform: scale(0.95);
}

/* Icone del volume nel knob */
.volume-icon-on,
.volume-icon-off {
  transition: all 0.2s ease;
  pointer-events: none;
  fill: white !important;
}

.volume-icon-on path,
.volume-icon-off path {
  fill: white !important;
}

.knob-mute-button:hover .volume-icon-on,
.knob-mute-button:hover .volume-icon-off {
  fill: var(--rb-primary-color) !important;
}

.knob-mute-button:hover .volume-icon-on path,
.knob-mute-button:hover .volume-icon-off path {
  fill: var(--rb-primary-color) !important;
}

/* Effetti hover per il knob */
.rb-volume-knob:hover .knob-track {
  stroke: rgba(255, 255, 255, 0.3);
}

.rb-volume-knob:hover .knob-progress {
  filter: drop-shadow(0 0 6px rgba(255, 51, 51, 0.6));
}

/* Tooltip del volume */
.rb-volume-knob::after {
  content: attr(data-volume) "%";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.rb-volume-knob:hover::after {
  opacity: 1;
}

.rb-volume-knob.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================
   6. ICONE SVG
   ============================================ */

.rb-play-icon svg,
.rb-pause-icon svg {
  width: calc(var(--rb-player-height) / 2);
  height: calc(var(--rb-player-height) / 2);
  display: inline-block;
}

.rb-mute-icon svg,
.rb-volume-icon svg {
  width: 29px;
  height: 29px;
}

/* Stili icone */
.rb-play-icon svg circle,
.rb-pause-icon svg circle {
  fill: none;
  stroke: currentColor;
}

.rb-play-icon svg path,
.rb-pause-icon svg rect,
.rb-volume-icon svg path,
.rb-mute-icon svg path {
  fill: currentColor;
  stroke: none;
}

.rb-play-button .rb-play-icon,
.rb-pause-button .rb-pause-icon,
.rb-pause-button .rb-volume-icon,
.rb-pause-button .rb-mute-icon {
  color: white;
}

/* ============================================
   7. MODALITÀ COMPATTA
   ============================================ */

.rb-player-compact {
  height: var(--rb-player-height-compact);
  --rb-player-height: var(--rb-player-height-compact);
}

.rb-player-compact .rb-volume-control.rb-compact-only {
  display: flex !important;
  align-items: center;
}

.rb-player-compact .rb-volume-knob {
  display: none !important;
}

.rb-player-compact .rb-cover-container {
  width: 60px;
  height: 60px;
}

.rb-player-compact .rb-track-title {
  font-size: 16px;
  line-height: 1.1;
}

.rb-player-compact .rb-track-artist {
  font-size: 12px;
  line-height: 1.1;
}

.rb-player-compact .rb-track-current {
  font-size: 10px;
}

.rb-player-compact .rb-controls-left button {
  width: 40px;
  height: 40px;
}

/* ============================================
   8. STICKY PLAYER
   ============================================ */

.rb-player-sticky-container {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: var(--rb-sticky-zindex);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: visible !important; /* Importante per mostrare il toggle button fuori dal container */
  pointer-events: none; /* Permette click attraverso container vuoto */
}

/* Riabilita pointer events per elementi visibili */
.rb-player-sticky-container .rb-player,
.rb-player-sticky-container .rb-sticky-toggle {
  pointer-events: auto;
}

/* Posizionamento sticky - Container sempre visibile per il toggle */
.rb-player-sticky-container.rb-sticky-top {
  top: 0;
}

.rb-player-sticky-container.rb-sticky-bottom {
  bottom: 0;
}

/* Nascondi il player (non il container) quando non è visibile */
.rb-player-sticky-container.rb-sticky-top:not(.rb-sticky-visible) .rb-player {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.rb-player-sticky-container.rb-sticky-bottom:not(.rb-sticky-visible) .rb-player {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

/* Player visibile */
.rb-player-sticky-container.rb-sticky-visible .rb-player {
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* Altezze sticky esplicite */
.rb-player-sticky-container .rb-player {
  height: 120px !important;
  max-height: 120px !important;
  min-height: 120px !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-player {
  height: 80px !important;
  max-height: 80px !important;
  min-height: 80px !important;
  overflow: hidden !important;
}

/* Adattamenti sticky compact */
.rb-player-sticky-container.rb-sticky-compact .rb-cover-container {
  width: 60px !important;
  height: 60px !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-controls-left {
  padding-left: 16px !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-controls-left button {
  width: 40px !important;
  height: 40px !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-track-current {
  display: none !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-track-title {
  font-size: 14px !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-track-artist {
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rb-player-sticky-container.rb-sticky-compact .rb-track-metadata {
  display: none !important;
}

/* Toggle Button */
.rb-sticky-toggle {
  position: absolute;
  border: none;
  width: 80px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 100000; /* Deve essere sopra lo sticky player (99999) */
  font-size: 11px;
  font-weight: 600;
  color: white;
  gap: 4px;
}

/* Stati toggle button */
.rb-player-sticky-container > .rb-sticky-toggle {
  background-color: #ff3333 !important;
}

.rb-player-sticky-container.rb-sticky-visible > .rb-sticky-toggle {
  background-color: #0073aa !important;
}

/* ===== PLAYER BOTTOM - Toggle sempre visibile ===== */
.rb-player-sticky-container.rb-sticky-bottom .rb-sticky-toggle {
  position: fixed;
  bottom: 0; /* Toggle sempre in basso alla pagina */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  transition: bottom 0.3s ease; /* Transizione solo su bottom */
}

/* Quando player visibile: toggle si sposta sopra il player */
.rb-player-sticky-container.rb-sticky-bottom.rb-sticky-visible .rb-sticky-toggle {
  bottom: 120px; /* Sopra player normale (120px) */
}

/* Player compatto: toggle si adatta all'altezza */
.rb-player-sticky-container.rb-sticky-bottom.rb-sticky-visible.rb-sticky-compact .rb-sticky-toggle {
  bottom: 80px; /* Sopra player compatto (80px) */
}

/* ===== PLAYER TOP - Toggle sempre visibile ===== */
.rb-player-sticky-container.rb-sticky-top .rb-sticky-toggle {
  position: fixed;
  top: 0; /* Toggle sempre in alto alla pagina */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: top 0.3s ease; /* Transizione solo su top */
}

/* Quando player visibile: toggle si sposta sotto il player */
.rb-player-sticky-container.rb-sticky-top.rb-sticky-visible .rb-sticky-toggle {
  top: 120px; /* Sotto player normale (120px) */
}

/* Player compatto: toggle si adatta all'altezza */
.rb-player-sticky-container.rb-sticky-top.rb-sticky-visible.rb-sticky-compact .rb-sticky-toggle {
  top: 80px; /* Sotto player compatto (80px) */
}

.rb-sticky-toggle::before {
  display: none !important;
}

.rb-sticky-toggle:hover {
  opacity: 0.9;
}

.rb-sticky-toggle:active {
  opacity: 0.8;
  background-color: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Rimuovi qualsiasi highlight background su iOS per tutti i bottoni */
.rb-sticky-toggle::-moz-focus-inner,
.rb-player button::-moz-focus-inner {
  border: 0 !important;
}

/* Previeni selezione testo e highlight su iOS */
.rb-sticky-toggle,
.rb-player button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* ============================================
   9. BODY OFFSET SYSTEM
   ============================================ */

body.rb-sticky-active {
  transition: padding 0.3s ease;
}

/* Player in alto */
body.rb-sticky-active.rb-sticky-offset-top {
  padding-top: 120px !important;
}

body.rb-sticky-active.rb-sticky-offset-top.rb-sticky-compact {
  padding-top: 80px !important;
}

/* Player in basso */
body.rb-sticky-active.rb-sticky-offset-bottom {
  padding-bottom: 120px !important;
}

body.rb-sticky-active.rb-sticky-offset-bottom.rb-sticky-compact {
  padding-bottom: 80px !important;
}

/* ============================================
   10. RESPONSIVE MOBILE (≤768px)
   ============================================ */

@media screen and (max-width: 768px) {
  .rb-player {
    height: var(--rb-player-height);
    min-height: 0;
  }

  .rb-player-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  /* Layout mobile */
  .rb-controls-left {
    padding-left: 16px;
    order: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    height: 100%;
  }

  .rb-controls-left button {
    width: 45px;
    height: 45px;
  }

  .rb-cover-container {
    margin-left: 16px;
    order: 2;
  }

  .rb-content-container {
    margin-left: 16px;
    margin-right: 80px;
    order: 3;
    text-align: left;
    flex: 1;
    min-width: 0;
  }

  .rb-volume-container {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: auto;
    order: 4;
  }

  .rb-volume-slider {
    display: none;
  }

  /* Compact mode mobile */
  .rb-player-compact {
    height: var(--rb-player-height-mobile);
  }

  .rb-player-compact .rb-cover-container {
    width: 50px;
    height: 50px;
  }

  .rb-player-compact .rb-controls-left button {
    width: 35px;
    height: 35px;
  }

  .rb-player-compact .rb-track-title {
    font-size: 14px;
  }

  .rb-player-compact .rb-track-artist {
    font-size: 11px;
  }

  /* Text sizing mobile */
  .rb-track-current {
    font-size: 11px;
    margin-bottom: 2px;
  }

  .rb-track-title {
    font-size: 18px;
    max-height: 45px;
    line-height: 1.2;
  }

  .rb-track-artist {
    font-size: 14px;
    max-height: 28px;
    line-height: 1.2;
  }

  .rb-track-metadata {
    font-size: 10px;
    margin-top: 2px;
  }

  .rb-track-info {
    max-height: 85px;
    overflow: hidden;
  }

  /* Body offset mobile */
  body.rb-sticky-active.rb-sticky-offset-top.rb-sticky-compact {
    padding-top: 70px !important;
  }

  body.rb-sticky-active.rb-sticky-offset-bottom.rb-sticky-compact {
    padding-bottom: 70px !important;
  }

  /* Sticky compact mobile */
  .rb-player-sticky-container.rb-sticky-compact .rb-player {
    height: 70px !important;
    max-height: 70px !important;
    min-height: 70px !important;
  }

  .rb-player-sticky-container.rb-sticky-compact .rb-cover-container {
    width: 50px !important;
    height: 50px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .rb-player-sticky-container.rb-sticky-compact .rb-controls-left {
    padding-left: 12px !important;
  }

  .rb-player-sticky-container.rb-sticky-compact .rb-controls-left button {
    width: 35px !important;
    height: 35px !important;
  }

  .rb-player-sticky-container.rb-sticky-compact .rb-volume-container {
    display: none !important;
  }

  .rb-player-sticky-container.rb-sticky-compact .rb-content-container {
    margin-right: 10px !important;
  }

  /* Toggle button mobile compatto (70px) */
  .rb-player-sticky-container.rb-sticky-bottom.rb-sticky-visible.rb-sticky-compact .rb-sticky-toggle {
    bottom: 70px; /* Sopra player mobile compatto */
  }

  .rb-player-sticky-container.rb-sticky-top.rb-sticky-visible.rb-sticky-compact .rb-sticky-toggle {
    top: 70px; /* Sotto player mobile compatto */
  }
}

/* ============================================
   11. RESPONSIVE TABLET (≤992px)
   ============================================ */

@media screen and (max-width: 992px) {
  .rb-volume-slider {
    width: 70px;
  }

  .rb-controls-left button {
    width: 45px;
    height: 45px;
  }
}

/* ============================================
   12. RESPONSIVE MOLTO PICCOLI (≤480px)
   ============================================ */

@media screen and (max-width: 480px) {
  .rb-player-sticky-container .rb-volume-container {
    display: none !important;
  }

  .rb-player-sticky-container .rb-content-container {
    margin-right: 10px !important;
  }
}

/* ============================================
   13. ADMIN BAR FIXES
   ============================================ */

@media screen and (max-width: 782px) {
  .admin-bar .rb-player-sticky-container.rb-sticky-top {
    top: 46px;
  }
}

/* ============================================
   14. UTILITIES
   ============================================ */

/* Loading state */
.rb-loading {
  position: relative;
  opacity: 0.7;
}

.rb-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>')
    center center no-repeat;
  animation: rb-rotate 1.5s linear infinite;
}

/* Animations */
@keyframes rb-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* AMP Mode Fix */
.amp-mode-mouse .rb-player-sticky-container {
  position: relative;
  transform: none !important;
}

/* Persistent Audio Frame */
#rb-persistent-audio-frame {
  position: fixed;
  top: -999px;
  left: -999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* MediaElementJS Hide (cleanup) */
.mejs-container,
.mejs-controls,
.mejs-horizontal-volume-slider,
.mejs-time-rail,
.mejs-time,
.mejs-time-handle,
.mejs-time-float,
.mejs-volume-button,
.mejs-horizontal-volume-total,
.mejs-horizontal-volume-current,
.mejs-horizontal-volume-handle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Backward Compatibility */
.rb-sticky-offset-top {
  transition: padding-top 0.3s ease;
}

.rb-sticky-offset-top.rb-sticky-active {
  padding-top: var(--rb-player-height, 120px);
}

.rb-sticky-offset-bottom {
  transition: padding-bottom 0.3s ease;
}

.rb-sticky-offset-bottom.rb-sticky-active {
  padding-bottom: var(--rb-player-height, 120px);
}