/* ===================  WP Simple Calculators — Styles  =================== */

/* Horizon palette */
:root{
  --wpsc-dark: #1F3550;   /* Dark Blue */
  --wpsc-light: #879EAD;  /* Light Blue */
  --wpsc-grey: #C6C6C6;   /* Light Grey */
  --wpsc-white: #ffffff;  /* White */
  --wpsc-text: #111827;
  --wpsc-muted: #475569;
  --wpsc-green: #16a34a;
  --wpsc-border: #e6e6e6;
  --wpsc-soft: #f7f8f9;
  --wpsc-shadow: 0 10px 20px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.06);

  --pi:#4B88FF;
  --tax:#63C07D;
  --ins:#7B6DDF;
  --pmi:#F4B63F;
  --hoa:#7B6DDF; /* HOA purple */

  --loan-principal:#1F5BD8;
  --loan-interest:#63C07D;
}

.wpsc-shell{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--wpsc-text);
  background: var(--wpsc-white);
  border: 1px solid var(--wpsc-border);
  border-radius: 14px;
  box-shadow: var(--wpsc-shadow);
  overflow: hidden;
  margin: 18px 0;
}

/* ---------- Layout ---------- */
.wpsc-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
}
@media (max-width: 980px){
  .wpsc-layout{ grid-template-columns: 1fr; }
}

/* ---------- Aside (left inputs) ---------- */
.wpsc-aside{
  background: var(--wpsc-white);
  padding: 18px;
  border-right: 1px solid var(--wpsc-border);
}
@media (max-width: 980px){
  .wpsc-aside{ border-right: 0; border-bottom:1px solid var(--wpsc-border); }
}
.wpsc-aside-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--wpsc-dark);
  margin-bottom: 10px;
}

