/* 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, transparent 0%, var(--grad2) 50%, transparent 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:not(.dtp-track-cover-bg) { width: 90%; filter: drop-shadow(0 0 3px var(--accent)); transition: all .3s ease; }
.dtp-logo-box.glow > img:not(.dtp-track-cover-bg) { 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 var(--accent); }
.dtp-player-btn.pulsante { animation: dtpPulsePlay 2.4s ease-in-out infinite; }
@keyframes dtpPulsePlay { 0%,100%{ box-shadow:0 0 0 0 var(--accent); transform:scale(1);} 50%{ box-shadow:0 0 14px 6px transparent; 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:#25D366; 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:#25D366; color:#fff; }

.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; }
}


/* Toolbar Player Persistente */
html.dtp-persistent-navigation-enabled.dtp-persistent-loading::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  z-index: 2147483646;
  background: linear-gradient(90deg, var(--grad1, #000), var(--grad2, #000), var(--grad1, #000));
  background-size: 220% 100%;
  animation: dtpPersistentLoading 1.05s linear infinite;
}

@keyframes dtpPersistentLoading {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}


/* v1.0.4 - Persistência compatível com Hello Elementor */
html.dtp-persistent-navigation-enabled.dtp-persistent-loading body {
  cursor: progress;
}

html.dtp-persistent-navigation-enabled .dtp-top-player {
  isolation: isolate;
}


/* v1.0.5 - Estabilidade visual no modo persistente */
html.dtp-persistent-navigation-enabled.dtp-persistent-loading body {
  cursor: progress;
}

html.dtp-persistent-navigation-enabled .dtp-top-player {
  isolation: isolate;
  z-index: 2147483000;
}


/* v1.0.6 - Persistência com fallback seguro para Hello Elementor */
html.dtp-persistent-navigation-enabled .dtp-top-player {
  isolation: isolate;
  z-index: 2147483000;
}

html.dtp-persistent-navigation-enabled.dtp-persistent-loading body {
  cursor: progress;
}


/* ==========================================================================
 * Toolbar Player - App Shell Persistente v1.0.7
 * ========================================================================== */
html.dtp-app-shell-active,
html.dtp-app-shell-active body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

html.dtp-app-shell-active body.dtp-app-shell-active {
  position: relative !important;
}

html.dtp-app-shell-active body > .dtp-app-shell-hidden {
  display: none !important;
}

html.dtp-app-shell-active .dtp-top-player {
  z-index: 2147483000 !important;
  isolation: isolate;
}

.dtp-app-shell-wrap {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--dtp-shell-top, 60px) !important;
  bottom: var(--dtp-shell-bottom, 0px) !important;
  width: 100vw !important;
  background: #fff !important;
  z-index: 2147482000 !important;
  overflow: hidden !important;
}

.dtp-app-shell-frame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}


/* v1.0.8 - Botão Fale Conosco 100% verde */
.dtp-cta-btn,
.dtp-cta-btn:hover,
.dtp-cta-btn:focus,
.dtp-cta-btn:active {
  background: #25D366 !important;
  color: #fff !important;
}


/* v1.0.9 - Autoplay recomendado */
html.dtp-autoplay-waiting #dtp_playBtn {
  animation: dtpAutoplayPulse 1.6s ease-in-out infinite;
}

@keyframes dtpAutoplayPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .24);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
  }
}


/* v1.1.1 - Capa da música sob o logotipo secundário */
.dtp-logo-box {
  overflow: hidden;
  isolation: isolate;
}

.dtp-logo-box .dtp-station-logo {
  position: relative;
  z-index: 3;
  width: 90%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 3px var(--accent));
  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .35s ease,
    filter .3s ease,
    width .3s ease;
}

.dtp-logo-box.glow .dtp-station-logo {
  animation: dtpGlowPulse 2s ease-in-out infinite;
}

.dtp-logo-box .dtp-track-cover-bg,
.dtp-logo-box .dtp-track-cover-mask {
  display: none;
}

.dtp-logo-box.dtp-logo-cover-enabled .dtp-track-cover-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .35s ease, transform .45s ease;
}

.dtp-logo-box.dtp-logo-cover-enabled .dtp-track-cover-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.36));
  opacity: 0;
  transition: opacity .35s ease;
}

.dtp-logo-box.dtp-logo-cover-enabled.has-cover.is-playing-cover .dtp-track-cover-bg {
  opacity: 1;
  transform: scale(1);
}

.dtp-logo-box.dtp-logo-cover-enabled.has-cover.is-playing-cover .dtp-track-cover-mask {
  opacity: 0;
}

.dtp-logo-box.dtp-logo-cover-enabled.has-cover.is-playing-cover .dtp-station-logo {
  opacity: 0;
  visibility: hidden;
  transform: scale(.92);
  pointer-events: none;
}

.dtp-logo-box.dtp-logo-cover-enabled.has-cover.is-playing-cover .dtp-track-cover-bg {
  opacity: 1;
  transform: scale(1);
}


/* v1.1.3 - Em reprodução, a capa do álbum substitui 100% o logotipo secundário */


/* v1.2.1 - Botões Pop-up e Picture-in-Picture no mesmo padrão visual das redes sociais */
.dtp-window-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.dtp-window-btn {
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#fff;
  box-shadow:none;
  cursor:pointer;
  font:inherit;
  line-height:1;
  transition:all .3s ease;
}

.dtp-window-btn:hover,
.dtp-window-btn:focus {
  transform:none;
  background:transparent;
  color:#FFD700;
  filter:none;
  box-shadow:none;
  outline:none;
}

.dtp-window-btn i {
  font-size:clamp(.9rem,1.3vw,1.1rem);
}

@media (max-width: 768px) {
  .dtp-window-actions {
    gap:8px;
  }
}


/* v1.2.4 - Ícones Pop-up e Picture-in-Picture com a mesma cor das redes sociais */
.dtp-window-actions .dtp-window-btn,
.dtp-window-actions .dtp-window-btn i,
.dtp-player-extra-icons .dtp-window-btn,
.dtp-player-extra-icons .dtp-window-btn i {
  color: #fff !important;
}

.dtp-window-actions .dtp-window-btn:hover,
.dtp-window-actions .dtp-window-btn:focus,
.dtp-window-actions .dtp-window-btn:hover i,
.dtp-window-actions .dtp-window-btn:focus i,
.dtp-player-extra-icons .dtp-window-btn:hover,
.dtp-player-extra-icons .dtp-window-btn:focus,
.dtp-player-extra-icons .dtp-window-btn:hover i,
.dtp-player-extra-icons .dtp-window-btn:focus i {
  color: #FFD700 !important;
}