/* ==========================================================================
   BatterijBaas Scan — interactieve thuisbatterij-scan (homepage)
   Zelfstandige, ge-namespacete module (.bbs-*) zodat niets botst met de
   generieke site-classes (.card/.grid/.field/.nav/.step ...).
   Aangeleverd door de klant, omgezet naar de BatterijBaas-huisstijl
   (tokens + fonts uit style.css).
   ========================================================================== */

.bbs-scan {
  border: 1px solid rgba(232, 240, 234, 0.14);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  background: radial-gradient(120% 90% at 85% -15%, #1c3326 0%, var(--bg) 58%);
  box-shadow: var(--shadow);
  color: var(--tekst-inv);
}

/* ---------- Kop ---------- */
.bbs-head { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-bottom: 26px; }
.bbs-title { font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.12; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; color: var(--wit); }
.bbs-title span { color: var(--energie); }
.bbs-intro { margin: 0; color: var(--tekst-inv); opacity: 0.85; font-size: 1.02rem; line-height: 1.55; max-width: 600px; }
.bbs-privacy { display: flex; gap: 12px; align-items: flex-start; color: var(--tekst-inv); opacity: 0.92; font-size: 0.88rem; line-height: 1.45; min-width: 230px; }
.bbs-privacy svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--energie); margin-top: 1px; }
.bbs-privacy strong { color: var(--wit); font-weight: 600; }

/* ---------- Invoer ---------- */
.bbs-formbox {
  display: grid; grid-template-columns: 1fr 1fr 1fr 220px; gap: 18px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius); padding: 20px;
}
/* Kolom-flex + margin-top:auto op de invoer → alle velden eindigen op één lijn,
   ook als een label of hint over meer regels loopt. */
.bbs-field { display: flex; flex-direction: column; }
.bbs-field label { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 9px; color: var(--wit); }
.bbs-step {
  width: 28px; height: 28px; border-radius: 999px; background: var(--energie); color: var(--donker);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; flex: 0 0 auto;
}
.bbs-hint { color: var(--tekst-inv); opacity: 0.72; font-size: 0.88rem; line-height: 1.45; min-height: 40px; margin: 0 0 10px 38px; }
.bbs-inputwrap { margin-top: auto; display: flex; background: var(--wit); border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; }
.bbs-inputwrap:focus-within { border-color: var(--energie); }
.bbs-inputwrap input {
  width: 100%; padding: 15px 14px; border: 0; outline: 0;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--tekst); background: var(--wit);
}
/* Verberg de spinner-pijltjes voor een rustiger beeld */
.bbs-inputwrap input::-webkit-outer-spin-button,
.bbs-inputwrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bbs-inputwrap input[type=number] { -moz-appearance: textfield; }
.bbs-unit { padding: 0 14px; color: var(--tekst-2); background: var(--wit); font-size: 0.85rem; display: flex; align-items: center; }
/* Knop lijnt uit met de invoervelden (zelfde hoogte, onderaan de kolom) */
.bbs-calc {
  /* zelfde doosmodel als .bbs-inputwrap (2px rand + 15px padding) → exact gelijke hoogte */
  align-self: end; padding: 15px 22px; line-height: 1.45;
  border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--energie); color: var(--donker);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  box-shadow: 0 6px 18px rgba(155, 229, 100, 0.20);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bbs-calc:hover { transform: translateY(-2px); background: var(--energie-2); box-shadow: 0 10px 26px rgba(155, 229, 100, 0.32); }
.bbs-calc svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform 0.2s ease; }
.bbs-calc:hover svg { transform: translateX(3px); }

.bbs-err {
  display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, 0.20); border: 1px solid rgba(192, 57, 43, 0.5); color: #ffe0e0; font-size: 0.92rem;
}

/* ---------- Resultaten ---------- */
.bbs-results { display: none; margin-top: 28px; }
.bbs-results.bbs-show { display: block; animation: bbs-fade 0.35s ease; }
@keyframes bbs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bbs-result-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 18px; color: var(--wit); }
.bbs-result-title span { color: var(--energie); }
.bbs-reset { background: transparent; border: 0; color: var(--energie); text-decoration: underline; cursor: pointer; margin-left: 8px; font-family: var(--font-body); font-size: 0.9rem; }

