@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ── CSS custom properties (defaults — overridden by JS) ─── */
#ba-wrap {
  --ba-primary:    #1a6fa8;
  --ba-accent:     #f0a500;
  --ba-success:    #16a34a;
  --ba-card:       #ffffff;
  --ba-bg:         #f8fafc;
  --ba-text:       #1c2b3a;
  --ba-muted:      #64748b;
  --ba-border:     #e2e8f0;
  --ba-radius:     8px;
  --ba-font:       15px;
  --ba-shadow:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);

  /* Spacing — all overrideable from admin */
  --ba-sec-pad:    22px;   /* padding inside section boxes */
  --ba-card-pad:   22px;   /* padding inside result cards */
  --ba-sec-gap:    14px;   /* gap between top-level sections */
  --ba-field-gap:  14px;   /* gap between input fields */
  --ba-input-pv:   10px;   /* input vertical padding */
  --ba-input-ph:   13px;   /* input horizontal padding */
  --ba-label-size: 79%;    /* label font size relative to base */
  --ba-hint-size:  71%;    /* hint font size relative to base */
}

/* ── Scope reset ────────────────────────────────────────── */
#ba-wrap, #ba-wrap * { box-sizing:border-box; margin:0; padding:0; }

/* ── Wrapper — frameless, inherits page background ──────── */
#ba-wrap {
  font-family:'Open Sans',sans-serif;
  font-size:var(--ba-font);
  color:var(--ba-text);
  width:100%;
  position:relative;
}

/* ── Form layout ────────────────────────────────────────── */
.ba-form { display:flex; flex-direction:column; gap:var(--ba-sec-gap); }

.ba-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--ba-sec-gap); }
.ba-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--ba-sec-gap); }
@media(max-width:720px){ .ba-grid-2,.ba-grid-3{ grid-template-columns:1fr; } }
@media(min-width:721px) and (max-width:900px){ .ba-grid-3{ grid-template-columns:1fr 1fr; } }

/* ── Section boxes ──────────────────────────────────────── */
.ba-section {
  background:var(--ba-card);
  border:1px solid var(--ba-border);
  border-radius:var(--ba-radius);
  padding:var(--ba-sec-pad);
  box-shadow:var(--ba-shadow);
}
.ba-sec-label {
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--ba-primary);
  margin-bottom:calc(var(--ba-sec-pad) * 0.65);
}
.ba-section-tariff { display:flex; flex-direction:column; }

/* ── Fields ─────────────────────────────────────────────── */
.ba-fields-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--ba-field-gap); }
@media(max-width:440px){ .ba-fields-2{ grid-template-columns:1fr; } }

.ba-grid-3 .ba-field,
.ba-fields-2 .ba-field,
.ba-field { display:flex; flex-direction:column; gap:5px; }

