/* MP Weight Loss – BMI & Calorie Calculator widget styles
   Scoped to .mp-bmi-wrap so nothing leaks into the rest of the page. */

.mp-hidden { display: none !important; }

.mp-bmi-wrap,
.mp-bmi-wrap * { box-sizing: border-box; }

.mp-bmi-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 1180px;
  margin: 28px auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #172033;
}

/* ── Cards ─────────────────────────────────────────────────── */
.mp-bmi-card {
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .07);
  min-height: 100%;
}

.mp-bmi-card-header {
  background: linear-gradient(90deg, #0088b5 0%, #0e2760 100%);
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  padding: 17px 12px;
  text-transform: uppercase;
}

.mp-bmi-card-body { padding: 18px 18px 20px; }

/* ── Input groups ───────────────────────────────────────────── */
.mp-bmi-field-group { margin-bottom: 18px; }

.mp-bmi-field-group label {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 9px;
}

.mp-bmi-two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mp-bmi-wrap input,
.mp-bmi-wrap select {
  width: 100% !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 9px 10px !important;
  border: 1px solid #bfc5cd !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: left !important;
}

.mp-bmi-wrap input:focus,
.mp-bmi-wrap select:focus {
  border-color: #0088b5 !important;
  box-shadow: 0 0 0 2px rgba(0, 136, 181, .12) !important;
}

.mp-bmi-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 22px 0 18px;
}

.mp-bmi-small-heading {
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
}

.mp-bmi-calc-btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 5px;
  background: #0088b5;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  margin-top: 7px;
}
.mp-bmi-calc-btn:hover { background: #006f94; }

/* ── Eligibility note ───────────────────────────────────────── */
.mp-eligibility-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fff7dd;
  border: 1px solid #f5d46b;
  color: #7a4a00;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* ── BMI result & ideal weight ──────────────────────────────── */
.mp-bmi-result-box {
  margin-bottom: 14px;
  padding: 18px 12px;
  border-radius: 7px;
  border: 2px solid #0088d2;
  background: #eef8ff;
  color: #102565;
  text-align: center;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
}

.mp-ideal-weight-box {
  margin-bottom: 20px;
  padding: 17px 14px;
  border-radius: 7px;
  border: 1px solid #98d7b6;
  background: #eefaf3;
  text-align: center;
}
.mp-ideal-title  { color: #08723c; font-size: 15px; line-height: 1.3; font-weight: 800; margin-bottom: 7px; }
.mp-ideal-range  { color: #08723c; font-size: 15px; line-height: 1.3; font-weight: 700; margin-bottom: 8px; }
.mp-goal-weight-text { color: #102565; font-size: 13px; line-height: 1.35; font-weight: 700; }
.mp-goal-weight-text span { color: #6b7280; font-size: 11px; font-weight: 500; }

/* ── BMI category table ─────────────────────────────────────── */
.mp-bmi-table-title {
  text-align: center;
  color: #102565;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  margin: 4px 0 12px;
}

.mp-bmi-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.35; }
.mp-bmi-table th {
  padding: 8px 6px;
  border-bottom: 1px solid #cfd5dd;
  color: #374151;
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mp-bmi-table td { padding: 9px 6px; border-bottom: 1px solid #dde2e8; color: #4b5563; vertical-align: middle; }

.mp-bmi-highlight                 { font-weight: 800; }
.mp-bmi-highlight-underweight td  { background: #f3e8fd !important; color: #6b21a8 !important; }
.mp-bmi-highlight-healthy td      { background: #e8f8ee !important; color: #166534 !important; }
.mp-bmi-highlight-overweight td   { background: #fff3df !important; color: #9a5400 !important; }
.mp-bmi-highlight-obese td        { background: #fdecec !important; color: #b42318 !important; }

/* ── Daily Target Goals panel ───────────────────────────────── */
.mp-calorie-body { text-align: center; }

.mp-calorie-placeholder {
  padding: 20px 18px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.mp-calorie-subtext { color: #4b5563; font-size: 12px; line-height: 1.45; margin: 0 0 15px; }

.mp-calorie-maintenance  { margin-bottom: 14px; }
.mp-calorie-maint-label  { margin: 0 0 5px; color: #4b5563; font-size: 12px; line-height: 1.2; }
.mp-calorie-main-value   { margin: 0 0 6px; color: #102565; font-size: 19px; line-height: 1.2; font-weight: 900; }
.mp-calorie-note         { margin: 0; color: #6b7280; font-size: 11px; line-height: 1.35; }

.mp-calorie-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mp-calorie-mini-card { padding: 12px 10px; border-radius: 6px; border: 1px solid #d9dee6; background: #f9fafb; }
.mp-calorie-mini-card:nth-child(3) { grid-column: 1 / -1; }
.mp-calorie-aggressive-card { border-color: #ffb3b3; background: #fff0f0; }

.mp-calorie-card-title { margin: 0 0 7px; color: #374151; font-size: 11px; line-height: 1.3; font-weight: 800; }
.mp-calorie-card-value { margin: 0 0 7px; color: #102565; font-size: 15px; line-height: 1.25; font-weight: 900; }
.mp-calorie-card-note  { margin: 0; color: #6b7280; font-size: 10px; line-height: 1.35; }

/* ── Macro / target tiles ───────────────────────────────────── */
.mp-targets-box {
  margin-top: 12px;
  padding: 14px;
  border-radius: 7px;
  border: 1px solid #d9dee6;
  background: #fff;
}

.mp-targets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mp-target-tile {
  min-height: 92px;
  padding: 11px 10px;
  border-radius: 7px;
  border: 1px solid #d9dee6;
  background: #f9fafb;
  text-align: left;
}
.mp-target-label { color: #374151; font-size: 11px; line-height: 1.2; font-weight: 800; margin-bottom: 6px; }
.mp-target-value { color: #102565; font-size: 14px; line-height: 1.25; font-weight: 900; margin-bottom: 6px; }
.mp-target-note  { color: #6b7280; font-size: 10px; line-height: 1.3; }

.mp-targets-disclaimer { color: #6b7280; font-size: 10px; line-height: 1.45; text-align: center; margin: 12px 0 0; }

.mp-calorie-bmr        { color: #6b7280; font-size: 11px; line-height: 1.35; margin: 14px 0 8px; }
.mp-calorie-disclaimer { color: #6b7280; font-size: 10px; line-height: 1.45; margin: 0 0 12px; }

.mp-calorie-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

.mp-calorie-action-btn {
  border: none;
  border-radius: 999px;
  background: #0088b5;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  padding: 9px 12px;
  cursor: pointer;
}
.mp-calorie-action-btn:hover { background: #006f94; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .mp-bmi-wrap { grid-template-columns: 1fr !important; max-width: 620px; }
}

@media (max-width: 520px) {
  .mp-bmi-wrap { gap: 16px; margin: 18px auto; }
  .mp-bmi-card-body { padding: 15px; }
  .mp-calorie-cards,
  .mp-targets-grid,
  .mp-bmi-two-fields { grid-template-columns: 1fr; }
  .mp-calorie-mini-card:nth-child(3) { grid-column: auto; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  body * { visibility: hidden; }
  .mp-bmi-wrap,
  .mp-bmi-wrap * { visibility: visible; }
  .mp-bmi-wrap {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 100%;
    margin: 0;
    gap: 12px;
  }
  .mp-calorie-actions { display: none !important; }
}