/* Self-contained styling for the shared MFL calculator engine, themed per city.
   Covers the generated question markup (.qb/.opt/.money/.next) AND the classes the
   engine writes into #calcResult (.cres*/.cdisc/.adjust/.btn/.fnote). Scoped to .mfl-calc. */

.mfl-calc {
  --navy: var(--brand-primary, #0C3E60);
  --accent: var(--brand-accent, #F58F47);
  --accent-dk: #d9772e;
  --muted: #5c6b7a;
  --line: #e5eaf0;
  --ink: #1a2733;
  --bg: #ffffff;
  --radius: 16px;
  --shadow: 0 12px 34px rgba(2, 6, 23, 0.10);
}

.calcwrap {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 30px;
}
.calcwrap .kicker { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-dk); margin: 0 0 4px; }
.calcwrap .ktitle { font-size: 22px; font-weight: 800; color: var(--navy); margin: 0 0 4px; }
.calcwrap form.q { display: block; }

/* questions */
.qb { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.qb:first-of-type { margin-top: 18px; border-top: none; padding-top: 0; }
.qb.hidden { display: none; }
.qhead { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-dk); margin: 0 0 10px; }
.qhead span { color: var(--muted); font-weight: 700; }
.qb .flabel { display: block; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.qsub { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.qerr { color: #b42318; font-size: 13px; margin: 10px 0 0; font-weight: 600; }

/* money input */
.fld { margin-top: 4px; }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.money input {
  width: 100%; font-size: 18px; font-weight: 700; color: var(--navy);
  padding: 13px 14px 13px 26px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
}
.money input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,143,71,.28); }

/* choice options */
.opts { display: grid; gap: 10px; margin-top: 4px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: .12s; }
.opt:hover { border-color: var(--accent); }
.opt.checked { border-color: var(--accent); background: #fff7f0; }
.opt input { accent-color: var(--accent); width: 18px; height: 18px; }
.opt span { font-size: 14.5px; color: var(--ink); }

/* buttons */
.btn { display: inline-block; text-align: center; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 12px; border: none; cursor: pointer; background: var(--accent); color: #fff; text-decoration: none; transition: .12s; }
.btn:hover { filter: brightness(.96); }
.btn.block { display: block; width: 100%; }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.qb .next { margin-top: 14px; }

/* result */
#calcForm[hidden] { display: none; }
#calcResult[hidden] { display: none; }
#calcResult { margin-top: 6px; }
.cres { text-align: center; padding: 8px 0 4px; }
.cres-head { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dk); margin: 0 0 6px; }
.cres-num { font-size: clamp(38px, 9vw, 56px); font-weight: 800; color: var(--navy); line-height: 1.05; letter-spacing: -.5px; }
.cres-body { font-size: 16px; color: var(--ink); max-width: 34rem; margin: 14px auto 0; line-height: 1.6; }
.cres-body b { color: var(--navy); }
.cdisc { font-size: 12.5px; color: var(--muted); margin: 16px auto 0; max-width: 34rem; }
.fnote { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 34rem; margin-left: auto; margin-right: auto; }
.cres-cta { display: flex; flex-direction: column; gap: 10px; max-width: 22rem; margin: 22px auto 0; }
.adjust { display: block; text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.adjust:hover { color: var(--accent-dk); }