/* rollfee.css — VA Funding Fee Finance vs. Pay Cash Planner
   All rules scoped under .rlf2. Tokens on wrapper, not :root.
   Mirrors fee-planner.css / .ffp2 convention. */

.rlf2 {
  --navy: #0A2540;
  --navy-deep: #061829;
  --navy-mid: #143256;
  --gold: #FFB800;
  --blue: #2B7FFF;
  --white: #FFFFFF;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --green: #10B981;

  max-width: 649px;
  margin: 0 auto;
  padding: 4px 12px 2px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 12px;
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.rlf2 *, .rlf2 *::before, .rlf2 *::after { box-sizing: border-box; }

/* ── Scoped Divi resets ── */
.rlf2 h2 { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--white); padding: 0; }
.rlf2 h3 { font-size: 11px; font-weight: 700; margin: 0 0 4px; color: var(--gray-400); padding: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.rlf2 label { font-family: inherit; font-size: inherit; margin: 0; padding: 0; }
.rlf2 input { font-family: inherit; margin: 0; }
.rlf2 select { font-family: inherit; margin: 0; }
.rlf2 button { font-family: inherit; margin: 0; }
.rlf2 p { margin: 0; padding: 0; }

/* ── Inputs ── */
.rlf2-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 6px;
}

.rlf2-inputs label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.rlf2-inputs input,
.rlf2-inputs select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--navy-mid);
  border-radius: 5px;
  background: var(--navy-deep);
  color: var(--white);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.rlf2-inputs input:focus,
.rlf2-inputs select:focus {
  border-color: var(--blue);
}

/* ── Toggle row ── */
.rlf2-toggle-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.rlf2-toggle-row label {
  font-size: 13px;
  color: var(--gray-300);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rlf2-toggle-row input[type="checkbox"] {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
}

/* ── Results grid ── */
.rlf2-results {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 4px;
}

.rlf2-col {
  background: var(--navy-mid);
  border-radius: 6px;
  padding: 6px;
}

.rlf2-col-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold);
  margin-bottom: 4px;
  text-align: center;
}

.rlf2-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rlf2-row:last-child { border-bottom: none; }

.rlf2-row-label { color: var(--gray-400); }

.rlf2-row-value {
  font-weight: 600;
  color: var(--white);
  text-align: right;
}

.rlf2-highlight { color: var(--gold); }

/* ── Fee savings ── */
.rlf2-savings {
  background: var(--navy-mid);
  border-radius: 6px;
  padding: 4px 6px;
  margin-bottom: 4px;
}

.rlf2-savings h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.rlf2-savings-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
}

/* ── Exempt banner ── */
.rlf2-exempt-banner {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--green);
  display: none;
}

.rlf2-exempt-banner.active { display: block; }

/* ── Lead form ── */
.rlf2-lead-toggle {
  display: block;
  width: 100%;
  padding: 8px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  margin-bottom: 8px;
}

.rlf2-lead-toggle:hover { background: #1a6fe8; }

.rlf2-lead-form {
  display: none;
  background: var(--navy-mid);
  border-radius: 8px;
  padding: 12px;
}

.rlf2-lead-form.open { display: block; }

.rlf2-lead-form input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--navy-mid);
  border-radius: 6px;
  background: var(--navy-deep);
  color: var(--white);
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 6px;
  outline: none;
}

.rlf2-lead-form input:focus { border-color: var(--blue); }

.rlf2-lead-form button {
  width: 100%;
  padding: 8px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.rlf2-lead-form button:hover { background: #e6a600; }

.rlf2-hp { position: absolute; left: -9999px; }

/* ── Source ── */
.rlf2-source {
  font-size: 10px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 8px;
}

.rlf2-source a { color: var(--gray-400); }

.rlf2-form-msg {
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
}


@media (max-width: 500px) {
  .rlf2-results { grid-template-columns: 1fr; }
  .rlf2-inputs { grid-template-columns: 1fr; }
}