/* === ZKP Custom Login Variables (override-able via inline CSS) === */
:root{
  --zkp-login-bg: #fafbfc;
  --zkp-login-card-bg: #ffffff;
  --zkp-login-card-radius: 10px;
  --zkp-login-card-blur: 0px;
  --zkp-login-btn-bg: #635BFF;
  --zkp-login-btn-color: #ffffff;
  --zkp-login-btn-hover: #4c44d4;
  /* opsional dari PHP (tipografi/link) */
  --zkp-title-color: #1a1f36;
  --zkp-link-color: #6b7385;
  --zkp-link-hover: #635BFF;
}

/* ===== Background & alignment ===== */
*{ box-sizing: border-box; }
body.login{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zkp-login-bg) !important;
  background-attachment: fixed !important;
}

body.login.zkp-align-left  { justify-content: flex-start; }
body.login.zkp-align-right { justify-content: flex-end; }

/* Tipografi & link dari opsi */
#login h1, #login h1 a { color: var(--zkp-title-color); }
#nav a, #backtoblog a   { color: var(--zkp-link-color); }
#nav a:hover, #backtoblog a:hover { color: var(--zkp-link-hover); }

/* Sembunyikan heading default WordPress; reset container login */
body.login #login > h1 { display: none; }
body.login #login{
  width: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ===== Notifikasi bawaan WP ===== */
#login_error,
.login .message{
  border-left: 4px solid #f56565;       /* merah untuk error */
  background: #fef5f5;
  color: #c53030;
  box-shadow: none !important;
  padding: 12px 16px !important;
  margin: 0 0 24px 0 !important;
  border-radius: 6px;
  font-size: 14px;
}
#login_error a,
.login .message a{
  color: inherit !important;
  font-weight: 600;
  text-decoration: none;
}
#login_error a:hover,
.login .message a:hover{ text-decoration: underline; }

/* pesan info/sukses */
.login .message{
  border-left-color: #635BFF;
  background: #f4f3ff;
  color: #4c44d4;
}

/* ===== Layout & form ===== */
.login-container{ width: 100%; max-width: 400px; }
.login-header{ text-align: center; margin-bottom: 32px; }
.logo{ margin-bottom: 20px; display: flex; justify-content: center; }
.logo img{ max-height: 45px; width: auto; }

