/* KH Register Form — khrf-style.css v1.2.0 */


/* ── Brand tokens ── */
:root {
  --khrf-blue:       #439BC0;
  --khrf-blue-hover: #347EA0;
  --khrf-blue-800:   #1D4A60;
  --khrf-navy:       #1D3040;
  --khrf-blue-200:   #B3DDE9;
  --khrf-blue-100:   #D9EFF5;
  --khrf-blue-light: #F4FBFC;
  --khrf-body:       #5A6A7A;
  --khrf-caption:    #8A9BAB;
  --khrf-border:     #D0DCE6;
  --khrf-bg-alt:     #F7FAFB;
  --khrf-white:      #FFFFFF;
  --khrf-r-md:       8px;
  --khrf-r-lg:       12px;
  --khrf-r-xl:       16px;
  --khrf-r-2xl:      24px;
}

/* ── Override BuddyBoss registration page font ── */
#signup-form,
#signup-form *:not(.ti):not([class*="ti-"]) {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Restore Tabler icon font — must override the universal selector above */
#signup-form .ti,
#signup-form i.ti,
#signup-form [class*="ti-"] {
  font-family: "tabler-icons" !important;
}

/* ── Welcome header ── */
.khrf-welcome {
  text-align: center;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--khrf-blue-100);
}
.khrf-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--khrf-blue) !important;
  margin: 0 0 10px !important;
}
.khrf-welcome-heading {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--khrf-navy) !important;
  margin: 0 0 10px !important;
  line-height: 1.1 !important;
}
.khrf-welcome-sub {
  font-size: 0.97rem !important;
  color: var(--khrf-body) !important;
  margin: 0 auto !important;
  line-height: 1.78 !important;
  max-width: 480px;
}

/* ── Sections ── */
.khrf-section {
  margin-bottom: 2rem;
  transition: opacity 0.2s;
}
.khrf-hidden {
  display: none !important;
}
.khrf-section-heading {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--khrf-navy) !important;
  margin: 0 0 6px !important;
}
.khrf-section-sub {
  font-size: 0.9rem !important;
  color: var(--khrf-body) !important;
  margin: 0 0 1.25rem !important;
  line-height: 1.6 !important;
}

/* ── Profile type listings (stacked rows) ── */
.khrf-type-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1rem;
}
.khrf-type-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid var(--khrf-blue-200);
  border-radius: var(--khrf-r-xl);
  padding: 15px 17px;
  cursor: pointer;
  text-align: left;
  background: var(--khrf-white);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.khrf-type-card:hover {
  border-color: var(--khrf-blue);
  background: var(--khrf-blue-light);
}
.khrf-type-card.selected {
  border: 2px solid var(--khrf-blue);
  background: var(--khrf-blue-light);
  /* compensate 0.5px each side for the thicker border so rows don't shift */
  padding: 14px 16px;
}
.khrf-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--khrf-r-lg);
  background: var(--khrf-blue-100);
  color: var(--khrf-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0;
}
.khrf-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.khrf-card-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--khrf-navy) !important;
  margin: 0 0 4px !important;
}
.khrf-card-desc {
  font-size: 0.8rem !important;
  color: var(--khrf-body) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}
.khrf-card-radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 2px solid var(--khrf-border);
  border-radius: 50%;
  background: var(--khrf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.khrf-card-radio .ti { display: none; }
.khrf-type-card.selected .khrf-card-radio {
  background: var(--khrf-blue);
  border-color: var(--khrf-blue);
}
.khrf-type-card.selected .khrf-card-radio .ti { display: block; }

/* ── Method cards ── */
.khrf-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 1rem;
}
.khrf-method-card {
  border: 1.5px solid var(--khrf-blue-200);
  border-radius: var(--khrf-r-xl);
  padding: 1.25rem 1rem;
  cursor: pointer;
  text-align: left;
  background: var(--khrf-white);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.khrf-method-card:hover {
  border-color: var(--khrf-blue);
  background: var(--khrf-blue-light);
}
.khrf-method-card.selected {
  border: 2px solid var(--khrf-blue);
  background: var(--khrf-blue-light);
}

/* ── BuddyBoss field overrides ── */
#signup-form .editfield label,
#signup-form .bb-signup-field label {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--khrf-navy) !important;
  margin-bottom: 6px !important;
}
#signup-form input[type="text"],
#signup-form input[type="email"],
#signup-form input[type="password"] {
  border: 1.5px solid var(--khrf-border) !important;
  border-radius: var(--khrf-r-md) !important;
  font-size: 0.97rem !important;
  color: var(--khrf-navy) !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}
#signup-form input[type="text"]:focus,
#signup-form input[type="email"]:focus,
#signup-form input[type="password"]:focus {
  border-color: var(--khrf-blue) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Submit button ── */
#signup-form input[type="submit"]#signup_submit {
  background: var(--khrf-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--khrf-r-md) !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.15s !important;
  box-shadow: none !important;
  /* Fix: override the global input { height: 41px } and BP line-height */
  height: auto !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
  display: block !important;
  box-sizing: border-box !important;
}
#signup-form input[type="submit"]#signup_submit:hover {
  background: var(--khrf-blue-hover) !important;
}

/* ── SSO buttons override ── */
.bb-sso-container-buttons a,
.bb-sso-container-buttons button {
  border: 1.5px solid var(--khrf-border) !important;
  border-radius: var(--khrf-r-md) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: background 0.15s !important;
}
.bb-sso-container-buttons a:hover,
.bb-sso-container-buttons button:hover {
  background: var(--khrf-blue-light) !important;
  border-color: var(--khrf-blue-200) !important;
}

/* ── Terms checkbox ── */
#signup-form .bp-checkbox-wrap label {
  font-size: 0.875rem !important;
  color: var(--khrf-body) !important;
}
#signup-form .bs-styled-checkbox:checked {
  accent-color: var(--khrf-blue);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .khrf-method-grid {
    grid-template-columns: 1fr;
  }
  .khrf-welcome-heading {
    font-size: 1.5rem !important;
  }
}

/* SSO block hidden on load via JS setProperty — no CSS rule needed here */

/* ── Dynamic field notes ── */
.khrf-field-note {
  font-size: 0.78rem !important;
  color: var(--khrf-caption) !important;
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Ensure BuddyBoss fields display correctly inside our sections ── */
#khrf-s2 .editfield,
#khrf-s2 .bb-signup-field,
#khrf-s2 .editfield.field_232 {
  display: block !important;
}

/* ── Submit button wrapper ── */
#signup-form .submit {
  display: block !important;
}

/* ── Match feedback notes ── */
.khrf-match-note {
  font-size: 0.78rem !important;
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  font-family: 'DM Sans', sans-serif !important;
  display: none;
}
.khrf-match-note.khrf-match-ok  { color: #22C55E !important; display: block !important; }
.khrf-match-note.khrf-match-err { color: #E24B4A !important; display: block !important; }

/* ── Advisory callout (personal email on an org signup) ── */
.khrf-field-warn {
  display: none;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: #B45309 !important;
  background: #FFF4E0 !important;
  border: 1px solid #F3DEB1 !important;
  border-radius: var(--khrf-r-md) !important;
  padding: 9px 12px !important;
  margin: 8px 0 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.khrf-field-warn.khrf-warn-show { display: block; }