/* Calculator refinement — preserves the existing 250 / 600 / 250 PHP template */
.refinement-calc-card { padding: 24px; }
.refinement-calc-heading {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.refinement-calc-heading h2 { margin:0; color:var(--navy); font-size:1.05rem; }
.refinement-calc-heading p { margin:2px 0 0; color:#78869a; font-size:.78rem; }

.refinement-calc-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.refinement-calc-actions .btn { margin-right:0; }

.refinement-result-panel {
  background:#0f4d89;
  border:1px solid #0b4074;
  color:#fff;
  padding:20px;
}
.refinement-result-panel h3 { color:#d8eaff; }
.refinement-result-panel .result-value { color:#fff; font-size:2rem; font-weight:850; }
.refinement-result-note { margin-top:4px; color:#d9e8f7; font-size:.76rem; }
.refinement-result-mini-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px;
}
.refinement-result-mini-grid > div {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:8px; border-radius:6px; display:grid; gap:1px;
}
.refinement-result-mini-grid span { color:#c9dcf0; font-size:.65rem; }
.refinement-result-mini-grid strong { color:#fff; font-size:.72rem; }

.refinement-result-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.refinement-result-tools .btn { margin-right:0; padding:8px 12px; font-size:.76rem; }

.refinement-share-card {
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  font-size:.76rem;
}
.refinement-share-card > span { font-weight:700; color:var(--navy); margin-right:4px; }
.refinement-share-btn {
  border:1px solid #d5dfed; background:#fff; color:#2459ae;
  padding:5px 9px; border-radius:5px; font-size:.72rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
.refinement-share-btn.share-facebook:hover { border-color:#1877f2; color:#1877f2; }
.refinement-share-btn.share-instagram:hover { border-color:#d6249f; color:#d6249f; }
.refinement-share-btn.share-pinterest:hover { border-color:#e60023; color:#e60023; }
.refinement-share-btn.share-x:hover { border-color:#0f1419; color:#0f1419; }
.refinement-share-btn.share-email:hover { border-color:#2463eb; color:#2463eb; }
.refinement-share-btn.share-copy-link:hover { border-color:#2463eb; color:#2463eb; }

.refinement-how-card h3,
.refinement-long-card h3 { margin:18px 0 6px; color:var(--navy); font-size:.96rem; }
.refinement-how-card p,
.refinement-long-card p { font-size:.88rem; line-height:1.7; }
.refinement-faq-list { margin-top:6px; }
.refinement-faq-list details { padding:10px 0; }

.refinement-insight-card { position:relative; padding-left:54px; }
.refinement-insight-icon {
  position:absolute; left:18px; top:20px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; border-radius:5px;
  background:#eef4ff; color:#2463eb; font-weight:900; font-size:1.05rem; line-height:1;
}
.refinement-insight-label {
  color:#2463eb; text-transform:uppercase; letter-spacing:.06em;
  font-size:.63rem; font-weight:800; margin-bottom:3px;
}
.refinement-insight-card h2 { margin-bottom:6px; }

.refinement-smart-guide { padding:0; overflow:hidden; }
.refinement-smart-guide-head {
  background:linear-gradient(90deg,#10213f,#1a416f);
  color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.refinement-smart-guide-head span { font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:#b9d2ec; }
.refinement-smart-guide-head h2 { margin:2px 0 0; color:#fff; font-size:1rem; }
.refinement-guide-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); }
.refinement-guide-tabs button {
  background:#fff; border:0; border-right:1px solid var(--border); padding:14px 10px;
  text-align:left; cursor:pointer; min-height:96px;
}
.refinement-guide-tabs button:last-child { border-right:0; }
.refinement-guide-tabs button:hover { background:#f6f9ff; }
.refinement-guide-tabs button.active { background:#f6f9ff; box-shadow:inset 0 -3px 0 #2463eb; }
.refinement-guide-tab-icon { display:block; font-size:1.3rem; line-height:1; }
.refinement-guide-tabs button strong { display:block; margin-top:8px; color:var(--navy); font-size:.8rem; }
.refinement-guide-tabs button small { display:block; margin-top:3px; color:#8492a8; font-size:.68rem; line-height:1.3; }
.smart-guide-status-pill { transition:opacity .15s ease; }
.refinement-guide-output { padding:16px 18px 8px; }
.refinement-guide-output-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.refinement-guide-output strong { color:var(--navy); }
.refinement-guide-output p { margin:4px 0; font-size:.82rem; line-height:1.6; color:#5b6b82; }
.refinement-listen-btn {
  border:1px solid #cfe0f7; background:#eef4ff; color:#2463eb; border-radius:100px;
  padding:4px 12px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.refinement-listen-btn:hover { background:#e0ecff; }
.refinement-guide-question { padding:10px 18px 18px; }
.refinement-guide-question label { display:block; font-size:.72rem; font-weight:800; color:var(--navy); margin-bottom:5px; }
.refinement-guide-question > div { display:flex; gap:8px; }
.refinement-guide-question input {
  flex:1; min-width:0; border:1px solid var(--border); border-radius:6px; padding:9px 10px;
}
.refinement-guide-answer { margin:7px 0 0; font-size:.76rem; color:#5b6b82; }

.refinement-numbered-list { padding-left:20px; margin:0; }
.refinement-numbered-list li { margin:0 0 12px; padding-left:2px; font-size:.86rem; line-height:1.55; }
.refinement-mistakes-card { border-top:3px solid #d94b4b; }
.refinement-mistake-list { list-style:none; padding:0; margin:0; }
.refinement-mistake-list li { position:relative; padding-left:22px; margin:0 0 10px; font-size:.86rem; line-height:1.55; }
.refinement-mistake-list li::before { content:"✕"; position:absolute; left:0; color:#d62929; font-weight:900; }

.refinement-related-list { margin:8px 0 0; padding-left:18px; }
.refinement-related-list a { color:var(--blue); }
.refinement-reviewed-line {
  color:#7a8798; font-size:.68rem; padding:4px 2px 12px;
}

.refinement-resource-list { margin:0; padding-left:20px; font-size:.78rem; }
.refinement-resource-list li { padding:5px 0; border-bottom:1px solid #edf1f6; }
.refinement-resource-list a { color:#1f5cae; }

.refinement-project-summary .refinement-summary-list { display:grid; gap:8px; }
.refinement-project-summary .refinement-summary-list > div {
  display:flex; justify-content:space-between; gap:10px; font-size:.78rem;
  border-bottom:1px solid #edf1f6; padding-bottom:7px;
}
.refinement-project-summary span { color:#768499; }
.refinement-project-summary strong { color:var(--navy); text-align:right; max-width:135px; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Custom calculators (see templates/custom/*.php) ---------- */
.field-full { grid-column:1 / -1; }
.input-prefix, .input-suffix {
  display:flex; align-items:center; border:1px solid var(--border); border-radius:8px;
  background:#fff; overflow:hidden;
}
.input-prefix:focus-within, .input-suffix:focus-within {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,99,235,.12);
}
.input-prefix span, .input-suffix span {
  padding:0 11px; color:#8492a8; font-size:.88rem; font-weight:600; user-select:none;
}
.input-prefix input, .input-suffix input {
  border:0; box-shadow:none; border-radius:0; flex:1; min-width:0;
}
.input-prefix input:focus, .input-suffix input:focus { outline:none; box-shadow:none; }
.field small { display:block; margin-top:5px; color:#8492a8; font-size:.72rem; }
.field-error { color:#c0392b; }
.field-invalid { border-color:#c0392b !important; }

.refinement-monthly-total { text-align:center; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.14); }
.refinement-monthly-total span { display:block; color:#c9dcf0; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.refinement-monthly-total strong { display:block; margin:6px 0; color:#fff; font-size:2.1rem; line-height:1.1; }
.refinement-monthly-total small { display:block; color:#c9dcf0; font-size:.72rem; }

.refinement-payment-breakdown, .refinement-loan-summary {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px;
}
.refinement-payment-breakdown > div, .refinement-loan-summary > div {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:8px; border-radius:6px; display:grid; gap:2px;
}
.refinement-payment-breakdown span, .refinement-loan-summary span { color:#c9dcf0; font-size:.65rem; }
.refinement-payment-breakdown strong, .refinement-loan-summary strong { color:#fff; font-size:.8rem; }

.amortization-card .table-wrap { overflow-x:auto; margin-top:10px; }
.amortization-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.amortization-table th, .amortization-table td { padding:9px 10px; text-align:left; border-bottom:1px solid #edf1f6; white-space:nowrap; }
.amortization-table th { color:#5b6b82; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.amortization-table td { color:var(--text); }

@media (max-width:760px) {
  .refinement-guide-tabs { grid-template-columns:repeat(2,1fr); }
  .refinement-result-mini-grid { grid-template-columns:1fr; }
  .refinement-payment-breakdown, .refinement-loan-summary { grid-template-columns:1fr 1fr; }
}