/* =========================================================
   RADIO VERZOEKSYSTEEM – NEON.CSS (FINAL CLEAN)
   Auteur: RSCHOSTING.NL
   ========================================================= */

/* =========================
   CSS VARIABELEN
========================= */
:root{
  --bg-dark:#020617;
  --bg-card:#020617;
  --text-main:#e0f2fe;

  --neon:#38bdf8;
  --neon-soft:rgba(56,189,248,.45);
  --neon-glow:rgba(56,189,248,.65);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
}

/* =========================
   RESET / BASIS
========================= */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg-dark);
  color:var(--text-main);
}

img{
  max-width:100%;
  display:block;
}

a{
  color:var(--neon);
  text-decoration:none;
}

/* =========================
   FORM BASIS
========================= */
input,
textarea,
button{
  font-family:inherit;
  outline:none;
}

input,
textarea{
  background:#020617;
  color:#fff;
  border-radius:var(--radius-sm);
  border:1px solid var(--neon-soft);
  padding:10px 12px;
}

textarea{
  resize:vertical;
}

button{
  cursor:pointer;
  border:none;
}

/* =========================================================
   REQUEST PAGINA (index.php)
========================================================= */
.neon-request-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.neon-request-card{
  width:100%;
  max-width:480px;
  padding:32px;
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:0 0 35px var(--neon-glow);
}

/* DJ header */
.dj-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.dj-photo,
.dj-placeholder{
  width:64px;
  height:64px;
  border-radius:50%;
  flex-shrink:0;
}

.dj-photo{
  object-fit:cover;
  box-shadow:0 0 16px var(--neon-glow);
}

.dj-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:#020617;
  border:1px solid var(--neon-soft);
}

/* LIVE badge */
.live-badge{
  margin-left:6px;
  padding:4px 8px;
  font-size:11px;
  border-radius:999px;
  background:var(--neon);
  color:#020617;
  box-shadow:0 0 15px var(--neon-glow);
}

.live-badge.mic{
  animation:pulse 1.5s infinite;
}

/* Titel */
.neon-title{
  margin:10px 0 4px;
  font-size:26px;
}

.neon-sub{
  font-size:14px;
  opacity:.85;
}

/* Meldingen */
.neon-error{
  margin-top:20px;
  padding:14px;
  border-radius:var(--radius-md);
  border:1px solid var(--neon-soft);
  box-shadow:0 0 20px var(--neon-glow);
}

/* =========================
   REQUEST FORM
========================= */
.neon-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:24px;
}

.neon-form input,
.neon-form textarea{
  width:100%;
  padding:18px 20px;
  font-size:18px;
  min-height:60px;
  border-radius:18px;
  background:#020617;
  color:#e0f2fe;
  border:2px solid var(--neon);
  box-shadow:0 0 24px var(--neon-glow);
}

.neon-form textarea{
  min-height:150px;
}

.neon-form input:focus,
.neon-form textarea:focus{
  box-shadow:0 0 32px var(--neon-glow);
}

/* Knop */
.neon-btn{
  width:100%;
  padding:18px;
  font-size:18px;
  border-radius:20px;
  background:var(--neon);
  color:#020617;
  box-shadow:0 0 30px var(--neon-glow);
  transition:.2s;
}

.neon-btn:hover{
  transform:translateY(-1px);
}

/* =========================================================
   LOGIN
========================================================= */
.neon-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.neon-card{
  width:100%;
  max-width:420px;
  padding:32px;
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:0 0 40px var(--neon-glow);
}

.neon-logo{
  max-width:120px;
  margin:0 auto 16px;
}

/* =========================================================
   ADMIN / DJ DASHBOARD
========================================================= */
.admin-widgets{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  margin-bottom:30px;
}

.widget{
  padding:20px;
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  box-shadow:0 0 28px var(--neon-glow);
}

/* =========================================================
   ADMIN WIDGETS – PREVIEW + EMBED
========================================================= */
.widget-card{
  background:rgba(2,6,23,.9);
  border-radius:24px;
  padding:24px;
  box-shadow:0 0 40px var(--neon-glow);
  margin-bottom:32px;
}

.widget-card h3{
  margin:0 0 16px;
  color:#38bdf8;
  font-size:20px;
}

/* naast elkaar */
.widget-row{
  display:flex;
  gap:24px;
}

/* preview */
.widget-preview{
  flex:1;
  background:#000;
  border-radius:18px;
  padding:12px;
}

.widget-preview iframe{
  width:100%;
  border:0;
  border-radius:14px;
}

/* embed */
.widget-embed{
  flex:1;
}

.widget-embed textarea{
  width:100%;
  min-height:200px;
  background:#020617;
  color:#38bdf8;
  border:1px solid var(--neon-soft);
  border-radius:14px;
  padding:12px;
  resize:none;
  font-family:monospace;
  font-size:13px;
}

.widget-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

/* mobiel */
@media (max-width: 900px){
  .widget-row{
    flex-direction:column;
  }
}

/* =========================================================
   FOOTER
========================================================= */
.rs-footer{
  margin-top:40px;
  padding:14px;
  text-align:center;
  font-size:12px;
  opacity:.85;
}

/* =========================================================
   ANIMATIES
========================================================= */
@keyframes pulse{
  0%{box-shadow:0 0 10px var(--neon);}
  50%{box-shadow:0 0 26px var(--neon);}
  100%{box-shadow:0 0 10px var(--neon);}
}