/* =====================================================
   BMI BEREKENEN — pagina-specifieke stijlen
   ===================================================== */

/* Stacked weergave: label klein boven waarde */
.btw-calc .btw-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 0;
}

.btw-calc .btw-row__label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: normal;
}

.btw-calc .btw-row__value {
  text-align: left;
  word-break: normal;
}

/* Categorie-kleuren */
.bmi-cat--gezond { color: var(--pop); }
.bmi-cat--onder  { color: #f0a500; }
.bmi-cat--over   { color: #f0a500; }
.bmi-cat--obese  { color: #d94f4f; }

/* -------------------------------------------------------
   BMI schaal (visuele balk met marker)
   Schaal loopt van BMI 10 tot 45 (35 eenheden)
   Grenzen: 18.5 = 24.3%, 25 = 42.9%, 30 = 57.1%
   ------------------------------------------------------- */
.bmi-schaal-wrapper {
  padding: 16px 0 4px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: 4px;
}

.bmi-schaal {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right,
    #5b9bd5   0%,      /* ondergewicht – blauw */
    #5b9bd5   24.3%,
    rgb(43,158,173) 24.3%,  /* gezond – teal */
    rgb(43,158,173) 42.9%,
    #f0a500   42.9%,  /* overgewicht – amber */
    #f0a500   57.1%,
    #d94f4f   57.1%,  /* obesitas – rood */
    #d94f4f   100%
  );
  margin-bottom: 6px;
}

.bmi-schaal__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #343647;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transition: left .25s ease;
}

.bmi-schaal__labels {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--display-prev);
  letter-spacing: .02em;
}

/* ft/in invoer rij */
.bmi-ft-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bmi-ft-input {
  width: 76px;
  flex-shrink: 0;
}

.bmi-ft-label {
  font-size: .85rem;
  color: var(--display-prev);
  flex-shrink: 0;
}

/* Ruimte tussen metrische velden (al inline, maar voor veiligheid) */
#velden-imperiaal .btw-field + .btw-field,
#velden-metrisch  .btw-field + .btw-field {
  margin-top: 14px;
}