/* =============================================
   LuxTool — /calculators/bmi-checker/bmi-checker.css
   Tool-specific styles unique to this tool. Site chrome and
   every shared building block used on this page come from
   /style.css, which this page also loads.
   ============================================= */

/* ── BMI SCALE ── */
.bmi-scale {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: .3rem
}

.bmi-seg {
  flex: 1
}

.bmi-panel .form-group {
  margin-bottom: 0
}

.bmi-input-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem
}

.bmi-input-grid--2 {
  grid-template-columns: 1fr 1fr
}

.bmi-input-grid--3 {
  grid-template-columns: 1fr 1fr 1fr
}

@media (max-width:520px) {
  .bmi-input-grid--3 {
    grid-template-columns: 1fr 1fr
  }
}

.bmi-field-error {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: #f87171;
  line-height: 1.35
}

.bmi-field-error.hidden {
  display: none
}

.lux-input.bmi-input-invalid {
  border-color: rgba(248, 113, 113, .55)
}

.bmi-form-error {
  margin-bottom: .75rem;
  padding: .55rem .75rem;
  font-size: .82rem;
  color: #f87171;
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .25);
  border-radius: .5rem
}

.bmi-form-error.hidden {
  display: none
}

.bmi-result {
  margin-top: 1.5rem
}

.bmi-result-head {
  text-align: center;
  margin-bottom: 1.25rem
}

.bmi-val {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1
}

.bmi-cat {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: .4rem
}

.bmi-interpret {
  font-size: .9rem;
  color: var(--muted);
  margin: .65rem 0 0;
  line-height: 1.45;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto
}

.bmi-healthy-range {
  text-align: center;
  font-size: .88rem;
  color: var(--text);
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: .6rem
}

.bmi-needle-track {
  position: relative;
  height: 24px;
  margin-bottom: .3rem
}

.bmi-needle-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: .85rem;
  color: var(--gold);
  font-weight: 700;
  transition: left .55s cubic-bezier(.22, 1, .36, 1);
  will-change: left
}