/* Toolbar Player Fixo - Frontend CSS */
:root {
  --dtp-font: 'Montserrat', sans-serif;
}
.dtp-top-player {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;
  box-sizing: border-box;
  min-height: 60px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3), var(--grad2), var(--grad1));
  background-size: 400% 400%;
  font-family: var(--dtp-font);
}
.dtp-top-player.dtp-animated {
  animation: dtpGradientMove 18s ease infinite;
}
@keyframes dtpGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.dtp-top-player::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -30%;
  width: 160%;
  height: 3px;
  background: linear-gradient(90deg, rgba(53,185,195,0) 0%, rgba(53,185,195,0.8) 50%, rgba(53,185,195,0) 100%);
  animation: dtpEnergyFlow 3s linear infinite;
  border-radius: 3px;
}
@keyframes dtpEnergyFlow {
  0% { transform: translateX(-30%); opacity: 0.6; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(30%); opacity: 0.6; }
}
.dtp-player-left { display: flex; align-items: center; gap: 10px; }
.dtp-logo-box { position: relative; width: clamp(45px, 6vw, 60px); display: flex; align-items: center; justify-content: center; border-radius: 50%; backdrop-filter: blur(6px) saturate(130%); background: rgba(255,255,255,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.dtp-logo-box img { width: 90%; filter: drop-shadow(0 0 3px var(--accent)); transition: all .3s ease; }
.dtp-logo-box.glow img { animation: dtpGlowPulse 2s ease-in-out infinite; }
@keyframes dtpGlowPulse { 0%,100%{filter:drop-shadow(0 0 0px var(--accent));} 50%{filter:drop-shadow(0 0 15px var(--accent));} }

.dtp-song-info { display:flex; flex-direction:column; line-height:1.1; }
.dtp-song-info h4 { margin:0; font-size: clamp(.8rem, 1.1vw, 1rem); font-weight:700; color:#fff; display:flex; align-items:center; gap:6px; }
.dtp-song-info p { margin:.2rem 0 0 0; font-size: clamp(.7rem, 1vw, .85rem); color:#e0e0e0; font-weight:500; }

.dtp-live-indicator { display:inline-flex; align-items:center; justify-content:center; background:#ff0000; color:#fff; font-size: clamp(.65rem, .8vw, .75rem); font-weight:700; border-radius:999px; padding:.15rem .55rem .18rem .55rem; letter-spacing:.3px; opacity:0; transition:opacity .3s ease; animation: dtpPulseLive 2s ease-in-out infinite; box-shadow:0 0 6px rgba(255,0,0,.6); }
.dtp-live-indicator.ativo { opacity:1; }
.dtp-live-indicator a{ color:#fff; text-decoration:none; }
@keyframes dtpPulseLive { 0%,100%{ transform:scale(1); box-shadow:0 0 6px rgba(255,0,0,.7), inset 0 0 4px rgba(255,255,255,.2);} 50%{ transform:scale(1.05); box-shadow:0 0 10px rgba(255,0,0,.9), inset 0 0 6px rgba(255,255,255,.3);} }

.dtp-player-controls { display:flex; align-items:center; gap:8px; }
.dtp-player-btn { display:flex; align-items:center; justify-content:center; background:#fff; border:none; color:var(--accent); font-size:clamp(.7rem,1vw,1rem); width:clamp(1.9rem,2.5vw,2.2rem); height:clamp(1.9rem,2.5vw,2.2rem); border-radius:50%; cursor:pointer; transition:all .2s ease; box-shadow: inset 0 0 3px rgba(0,0,0,.2), 0 0 6px rgba(53,185,195,.4); }
.dtp-player-btn.pulsante { animation: dtpPulsePlay 2.4s ease-in-out infinite; }
@keyframes dtpPulsePlay { 0%,100%{ box-shadow:0 0 0 0 rgba(53,185,195,.6); transform:scale(1);} 50%{ box-shadow:0 0 14px 6px rgba(53,185,195,0); transform:scale(1.1);} }
.dtp-player-btn:hover{ background:var(--accent); color:#fff; transform:scale(1.1); }
.dtp-player-btn:active{ transform:scale(.92); }

.dtp-volume-control { display:flex; align-items:center; gap:5px; }
.dtp-volume-slider { width: clamp(55px,8vw,90px); cursor:pointer; accent-color: var(--accent); }

.dtp-cta-btn { display:flex; align-items:center; gap:6px; background: linear-gradient(90deg, var(--cta1), var(--cta2)); color:#fff; font-weight:600; font-size:.8rem; padding:6px 14px; border-radius:20px; text-decoration:none; box-shadow:0 3px 8px rgba(0,0,0,.3); transition:all .3s ease; }
.dtp-cta-btn:hover{ transform:scale(1.05); background: linear-gradient(90deg, var(--cta2), var(--cta1)); }

.dtp-social-links { display:flex; align-items:center; gap:10px; }
.dtp-social-links a{ color:#fff; font-size: clamp(.9rem,1.3vw,1.1rem); text-decoration:none; transition:all .3s ease;}
.dtp-social-links a:hover{ color:#FFD700; }

/* Ensure content below not hidden by top bar */
body { padding-top: 60px; }
@media (max-width: 768px){
  body { padding-top: 70px; }
}