/* =============================================
   KNF Authenticator – Frontend Styles v1.1
   KNF Studios
   ============================================= */

/* ---- Glass Card ---- */
.knf-glass {
  max-width: 520px;
  margin: 24px auto;
  padding: 32px 28px 28px;
  border-radius: 20px;
  border: var(--knf-glass-border, 1px solid rgba(255,255,255,.15));
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: inherit;
}
.knf-theme-dark  { background: rgba(16,16,20,.72); color: rgba(255,255,255,.93); }
.knf-theme-light { background: rgba(255,255,255,.72); color: rgba(12,12,14,.90); border-color: rgba(0,0,0,.08); }
.knf-theme-auto  { background: rgba(16,16,20,.72); color: rgba(255,255,255,.93); }
@media (prefers-color-scheme: light) {
  .knf-theme-auto { background: rgba(255,255,255,.72); color: rgba(12,12,14,.90); border-color: rgba(0,0,0,.08); }
}

/* ---- Headings ---- */
.knf-title { font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.3px; }
.knf-sub   { font-size: 13px; opacity: .78; margin: 0 0 20px; }

/* ---- Alert ---- */
.knf-alert {
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(220,50,50,.18);
  border: 1px solid rgba(220,50,50,.30);
  font-size: 13px;
  margin-bottom: 14px;
  color: inherit;
}
.knf-alert-success {
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.30);
}

/* ---- Form ---- */
.knf-form { display: flex; flex-direction: column; gap: 12px; }

.knf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .knf-grid { grid-template-columns: 1fr; } }

.knf-field { display: flex; flex-direction: column; gap: 5px; }

.knf-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .85;
  color: var(--knf-label-color, inherit);
}

.knf-input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: var(--knf-glass-border, 1px solid rgba(255,255,255,.15));
  background: var(--knf-input-bg, rgba(0,0,0,.18));
  color: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}
.knf-theme-light .knf-input { background: var(--knf-input-bg, rgba(255,255,255,.68)); border-color: rgba(0,0,0,.10); }
.knf-input:focus { border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.knf-theme-light .knf-input:focus { border-color: rgba(0,0,0,.22); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
select.knf-input { height: 44px; padding-top: 0; padding-bottom: 0; cursor: pointer; }

/* ---- Password row ---- */
.knf-pw-row { display: flex; gap: 8px; align-items: stretch; }
.knf-pw-row .knf-input { flex: 1; }

.knf-ghost {
  padding: 11px 14px;
  border-radius: 12px;
  border: var(--knf-glass-border, 1px solid rgba(255,255,255,.15));
  background: rgba(0,0,0,.12);
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  transition: background .15s;
}
.knf-ghost:hover { background: rgba(255,255,255,.12); }
.knf-theme-light .knf-ghost { border-color: rgba(0,0,0,.10); background: rgba(255,255,255,.58); }

.knf-help  { font-size: 11px; opacity: .65; margin-top: -6px; color: var(--knf-label-color, inherit); }

/* ---- Checkbox ---- */
.knf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .88; color: var(--knf-label-color, inherit); cursor: pointer; }

/* ---- Submit button ---- */
.knf-btn {
  padding: 13px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  background: var(--knf-btn-bg, rgba(255,255,255,.92));
  color: var(--knf-btn-text, rgba(10,10,10,.92));
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
  margin-top: 4px;
}
.knf-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  background: var(--knf-btn-hover-bg, var(--knf-btn-bg, rgba(255,255,255,1)));
  color: var(--knf-btn-hover-text, var(--knf-btn-text, rgba(10,10,10,1)));
}
.knf-btn:active { transform: translateY(0); }

/* ---- Divider ---- */
.knf-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: .55;
  margin: 4px 0;
}
.knf-divider::before, .knf-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid rgba(255,255,255,.18);
}
.knf-theme-light .knf-divider::before,
.knf-theme-light .knf-divider::after { border-color: rgba(0,0,0,.12); }

/* ---- Google button ---- */
.knf-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: var(--knf-glass-border, 1px solid rgba(255,255,255,.18));
  background: rgba(255,255,255,.10);
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .12s;
  text-decoration: none;
  box-sizing: border-box;
}
.knf-google-btn:hover { background: rgba(255,255,255,.20); transform: translateY(-1px); color: inherit; }
.knf-google-btn svg   { flex-shrink: 0; }
.knf-theme-light .knf-google-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
.knf-theme-light .knf-google-btn:hover { background: rgba(0,0,0,.10); }

/* ---- Remember me + Forgot password row ---- */
.knf-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.knf-forgot { font-size: 12px; opacity: .75; white-space: nowrap; }
.knf-forgot a { color: inherit; text-decoration: underline; }

/* ---- Auth switch link ---- */
.knf-authlink {
  text-align: center;
  font-size: 13px;
  margin-top: 12px; /* gap between Google button and this link */
  color: var(--knf-link-color, inherit);
}
.knf-authlink a { color: var(--knf-link-color, inherit); font-weight: 700; text-decoration: underline; }

/* ---- Logout shortcode ---- */
.knf-logout-box { text-align: var(--knf-logout-align, left); }
.knf-logout-welcome {
  font-weight: 800;
  font-size: var(--knf-welcome-size, 20px) !important;
  color: var(--knf-welcome-color, inherit);
  text-align: var(--knf-welcome-align, left);
  margin-bottom: 8px;
}
.knf-logout-link {
  background: transparent !important; background-color: transparent !important;
  background-image: none !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important;
  min-height: 0 !important; height: auto !important;
  display: inline !important;
  color: var(--knf-logout-color, inherit) !important;
  font-size: var(--knf-logout-size, 14px) !important;
  font-weight: 700 !important; cursor: pointer; text-decoration: underline !important; opacity: .82;
}
.knf-logout-link:hover { opacity: 1 !important; }

/* ---- Responsive ---- */
@media (max-width: 560px) {
  .knf-glass { padding: 24px 18px 20px; margin: 12px; }
  .knf-title  { font-size: 20px; }
}