/* Car Refinance Calculator — car-refinance.css */
.cr-wrap*,.cr-wrap *::before,.cr-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.cr-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;max-width:960px;margin:0 auto;background:#fff;border-radius:16px;border:1px solid #e2e8f0;overflow:hidden}
.cr-header{display:flex;align-items:center;gap:14px;padding:20px 24px;background:#0f172a}
.cr-header-icon{width:44px;height:44px;background:rgba(255,255,255,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#94a3b8;flex-shrink:0}
.cr-title{font-size:19px;font-weight:700;color:#fff;margin-bottom:3px}
.cr-subtitle{font-size:12.5px;color:#94a3b8}
.cr-body{display:flex;flex-direction:column}
@media(min-width:720px){.cr-body{flex-direction:row;align-items:flex-start}.cr-form{width:48%;border-right:1px solid #e2e8f0}.cr-results{width:52%;position:sticky;top:0;max-height:100vh;overflow-y:auto}}
.cr-form{padding:20px;display:flex;flex-direction:column;gap:12px}
.cr-field{display:flex;flex-direction:column;gap:5px}
.cr-section-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;padding-bottom:4px;border-bottom:1px solid #f1f5f9;margin-top:4px}
.cr-label{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.04em}
.cr-opt{font-size:11px;font-weight:400;color:#94a3b8;text-transform:none;letter-spacing:0}
.cr-hint{font-size:11.5px;color:#94a3b8;line-height:1.4}
.cr-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:400px){.cr-row-2{grid-template-columns:1fr}}
.cr-prefix-wrap,.cr-suffix-wrap{display:flex;align-items:center;border:1.5px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#f8fafc;transition:border-color .18s}
.cr-prefix-wrap:focus-within,.cr-suffix-wrap:focus-within{border-color:#0f172a;background:#fff}
.cr-prefix,.cr-suffix{padding:0 11px;font-size:13px;font-weight:600;color:#64748b;background:#f1f5f9;height:44px;display:flex;align-items:center;flex-shrink:0}
.cr-prefix{border-right:1px solid #e2e8f0}
.cr-suffix{border-left:1px solid #e2e8f0}
.cr-input{flex:1;border:none;background:transparent;padding:0 12px;height:44px;font-size:14px;color:#1e293b;outline:none;-moz-appearance:textfield;min-width:0}
.cr-input::-webkit-outer-spin-button,.cr-input::-webkit-inner-spin-button{-webkit-appearance:none}
.cr-select{width:100%;padding:10px 30px 10px 12px;height:44px;border:1.5px solid #cbd5e1;border-radius:10px;font-size:14px;color:#1e293b;background:#f8fafc;appearance:none;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .18s}
.cr-select:focus{border-color:#0f172a}
.cr-disclaimer{display:flex;align-items:flex-start;gap:8px;background:#fefce8;border:1px solid #fde047;border-radius:9px;padding:10px 14px;font-size:12px;color:#854d0e;line-height:1.5}
.cr-disclaimer svg{flex-shrink:0;margin-top:1px;color:#ca8a04}
/* Results */
.cr-results{background:#f8fafc;padding:20px}
.cr-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;gap:14px;color:#94a3b8;text-align:center}
.cr-placeholder p{font-size:13.5px;line-height:1.6;max-width:220px}
/* Upside-down warning */
.cr-upside-down{display:flex;align-items:flex-start;gap:10px;background:#fff7ed;border:1.5px solid #fb923c;border-radius:10px;padding:12px 14px;font-size:13px;color:#9a3412;margin-bottom:12px;line-height:1.5}
.cr-upside-down svg{flex-shrink:0;margin-top:1px;color:#ea580c}
/* Side-by-side */
.cr-compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;margin-bottom:14px}
.cr-col{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px}
.cr-col-cur{border-color:#e2e8f0}
.cr-col-new{border-color:#22c55e;background:#f0fdf4}
.cr-col-header{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:8px}
.cr-col-payment{font-size:24px;font-weight:800;color:#1e293b;margin-bottom:10px}
.cr-col-new .cr-col-payment{color:#15803d}
.cr-col-rows{display:flex;flex-direction:column;gap:5px}
.cr-col-row{display:flex;justify-content:space-between;font-size:12px;color:#64748b;padding:4px 0;border-bottom:1px solid #f1f5f9}
.cr-col-row:last-child{border-bottom:none}
.cr-col-row span:last-child{font-weight:600;color:#1e293b}
.cr-vs{font-size:14px;font-weight:700;color:#94a3b8;display:flex;align-items:center;justify-content:center;padding-top:30px}
/* Savings */
.cr-savings-hero{background:#0f172a;border-radius:12px;padding:16px;margin-bottom:12px}
.cr-sav-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center}
.cr-sav-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:5px}
.cr-sav-val{font-size:17px;font-weight:800;color:#fff}
.cr-sav-big{font-size:24px;color:#22c55e}
.cr-sav-main{border-left:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.1)}
.cr-sav-note{font-size:12px;color:#94a3b8;text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.cr-verdict{font-size:13px;font-weight:600;padding:10px 14px;border-radius:10px;text-align:center}
@media(max-width:480px){.cr-header,.cr-form,.cr-results{padding:14px}.cr-title{font-size:17px}.cr-compare-grid{grid-template-columns:1fr}.cr-vs{padding:4px 0}.cr-sav-grid{grid-template-columns:1fr 1fr 1fr}}