/* Cash-out refinance calculator — loaded only by /cash-out-refinance-calculator and
   /calculadora-refinanciamiento-cash-out. Kept out of styles.css so that file's
   immutable cache and ?v= version don't change for every other page.
   Layout reuses .calc-grid / .calc-form / .calc-results from styles.css. */

.co-section .co-h { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); color: var(--navy-900); margin: 0 0 .9rem; }
.co-section .co-h--gap { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.co-step { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--navy-900); color: #fff; font-family: var(--f-body, inherit); font-size: .9rem; font-weight: 700; }
.co-hint { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.co-hint--lead { margin: -.4rem 0 1.1rem; font-size: .95rem; }
.co-err { margin: .35rem 0 0; font-size: .88rem; font-weight: 600; color: #8f2020; }
.co-err[hidden], .co-status[hidden], .co-note[hidden], .co-max[hidden] { display: none; }
.co-section [aria-invalid="true"] { border-color: #b91c1c; }
.co-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* iOS Safari zooms the page when a focused input is under 16px. */
.co-section input, .co-section select, .co-section textarea { font-size: max(16px, 1rem); }

/* Debt rows */
.co-debts { display: grid; gap: .75rem; margin: .9rem 0; }
.co-debt { margin: 0; padding: .85rem .9rem .75rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfaf7; }
.co-debt-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.co-debt-type { flex: 1 1 auto; min-width: 0; }
.co-remove { flex: none; padding: .45rem .6rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.co-remove:hover, .co-remove:focus-visible { color: #8f2020; }
.co-debt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.co-debt-grid .calc-field { margin-bottom: 0; }
.co-debt-grid label { font-size: .85rem; }
.co-payoff { margin-top: .7rem; font-size: .9rem; }
.co-add { width: 100%; justify-content: center; }
.co-max { margin: .5rem 0 0; font-size: .88rem; color: var(--muted); }

.co-more { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.co-more > summary { cursor: pointer; font-weight: 600; color: var(--navy-900); }
.co-more > summary + * { margin-top: 1rem; }

/* Results */
.co-status {
  margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: var(--radius);
  background: rgba(255,255,255,.08); border-left: 4px solid var(--accent-2);
  color: #fff; font-size: .95rem; line-height: 1.5;
}
.co-status strong { display: block; margin-bottom: .15rem; }
.co-status[data-status="fits"] { border-left-color: #4ade80; }
.co-status[data-status="over"] { border-left-color: #fbbf24; }
.co-dl { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.co-dl div { display: flex; justify-content: space-between; gap: 1rem; }
.co-dl dt { color: #cdd6e3; font-size: .95rem; }
.co-dl dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.co-dl .co-dl-total { padding: .35rem 0; border-top: 1px dashed rgba(255,255,255,.2); border-bottom: 1px dashed rgba(255,255,255,.2); }
.co-dl .co-dl-total dt, .co-dl .co-dl-total dd { color: #fff; font-weight: 700; }
.calc-results p.co-note { margin: 0 0 1.25rem; color: #fff; font-size: .95rem; line-height: 1.5; }
.calc-results p.co-fine { color: #cdd6e3; margin: 0 0 1.25rem; }
.co-send-cta { width: 100%; justify-content: center; white-space: normal; text-align: center; }

/* Send form */
.co-send { margin-top: clamp(1.25rem, 2.5vw, 2rem); scroll-margin-top: 90px; }
.co-form, .co-done { max-width: 48rem; margin-inline: auto; }
.co-done:focus { outline: none; }
.co-textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; color: var(--ink); resize: vertical;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.co-textarea:focus { border-color: var(--accent); outline: 2px solid rgba(199,154,58,.25); }
.co-form .prequal-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.co-hp { position: absolute; left: -9999px; }
.co-form button[aria-busy="true"] { cursor: progress; opacity: .8; }
.co-section .cal-cta .btn { white-space: normal; text-align: center; }

/* .prequal-check > span is a flex column, which splits the consent sentence at
   every <strong>. Render it as one paragraph. */
.co-form .prequal-check > span { display: block; }
.co-form .prequal-check > span > strong:first-child { display: block; margin-bottom: .2rem; }
.co-form .prequal-check > span strong { font-size: inherit; }

/* Narrow phones: keep rows from forcing horizontal scroll. */
@media (max-width: 520px) {
  .co-section .calc-row2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .co-debt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-debt-grid .calc-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .co-section .calc-grid { grid-template-columns: minmax(0, 1fr); }
}