.ba-field label {
  font-size:var(--ba-label-size);
  font-weight:600;
  color:var(--ba-muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.ba-field-badge {
  font-size:.62rem;
  font-weight:600;
  background:rgba(26,111,168,.1);
  color:var(--ba-primary);
  padding:2px 7px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.ba-iw {
  display:flex;
  border:1.5px solid var(--ba-border);
  border-radius:calc(var(--ba-radius) - 2px);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.ba-iw:focus-within {
  border-color:var(--ba-primary);
  box-shadow:0 0 0 3px rgba(26,111,168,.1);
}
.ba-input {
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:var(--ba-input-pv) var(--ba-input-ph);
  font-family:'Roboto Mono',monospace;
  font-size:.93rem;
  color:var(--ba-text);
  min-width:0;
}
.ba-input::placeholder { color:#c4cdd6; }
.ba-input::-webkit-inner-spin-button { opacity:.5; }
.ba-unit {
  padding:0 10px;
  font-size:.68rem;
  font-weight:600;
  color:var(--ba-muted);
  background:var(--ba-bg);
  border-left:1px solid var(--ba-border);
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.ba-hint { font-size:var(--ba-hint-size); color:#94a3b8; font-style:italic; }

/* ── Toggle ─────────────────────────────────────────────── */
.ba-toggle-wrap {
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  margin-bottom:12px;
}
.ba-toggle-ctrl { flex-shrink:0; padding-top:2px; }
.ba-toggle-chk { position:absolute; opacity:0; width:0; height:0; }
.ba-toggle-track {
  display:block;
  width:46px;
  height:25px;
  background:#dde3ea;
  border-radius:100px;
  position:relative;
  transition:background .2s;
}
.ba-toggle-thumb {
  display:block;
  width:17px;
  height:17px;
  background:#fff;
  border-radius:50%;
  position:absolute;
  top:4px; left:4px;
  transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
}
.ba-toggle-chk:checked ~ .ba-toggle-track { background:var(--ba-primary); }
.ba-toggle-chk:checked ~ .ba-toggle-track .ba-toggle-thumb { transform:translateX(21px); }
.ba-toggle-wrap strong { display:block; font-size:.88rem; font-weight:600; color:var(--ba-text); }
.ba-toggle-wrap span   { display:block; font-size:.74rem; color:var(--ba-muted); margin-top:2px; line-height:1.4; }

.ba-dyn-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:calc(var(--ba-radius) - 2px);
  padding:10px 12px;
  font-size:.78rem;
  color:#1d4ed8;
  line-height:1.5;
  margin-top:4px;
}
.ba-dyn-icon { flex-shrink:0; font-size:1rem; }

/* ── CTA button ─────────────────────────────────────────── */
.ba-cta-row { display:flex; padding-top:4px; }
.ba-cta-row.align-center { justify-content:center; }
.ba-cta-row.align-right  { justify-content:flex-end; }
.ba-cta-row.align-left   { justify-content:flex-start; }
.ba-btn {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--ba-primary);
  color:#fff;
  border:none;
  border-radius:100px;
  padding:12px 34px;
  font-family:'Open Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s, transform .12s, box-shadow .15s;
  box-shadow:0 3px 12px rgba(26,111,168,.28);
}
.ba-btn:hover { filter:brightness(.9); transform:translateY(-1px); box-shadow:0 5px 18px rgba(26,111,168,.38); }
.ba-btn:active { transform:translateY(0); }

/* ── Error ──────────────────────────────────────────────── */
.ba-error {
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#dc2626;
  border-radius:calc(var(--ba-radius) - 2px);
  padding:9px 13px;
  font-size:.82rem;
  margin-top:4px;
}

/* ── Loading ────────────────────────────────────────────── */
.ba-loading {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:40px;
  font-size:.88rem;
  color:var(--ba-muted);
}
.ba-spinner {
  width:38px; height:38px;
  border:3px solid var(--ba-border);
  border-top-color:var(--ba-primary);
  border-radius:50%;
  animation:ba-spin .7s linear infinite;
}
@keyframes ba-spin { to { transform:rotate(360deg); } }

/* ── Results ────────────────────────────────────────────── */
.ba-results { margin-top:calc(var(--ba-sec-gap) + 8px); animation:ba-up .3s ease; }
@keyframes ba-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.ba-results-header { margin-bottom:var(--ba-sec-gap); }
.ba-results-header h3 { font-size:1.05rem; font-weight:700; color:var(--ba-text); }

/* Summary strip */
.ba-summary {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--ba-field-gap);
  margin-bottom:var(--ba-sec-gap);
}
.ba-stat {
  background:var(--ba-card);
  border:1px solid var(--ba-border);
  border-radius:var(--ba-radius);
  padding:14px var(--ba-sec-pad);
  box-shadow:var(--ba-shadow);
  text-align:center;
}
.ba-stat-val {
  display:block;
  font-family:'Roboto Mono',monospace;
  font-size:1.35rem;
  font-weight:500;
  color:var(--ba-primary);
}
.ba-stat-lbl { font-size:.67rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ba-muted); margin-top:3px; }

/* HP seasonal note */
.ba-hp-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:var(--ba-radius);
  padding:10px 14px;
  font-size:.79rem;
  color:#166534;
  margin-bottom:var(--ba-sec-gap);
  line-height:1.5;
}
.ba-hp-note svg { flex-shrink:0; margin-top:1px; }

/* Cards */
.ba-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:var(--ba-sec-gap);
  margin-bottom:var(--ba-sec-gap);
}
.ba-card {
  background:var(--ba-card);
  border:1.5px solid var(--ba-border);
  border-radius:var(--ba-radius);
  padding:var(--ba-card-pad);
  padding-top:calc(var(--ba-card-pad) + 4px);
  box-shadow:var(--ba-shadow);
  position:relative;
  transition:transform .15s, box-shadow .15s;
}
.ba-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.09); }
.ba-card.is-rec { border-color:var(--ba-accent); box-shadow:0 0 0 3px rgba(240,165,0,.12), var(--ba-shadow); }

