/* ================================
   Mortgage InAction – Full Theme
   (Affordability Calculator)
   ================================ */

/* Brand palette variables (used everywhere incl. donut) */
#calculator-root{
  --c-navy:   #0D2B6B;  /* headings, labels */
  --c-blue:   #003F7D;  /* deep brand blue  */
  --c-teal:   #009CA6;  /* primary teal     */
  --c-bg:     #F8FAFC;  /* section background */
  --c-text:   #0D2B6B;

  /* Donut / legend colors */
  --c-mort:   #003F7D;  /* Mortgage Payment (deep blue) */
  --c-tax:    #009CA6;  /* Property Taxes (teal) */
  --c-heat:   #6BB8C4;  /* Heating (teal tint) */
  --c-debt:   #0B1F4A;  /* Debts (darker navy) */
  --c-condo:  #E3F2F6;  /* Condo Fees (pale teal) */
  --c-left:   #36C2B9;  /* Leftover (light aqua) */
}

/* Card shell */
#calculator-root .mia-card{
  max-width:1200px;margin:0 auto;padding:20px;background:#fff;
  border:1px solid #e5e7eb;border-radius:16px;
  box-shadow:0 4px 12px rgba(0,63,125,.08);
  font-family:"Poppins",system-ui,Arial,sans-serif;
}

/* Brand header (logo + name + tagline) */
#calculator-root .mia-brand{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;margin:-4px -4px 10px;border-radius:12px;
  background:linear-gradient(90deg,var(--c-teal),var(--c-blue));color:#fff;
}
#calculator-root .mia-brand-left{display:flex;align-items:center;gap:12px;}
#calculator-root .mia-logo{height:36px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}
#calculator-root .mia-logo-fallback{font-weight:700;font-size:18px;}
#calculator-root .mia-brand-texts{display:flex;flex-direction:column;line-height:1.1;}
#calculator-root .mia-brand-name{font-weight:700;font-size:18px;}
#calculator-root .mia-brand-tag{opacity:.9;font-size:12px;}

#calculator-root .mia-title{
  margin:12px 0 16px 0;
  font:700 28px/1.2 "Poppins",system-ui,Arial;
  color:var(--c-navy);
}

/* Layout */
/* ===== Two-column balanced layout (scoped) ===== */
#calculator-root .mia-two-col{
  display:grid;
  /* Flexible tracks: left can’t go below 380px; right prefers 420px but can shrink to 320px */
  grid-template-columns: minmax(380px, 1fr) minmax(320px, 420px);
  gap:24px;
  align-items:stretch;
  background:#f9fafb;
  border-radius:16px;
  padding:20px;
}

/* Let both columns stretch nicely */
#calculator-root .mia-left,
#calculator-root .mia-right{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Center and contain the results card in the right rail */
#calculator-root .mia-right{ align-items:center; }
#calculator-root .mia-result{
  width:100%;
  max-width:360px;
  margin:auto;
  border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

/* Stack only when content area is really narrow */
@media (max-width:780px){
  #calculator-root .mia-two-col{
    grid-template-columns:1fr;
    background:transparent;
    padding:0;
  }
}


/* Form grid */
#calculator-root .mia-grid{
  display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:10px 12px;align-items:baseline;
}
@media (max-width:1024px){#calculator-root .mia-grid{grid-template-columns:repeat(2,minmax(200px,1fr));}}
@media (max-width:720px){ #calculator-root .mia-grid{grid-template-columns:repeat(2,minmax(140px,1fr));}}
@media (max-width:480px){ #calculator-root .mia-grid{grid-template-columns:1fr;}}

#calculator-root .mia-grid label{
  display:grid;gap:3px;font-size:13px;color:var(--c-navy);font-weight:500;
}
#calculator-root .mia-grid input[type="number"]{
  font-size:15px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:8px;width:100%;
  box-sizing:border-box;background:#fff;transition:border-color .2s, box-shadow .2s; -moz-appearance:textfield;
}
#calculator-root .mia-grid input[type="number"]:focus{
  border-color:var(--c-teal);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--c-teal) 30%, transparent);
  outline:none;
}
#calculator-root .mia-grid input::-webkit-outer-spin-button,
#calculator-root .mia-grid input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0;}