.bbs-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; }
.bbs-compare {
  display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; gap: 14px;
  padding-right: 28px; border-right: 1px solid rgba(232, 240, 234, 0.13);
}
.bbs-gaugebox { text-align: center; }
.bbs-glabel { font-weight: 600; margin-bottom: 12px; font-size: 0.95rem; color: var(--tekst-inv); }
.bbs-gauge {
  --p: 0; width: 160px; height: 160px; border-radius: 50%; margin: auto;
  background: conic-gradient(var(--energie) calc(var(--p) * 1%), #26382c 0);
  position: relative; display: grid; place-items: center; transition: background 0.45s ease;
}
.bbs-gauge::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #12211a; }
.bbs-gaugein { position: relative; z-index: 1; }
.bbs-gauge strong { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--wit); }
.bbs-gauge small { color: var(--tekst-inv); opacity: 0.8; }
.bbs-arrow { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--energie); display: grid; place-items: center; color: var(--energie); font-size: 1.4rem; }

.bbs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bbs-card { border: 1px solid rgba(232, 240, 234, 0.12); border-radius: var(--radius-sm); padding: 18px; background: rgba(255, 255, 255, 0.03); }
.bbs-ico { width: 46px; height: 46px; border-radius: 11px; background: var(--energie-2); display: grid; place-items: center; color: var(--groen-2); margin-bottom: 16px; }
.bbs-ico svg { width: 24px; height: 24px; }
.bbs-card h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin: 0 0 10px; color: var(--tekst-inv); }
.bbs-card strong { font-family: var(--font-display); font-size: 1.4rem; display: block; margin-bottom: 8px; color: var(--energie); }
.bbs-card p { color: var(--tekst-inv); opacity: 0.72; font-size: 0.85rem; line-height: 1.5; margin: 0; }

/* ---------- Schuif ---------- */
.bbs-sliderbox { margin-top: 22px; padding: 20px; border: 1px solid rgba(232, 240, 234, 0.12); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); }
.bbs-sliderhead { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 12px; }
.bbs-sliderhead strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--wit); }
.bbs-sliderhead span { color: var(--energie); font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.bbs-sliderbox input[type=range] { width: 100%; accent-color: var(--energie); cursor: pointer; }
.bbs-ticks { display: flex; justify-content: space-between; color: var(--tekst-inv); opacity: 0.6; font-size: 0.72rem; margin-top: 7px; }

/* ---------- Advies ---------- */
.bbs-advice {
  margin-top: 24px; border: 1px solid rgba(232, 240, 234, 0.12); border-radius: var(--radius); padding: 24px;
  display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: center; background: rgba(255, 255, 255, 0.03);
}
.bbs-advice h3 { color: var(--energie); font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 8px; }
.bbs-advice p { color: var(--tekst-inv); opacity: 0.9; line-height: 1.55; margin: 0; }
.bbs-advicecta { border-left: 1px solid rgba(232, 240, 234, 0.14); padding-left: 28px; }
.bbs-advicecta strong { color: var(--wit); }
.bbs-advicecta a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none;
  color: var(--donker); background: var(--energie); padding: 15px 18px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; margin-top: 14px; transition: transform 0.15s ease, background 0.2s ease;
}
.bbs-advicecta a:hover { transform: translateY(-2px); background: var(--energie-2); }

.bbs-disc { color: var(--tekst-inv); opacity: 0.55; font-size: 0.75rem; line-height: 1.5; margin-top: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bbs-formbox { grid-template-columns: 1fr 1fr; }
  .bbs-calc { min-height: 84px; }
  .bbs-grid { grid-template-columns: 1fr; }
  .bbs-compare { border-right: 0; padding-right: 0; }
  .bbs-advice { grid-template-columns: 1fr; }
  .bbs-advicecta { border-left: 0; padding-left: 0; border-top: 1px solid rgba(232, 240, 234, 0.14); padding-top: 18px; }
}
@media (max-width: 600px) {
  .bbs-head { display: block; }
  .bbs-privacy { margin-top: 18px; }
  .bbs-formbox { grid-template-columns: 1fr; }
  .bbs-hint { min-height: auto; }
  .bbs-compare { grid-template-columns: 1fr; }
  .bbs-arrow { transform: rotate(90deg); margin: 6px auto; }
  .bbs-cards { grid-template-columns: 1fr; }
}