/* Mortgage calculator (mortgage-calculator.html). Scoped under .mc- so it never touches site-wide form styles. */
.mc { background: var(--paper); padding: 8px 0 72px; }
.mc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; }

/* ---------- Inputs panel ---------- */
.mc-panel { background: var(--white); border: 1px solid var(--paper-line); border-radius: 14px; padding: 12px 36px 28px; box-shadow: 0 18px 40px -28px rgba(20,18,15,0.35); }
.mc-field { padding: 28px 0 26px; border-bottom: 1px solid var(--paper-line); }
.mc-field:last-of-type { border-bottom: 0; }
.mc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.mc-step { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--brass-bright); font-family: var(--font-display); font-style: italic; font-size: 15px; display: grid; place-items: center; margin-top: 1px; }
.mc-label { display: block; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; margin: 0; }
.mc-hint { font-size: 13.5px; line-height: 1.55; color: rgba(20,18,15,0.62); margin-top: 3px; }

.mc-input { display: flex; align-items: stretch; border: 1.5px solid rgba(20,18,15,0.2); border-radius: 10px; background: var(--paper); overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
.mc-input:focus-within { border-color: var(--brass-deep); background: var(--white); box-shadow: 0 0 0 4px rgba(201,164,97,0.25); }
.mc-input .mc-unit { flex: 0 0 auto; display: flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--brass-deep); background: rgba(201,164,97,0.14); }
.mc-input .mc-unit.suffix { border-left: 1px solid rgba(20,18,15,0.12); }
.mc-input .mc-unit.prefix { border-right: 1px solid rgba(20,18,15,0.12); }
.mc-input input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--ink); padding: 11px 16px; border-radius: 0; font-variant-numeric: tabular-nums; }
.mc-input input[type="text"]:focus { outline: none; }

.mc-note { font-size: 13px; color: rgba(20,18,15,0.62); margin-top: 10px; min-height: 19px; }
.mc-note strong { color: var(--ink); font-weight: 600; }
.mc-warn { color: #8A4B08; }
.mc-warn strong { color: #8A4B08; }

/* slider */
.mc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 20px 0 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--brass-deep) 0, var(--brass-deep) var(--pct, 0%), rgba(20,18,15,0.14) var(--pct, 0%), rgba(20,18,15,0.14) 100%); }
.mc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--brass-deep); box-shadow: 0 2px 6px rgba(20,18,15,0.3); }
.mc-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--brass-deep); box-shadow: 0 2px 6px rgba(20,18,15,0.3); }
.mc-range:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
.mc-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(20,18,15,0.5); }

/* quick-pick chips */
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mc-chip { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; border: 1.5px solid rgba(20,18,15,0.2); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: all .15s; }
.mc-chip:hover { border-color: var(--brass-deep); }
.mc-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--brass-bright); }
.mc-chips-label { font-size: 12.5px; color: rgba(20,18,15,0.55); align-self: center; margin-right: 2px; }

.mc-footnote { font-size: 12.5px; line-height: 1.6; color: rgba(20,18,15,0.55); padding-top: 18px; border-top: 1px solid var(--paper-line); }

/* ---------- Results card ---------- */
.mc-results { position: sticky; top: 108px; background: var(--ink); color: var(--paper); border-radius: 14px; border-top: 3px solid var(--brass); padding: 30px 32px 28px; box-shadow: 0 28px 60px -30px rgba(20,18,15,0.7); }
.mc-results h2, .mc-results h3 { margin: 0; }
.mc-r-kicker { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247,243,236,0.55); font-weight: 600; }
.mc-r-monthly { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.05; color: var(--brass-bright); margin: 10px 0 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mc-r-monthly small { font-size: 18px; color: rgba(247,243,236,0.6); font-family: var(--font-body); letter-spacing: 0; }
.mc-r-sub { font-size: 13.5px; color: rgba(247,243,236,0.62); line-height: 1.5; }

.mc-split { margin: 24px 0 6px; }
.mc-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; background: rgba(247,243,236,0.1); }
.mc-bar i { display: block; height: 100%; transition: width .3s ease; }
.mc-bar .p { background: var(--brass-bright); }
.mc-bar .i { background: #8E7A52; }
.mc-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12.5px; color: rgba(247,243,236,0.66); }
.mc-legend b { display: block; font-size: 15px; color: var(--paper); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mc-legend span.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.mc-legend .i-side { text-align: right; }

.mc-rows { margin-top: 22px; border-top: 1px solid var(--ink-line); padding-top: 14px; }
.mc-rows h3 { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247,243,236,0.55); font-weight: 600; margin-bottom: 6px; }
.mc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; padding: 7px 0; color: rgba(247,243,236,0.75); }
.mc-row span:last-child { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-row.total { border-top: 1px solid var(--ink-line); margin-top: 6px; padding-top: 12px; color: var(--paper); font-weight: 600; }
.mc-row.total span:last-child { color: var(--brass-bright); font-size: 19px; font-family: var(--font-display); font-weight: 500; }

.mc-income { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: rgba(201,164,97,0.1); border: 1px solid rgba(201,164,97,0.3); font-size: 13px; line-height: 1.55; color: rgba(247,243,236,0.78); }
.mc-income strong { color: var(--brass-bright); font-weight: 600; font-variant-numeric: tabular-nums; }

.mc-results .btn { width: 100%; justify-content: center; margin-top: 20px; }
.mc-wa { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--brass-bright); text-decoration: underline; text-underline-offset: 3px; }
.mc-results .mc-disc { font-size: 12px; line-height: 1.55; color: rgba(247,243,236,0.5); margin: 14px 0 0; }

/* mobile sticky summary */
.mc-mobilebar { display: none; }

@media (max-width: 980px) {
  .mc-grid { grid-template-columns: 1fr; gap: 28px; }
  .mc-results { position: static; }
}
@media (max-width: 640px) {
  .mc { padding-bottom: 56px; }
  .mc-panel { padding: 4px 20px 22px; border-radius: 12px; }
  .mc-input input[type="text"] { font-size: 24px; }
  .mc-results { padding: 26px 22px 24px; }
  .mc-r-monthly { font-size: 44px; }
  .mc-mobilebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: var(--paper); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 2px solid var(--brass); transform: translateY(100%); transition: transform .25s ease; }
  .mc-mobilebar.show { transform: none; }
  .mc-mobilebar small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,243,236,0.6); }
  .mc-mobilebar strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--brass-bright); font-variant-numeric: tabular-nums; }
  .mc-mobilebar a { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--brass); padding: 10px 14px; border-radius: 6px; }
  body.has-mc-bar .float-cta, body.has-mc-bar .float-cta-wechat { display: none; }
}