/* ===========================
   General Result Section
=========================== */
#bmi-value,
#bmi-category,
#bmi-feedback {
  margin-bottom: 0.8rem;
}
#bmi-value {
  font-size: 1.2rem;
  font-weight: bold;
}
/* Shared .result-box and .result-* colors are defined in css/style.css */
.result-red-severe { background-color: #e3342f; color: white; }

/* ===========================
   BMI Progress Bar Layout
=========================== */
.bmi-progress-bar {
  position: relative;
  height: 25px;
  display: flex;
  border-radius: 10px;
  margin: 45px auto;
  width: 100%;
  overflow: visible;
}
.bmi-bar-segment {
  position: relative;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
  min-width: 1px;
}
.bmi-bar-segment:first-of-type {
  border-radius: 0 10px 10px 0;
}
.bmi-bar-segment:last-of-type {
  border-radius: 10px 0 0 10px;
}

.bmi-bar-wrapper {
  position: relative;
  width: 100%;
}

/* Segment Colors */
.underweight  { background: #ADD8E6; }
.healthy      { background: #90EE90; }
.overweight   { background: #FFA500; }
.obese        { background: #FF6347; }
.obese2       { background: var(--danger-color); }
.obese3       { background: darkred; }

/* Segment Label */
.bmi-bar-segment::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  font-size: 0.75rem;
  color: var(--text-dark);
  white-space: nowrap;
  margin-bottom: 4px;
}

/* ===========================
   Arrow + Label Styles
=========================== */
.bmi-arrow {
  position: absolute;
  top: -34px;
  transition: transform 0.3s ease, left 0.3s ease;
  background: inherit;
}
.bmi-arrow[data-edge="left"] {
  transform: translateX(50%);
}
.bmi-arrow[data-edge="right"] {
  transform: translateX(0%);
}
.bmi-arrow i {
  font-size: 1.5rem;
  animation: bounce 1s infinite alternate;
  transition: color 0.3s ease;
}

/* Category-based arrow colors */
.bmi-arrow.underweight i { color: #1976d2; }
.bmi-arrow.healthy i     { color: #388e3c; }
.bmi-arrow.overweight i  { color: #f57c00; }
.bmi-arrow.obese i       { color: #d84315; }
.bmi-arrow.obese2 i      { color: #c62828; }
.bmi-arrow.obese3 i      { color: #8e0000; }

.bmi-arrow .bmi-label {
  display: block;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: -4px;
  transition: color 0.4s ease;
  color: inherit;
  background: inherit;
}

/* Label Category Colors */
.bmi-label.underweight { color: #1976d2; }
.bmi-label.healthy     { color: #388e3c; }
.bmi-label.overweight  { color: #f57c00; }
.bmi-label.obese       { color: #d84315; }
.bmi-label.obese2      { color: #c62828; }
.bmi-label.obese3      { color: #8e0000; }

/* Animations */
@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}
@keyframes vibrate {
  0%   { transform: translateY(-2px); }
  100% { transform: translateY(2px); }
}
.bmi-arrow.vibrate i {
  animation-name: vibrate !important;
  animation-duration: 0.50s !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

/* ===========================
   Segment Widths
=========================== */
#bar-adult, #bar-child, .bmi-bar-wrapper { display: none; }

#bar-adult .underweight { width: 21.25%; }  /* 10–18.5 */
#bar-adult .healthy     { width: 16.0%; }   /* 18.5–24.9 */
#bar-adult .overweight  { width: 12.25%; }  /* 25–29.9 */
#bar-adult .obese       { width: 12.5%; }   /* 30–34.9 */
#bar-adult .obese2      { width: 12.5%; }   /* 35–39.9 */
#bar-adult .obese3      { width: 25.0%; }   /* 40–50 */

#bar-child .underweight { width: 5%; }
#bar-child .healthy     { width: 80%; }
#bar-child .overweight  { width: 10%; }
#bar-child .obese       { width: 5%; }

/* ===========================
   Legends
=========================== */
.bmi-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  margin-top: 12px;
  max-width: 440px;
  margin-inline: auto;
}
.bmi-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bmi-legend .box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-block;
}
#bar-adult + .bmi-legend,
#bar-child + .bmi-legend {
  display: flex;
}

/* ===========================
   Responsive Design
=========================== */
@media (max-width: 600px) {
  .bmi-progress-bar {
    height: 20px;
    margin: 20px auto;
  }
  .bmi-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ===========================
   Explanations and Chart
=========================== */
#adult-bmi-explanation,
#child-bmi-explanation {
  margin-top: 2rem;
  text-align: right;
  line-height: 1.7;
}
.bmi-info-text {
  padding: 1rem;
  border: 1px solid #ccc;
  background: var(--bg-light);
  border-radius: var(--border-radius);
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.7;
}
.bmi-info-text h3 {
  color: var(--text-dark);
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.bmi-info-text p {
  margin-bottom: 0.5rem;
}
.bmi-chart {
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: #fff;
  border-radius: var(--border-radius);
  width: 100%;
  height: 400px;
  display: block;
}

/* ===========================
   UI Enhancements (shared parts moved to style.css)
=========================== */

/* ===========================
   Miscellaneous
=========================== */
code {
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}
.bmi-classification-list {
  line-height: 1.8;
  padding-right: 1rem;
}
.info-subheading {
  margin-top: 1rem;
  font-weight: bold;
}
.disclaimer-text {
  font-size: 0.95rem;
  color: #555;
  margin-top: 1.5rem;
}
.source-text {
  font-size: 0.85rem;
  color: #777;
}
.error-message {
  background-color: #ffebee;
  color: var(--danger-color);
  padding: 0.8rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  border-left: 4px solid var(--danger-color);
  display: none;
}

/* ===========================================
   🎨 Text Color Utilities (Category Labels)
   Used for: #bmi-category
=========================================== */
.underweight-text { color: #1976d2; font-weight: 600; }
.healthy-text     { color: #388e3c; font-weight: 600; }
.overweight-text  { color: #f57c00; font-weight: 600; }
.obese-text       { color: var(--danger-color); font-weight: 600; }

/* DOB Picker */
.dob-container {
  display: none;
  margin-top: 1rem;
}