.login-header h1{
  color: #1a1f36;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.login-header p{ color: #efefef; font-size: 14px; font-weight: 400; }

.login-form{ margin-top: 0; padding-top: 0; }

/* input group (label float) */
.input-group{ position: relative; margin-bottom: 24px; }
.input-group input{
  width: 100%;
  background: #ffffff;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  padding: 16px 14px 10px 14px;
  color: #1a1f36;
  font-size: 16px !important;
  font-weight: 400;
  outline: none;
  transition: all .2s ease;
  font-family: inherit;
}
.input-group input:focus{
  border-bottom-color: #635BFF;
  border-bottom-width: 2px;
}
.input-group input::placeholder{ color: transparent; }

.input-group label{
  position: absolute;
  left: 14px;
  top: 27%;
  transform: translateY(-27%);
  color: #8792a2;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  pointer-events: none;
  transition: all .2s ease;
  background: #ffffff;
  padding: 3px 6px;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
  top: 0;
  font-size: 12px;
  font-weight: 500;
  color: #635BFF;
  transform: translateY(-50%);
}
.input-group input:not(:focus):not(:placeholder-shown) + label{
  color: #6b7385;
}

/* toggle password */
.input-group:has(.password-toggle) input{ padding-right: 42px; }
.password-toggle{
  position: absolute;
  right: 10px;
  top: 37%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #8792a2;
  padding: 6px;
  border-radius: 4px;
  transition: color .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.password-toggle:hover{ color: #635BFF; }

/* recaptcha & form options */
.g-recaptcha{
  text-align: center;
  align-content: baseline;
  margin-left: 12px;
  position: relative;
  margin-top: -12px;
}

/* label default WP */
.login label{
  line-height: 1.3 !important;
  display: inline-flex !important;
}

/* Buang background putih default form (kita pakai .login-card) */
body.login #login form,
body.login .login-form{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== Card by variables ===== */
.login-card{
  background: var(--zkp-login-card-bg) !important;
  border-radius: var(--zkp-login-card-radius) !important;
  -webkit-backdrop-filter: blur(var(--zkp-login-card-blur)) !important;
  backdrop-filter: blur(var(--zkp-login-card-blur)) !important;
  padding: 36px 28px;
  box-shadow: 0px -1px 8px 4px rgba(0, 0, 0, .04);
}

/* ===== Input & tombol mengikuti tipe kartu ===== */
body.login.zkp-card-solid .login-card .input-group input,
body.login.zkp-card-gradient .login-card .input-group input{
  background: #ffffff !important;
  border: 1px solid #e3e8ee !important;
  color: #1a1f36 !important;
}

body.login.zkp-card-glass .login-card .input-group input{
  background: rgba(255,255,255,.35) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #111 !important;
  -webkit-backdrop-filter: blur(var(--zkp-login-card-blur)) !important;
  backdrop-filter: blur(var(--zkp-login-card-blur)) !important;
}

/* ===== Tombol ===== */
.submit-btn,
#wp-submit{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  text-decoration: none !important;
  background: var(--zkp-login-btn-bg) !important;
  color: var(--zkp-login-btn-color) !important;
  border: none !important;
  border-radius: calc(var(--zkp-login-card-radius) - 4px) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 20px;
  cursor: pointer;
  transition: all .2s ease;
}
.submit-btn:hover,
#wp-submit:hover{
  background: var(--zkp-login-btn-hover) !important;
}

/* gaya hover spesifik tombol custom */
.submit-btn{
  position: relative;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: none;
}
.submit-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,91,255,.4);
}
.submit-btn:active{ transform: translateY(0); }
.submit-btn:disabled{
  background: #a2a7b5 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-text{ transition: opacity .2s ease; }
.btn-loader{ position: absolute; opacity: 0; transition: opacity .2s ease; color: #ffffff; }
.submit-btn.loading .btn-text{ opacity: 0; }
.submit-btn.loading .btn-loader{ opacity: 1; }

/* ===== Link navigasi bawah ===== */
.login-nav-links{
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
}
.login-nav-links a{
  color: #6b7385;
  text-decoration: none;
  transition: color .2s ease;
}
.login-nav-links a:hover{ color: #635BFF; }

/* ===== Lost Password & Register: jaga konsistensi tombol ===== */
body.login .submit .button-primary,
body.login .submit .button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  text-decoration: none !important;
  border-radius: calc(var(--zkp-login-card-radius) - 4px) !important;
  background: var(--zkp-login-btn-bg) !important;
  color: var(--zkp-login-btn-color) !important;
  border: none !important;
}
body.login .submit .button-primary:hover,
body.login .submit .button:hover{
  background: var(--zkp-login-btn-hover) !important;
}

/* ===== Validasi realtime (opsional) ===== */
.error-message{
  color: #f56565;
  font-size: 13px;
  font-weight: 500;
  margin-top: -7px;
  display: none;
}
.input-group.error .error-message{ display: block; }
.input-group.error input{
  border-bottom-color: #f56565 !important;
  background: #fef5f5;
  border-bottom-width: 2px;
}
.input-group.error input:focus{ border-color: #f56565 !important; }
.input-group.error label{ color: #f56565 !important; }

/* ===== Hide elemen yang tidak perlu ===== */
.login .language-switcher{ display: none !important; }
.login .privacy-policy-page-link{
  text-align: center;
  width: 100%;
  margin: 3em 0 2em;
  display: none !important;
}

/* ===== Responsif ===== */
@media (max-width: 480px){
  body.login{ padding: 16px; }
  .login-card{
    padding: 36px 28px;
    border-radius: 8px;
  }
  .login-header h1{ font-size: 1.375rem; }
}