/* Algemene slider styling */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: transparent;
  cursor: pointer;
  margin: 10px 0;
}

/* Track (achtergrondlijn) */
input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #ffd600 0%, #ffd600 var(--val, 50%), rgba(255,255,255,0.2) var(--val, 50%), rgba(255,255,255,0.2) 100%);
}
input[type=range]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #ffd600 0%, #ffd600 var(--val, 50%), rgba(255,255,255,0.2) var(--val, 50%), rgba(255,255,255,0.2) 100%);
}
input[type=range]::-ms-track {
  height: 8px;
  border-radius: 4px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Thumb (het bolletje) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #004C99; /* donkerblauwe rand */
  background: #fff;
  margin-top: -6px;
}
input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #004C99;
  background: #fff;
}
input[type=range]::-ms-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #004C99;
  background: #fff;
}

/* Progress in IE/Edge */
input[type=range]::-ms-fill-lower {
  background: #ffd600;
  border-radius: 4px;
}
input[type=range]::-ms-fill-upper {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}

#costComparisonChart, #savingsChart {
  width: 100% !important;
  height: 100% !important;
}

.fade-in {
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Zorg dat form-switch en labels exact uitlijnen */
.form-check.form-switch {
  display: flex;
  align-items: center;
}

.form-check-input {
  margin-top: 0 !important;
  margin-right: 8px;
}

.form-check-label {
  margin-bottom: 0;
  line-height: 1.2;
}

.summary-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
}
.summary-box h5 {
  color: #004C99;
}
@media (max-width: 991px) {
  .summary-box {
    margin-top: 1rem;
  }
}

.summary-detailed {
  background: #fff;
  color: #000;
  font-size: 0.85rem;
}
.summary-detailed .row {
  margin: 0;
}
.summary-detailed .border-bottom {
  border-color: rgba(0,0,0,0.1) !important;
}
.summary-detailed .bg-success {
  background-color: #00b050 !important;
}
.summary-detailed .bg-primary {
  background-color: #1e88e5 !important;
}
.summary-detailed .bg-danger-subtle {
  background-color: #ffd6d6 !important;
}
.summary-detailed .bg-dark {
  background-color: #222 !important;
}
.summary-detailed .fw-bold {
  font-weight: 600 !important;
}
.summary-detailed .text-success {
  color: #00b050 !important;
}
.summary-detailed .text-primary {
  color: #1e88e5 !important;
}
.info-icon { cursor:pointer; }