/* ===== BASIS ===== */ 
body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  background:#0f1116;
  color:white;
  transition:background 0.6s ease;
}

header{
  text-align:center;
  padding:40px 20px;
}

/* ===== RADIO STREAMS ===== */
.streams{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  padding:30px;
  max-width:1500px;
  margin:auto;
}

@media (max-width:1200px){
  .streams{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .streams{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .streams{ grid-template-columns:1fr; }
}

.card{
  background:#1a1d26;
  border-radius:20px;
  padding:25px;
  text-align:center;
  position:relative;
  transition:0.3s;
  border:2px solid transparent;
}

.card.live{
  box-shadow:0 0 20px #00ff66, 0 0 50px #00ff66;
}
.card.nonstop{
  box-shadow:0 0 20px #0099ff, 0 0 50px #0099ff;
}

.card.active{
  border: 3px solid #ffcc00;
  box-shadow: 0 0 30px #ffcc00, 0 0 60px #ffcc00;
}

.cover-container{
  position:relative;
  display:inline-block;
}

.cover{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:15px;
  border:4px solid rgba(255,255,255,0.1);
  transition: box-shadow 0.3s;
}

.cover.pulse{
  animation: pulse 1.5s infinite;
}

@keyframes pulse{
  0%{ box-shadow:0 0 10px #ffcc00, 0 0 20px #ffcc00; }
  50%{ box-shadow:0 0 25px #ffcc00, 0 0 50px #ffcc00; }
  100%{ box-shadow:0 0 10px #ffcc00, 0 0 20px #ffcc00; }
}

/* ===== BADGE ===== */
.badge{
  position:absolute;
  top:20px;
  right:20px;
  padding:5px 12px;
  border-radius:50px;
  font-size:12px;
  font-weight:bold;
  transition: all 0.3s;
}

/* LIVE KNIPPER EFFECT VOOR RIEKSIEFM */
.badge.live{
  background:#00ff66;
  color:black;
  animation: pulseGreen 1s infinite;
}

@keyframes pulseGreen {
    0%   { box-shadow: 0 0 0 0 rgba(46,204,113,0.7); }
    50%  { box-shadow: 0 0 15px 5px rgba(46,204,113,0.9); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.7); }
}

.badge.nonstop{ background:#0099ff; }

h2{ margin:10px 0 5px; }
.dj{ font-size:14px; opacity:0.9; }
.listeners{ font-size:13px; margin-bottom:15px; opacity:0.8; }

.controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:15px;
  justify-content:center;
}

.play{
  width:45px;
  height:45px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:18px;
  font-weight:bold;
  background:#ffffff;
  color:black;
}

.volume-container{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
  max-width:150px;
}

input[type=range]{ width:100%; }

.mute{ cursor:pointer; font-size:18px; color:#ffffff; }

/* APP DOWNLOAD BUTTON IN CARD */
.download-btn{
  display:inline-block;
  margin-top:15px;
  padding:10px 20px;
  background:#ffcc00;
  color:black;
  border-radius:50px;
  font-weight:bold;
  text-decoration:none;
  transition:0.3s;
}

.download-btn.active{
  box-shadow:0 0 15px #ffcc00, 0 0 30px #ffcc00;
}

.download-btn:hover{
  background:#e6b800;
}

/* ===== CONTACTFORM & WHATSAPP ===== */
.contact-section{
  max-width:800px;
  margin:50px auto;
  background:#1a1d26;
  padding:30px;
  border-radius:20px;
  text-align:center;
}

.contact-section h2{
  margin-bottom:20px;
}

.contact-section form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.contact-section input,
.contact-section textarea{
  padding:10px;
  border-radius:10px;
  border:none;
  font-size:14px;
}

.contact-section button{
  padding:12px;
  border:none;
  border-radius:10px;
  background:#ffcc00;
  color:black;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.contact-section button:hover{ background:#e6b800; }

.whatsapp-container{
  margin-top:20px;
}

.whatsapp-container a{
  display:inline-block;
  background:#25D366;
  color:white;
  padding:12px 25px;
  border-radius:50px;
  font-weight:bold;
  text-decoration:none;
  transition:0.3s;
}

.whatsapp-container a:hover{
  background:#1ebe5d;
}

/* ===== SPONSORS ===== */
.sponsors-section{
  max-width:1200px;
  margin:50px auto;
  padding:30px;
  text-align:center;
}

.sponsors-section h2{
  margin-bottom:30px;
}

.sponsors{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:25px;
  align-items:center;
  justify-items:center;
}

.sponsors a{
  display:inline-block;
  transition:0.3s;
  border-radius:15px;
  overflow:hidden;
}

.sponsors a img{
  width:100px;
  height:100px;
  object-fit:contain;
  transition: transform 0.3s, box-shadow 0.3s;
}

.sponsors a:hover img{
  transform: scale(1.1);
  box-shadow:0 0 15px #ffcc00;
}

/* ===== FOOTER ===== */
footer{
  text-align:center;
  padding:20px;
  background:#0f1116;
  margin-top:50px;
}

footer a{
  color:#ffcc00;
  text-decoration:none;
  font-weight:bold;
}

footer a:hover{
  text-decoration:underline;
}
/* ============================= */
/* NONSTOP BADGE BUTTON */
/* ============================= */

.nonstop-container {
  text-align: center;
  margin: 10px 0;
}

.nonstop-btn {
  background: #1e90ff;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  cursor: default;
  box-shadow: 0 0 10px rgba(30,144,255,0.6);
  transition: all 0.3s ease;
}

.nonstop-btn:hover {
  background: #187bcd;
  box-shadow: 0 0 18px rgba(30,144,255,0.9);
}


/* ============================= */
/* LIVE BUTTON BASIS */
/* ============================= */

.live-button {
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

/* Verwijder standaard browser focus (blauwe glow) */
.live-button:focus,
.live-button:active {
  outline: none;
  box-shadow: none;
}


/* ============================= */
/* EXTREME NEON LIVE EFFECT */
/* ============================= */

.live-button.live-active {
  border: 1px solid #00ff66;
  animation: livePulse 1.4s infinite alternate;
}

/* Neon pulse animatie */
@keyframes livePulse {
  from {
    box-shadow:
      0 0 10px #00ff66,
      0 0 20px #00ff66,
      0 0 40px #00ff66;
  }
  to {
    box-shadow:
      0 0 20px #00ff66,
      0 0 45px #00ff66,
      0 0 80px #00ff66;
  }
}
/* ============================= */
/* FORCE LIVE GLOW */
/* ============================= */

.nonstop-btn.live-active {
  background: #00ff66 !important;
  color: #000 !important;
  border: 2px solid #00ff66 !important;
  box-shadow:
    0 0 15px #00ff66,
    0 0 30px #00ff66,
    0 0 60px #00ff66,
    0 0 100px #00ff66 !important;
  animation: livePulse 1.2s infinite alternate;
}

@keyframes livePulse {
  from {
    box-shadow:
      0 0 10px #00ff66,
      0 0 20px #00ff66,
      0 0 40px #00ff66;
  }
  to {
    box-shadow:
      0 0 25px #00ff66,
      0 0 50px #00ff66,
      0 0 100px #00ff66;
  }
}
.nonstop-btn.live-active {
  background: #00ff66 !important;
  color: black !important;
  box-shadow: 0 0 40px #00ff66 !important;
}
/* =============================== */
/* RIEKSIE LIVE NEON PULSE */
/* =============================== */

.nonstop-btn.live-active {
  background: #00ff66 !important;
  color: black !important;
  border: 2px solid #00ff66 !important;
  animation: rieksieGlow 1.2s ease-in-out infinite alternate !important;
}

@keyframes rieksieGlow {
  0% {
    box-shadow:
      0 0 10px #00ff66,
      0 0 20px #00ff66,
      0 0 40px #00ff66;
  }
  100% {
    box-shadow:
      0 0 25px #00ff66,
      0 0 50px #00ff66,
      0 0 90px #00ff66;
  }
}
/* ================================= */
/* RIEKSIE LIVE NEON GLOW DEFINITIEF */
/* ================================= */

.nonstop-btn {
  box-shadow: 0 0 10px rgba(30,144,255,0.6);
}

/* LIVE ACTIVE */
.nonstop-btn.live-active {
  background: #00ff66 !important;
  color: #000 !important;
  border: 2px solid #00ff66 !important;
  box-shadow: none !important; /* reset oude shadow */
  animation: rieksieNeon 1.3s ease-in-out infinite alternate !important;
}

/* Neon pulse via filter (werkt stabieler dan box-shadow animatie) */
@keyframes rieksieNeon {
  0% {
    filter: drop-shadow(0 0 10px #00ff66)
            drop-shadow(0 0 20px #00ff66);
  }
  100% {
    filter: drop-shadow(0 0 25px #00ff66)
            drop-shadow(0 0 60px #00ff66);
  }
}