/* Home Seller Pro — mortgage calculator. Gold + tints; black only for text. */
.hsp-mg { --hsp-ink: var(--wp--preset--color--contrast, #1b1b1f); --hsp-muted: var(--wp--preset--color--contrast-2, #4a4a52); --hsp-strong: var(--wp--preset--color--accent-strong, #6f560d); --hsp-tint: var(--wp--preset--color--accent-soft, #fbf5e1); --hsp-tint-2: var(--wp--preset--color--accent-light, #efe0ae); --hsp-gold: var(--hsp-accent, #d3af37); color: var(--hsp-ink); box-sizing: border-box; }
.hsp-mg *, .hsp-mg *::before, .hsp-mg *::after { box-sizing: border-box; }
.hsp-mg__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; margin: 0 0 16px; }
.hsp-mg__field { display: grid; gap: 4px; min-width: 0; }
.hsp-mg__field label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hsp-muted); }
.hsp-mg__field input, .hsp-mg__field select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hsp-tint-2); border-radius: var(--hsp-radius, 8px); background: var(--hsp-tint); color: var(--hsp-ink); font: inherit; }
.hsp-mg__field input:focus-visible, .hsp-mg__field select:focus-visible { outline: 3px solid var(--hsp-strong); outline-offset: 1px; background: #fff; }
.hsp-mg__affix { display: flex; }
.hsp-mg__affix input { border-radius: var(--hsp-radius, 8px) 0 0 var(--hsp-radius, 8px); min-width: 0; }
.hsp-mg__affix span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--hsp-tint-2); border-left: 0; border-radius: 0 var(--hsp-radius, 8px) var(--hsp-radius, 8px) 0; background: #fff; color: var(--hsp-muted); font-size: .85rem; font-weight: 700; }
.hsp-mg__result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.hsp-mg__pay { display: grid; gap: 4px; padding: 18px; border-radius: var(--hsp-radius, 8px); background: var(--hsp-gold); color: var(--hsp-accent-text, #1a1a1a); }
.hsp-mg__pay > span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hsp-mg__pay strong { font-size: 2rem; line-height: 1.1; }
.hsp-mg__pay small { font-size: .85rem; }
.hsp-mg__costs { margin: 0; padding: 12px 16px; border: 1px solid var(--hsp-tint-2); border-radius: var(--hsp-radius, 8px); background: #fff; }
.hsp-mg__costs > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hsp-tint-2); }
.hsp-mg__costs > div[hidden] { display: none; }
.hsp-mg__costs dt { font-size: .92rem; }
.hsp-mg__costs dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hsp-mg__pct { color: var(--hsp-muted); font-size: .8rem; }
.hsp-mg__costs .hsp-mg__total { border-bottom: 0; padding-top: 10px; }
.hsp-mg__total dt { font-weight: 700; }
.hsp-mg__total dd { font-size: 1.1rem; }
.hsp-mg__note { margin: 10px 0 0; font-size: .82rem; color: var(--hsp-muted); }
@media (max-width: 640px) { .hsp-mg__result { grid-template-columns: minmax(0, 1fr); } .hsp-mg__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .hsp-mg { display: none; } }