/* ── Fence Builder Calculator — supplementary styles ────────────────────── */
/* Base calc-step, product-card, results etc. come from fencing-calculator.css */

/* Guide pills shown next to selectors */
.fbc-guide-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

.fbc-guide-pill.fbc-guide-ok {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.fbc-guide-pill.fbc-guide-warn {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa0;
}

.fbc-guide-pill.fbc-guide-muted {
  background: #f0f0f0;
  color: #888;
  border: 1px solid #ddd;
}

/* Fixing tabs */
.fbc-fixing-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fbc-tab-btn {
  padding: 7px 22px;
  border: 2px solid #ced4da;
  background: #fff;
  color: #555;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
}

.fbc-tab-btn:hover {
  border-color: #aaa;
  background: #f8f8f8;
}

.fbc-tab-btn.active {
  border-color: #1a3d7c;
  background: #1a3d7c;
  color: #fff;
}

/* Inline fixing packs note */
.fbc-fixing-note {
  font-size: 13px;
  color: #555;
  background: #f0f4ff;
  border: 1px solid #c5d3f0;
  border-radius: 6px;
  padding: 8px 12px;
  display: inline-block;
}

.fbc-fixing-note:empty {
  display: none;
}

/* Help text above grids */
.help-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 14px;
}

/* Stat boxes row in Step 1 */
#fence-builder-calculator .fence-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

#fence-builder-calculator .stat-box {
  background: #1a3d7c;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-align: center;
  min-width: 90px;
}

#fence-builder-calculator .stat-label {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 2px;
}

#fence-builder-calculator .stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
}