/* ===== CodyChat Login – Layout upgrade (no text changes) =====
   - Fullscreen fotoachtergrond
   - Doorzichtige 'glass' balk achter #login_all
   - Mooie knoppen voor Inloggen & Gast
   - Geen HTML of teksten aangepast
*/

/* Achtergrond foto — laat je images/background.jpg staan */
#intro_top{
  width:100%; height:100%;
  z-index:1; position:relative;
  background:#000 url('images/background.jpg') no-repeat center center fixed !important;
  background-size:cover !important;
}

/* Container */
#login_wrap { width:100%; height:100%; }

/* Glass look op je bestaande blok */
#login_all{
  width:800px; max-width:94%;
  display:block; margin:0 auto;
  color:#fff;

  position: relative;
  border-radius: 22px;
  padding: clamp(18px, 3vw, 32px);
}
#login_all::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: inherit;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
  z-index:-1;
}

/* Logo schaalt netjes */
#login_logo { height:auto; max-height: 90px; max-width: 60vw; }

/* Typografie blijft jouw tekst, enkel beter leesbaar */
#login_all .login_text p{ color:#f3f3f3; margin:.35rem 0; }
.bold{ font-weight:700; }
.text_xlarge{ font-size: clamp(20px, 3vw, 34px); letter-spacing:.4px; }
.text_med{ font-size: clamp(14px, 2vw, 18px); opacity:.95; }

/* === Knoppen (Inloggen & Gast) === */
#login_all button,
#login_all .intro_login_btn,
#login_all .guest_login_btn,
#login_all a.button,
#login_all .large_button_rounded{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  color: #68ECFC!important;
  background: linear-gradient(180deg, #ef4444, #b91c1c); /* warm rood, leesbaar */
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
/* Variant als er al .ok_btn bestond: maak die groen */
#login_all .ok_btn{
  background: linear-gradient(180deg, #BD1A1A, #A80303) !important;
}
/* Gast (als er class guest/alt aanwezig is, geef een koelblauwe toon) */
#login_all .guest_login_btn,
#login_all .guest_btn,
#login_all .alt_btn{
  background: linear-gradient(180deg, #68ECFC, #68ECFC) !important;
}

#login_all button:hover,
#login_all .intro_login_btn:hover,
#login_all .guest_login_btn:hover,
#login_all a.button:hover,
#login_all .large_button_rounded:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Form elementen beter leesbaar op donker (zonder jouw HTML te wijzigen) */
#login_all input,
#login_all select,
#login_all textarea{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 12px;
  padding: .7rem .9rem;
}
#login_all input::placeholder{ color: rgba(255,255,255,.75) !important; }

/* Kleinere schermen */
@media (max-width: 600px){
  #login_all{ border-radius:16px; padding:16px; }
}
/* Taalvlag etc. blijven zoals in je bestand */
#intro_lang { position:absolute; top:10px; right:20px; width:40px; height:40px; }

/* Bewaar jouw overige sectie-styling */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }
@media screen and (max-width:1120px){
  .section_inside { width:96%; }
}