/* * Loan Payment Calculator * Copyright (c) 2026 True Freedom Tech. All rights reserved. * Licensed under the True Freedom Tech Proprietary License. * See LICENSE file for details. */:root{--lpc-primary:#2563eb;--lpc-primary-hover:#1d4ed8;--lpc-heading:#1e293b;--lpc-text:#64748b;--lpc-card:#ffffff;--lpc-grad-start:#3b82f6;--lpc-grad-end:#1d4ed8}.lpc-wrap{--_border:#e2e8f0;--_surface:#f8fafc;--_muted:#94a3b8}@supports (color:color-mix(in srgb,red,blue)){.lpc-wrap{--_border:color-mix(in srgb,var(--lpc-heading) 12%,var(--lpc-card));--_surface:color-mix(in srgb,var(--lpc-heading) 4%,var(--lpc-card));--_muted:color-mix(in srgb,var(--lpc-text) 60%,transparent)}}.lpc-wrap{background:transparent;padding:48px 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5}.lpc-wrap *,.lpc-wrap *::before,.lpc-wrap *::after{box-sizing:border-box}.lpc-inner{max-width:800px;margin:0 auto}.lpc-card{background:var(--lpc-card);border-radius:16px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 32px rgba(0,0,0,0.06);overflow:hidden}.lpc-heading{padding:32px 36px 0}.lpc-heading .lpc-eyebrow{display:inline-block;color:var(--lpc-primary);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px}.lpc-heading h2{font-size:24px;font-weight:700;color:var(--lpc-heading);margin:0 0 4px;line-height:1.3;letter-spacing:-0.01em}.lpc-heading p{color:var(--lpc-text);font-size:14px;margin:0;line-height:1.5}/* ══════════════════════════════════════════════════════════════════ RESULT — sits above sliders by default (stacked) ══════════════════════════════════════════════════════════════════ */ .lpc-result{margin:24px 36px;background:linear-gradient(135deg,var(--lpc-grad-start),var(--lpc-grad-end));border-radius:12px;padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}.lpc-result-main{flex:1;min-width:160px}.lpc-result-label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:4px}.lpc-result-amount{font-size:42px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.02em}.lpc-result-amount span{font-size:20px;vertical-align:super;margin-right:2px;font-weight:600}.lpc-result-details{display:flex;flex-wrap:wrap;gap:10px}.lpc-detail-item{background:rgba(255,255,255,0.15);border-radius:8px;padding:10px 14px;min-width:110px}.lpc-detail-item .d-label{font-size:10px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.65);margin-bottom:2px}.lpc-detail-item .d-val{font-size:15px;font-weight:700;color:#fff}/* ══════════════════════════════════════════════════════════════════ BODY — contains the fields grid ══════════════════════════════════════════════════════════════════ */ .lpc-body{padding:0 36px 28px}.lpc-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}.lpc-field--wide{grid-column:1 / -1}.lpc-field label{display:block;font-size:12px;font-weight:600;color:var(--lpc-text);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.04em}.lpc-input-row{display:flex;align-items:center;border:1.5px solid var(--_border);border-radius:8px;overflow:hidden;background:var(--lpc-card);margin-bottom:10px;transition:border-color 0.2s,box-shadow 0.2s}.lpc-input-row:focus-within{border-color:var(--lpc-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}@supports (color:color-mix(in srgb,red,blue)){.lpc-input-row:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--lpc-primary) 10%,transparent)}}.lpc-affix{font-size:13px;font-weight:600;color:var(--lpc-text);padding:0 12px;background:var(--_surface);border-right:1.5px solid var(--_border);align-self:stretch;display:flex;align-items:center;user-select:none;min-width:36px;justify-content:center}.lpc-affix.suffix{border-right:none;border-left:1.5px solid var(--_border)}.lpc-input-row input[type="number"]{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--lpc-heading);padding:10px 12px;-moz-appearance:textfield;min-width:0}.lpc-input-row input[type="number"]::-webkit-inner-spin-button,.lpc-input-row input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}input[type="range"].lpc-slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient( to right,var(--lpc-primary) 0%,var(--lpc-primary) var(--val,50%),var(--_border) var(--val,50%),var(--_border) 100% );outline:none;cursor:pointer}input[type="range"].lpc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--lpc-primary);border:2.5px solid var(--lpc-card);box-shadow:0 1px 4px rgba(0,0,0,0.2);cursor:pointer;transition:transform 0.15s}input[type="range"].lpc-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type="range"].lpc-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--lpc-primary);border:2.5px solid var(--lpc-card);box-shadow:0 1px 4px rgba(0,0,0,0.2);cursor:pointer}.lpc-range-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;font-weight:500;color:var(--_muted)}.lpc-card-footer{padding:20px 36px;background:transparent;border-top:1px solid var(--_border);display:flex;align-items:center;gap:20px}.lpc-cta-btn{display:inline-block;background:var(--lpc-primary);color:#fff !important;text-decoration:none !important;font:inherit;font-size:13px;font-weight:600;padding:12px 28px;border-radius:8px;transition:background 0.2s,transform 0.15s,box-shadow 0.2s;white-space:nowrap;flex-shrink:0}.lpc-cta-btn:hover{background:var(--lpc-primary-hover);box-shadow:0 4px 12px rgba(0,0,0,0.12);transform:translateY(-1px)}.lpc-disclaimer{font-size:11px;color:var(--_muted);margin:0;line-height:1.5;flex:1}/* ══════════════════════════════════════════════════════════════════ LAYOUT:HORIZONTAL — 3 sliders in a row,full-width result below ══════════════════════════════════════════════════════════════════ */ .lpc-wrap[data-layout="horizontal"] .lpc-inner{max-width:1060px}.lpc-wrap[data-layout="horizontal"] .lpc-heading{text-align:center;padding:32px 36px 8px}.lpc-wrap[data-layout="horizontal"] .lpc-result{margin:16px 28px;padding:20px 24px}.lpc-wrap[data-layout="horizontal"] .lpc-body{padding:0 28px 28px}.lpc-wrap[data-layout="horizontal"] .lpc-fields-grid{grid-template-columns:1fr 1fr 1fr;gap:20px}.lpc-wrap[data-layout="horizontal"] .lpc-field--wide{grid-column:auto}/* ══════════════════════════════════════════════════════════════════ LAYOUT:MINIMAL — tight,no-frills,embeddable ══════════════════════════════════════════════════════════════════ */ .lpc-wrap[data-layout="minimal"]{padding:24px 16px}.lpc-wrap[data-layout="minimal"] .lpc-inner{max-width:520px}.lpc-wrap[data-layout="minimal"] .lpc-card{border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}.lpc-wrap[data-layout="minimal"] .lpc-heading{padding:20px 24px 0}.lpc-wrap[data-layout="minimal"] .lpc-heading .lpc-eyebrow{display:none}.lpc-wrap[data-layout="minimal"] .lpc-heading h2{font-size:18px;font-weight:600}.lpc-wrap[data-layout="minimal"] .lpc-heading p{font-size:12px}.lpc-wrap[data-layout="minimal"] .lpc-result{margin:16px 20px;padding:16px 20px;border-radius:8px;background:var(--lpc-primary);flex-wrap:wrap;gap:12px}.lpc-wrap[data-layout="minimal"] .lpc-result-amount{font-size:32px}.lpc-wrap[data-layout="minimal"] .lpc-result-amount span{font-size:16px}.lpc-wrap[data-layout="minimal"] .lpc-result-details{flex-direction:row;gap:8px}.lpc-wrap[data-layout="minimal"] .lpc-detail-item{padding:6px 10px;min-width:auto}.lpc-wrap[data-layout="minimal"] .lpc-body{padding:0 24px 20px}.lpc-wrap[data-layout="minimal"] .lpc-fields-grid{grid-template-columns:1fr;gap:16px}.lpc-wrap[data-layout="minimal"] .lpc-field--wide{grid-column:auto}.lpc-wrap[data-layout="minimal"] .lpc-field label{font-size:11px;margin-bottom:6px}.lpc-wrap[data-layout="minimal"] .lpc-input-row input[type="number"]{font-size:14px;padding:8px 10px}.lpc-wrap[data-layout="minimal"] .lpc-card-footer{padding:14px 24px;flex-direction:column;gap:10px}.lpc-wrap[data-layout="minimal"] .lpc-cta-btn{width:100%;text-align:center;font-size:13px;padding:10px 20px;border-radius:6px}/* ══════════════════════════════════════════════════════════════════ LAYOUT:BANNER — big hero result with heading,sliders below ══════════════════════════════════════════════════════════════════ */ .lpc-wrap[data-layout="banner"] .lpc-inner{max-width:900px}.lpc-wrap[data-layout="banner"] .lpc-card{border-radius:16px;overflow:hidden}.lpc-wrap[data-layout="banner"] .lpc-heading{display:none}.lpc-wrap[data-layout="banner"] .lpc-result{margin:0;border-radius:0;padding:40px 36px 32px;flex-direction:column;align-items:center;text-align:center;gap:16px;background:linear-gradient(135deg,var(--lpc-grad-start),var(--lpc-grad-end))}.lpc-wrap[data-layout="banner"] .lpc-result-label{font-size:12px;letter-spacing:0.1em}.lpc-wrap[data-layout="banner"] .lpc-result-amount{font-size:56px}.lpc-wrap[data-layout="banner"] .lpc-result-amount span{font-size:28px}.lpc-wrap[data-layout="banner"] .lpc-result-details{justify-content:center;gap:12px}.lpc-wrap[data-layout="banner"] .lpc-body{padding:28px 36px}.lpc-wrap[data-layout="banner"] .lpc-fields-grid{grid-template-columns:1fr 1fr 1fr;gap:20px}.lpc-wrap[data-layout="banner"] .lpc-field--wide{grid-column:auto}/* ══════════════════════════════════════════════════════════════════ LAYOUT:BOXED — each slider in its own mini-card ══════════════════════════════════════════════════════════════════ */ .lpc-wrap[data-layout="boxed"] .lpc-inner{max-width:820px}.lpc-wrap[data-layout="boxed"] .lpc-card{background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible}.lpc-wrap[data-layout="boxed"] .lpc-heading{padding:0 0 8px;text-align:center}.lpc-wrap[data-layout="boxed"] .lpc-result{margin:0 0 20px;padding:24px 28px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 1px 3px rgba(0,0,0,0.04);background:var(--lpc-card);flex-wrap:wrap}.lpc-wrap[data-layout="boxed"] .lpc-result-label{color:var(--lpc-text)}.lpc-wrap[data-layout="boxed"] .lpc-result-amount{color:var(--lpc-primary)}.lpc-wrap[data-layout="boxed"] .lpc-result-amount span{color:var(--lpc-primary)}.lpc-wrap[data-layout="boxed"] .lpc-result-details{gap:10px}.lpc-wrap[data-layout="boxed"] .lpc-detail-item{background:var(--_surface);border:1px solid rgba(0,0,0,0.06)}.lpc-wrap[data-layout="boxed"] .lpc-detail-item .d-label{color:var(--lpc-text)}.lpc-wrap[data-layout="boxed"] .lpc-detail-item .d-val{color:var(--lpc-heading)}.lpc-wrap[data-layout="boxed"] .lpc-body{padding:0}.lpc-wrap[data-layout="boxed"] .lpc-fields-grid{grid-template-columns:1fr 1fr;gap:16px}.lpc-wrap[data-layout="boxed"] .lpc-field{background:var(--lpc-card);border:1px solid rgba(0,0,0,0.06);border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}.lpc-wrap[data-layout="boxed"] .lpc-field--wide{grid-column:1 / -1}.lpc-wrap[data-layout="boxed"] .lpc-card-footer{background:transparent;border-top:none;padding:20px 0 0;justify-content:center}/* ══════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════ */ @media (max-width:820px){.lpc-wrap[data-layout="horizontal"] .lpc-fields-grid,.lpc-wrap[data-layout="banner"] .lpc-fields-grid{grid-template-columns:1fr 1fr}.lpc-wrap[data-layout="horizontal"] .lpc-field--wide,.lpc-wrap[data-layout="banner"] .lpc-field--wide{grid-column:1 / -1}}@media (max-width:600px){.lpc-wrap{padding:24px 12px}.lpc-fields-grid{grid-template-columns:1fr !important}.lpc-field--wide{grid-column:auto !important}.lpc-heading{padding:20px 20px 0}.lpc-heading h2{font-size:20px}.lpc-heading p{font-size:13px}.lpc-result{margin:16px 16px;padding:20px;flex-direction:column;align-items:flex-start;gap:14px}.lpc-result-main{min-width:0;width:100%}.lpc-result-amount{font-size:34px}.lpc-result-amount span{font-size:16px}.lpc-result-details{width:100%;flex-direction:column;gap:8px}.lpc-detail-item{min-width:0;width:100%}.lpc-body{padding:0 20px 20px}.lpc-card-footer{padding:16px 20px;flex-direction:column;gap:12px}.lpc-cta-btn{width:100%;text-align:center}.lpc-wrap[data-layout="banner"] .lpc-result{padding:28px 20px 24px}.lpc-wrap[data-layout="banner"] .lpc-result-amount{font-size:38px}.lpc-wrap[data-layout="banner"] .lpc-result-amount span{font-size:18px}.lpc-wrap[data-layout="boxed"] .lpc-field{padding:16px}.lpc-wrap[data-layout="boxed"] .lpc-result{padding:20px}}@media (max-width:380px){.lpc-wrap{padding:16px 8px}.lpc-heading{padding:16px 16px 0}.lpc-result{margin:12px 12px;padding:16px}.lpc-result-amount{font-size:28px}.lpc-result-amount span{font-size:14px}.lpc-body{padding:0 16px 16px}.lpc-card-footer{padding:14px 16px}}