/* Dynamic Status Badges — front-end styles
 * :where() keeps specificity at 0 so your theme's existing
 * .Green/.orange/.red rules still win if it has them. */

:where(.dsb-badge) {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}
:where(.dsb-badge.Green) { background: #2e7d32; }
:where(.dsb-badge.orange) { background: #ef9a00; }
:where(.dsb-badge.red) { background: #e53935; }

/* Closing-soon emphasis on the Active badge */
.dsb-badge.dsb-soon {
  box-shadow: 0 0 0 2px #ef9a00;
}

/* Days-left / closing-soon caption under the badge */
.dsb-meta {
  margin-top: 3px;
  font-size: 11px;
  color: #6b7280;
}
.dsb-meta-soon {
  color: #b8860b;
  font-weight: 600;
}

/* Filter buttons */
.dsb-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.dsb-filter-btn {
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #f7f7f7;
  color: #1f2937;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dsb-filter-btn:hover {
  background: #ececec;
}
.dsb-filter-btn.is-active {
  background: #0b2a5b;
  border-color: #0b2a5b;
  color: #fff;
}