/* ================================
   BASE FILTER BUTTON
================================ */
.filter-btn{
  padding: .45rem .9rem;
  border-radius: 9999px;
  background: #0c0f0e;
  color: #d1d5db;
  border: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
  transition: all .2s ease;
}
.filter-btn:hover,
.filter-btn.active{
  background:#22c55e;
  color:#000;
  box-shadow:0 0 50px rgba(34,197,94,.35);
}

/* ================================
   FAVORITES
================================ */
.fav-btn{
  opacity: .4;
  transition: transform .15s ease, opacity .15s ease;
}
.fav-btn.active{
  opacity: 1;
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(239,68,68,.6));
  animation: favPop .25s ease;
}
@keyframes favPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.35)}
  100%{transform:scale(1.15)}
}
.fav-btn.heart.active{ color:#ef4444 }
.fav-btn.star.active{ color:#facc15 }

/* ================================
   STATIONS
================================ */
.station{
  transition: transform .15s ease, box-shadow .15s ease;
}
.station:active{ transform: scale(.97) }
.station:hover{
  box-shadow: 0 0 20px rgba(34,197,94,.15);
}

/* ================================
   PLAYER & CONTROLS
================================ */
#playBtn{
  transition: transform .15s ease;
}
#playBtn:active{ transform: scale(.9) }

#equalizer{
  display:flex;
}

.eq-bar{
  width:3px;
  background:#22c55e;
  border-radius:2px;
  height:20%;
  animation:eq 1s infinite ease-in-out;
  animation-play-state:paused;
}
.eq-playing .eq-bar{
  animation-play-state:running;
}
.eq-bar:nth-child(1){animation-delay:.1s}
.eq-bar:nth-child(2){animation-delay:.2s}
.eq-bar:nth-child(3){animation-delay:.3s}
.eq-bar:nth-child(4){animation-delay:.4s}

@keyframes eq{
  0%{height:20%}
  50%{height:100%}
  100%{height:20%}
}

/* PLAYER GLOW */
.player-glow{
  transition: box-shadow .25s ease;
}
.player-glow.active{
  animation: glowPulse 1.15s ease-in-out infinite;
}
@keyframes glowPulse{
  0%{
    box-shadow:0 0 10px rgba(34,197,94,.35);
  }
  50%{
    box-shadow:
      0 0 35px rgba(34,197,94,.75),
      0 0 60px rgba(34,197,94,.35);
  }
  100%{
    box-shadow:0 0 10px rgba(34,197,94,.35);
  }
}

/* ================================
   HEADINGS
================================ */
h1,h2,h3{
  letter-spacing:.02em;
}

/* ================================
   CONTACT PAGE
================================ */
.page-contact{
  max-width:600px;
  margin:2rem auto;
  padding:1.5rem;
}
.contact-form{
  background:#0c0f0e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 0 40px rgba(0,0,0,.4);
}
.form-group{ margin-bottom:1.1rem }
.form-group label{
  display:block;
  margin-bottom:.35rem;
  font-size:.85rem;
  color:#9ca3af;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  background:#050706;
  border:1px solid rgba(255,255,255,.1);
  color:#e5e7eb;
  padding:.65rem .75rem;
  border-radius:12px;
  font-size:.9rem;
  transition:all .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;
  border-color:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
}
.alert.success{
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.35);
  color:#22c55e;
  padding:.75rem 1rem;
  border-radius:12px;
  margin-bottom:1rem;
  text-align:center;
  box-shadow:0 0 25px rgba(34,197,94,.25);
}

/* ================================
   WOW TEXT LOGO
================================ */
@keyframes logoEnter{
  0%{
    opacity:0;
    transform:scale(.7) translateY(-10px);
  }
  60%{
    opacity:1;
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}

@keyframes logoPulse{
  0%{
    text-shadow:
      0 0 6px rgba(255,255,255,.35),
      0 0 14px rgba(34,197,94,.4),
      0 0 28px rgba(34,197,94,.25);
  }
  50%{
    text-shadow:
      0 0 12px rgba(255,255,255,.6),
      0 0 28px rgba(34,197,94,.9),
      0 0 55px rgba(34,197,94,.7);
  }
  100%{
    text-shadow:
      0 0 6px rgba(255,255,255,.35),
      0 0 14px rgba(34,197,94,.4),
      0 0 28px rgba(34,197,94,.25);
  }
}

.logo-wow-text{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#e5e7eb;
  animation:logoEnter .55s ease-out;
  transition:transform .25s ease,text-shadow .25s ease;
  text-shadow:
    0 0 6px rgba(255,255,255,.35),
    0 0 14px rgba(34,197,94,.55),
    0 0 32px rgba(34,197,94,.35);
}

@media(min-width:768px){
  .logo-wow-text{ font-size:2rem }
}

.logo-wow-text:hover{
  transform:scale(1.08);
  text-shadow:
    0 0 10px rgba(255,255,255,.6),
    0 0 22px rgba(34,197,94,.9),
    0 0 50px rgba(34,197,94,.6);
}

.logo-playing{
  animation:
    logoEnter .55s ease-out,
    logoPulse 1.3s ease-in-out infinite;
}

.logo-accent{ color:#22c55e }

/* ================================
   CONTENT PAGES
================================ */
.content-page{
  background:linear-gradient(
    180deg,
    rgba(12,15,14,.85),
    rgba(5,7,7,.85)
  );
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1.75rem;
  box-shadow:
    0 0 30px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.content-page h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  text-shadow:0 0 18px rgba(34,197,94,.35);
}
.content-page h3{
  margin-top:1.5rem;
  margin-bottom:.4rem;
  font-weight:600;
  color:#22c55e;
}
.content-page p{
  margin-bottom:.75rem;
  color:#d1d5db;
}
.content-page a{
  color:#22c55e;
  text-decoration:underline;
}
.content-page a:hover{
  text-shadow:0 0 12px rgba(34,197,94,.6);
}
.content-page::before{
  content:'';
  display:block;
  width:60px;
  height:3px;
  background:#22c55e;
  border-radius:3px;
  margin-bottom:1rem;
  box-shadow:0 0 20px rgba(34,197,94,.6);
}

/* FOOTER CONTENT BLOCK */
.content-footer{
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
}
#onlineCount {
  color: #22c55e;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(34,197,94,.5);
}