/* Heart Rate Zone Calculator CSS - keeps widget compact for WP content */
#hrz-widget{ max-width:660px; width:100%; margin:14px auto; padding:14px; border-radius:10px;
  background: linear-gradient(180deg,#f4fbff 0%, #ffffff 100%); box-shadow:0 8px 20px rgba(10,40,100,0.06);
  border:1px solid rgba(3,68,148,0.08); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; color:#07305f;
}

.hrz-header h3{ margin:0 0 6px 0; font-size:1.05rem; color:#02326a; }
.hrz-sub{ margin:0; font-size:0.88rem; color:#23507f; }

.hrz-form{ margin-top:10px; display:grid; gap:10px; }
.row{ display:flex; flex-direction:column; }
.row label{ font-size:0.9rem; margin-bottom:6px; }
.row input[type="number"], .row select, .row textarea{
  padding:8px 10px; border-radius:8px; border:1px solid rgba(3,68,148,0.12); font-size:0.95rem;
  max-width:320px;
}
.req{ color:#c0392b; margin-left:6px; }

.radio-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.radio-row label{ font-size:0.9rem; background:transparent; padding:4px 6px; border-radius:6px; cursor:pointer; }

.actions{ display:flex; gap:8px; margin-top:6px; }
#calc-btn, #reset-btn{
  padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:600;
  background: linear-gradient(180deg,#0570e6,#0757b8); color:#fff;
  box-shadow:0 6px 14px rgba(5,88,199,0.12);
}
#reset-btn.alt{ background:transparent; color:#0757b8; border:1px solid rgba(7,87,184,0.12); box-shadow:none; font-weight:600; }

.hrz-output{ margin-top:14px; padding-top:8px; border-top:1px dashed rgba(3,68,148,0.06); }
.output-header p{ margin:6px 0; font-size:0.95rem; color:#06315d; }
.zones-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:0.95rem; }
.zones-table th, .zones-table td{ padding:8px 6px; border-bottom:1px solid rgba(3,68,148,0.04); text-align:left; }
.zones-table thead th{ color:#013057; font-weight:700; font-size:0.9rem; }

.example-note{ margin-top:8px; color:#0b3a65; font-size:0.9rem; }

.hrz-footer{ margin-top:10px; font-size:0.85rem; color:#355f86; text-align:center; }

/* Responsive */
@media (max-width:520px){
  #hrz-widget{ padding:10px; }
  .row input[type="number"], .row select{ max-width:100%; width:100%; }
  .actions{ flex-direction:column; }
}