/* ── BMI LAYOUT ── */
.bmi-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  max-width: 860px;
  margin: 32px auto;
  padding: 0 24px;
}

.bmi-calc { align-self: start; }
.bmi-sidebar { display: flex; flex-direction: column; gap: 16px; }
.mb-2 { margin-bottom: 16px; }

/* ── RESULT ── */
.bmi-result { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bmi-result__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bmi-result__label {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.bmi-result__value {
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
}

/* ── GAUGE ── */
.bmi-gauge { user-select: none; }
.bmi-gauge__track {
  height: 14px;
  border-radius: 99px;
  position: relative;
  width: 100%;
  /* Gradient presne podľa BMI 16-40:
     underweight 16-18.5 = 0-10.4%  -> modrá
     normal      18.5-25 = 10.4-37.5% -> zelená  
     overweight  25-30   = 37.5-58.3% -> žltá
     obese       30-40   = 58.3-100%  -> červená */
  background: linear-gradient(to right,
    #bdd9f0 0%, #bdd9f0 10.4%,
    #a3d9bc 10.4%, #a3d9bc 37.5%,
    #f5c842 37.5%, #f5c842 58.3%,
    #f0a09a 58.3%, #f0a09a 100%
  );
}
.bmi-gauge__fill {
  display: none;
}
/* Jeden gradient bar — needle je vždy matematicky presná */
.bmi-gauge__underweight,
.bmi-gauge__normal,
.bmi-gauge__overweight,
.bmi-gauge__obese { display: none; }

.bmi-gauge__needle {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 24px;
  background: #1a1a1a;
  border-radius: 99px;
  transform: translateX(-50%);
  transition: left .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1a1a1a;
  z-index: 2;
}

/* Kombinované značky: číslo + názov zóny na každej hranici */
.bmi-gauge__labels {
  position: relative;
  height: 32px;
  margin-top: 6px;
}
.bmi-gauge__labels span {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  line-height: 1.3;
}
/* Zarovnanie: každý marker na začiatok svojej zóny */
.bmi-gauge__labels span:nth-child(1) { left: 0%;    }
.bmi-gauge__labels span:nth-child(2) { left: 10.4%; }
.bmi-gauge__labels span:nth-child(3) { left: 37.5%; }
.bmi-gauge__labels span:nth-child(4) { left: 58.3%; }
.bmi-gauge__labels span:nth-child(5) { left: 100%;  transform: translateX(-100%); align-items: flex-end; }

.bmi-gauge__labels .gauge-num {
  font-size: 11px;
  color: var(--text-hint);
  font-family: var(--font-mono);
}
.bmi-gauge__labels .gauge-cat {
  font-size: 10px;
  font-weight: 500;
}

.bmi-gauge__cats { display: none; }

/* ── TICK MARKS na hraniciach ── */
.bmi-gauge__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.7);
  transform: translateX(-50%);
  z-index: 1;
}
.bmi-gauge__tick:nth-child(2) { left: 10.4%; } /* 18.5 */
.bmi-gauge__tick:nth-child(3) { left: 37.5%; } /* 25   */
.bmi-gauge__tick:nth-child(4) { left: 58.3%; } /* 30   */

/* ── IDEAL ── */
.bmi-ideal .stat-card__value { font-size: 18px; }

/* ── DISTRIBUTION BARS ── */
.bmi-dist { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.bmi-dist__row { display: flex; align-items: center; gap: 8px; }
.bmi-dist__cat { font-size: 12px; color: var(--text-muted); min-width: 90px; }
.bmi-dist__bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg-muted);
  border-radius: 99px;
  overflow: hidden;
}
.bmi-dist__bar {
  height: 100%;
  border-radius: 99px;
  transition: width .6s ease;
  min-width: 2px;
}
.bmi-dist__pct {
  font-size: 11px;
  color: var(--text-hint);
  font-family: var(--font-mono);
  min-width: 28px;
  text-align: right;
}

/* ── TABLE ── */
.bmi-table { width: 100%; border-collapse: collapse; }
.bmi-table tr { border-bottom: 1px solid var(--border); }
.bmi-table tr:last-child { border-bottom: none; }
.bmi-table td { padding: 9px 4px; vertical-align: middle; }
.bmi-table td:last-child { text-align: right; }

/* ── HIDDEN ── */
.hidden { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .bmi-layout {
    grid-template-columns: 1fr;
    margin: 20px auto;
    padding: 0 14px;
  }
  .bmi-result__value { font-size: 40px; }
}

/* ── LANG SWITCHER ── */
.lang-switcher { position: relative; }

.lang-current {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s;
  font-family: var(--font-sans);
}
.lang-current:hover { border-color: var(--border-strong); }
.lang-flag { display:inline-flex; align-items:center; line-height:1; }
.lang-flag img { display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.lang-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 200;
  padding: 6px;
  width: 200px;
  max-height: 340px;
  overflow-y: auto;
}
.lang-menu.open { display: block; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
}
.lang-option:hover { background: var(--bg-muted); }
.lang-option.active {
  background: var(--accent);
  color: var(--text);
  font-weight: 500;
}
.lang-option span:first-child { display:inline-flex; align-items:center; flex-shrink:0; }
.lang-option span:first-child img { display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }

/* ── GENDER ROW ── */
.bmi-gender {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.bmi-gender__item {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}