/* rscreate CRM — Login CSS */
/* Bestand: assets/css/login.css */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#000f19;--s1:#001525;--s2:#001e30;
  --acc:#fa8500;--acc2:rgba(250,133,0,0.10);
  --txt:#e8f4ff;--txt2:#7fa8c9;--txt3:#3d6880;
  --bdr:rgba(250,133,0,0.16);--bdr2:rgba(255,255,255,0.055);
  --red:#e05555;--red2:rgba(224,85,85,0.11);
  --green:#2ecc8a;--green2:rgba(46,204,138,0.11);
  --r:14px;--rs:8px;
}
html,body{height:100%;background:var(--bg);color:var(--txt);font-family:'Nunito',sans-serif;overflow:hidden;}
.bg{
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 10%, rgba(250,133,0,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(0,40,80,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, #000f19 30%, #000c16 100%);
  pointer-events:none;z-index:0;
}
.bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(250,133,0,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(250,133,0,0.018) 1px,transparent 1px);background-size:64px 64px;}
.wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;height:100vh;}

/* TOPBALK */
.left{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1.1rem 2rem;border-bottom:1px solid rgba(250,133,0,0.10);background:linear-gradient(160deg,rgba(0,18,30,0.75) 0%,rgba(0,10,18,0.85) 100%);backdrop-filter:blur(2px);position:relative;overflow:hidden;grid-column:1/-1;}
.left-deco,.left-deco-2{display:none;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{height:32px;width:auto;object-fit:contain;flex-shrink:0;}
.brand-name{font-size:19px;font-weight:900;color:var(--txt);letter-spacing:-.01em;line-height:1;}
.brand-name span{color:var(--acc);}
.tagline{font-size:9px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.10em;margin-top:3px;}
.left-footer{display:flex;align-items:center;gap:1.5rem;flex-shrink:0;}
.contact-block{display:flex;align-items:center;gap:1rem;margin-bottom:0;}
.contact-item{display:flex;align-items:center;gap:8px;margin-bottom:0;}
.contact-icon{width:30px;height:30px;border-radius:8px;background:rgba(0,15,25,0.8);border:1px solid rgba(250,133,0,0.18);display:flex;align-items:center;justify-content:center;fill:var(--acc);flex-shrink:0;}
.contact-text{font-size:13px;color:var(--txt2);font-weight:600;text-decoration:none;transition:color .15s;}
.contact-text:hover{color:var(--acc);}
.social-row{display:flex;gap:6px;align-items:center;}
.social-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--bdr);background:transparent;color:var(--txt2);font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .18s;}
.social-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--acc2);}

/* FORMULIER */
.right{display:flex;align-items:center;justify-content:center;padding:2.5rem;background:linear-gradient(160deg,rgba(0,12,22,0.9) 0%,rgba(0,15,25,0.95) 100%);backdrop-filter:blur(1px);grid-column:1/-1;}
.form-card{width:100%;max-width:400px;background:#000f19;}
.form-eyebrow{font-size:11px;font-weight:800;color:var(--acc);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;}
.form-title{font-size:24px;font-weight:900;color:var(--txt);margin-bottom:.4rem;letter-spacing:-.02em;}
.form-sub{font-size:13px;color:var(--txt3);margin-bottom:1.75rem;font-weight:600;}
.field{margin-bottom:1rem;}
.lbl{display:block;font-size:11px;font-weight:800;color:var(--txt2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap input{width:100%;background:#000f19;border:1px solid rgba(250,133,0,0.15);border-radius:10px;padding:11px 13px 11px 38px;color:var(--txt);font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;outline:none;transition:border .18s,background .18s;}
.input-wrap input:focus{border-color:var(--acc);background:#001120;}
.input-wrap input::placeholder{color:var(--txt3);font-weight:600;}
.ico{position:absolute;left:13px;width:15px;height:15px;fill:var(--txt3);pointer-events:none;transition:fill .15s;flex-shrink:0;}
.input-wrap:focus-within .ico{fill:var(--acc);}
.forgot{display:block;font-size:11px;font-weight:700;color:var(--txt3);margin-top:6px;}
.btn-login{width:100%;margin-top:1.5rem;padding:13px;border-radius:999px;border:none;background:var(--acc);color:#000f19;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:.02em;transition:all .2s;}
.btn-login:hover{background:#ff9920;transform:translateY(-1px);box-shadow:0 8px 24px rgba(250,133,0,0.25);}
.btn-login:active{transform:translateY(0);}

/* Meldingen */
.melding{padding:10px 14px;border-radius:var(--rs);font-size:13px;font-weight:700;margin-bottom:1rem;}
.melding-fout{background:var(--red2);color:var(--red);border:1px solid rgba(224,85,85,0.3);}
.melding-info{background:rgba(74,154,255,0.1);color:#4a9eff;border:1px solid rgba(74,154,255,0.25);}

/* Footer */
.form-footer{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--bdr2);font-size:11px;color:var(--txt3);font-weight:600;}
.form-footer a{color:var(--txt3);text-decoration:none;}
.form-footer a:hover{color:var(--acc);}
.beheerder-link{margin-top:.75rem;font-size:10px;opacity:.4;transition:opacity .2s;}
.beheerder-link:hover{opacity:.8;}

/* Responsive tablet */
@media(max-width:900px){
  .left{padding:1rem 1.5rem;}
  .contact-text{font-size:12px;}
  .social-btn{padding:6px 11px;font-size:11px;}
}
/* Responsive mobiel */
@media(max-width:640px){
  html,body{overflow-y:auto;height:auto;}
  .left{padding:.85rem 1.1rem;gap:.75rem;}
  .brand-name{font-size:16px;}
  .tagline{font-size:9px;}
  .contact-text{display:none;}
  .social-btn span{display:none;}
  .social-btn{padding:7px 9px;}
  .right{padding:2rem 1.25rem 3rem;align-items:flex-start;}
  .form-card{max-width:100%;width:100%;}
  .form-title{font-size:20px;}
}
@media(max-width:380px){
  .left{padding:.75rem 1rem;}
  .brand-name{font-size:14px;}
  .tagline{display:none;}
  .right{padding:1.5rem 1rem 2.5rem;}
}