/* =========================================================
   Form Contrast (Buyer Funnel + Calculators)
   Force light-on-dark look for all funnel forms
   ========================================================= */

:root {
  --form-label: #e5e7eb;         /* light gray labels */
  --form-text: #f8fafc;          /* near-white input text */
  --form-bg: #111827;            /* dark slate input background */
  --form-border: rgba(148,163,184,.45);
  --form-help: #cbd5e1;          /* lighter helper/tiny text */
  --form-placeholder: #94a3b8;
  --form-focus: rgba(96,165,250,.55);
  --form-focus-border: rgba(96,165,250,.65);
}

/* === Generic rules for all fields inside funnel cards === */
#qualifyForm label, #intakeForm label, #agentCard label {
  color: var(--form-label);
  font-weight: 600;
}

#qualifyForm input, #qualifyForm select, #qualifyForm textarea,
#intakeForm input, #intakeForm select, #intakeForm textarea,
#agentCard input, #agentCard select, #agentCard textarea {
  color: var(--form-text);
  background-color: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
}

#qualifyForm ::placeholder,
#intakeForm ::placeholder,
#agentCard ::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

#qualifyForm .tiny, #qualifyForm .small, #qualifyForm .help-tip,
#intakeForm .tiny, #intakeForm .small, #intakeForm .help-tip,
#agentCard .tiny, #agentCard .small, #agentCard .help-tip {
  color: var(--form-help);
}

#qualifyForm input:focus, #qualifyForm select:focus, #qualifyForm textarea:focus,
#intakeForm input:focus, #intakeForm select:focus, #intakeForm textarea:focus,
#agentCard input:focus, #agentCard select:focus, #agentCard textarea:focus {
  outline: 2px solid var(--form-focus);
  outline-offset: 2px;
  border-color: var(--form-focus-border);
}

/* Info “i” badge */
.help {
  color: #d1d7e3;
  border: 1px solid rgba(209,215,227,.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  font-size: 12px;
  cursor: help;
}
.help:hover { background: rgba(209,215,227,.15); }

.help-tip {
  display: block;
  font-size: 12px;
  color: var(--form-help);
  margin-top: 4px;
}

/* =========================================================
   Calculator forms (Affordability / Payment / Refi / Extra)
   Make labels readable and fields balanced on light cards
   ========================================================= */

#affForm label,
#payForm label,
#refiForm label,
#extraForm label {
  color: white;        /* visible on light background */
  font-weight: 600;
  display: block;
  margin-bottom: .25rem;
}

#affForm input, #affForm select, #affForm textarea,
#payForm input, #payForm select, #payForm textarea,
#refiForm input, #refiForm select, #refiForm textarea,
#extraForm input, #extraForm select, #extraForm textarea {
  color: #111;
  background-color: #fff;
  border: 1px solid #e2e8f0;   /* light gray */
  border-radius: 6px;
  padding: .45rem .6rem;
}

#affForm ::placeholder,
#payForm ::placeholder,
#refiForm ::placeholder,
#extraForm ::placeholder {
  color: #94a3b8;
  opacity: 1;
}

#affForm .tiny, #affForm .small, #affForm .help-tip,
#payForm .tiny, #payForm .small, #payForm .help-tip,
#refiForm .tiny, #refiForm .small, #refiForm .help-tip,
#extraForm .tiny, #extraForm .small, #extraForm .help-tip {
  color: #64748b;   /* soft slate for helper text */
}

#affForm input:focus, #affForm select:focus, #affForm textarea:focus,
#payForm input:focus, #payForm select:focus, #payForm textarea:focus,
#refiForm input:focus, #refiForm select:focus, #refiForm textarea:focus,
#extraForm input:focus, #extraForm select:focus, #extraForm textarea:focus {
  outline: 2px solid rgba(59,130,246,.35);   /* blue focus ring */
  outline-offset: 2px;
  border-color: rgba(59,130,246,.55);
}

/* Keep the little "i" badge readable on light cards too */
#affForm .help, #payForm .help, #refiForm .help, #extraForm .help {
  color: #475569;
  border-color: rgba(71,85,105,.5);
}
#affForm .help:hover, #payForm .help:hover,
#refiForm .help:hover, #extraForm .help:hover {
  background: rgba(71,85,105,.08);
}