/* Button */
#calculator-root .mia-actions{margin-top:12px;}
#calculator-root .mia-btn{
  padding:12px 20px;border:0;border-radius:10px;
  background:linear-gradient(90deg,var(--c-teal),var(--c-blue));
  color:#fff;cursor:pointer;font-weight:600;letter-spacing:.3px;
  transition:transform .1s, box-shadow .2s;
}
#calculator-root .mia-btn:hover{box-shadow:0 3px 10px rgba(0,63,125,.2);}
#calculator-root .mia-btn:active{transform:scale(.98);}

/* Results */
#calculator-root .mia-result{justify-content:space-between;}
#calculator-root .mia-result h3{
  font:700 20px/1.2 "Poppins",system-ui,Arial;color:var(--c-navy);
}
#calculator-root .mia-banner{
  border-radius:12px;background:linear-gradient(90deg,var(--c-teal),var(--c-blue));color:#fff;
  display:flex;align-items:center;justify-content:center;min-height:64px;
  font:700 30px/1 "Poppins",system-ui,Arial;letter-spacing:.5px;
}
#calculator-root .mia-note{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:12px;
  font-size:14px;color:var(--c-blue);
}
#calculator-root .mia-monthly{
  font:700 16px/1.3 "Poppins",system-ui,Arial;color:var(--c-navy);
}

/* Slider */
#calculator-root .mia-slider-wrap{padding:0;}
#calculator-root .mia-slider-labels{display:flex;justify-content:space-between;font-size:13px;color:#64748b;margin:6px 0 0;}
#calculator-root .mia-slider{
  appearance:none;width:100%;height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--c-teal),var(--c-blue));outline:none;
}
#calculator-root .mia-slider::-webkit-slider-thumb{
  appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid #cbd5e1;box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* KPIs */
#calculator-root .mia-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#calculator-root .mia-kpi{
  background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:10px;min-height:62px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
#calculator-root .mia-kpi .label{font-size:12px;color:#64748b;}
#calculator-root .mia-kpi .value{font:700 16px/1.2 "Poppins",system-ui,Arial;color:var(--c-blue);}

/* Legend (uses same palette as donut) */
#calculator-root .mia-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;}
#calculator-root .mia-legend span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#475569;}
#calculator-root .mia-dot{width:12px;height:12px;border-radius:3px;display:inline-block;}
#calculator-root .dot-mort { background: var(--c-mort); }
#calculator-root .dot-tax  { background: var(--c-tax); }
#calculator-root .dot-heat { background: var(--c-heat); }
#calculator-root .dot-debt { background: var(--c-debt); }
#calculator-root .dot-condo{ background: var(--c-condo); border:1px solid #cbd5e1; }
#calculator-root .dot-left { background: var(--c-left); }

/* Donut */
#calculator-root .mia-donut-wrap{display:flex;justify-content:center;}
#calculator-root .mia-donut{
  /* JS overwrites --seg with dynamic stops, but base uses brand vars */
  --seg:conic-gradient(
    var(--c-mort) 0 0,
    var(--c-tax)  0 0,
    var(--c-heat) 0 0,
    var(--c-debt) 0 0,
    var(--c-condo) 0 0,
    var(--c-left) 0 0
  );
  width:200px;height:200px;border-radius:50%;background:var(--seg);position:relative;
}
#calculator-root .mia-donut::after{content:"";position:absolute;inset:27%;background:#fff;border-radius:50%;}
#calculator-root .mia-center-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 16px/1.2 "Poppins",system-ui,Arial;color:var(--c-navy);
}

/* Responsive */
@media (max-width:480px){
  #calculator-root .mia-brand{flex-wrap:wrap;gap:8px;}
  #calculator-root .mia-banner{font-size:26px;min-height:60px;}
  #calculator-root .mia-donut{width:180px;height:180px;}
  #calculator-root .mia-center-label{font-size:14px;}
}

/* Optional sticky results on desktop */
@media (min-width:1025px){
  #calculator-root .mia-result{position:sticky;top:16px;}
}