/* Khulasa Login Shortcode Styles */
:root{
  --kl-primary:#7047fa;
  --kl-accent:#01bf63;
  --kl-ink:#0f172a;
  --kl-muted:#64748b;
  --kl-card:#ffffff;
  --kl-bg:#f8fafc;
  --kl-shadow:0 18px 40px rgba(16,24,40,.12);
  --kl-radius:18px;
}

.kl-wrap{
  min-height:40vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:var(--kl-bg);
}

.kl-card{
  width:100%;
  max-width:440px;
  background:var(--kl-card);
  border-radius:var(--kl-radius);
  box-shadow:var(--kl-shadow);
  padding:28px 24px 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* subtle animated gradient ring behind avatar */
.kl-card::before{
  content:"";
  position:absolute;
  top:-120px; left:-120px;
  width:240px; height:240px; border-radius:50%;
  background:conic-gradient(from 180deg, var(--kl-primary), var(--kl-accent), var(--kl-primary));
  filter:blur(40px); opacity:.15; pointer-events:none;
  animation:kl-spin 14s linear infinite;
}

@keyframes kl-spin { to { transform:rotate(360deg); } }

.kl-avatar{
  width:108px; height:108px; border-radius:50%;
  object-fit:cover; object-position:center;
  border:4px solid #fff; box-shadow:0 10px 24px rgba(16,24,40,.15);
  margin:-84px auto 16px;
  background:#fff;
}

.kl-title{
  margin:8px 0 4px; font-size:1.4rem; color:var(--kl-ink); font-weight:800;
}
.kl-subtitle{
  margin:0 0 18px; color:var(--kl-muted); font-size:.98rem;
}

.kl-form label{ display:block; text-align:left; font-weight:600; color:var(--kl-ink); margin:10px 0 6px; }
.kl-form input[type="text"],
.kl-form input[type="password"]{
  width:100%; padding:12px 14px; border:1.4px solid #e5e7eb;
  border-radius:12px; outline:none; transition:border-color .2s ease, box-shadow .2s ease;
  font-size:1rem; background:#fff;
}
.kl-form input[type="text"]:focus,
.kl-form input[type="password"]:focus{
  border-color:var(--kl-primary);
  box-shadow:0 0 0 4px rgba(112,71,250,.12);
}
.kl-form #rememberme{ accent-color: var(--kl-primary); }

.kl-form .submit{
  margin-top:12px;
}
.kl-form .submit #wp-submit{
  width:100%;
  padding:12px 16px; border:none; border-radius:12px;
  background:linear-gradient(90deg, var(--kl-primary), var(--kl-accent));
  color:#fff; font-weight:800; cursor:pointer; transition:transform .04s ease, filter .2s ease;
}
.kl-form .submit #wp-submit:hover{ filter:brightness(1.03); }
.kl-form .submit #wp-submit:active{ transform:translateY(1px); }

.kl-links{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:12px; flex-wrap:wrap;
}
.kl-links a{ color:var(--kl-primary); text-decoration:none; font-weight:700; }
.kl-links a:hover{ text-decoration:underline; }
.kl-dot{ color:#cbd5e1; }

.kl-actions{
  display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap;
}
.kl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none;
  background:linear-gradient(90deg, var(--kl-primary), var(--kl-accent)); color:#fff;
}
.kl-btn.ghost{
  background:#fff; color:var(--kl-primary); border:1.5px solid rgba(112,71,250,.25);
}