/* WooCRM Frontend — Login zoals voorbeeld (pure CSS, geen images) */
:root{
  --brand:#ff1f8f;            /* fel magenta/roze */
  --brand-2:#ff6ab6;          /* lichtere variant */
  --text:#0b1220;
  --muted:#595f6a;
  --card:#ffffff;
  --card-soft:#ffe8f3;        /* zacht roze kaart */
  --border:#e6e8ee;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

.woocrm-wrap{
  min-height:70vh;
  padding:32px 16px 120px;
  color:var(--text);
  background:
     linear-gradient(#fff,#fff); /* schoon wit */
  position:relative;
  overflow:hidden;
}

/* roze golf onderin (zonder afbeeldingen) */
.woocrm-wrap.woocrm-login-page::after,
.woocrm-login-bg::after{
  content:"";
  position:absolute;
  left:-10vw; right:-10vw; bottom:-18vh;
  height:48vh;
  background:
    radial-gradient(150% 120% at 20% 110%, rgba(255,31,143,.25) 0 50%, transparent 51%),
    radial-gradient(120% 100% at 80% 120%, rgba(255,31,143,.18) 0 52%, transparent 53%),
    radial-gradient(180% 140% at 60% 130%, rgba(255,106,182,.18) 0 48%, transparent 49%);
  filter: blur(0.2px);
  transform: rotate(-2deg);
  pointer-events:none;
}

/* login header */
.woocrm-login-header{
  max-width:760px;
  margin:0 auto 16px;
  text-align:center;
}
.woocrm-login-logo{
  font-size:56px;
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.1;
  margin:8px auto 8px;
}
.woocrm-login-logo small{
  display:block;
  font-size:14px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:6px;
}

/* rond magenta icoon met user-pictogram */
.woocrm-avatar{
  width:72px; height:72px; margin:8px auto 8px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%, #fff 0 25%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.65) 0 25%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, var(--brand), #e8007d);
  box-shadow: 0 10px 24px rgba(255,31,143,.35), inset 0 0 0 2px rgba(255,255,255,.25);
  position:relative;
}
.woocrm-avatar::after{
  /* ‘gebruiker’ icoon in CSS: hoofd + schouders */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle 10px at 50% 35%, #fff 98%, transparent 100%),
    radial-gradient(ellipse 22px 12px at 50% 60%, #fff 98%, transparent 100%);
}

/* H1 */
.woocrm-title{
  font-size:24px;
  margin:6px 0 0;
}

/* login kaart */
.woocrm-card{
  max-width:720px;
  margin:16px auto 0;
  background:linear-gradient(180deg, var(--card-soft), #ffeef7);
  border:1px solid #ffd0e6;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 26px;
}

/* formulier */
.woocrm-row{display:flex; flex-wrap:wrap; gap:14px;}
.woocrm-field{flex:1 1 100%;}
.woocrm-field label{display:block; font-size:14px; font-weight:600; color:#444; margin-bottom:6px;}
.woocrm-input{
  width:100%;
  padding:14px 44px 14px 14px;
  border-radius:12px;
  border:1px solid #d6d8de;
  background:#fff;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.02) inset;
}
.woocrm-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(255,31,143,.12);
}

/* oog-icoon (alleen visueel) */
.woocrm-input-eye{
  position:relative;
}
.woocrm-input-eye .woocrm-input{
  padding-right:48px;
}
.woocrm-input-eye .eye{
  position:absolute; right:12px; top:35px; width:28px; height:18px;
  background:
    radial-gradient(circle 3px at 50% 50%, #888 98%, transparent 100%),
    radial-gradient(ellipse 12px 8px at 50% 50%, transparent 60%, #888 61% 62%, transparent 63%);
  opacity:.8;
}

/* knoppen & links */
.woocrm-btn{
  display:inline-block;
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:0;
  background:linear-gradient(180deg, var(--brand), #e8007d);
  color:#fff; font-weight:700; text-align:center;
  box-shadow: 0 8px 18px rgba(255,31,143,.35);
  cursor:pointer;
}
.woocrm-btn:hover{filter:brightness(1.03);}
.woocrm-links{
  text-align:center;
  margin-top:14px;
  color:var(--muted);
}
.woocrm-links a{
  color:var(--brand);
  text-decoration:none;
  font-weight:600;
}
.woocrm-links a:hover{text-decoration:underline;}

/* secundaire linkrijn */
.woocrm-smalllinks{
  text-align:center;
  margin-top:14px;
  color:var(--brand);
  font-weight:600;
}
.woocrm-legal{
  text-align:center;
  margin-top:14px;
  color:var(--brand);
  font-weight:500;
  opacity:.9;
}

/* compacte alerts (gebruikte helper) */
.woocrm-alert{padding:12px 14px; border-radius:12px; margin-bottom:12px;}
.woocrm-alert.success{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;}
.woocrm-alert.error{background:#fef2f2; color:#991b1b; border:1px solid #fecaca;}

/* responsief */
@media (min-width: 640px){
  .woocrm-card{padding:30px 36px;}
}