/* Transparent labels with their existing semantic accent colors. */
:root { --badge-accent: #94a3b8; }
body :is(
  .badge, .popular-badge, .genre-badge, .badge-genre, .card-rating,
  .forum-admin-badge, .forum-spoiler-badge, .about-team-badge,
  .translator-notice-badge, .profile-status.is-premium, .profile-status.is-standard,
  .manga-detail-page .manga-genres .badge, .profile-payment-table .badge
) {
  background: color-mix(in srgb, var(--badge-accent) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 30%, transparent) !important;
  color: color-mix(in srgb, var(--badge-accent) 65%, #ffffff) !important;
  box-shadow: none;
}

body :is(.badge.bg-primary, .badge.bg-info, .badge.bg-light, .popular-badge,
  .translator-notice-badge, .profile-status.is-premium, .profile-status.is-standard) {
  --badge-accent: #42a9e1;
}
body :is(.badge.bg-success, .badge-success-custom, .forum-admin-badge, .about-team-badge) {
  --badge-accent: #5ee0b8;
}
body :is(.badge.bg-warning, .badge-warning-custom, .forum-spoiler-badge, .total-chapter-badge) {
  --badge-accent: #f39555;
}
body :is(.badge.bg-danger) { --badge-accent: #ff3a6f; }

body .card-rating {
  --badge-accent: #edb64c;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.35rem 0.6rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

body .package-card.popular .popular-badge {
  --badge-accent: #69c8fa;
  border-color: color-mix(in srgb, var(--badge-accent) 55%, transparent) !important;
}

body .badge a.text-white { color: inherit !important; }
body a:hover > :is(.badge, .genre-badge, .badge-genre) {
  background: color-mix(in srgb, var(--badge-accent) 16%, transparent) !important;
}

/* Total chapters: a labelled, legible cover badge. */
body .badge.total-chapter-badge {
  --badge-accent: #edb64c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem;
  top: 8px;
  right: 6px;
  max-width: calc(100% - 12px);
  padding: .4rem .5rem;
  border-radius: .5rem;
  background: rgba(13,21,34,.78) !important;
  border: 1px solid rgba(237,182,76,.7) !important;
  color: #f5d99b !important;
  backdrop-filter: blur(8px);
  font-size: .65rem;
  line-height: 1.25;
  white-space: normal;
  box-shadow: 0 2px 8px #0003;
}
body .badge.total-chapter-badge strong {
  color: #ffe7b3;
  font-size: .8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body a:hover .badge.total-chapter-badge {
  background: rgba(13,21,34,.88) !important;
  border-color: #edb64c !important;
}