.zmc-calculator {
    border: 1px solid #ddd;
    padding: 20px;
    max-width: 400px;
    margin-bottom: 30px;
    background: #fdfdfd;
    border-radius: 10px;
}
.zmc-calculator input {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    padding: 8px;
}
.zmc-calculator button {
    background: #0073aa;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
}
.zmc-bmi-output {
    margin-top: 15px;
    font-weight: bold;
    font-size: 18px;
}

.zmc-bmi-scale-wrapper {
    position: relative;
    margin-top: 25px;
}

.zmc-bmi-scale {
    display: flex;
    height: 25px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.zmc-scale-label {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: white;
    line-height: 25px;
}

.zmc-scale-label.under { background-color: #5bc0de; }
.zmc-scale-label.normal { background-color: #5cb85c; }
.zmc-scale-label.overweight { background-color: #f0ad4e; }
.zmc-scale-label.obese { background-color: #d9534f; }

.zmc-bmi-pointer {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    left: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid black;
    transition: left 0.3s ease;
}
.zmc-unit-toggle {
    margin-bottom: 15px;
}
.zmc-unit-toggle label {
    margin-right: 20px;
    cursor: pointer;
}


/* Water Intake Calculator tweaks */
.zmc-water .zmc-big { font-size: 1.4rem; font-weight: 700; }
.zmc-sub { opacity: 0.85; }
.zmc-help { display:block; font-size: 0.85rem; opacity: 0.8; margin-top: 4px; }
.zmc-notes { margin-top: 8px; padding-left: 18px; }
.zmc-disclaimer { margin-top: 10px; font-size: 0.85rem; opacity: 0.7; }



/* Sleep Calculator */
.zmc-sleep .zmc-time-list { margin: 8px 0 0 18px; }
.zmc-sleep .zmc-time-list li { margin: 4px 0; }
.zmc-sleep .zmc-time-list span { font-weight: 600; margin-right: 6px; }



/* --- Sleep & Water UI improvements --- */
.zmc-calculator { width: 100%; max-width: 100%; }
.zmc-calculator .zmc-input-group { margin-bottom: 14px; }
.zmc-calculator input[type="time"],
.zmc-calculator input[type="number"],
.zmc-calculator select,
.zmc-calculator .zmc-calc-button { width: 100%; box-sizing: border-box; }

.zmc-radio-row, .zmc-checkbox-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
}
.zmc-option { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e3e3e3; border-radius: 8px; }
.zmc-checkbox-row label { display: inline-flex; align-items: center; gap: 8px; }

.zmc-calc-button { display: inline-block; width: 100%; }

/* Make result area stand out and full width */
.zmc-output { margin-top: 10px; padding: 10px 12px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; }

/* On wider screens, stretch card if parent allows */
@media (min-width: 980px) {
  .zmc-calculator { max-width: 720px; }
}

/* Typography tweaks */
.zmc-heading { margin-top: 0; }



/* --- Responsive grid for radio options (Mode) --- */
.zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.zmc-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  background: #fff;
}

/* --- Cycles row as neat columns --- */
.zmc-checkbox-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
}
.zmc-checkbox-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
}

/* Ensure small text doesn't collapse spacing */
.zmc-help { margin-top: 6px; display: block; }



/* Water Intake: Units row as tiles; Hot Climate inline */
.zmc-water .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.zmc-water .zmc-radio-row .zmc-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff;
}
.zmc-water .zmc-radio-row input[type="radio"] { transform: translateY(0); }

.zmc-checkbox-tile {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff;
  user-select: none;
}



/* Compact Water Intake UI */
.zmc-water .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}
.zmc-water .zmc-radio-row .zmc-option {
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  white-space: nowrap; /* keep text on one line on normal screens */
}
@media (max-width: 420px) {
  .zmc-water .zmc-radio-row { grid-template-columns: 1fr; }
  .zmc-water .zmc-radio-row .zmc-option { white-space: normal; } /* allow wrap on tiny screens */
}

/* Inline checkbox for Hot climate */
.zmc-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  white-space: nowrap;
  padding: 4px 2px;
}



/* Calorie Needs: compact tiles for Units & Gender */
.zmc-calorie .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}
.zmc-calorie .zmc-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
  min-height: 44px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .zmc-calorie .zmc-radio-row { grid-template-columns: 1fr; }
  .zmc-calorie .zmc-option { white-space: normal; }
}



/* Prevent awkward wrapping inside option tiles */
.zmc-option .zmc-label {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}



/* Macro Split Calculator */
.zmc-macro .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.zmc-macro .zmc-option { 
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; min-height: 44px;
}
.zmc-grid-3 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 8px; }
.zmc-card { border: 1px solid #eee; border-radius: 10px; padding: 10px; background: #fafafa; text-align: center; }
.zmc-card-title { font-weight: 600; margin-bottom: 4px; }
.zmc-card-big { font-size: 1.4rem; font-weight: 700; }
.zmc-card-sub { opacity: 0.8; font-size: 0.9rem; }



/* Macro Split: tighten radio + label spacing, prevent wrapping, left-align text */
.zmc-macro .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}
@media (max-width: 560px) {
  .zmc-macro .zmc-radio-row { grid-template-columns: 1fr; }
}
.zmc-macro .zmc-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;  /* remove large empty center space */
  gap: 6px;                     /* tighter gap between radio and text */
  padding: 8px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
  min-height: 44px;
  white-space: nowrap;          /* avoid line breaks */
}
.zmc-macro .zmc-option .zmc-label { white-space: nowrap; }
.zmc-macro .zmc-option input[type="radio"] { margin: 0; }



/* Heart Rate Zone Calculator */
.zmc-hr .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}
@media (max-width: 560px) {
  .zmc-hr .zmc-radio-row { grid-template-columns: 1fr; }
}
.zmc-hr .zmc-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
  min-height: 44px;
  white-space: nowrap;
}
.zmc-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.zmc-table th, .zmc-table td { border: 1px solid #eee; padding: 8px; text-align: left; }
.zmc-table thead th { background: #f7f7f7; }



/* Nap Calculator */
.zmc-nap .zmc-radio-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.zmc-nap .zmc-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
  min-height: 44px;
  white-space: nowrap;
}
.zmc-nap .zmc-option .zmc-label { white-space: nowrap; }