/* Form fields */
.wpsc-form{
  display: grid;
  gap: 12px;
}
.wpsc-form label{
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wpsc-muted);
}
.wpsc-form input:not([type="radio"]):not([type="checkbox"]),
.wpsc-form select{
  appearance: none;
  background: var(--wpsc-white);
  border: 1px solid var(--wpsc-grey);
  border-radius: 8px;
  padding: 12px;
  font-size: 18px;
  color: var(--wpsc-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.wpsc-form input:focus,
.wpsc-form select:focus{
  border-color: var(--wpsc-dark);
  box-shadow: 0 0 0 3px rgba(31,53,80,.15);
}
.wpsc-row{ display:flex; gap:10px; align-items:center; }
.wpsc-half{ flex:1 1 0; }
.wpsc-radio{ display:flex; gap:14px; align-items:center; font-weight:700; color:var(--wpsc-muted); }
.wpsc-suffix-fixed{ display:flex; align-items:center; font-weight:800; color:var(--wpsc-muted); }

/* ---------- Main (Mortgage) ---------- */
.wpsc-main{
  background: var(--wpsc-white);
  padding: 18px 22px 22px;
}

/* Tabs (Mortgage) */
.wpsc-tabs{
  display:flex; gap:6px; border-bottom:2px solid var(--wpsc-grey); margin-bottom:10px;
}
.wpsc-tab{
  background:transparent; border:0; padding:10px 14px; font-weight:800; color:var(--wpsc-muted);
  cursor:pointer; border-top-left-radius:8px; border-top-right-radius:8px;
}
.wpsc-tab.active{ color:#fff; background:var(--wpsc-dark); }
.wpsc-tabpanes{
  background:#fff; border:1px solid var(--wpsc-border); border-top:0; border-radius:0 12px 12px 12px; padding:16px;
}
.wpsc-pane{ display:none; }
.wpsc-pane.active{ display:block; }

/* Titles */
.wpsc-title{ font-size: 32px; font-weight: 900; margin: 0 0 4px; color: var(--wpsc-dark); }
.wpsc-subtitle{ color: var(--wpsc-muted); margin-bottom: 12px; }

/* Breakdown layout (Mortgage) */
.wpsc-breakdown{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 980px){ .wpsc-breakdown{ grid-template-columns: 1fr; } }

.wpsc-donut{
  position: relative;
  background: var(--wpsc-white);
  border: 1px solid var(--wpsc-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--wpsc-shadow);
  height: 420px;
}
.wpsc-donut canvas{ width:100% !important; height:100% !important; display:block; }
.wpsc-donut-center{ position:absolute; inset:0; display:grid; place-content:center; pointer-events:none; }
.wpsc-donut-amount{ font-size: 28px; font-weight: 900; }
.wpsc-donut-unit{ margin-top: 2px; text-align: center; color: var(--wpsc-muted); font-weight: 700; }

/* Right breakdown list (Mortgage) */
.wpsc-breakdown-list{
  background: var(--wpsc-white);
  border: 1px solid var(--wpsc-border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--wpsc-shadow);
}
.wpsc-line, .wpsc-editline{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 6px;
}
.wpsc-left{ display:flex; align-items:center; gap:10px; }
.wpsc-label{ font-weight: 700; }
.wpsc-dot{ width:12px; height:12px; border-radius:50%; }
.wpsc-dot.pi{ background: var(--pi); }
.wpsc-dot.tax{ background: var(--tax); }
.wpsc-dot.ins{ background: var(--ins); }
.wpsc-dot.pmi{ background: var(--pmi); }
.wpsc-dot.hoa{ background: var(--hoa); }

.wpsc-line-value{ font-weight:800;font-size:28px; }

.wpsc-right{ display:flex; align-items:center; gap:10px; }
.wpsc-plus{ color:#64748b; font-weight:900; }
.wpsc-edit{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--wpsc-border);
  border-radius:8px; padding:6px 10px; background:#fff;
}
.wpsc-edit input{ width:120px; border:0; outline:none; padding:0; font-weight:bold; }
.wpsc-curr{ color:#64748b; font-weight:800; }

.wpsc-sep{ height:1px; background:#eaeaea; margin:0 6px; }

/* Amortization (both) */
.wpsc-amort-wrap{
  max-height: 460px; overflow:auto; border:1px solid var(--wpsc-border); border-radius:10px; background:#fff;
}
.wpsc-table{ width:100%; border-collapse:collapse; font-size:14px; }
.wpsc-table thead th{
  position:sticky; top:0; z-index:1; background: var(--wpsc-light); color:#0b1a2a;
  font-weight:800; padding:10px 8px; border-bottom:1px solid var(--wpsc-border);
}
.wpsc-table tbody td{
  padding:9px 8px; border-bottom:1px solid var(--wpsc-border); white-space:nowrap;
}
.wpsc-table tbody tr:nth-child(odd){ background:#f9fafb; }

/* ---------- Loan summary clean card ---------- */
.wpsc-loan-summary{
  border:1px solid var(--wpsc-border);
  border-radius:12px;
  box-shadow:var(--wpsc-shadow);
  padding:18px;
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:18px;
}
@media (max-width: 980px){
  .wpsc-loan-summary{ grid-template-columns:1fr; }
}
.wpsc-loan-title{ color:var(--wpsc-muted); font-weight:800; margin-bottom:6px; }
.wpsc-loan-amount{ font-size:36px; font-weight:900; margin-bottom:10px; }

.wpsc-kpis{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 720px){
  .wpsc-kpis{ grid-template-columns:1fr; }
}
.wpsc-kpi{
  background:#fff; border:1px solid var(--wpsc-border); border-radius:10px; padding:12px;
}
.wpsc-kpi-label{ color:var(--wpsc-muted); font-weight:700; margin-bottom:6px; }
.wpsc-kpi-value{ font-weight:900; font-size:18px; }

.wpsc-loan-pie{
  border:1px solid var(--wpsc-border); border-radius:12px; padding:12px; height:320px; position:relative; box-shadow:var(--wpsc-shadow);
}
.wpsc-loan-pie canvas{ width:100% !important; height:100% !important; display:block; }
.wpsc-loan-legend{ position:absolute; left:12px; bottom:12px; display:grid; gap:6px; font-weight:700; color:#334155; }
.wpsc-legend-dot{ width:12px; height:12px; display:inline-block; border-radius:50%; margin-right:6px; vertical-align:middle; }
.wpsc-legend-dot.principal{ background:var(--loan-principal); }
.wpsc-legend-dot.interest{ background:var(--loan-interest); }

/* Toggle link */
.wpsc-link-toggle{
  background:transparent; border:0; padding:10px 0; color:#1F5BD8; font-weight:800; cursor:pointer;
}
.wpsc-collapsible[hidden]{ display:none !important; }

/* Dark mode (optional) */
@media (prefers-color-scheme: dark){
  :root{
    --wpsc-text:#e5e7eb;
    --wpsc-muted:#cbd5e1;
    --wpsc-border:#24364f;
    --wpsc-soft:#0e1627;
    --wpsc-white:#0b1220;
    --wpsc-shadow:none;
  }
  .wpsc-table tbody tr:nth-child(odd){ background:#0f172a; }
}



/* ===== Fix radios getting styled like text inputs ===== */
.wpsc-form input:not([type="radio"]):not([type="checkbox"]),
.wpsc-form select{
  appearance: none;
  background: var(--wpsc-white);
  border: 1px solid var(--wpsc-grey);
  border-radius: 8px;
  padding: 12px;
  font: 600 15px/1.2 inherit;
  color: var(--wpsc-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

/* Clean inline layout for "Months / Years" */
.wpsc-radio{
  display: flex;
  align-items: center;
  gap: 16px;
}
.wpsc-radio label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--wpsc-muted);
}
.wpsc-radio input[type="radio"]{
  margin: 0;
  accent-color: var(--wpsc-dark);
  transform: translateY(1px);
}


.wpsc-radio-row{
  display:flex;
  gap:18px;
  margin-top:6px;
}
.wpsc-radio-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--wpsc-muted);
}
.wpsc-radio-item input[type="radio"]{
  accent-color: var(--wpsc-dark);
}



/* ===== Keep loan pie legend off the chart ===== */
.wpsc-loan-pie{
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* ensure enough vertical space for chart + legend */
  min-height: 330px;
}
.wpsc-loan-pie canvas{
  width: 100% !important;
  height: 280px !important;
  display: block;
}
.wpsc-loan-legend{
  position: static !important;   /* override any old absolute rules */
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-weight: 700;
  color: #334155;
  margin-top: 2px;
}



/* Radios under Loan term: normalize vertical alignment */
.wpsc-radio-row{
  display:flex;
  align-items:center;   /* <- keep both on the same baseline */
  gap:18px;
  margin-top:6px;
}
.wpsc-radio-item{
  display:inline-flex;
  align-items:center;   /* <- center label with the dot */
  gap:8px;
  line-height:1;        /* <- stop label from shifting */
}
.wpsc-radio-item input[type="radio"]{
  margin:0;             /* <- remove theme margins */
  vertical-align:middle;
}
.wpsc-radio-item span{ vertical-align:middle; }