.ba-rec-badge {
  position:absolute;
  top:-11px; left:50%;
  transform:translateX(-50%);
  background:var(--ba-accent);
  color:#7a4200;
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:3px 13px;
  border-radius:20px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(240,165,0,.25);
}

/* Card header */
.ba-card-brand { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ba-muted); margin-bottom:2px; }
.ba-card-model { font-size:.9rem; font-weight:600; color:var(--ba-text); margin-bottom:4px; line-height:1.3; }
.ba-card-cap { font-family:'Roboto Mono',monospace; font-size:1.9rem; font-weight:500; color:var(--ba-primary); line-height:1; }
.ba-card-cap-unit { font-size:.85rem; color:var(--ba-muted); margin-left:2px; }
.ba-card-modules { font-size:.7rem; color:var(--ba-muted); margin-top:3px; margin-bottom:14px; }

.ba-sep { border:none; border-top:1px solid var(--ba-border); margin:12px 0; }

/* Inverter line */
.ba-inv-line {
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--ba-bg);
  border:1px solid var(--ba-border);
  border-radius:calc(var(--ba-radius) - 2px);
  padding:8px 11px;
  margin-bottom:12px;
}
.ba-inv-icon { font-size:.85rem; }
.ba-inv-info { flex:1; }
.ba-inv-brand { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ba-muted); }
.ba-inv-model { font-size:.78rem; color:var(--ba-text); font-weight:500; }
.ba-inv-kw { font-family:'Roboto Mono',monospace; font-size:.8rem; font-weight:500; color:var(--ba-primary); white-space:nowrap; }

/* Data rows */
.ba-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:.8rem;
  color:var(--ba-muted);
  margin-bottom:5px;
  gap:8px;
}
.ba-row span:last-child {
  font-family:'Roboto Mono',monospace;
  font-size:.82rem;
  color:var(--ba-text);
  font-weight:500;
  text-align:right;
  white-space:nowrap;
}
.ba-row.is-green span:last-child { color:var(--ba-success); font-weight:700; }
.ba-row.is-amber span:last-child { color:#b45309; font-weight:700; }
.ba-row.is-blue  span:last-child { color:var(--ba-primary); font-weight:700; }

/* Payback */
.ba-payback {
  margin-top:14px;
  border:1px solid var(--ba-border);
  border-radius:6px;
  padding:12px;
  text-align:center;
  background:var(--ba-bg);
}
.ba-pb-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ba-muted); }
.ba-pb-val { font-family:'Roboto Mono',monospace; font-size:1.55rem; font-weight:500; color:var(--ba-primary); display:block; margin-top:2px; }
.ba-pb-both {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--ba-border);
  border-radius:6px; overflow:hidden; margin-top:14px;
}
.ba-pb-cell { background:var(--ba-bg); padding:10px; text-align:center; }
.ba-pb-cell-lbl { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ba-muted); }
.ba-pb-cell-val { font-family:'Roboto Mono',monospace; font-size:1.3rem; font-weight:500; color:var(--ba-primary); display:block; margin-top:2px; }
.ba-pb-cell-val.is-green { color:var(--ba-success); }

/* Tax callout */
.ba-tax-callout {
  background:#fffbeb; border:1px solid #fde68a;
  border-radius:var(--ba-radius); padding:13px 16px;
  font-size:.82rem; color:#92400e; margin-bottom:var(--ba-sec-gap); line-height:1.6;
}
.ba-tax-callout strong { color:#78350f; }

/* Notes */
.ba-notes { display:flex; flex-direction:column; gap:7px; margin-bottom:var(--ba-sec-gap); }
.ba-note {
  font-size:.77rem; color:#374151; padding:9px 14px;
  background:#fffbeb; border-left:3px solid var(--ba-accent);
  border-radius:0 5px 5px 0; line-height:1.5;
}

/* Disclaimer */
.ba-disclaimer {
  font-size:.68rem; color:#94a3b8; line-height:1.55;
  border-top:1px solid var(--ba-border); padding-top:13px; margin-top:4px;
}

/* ── Backup badges ───────────────────────────── */
.ba-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.ba-card-top > div:first-child { flex:1; }
.ba-card-badges { flex-shrink:0; display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.ba-backup-badge {
  display:inline-block;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.ba-no-backup-badge {
  display:inline-block;
  background:#fef9c3;
  border:1px solid #fde047;
  color:#854d0e;
  font-size:.62rem;
  font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
/* card-kwhrow with cap + unit inline */
.ba-card-kwhrow { display:flex; align-items:baseline; gap:4px; margin:4px 0 2px; }