/**
 * Visbl Badge System — base component styles.
 * =============================================================================
 * Structure (shape, padding, icon size, typography) is shared by ALL badge
 * types. Colors are driven by three CSS custom properties that the PHP module
 * (inc/badges/badges.php) emits as inline styles per badge type:
 *
 *     --visbl-badge-bg       background color
 *     --visbl-badge-border   border color
 *     --visbl-badge-text     text + icon color (icons use currentColor)
 *
 * The fallbacks below are the "Local Expert" colors, so a badge still renders
 * correctly even if no inline variables are provided.
 *
 * To position a badge within a specific layout (e.g. under the photo in the
 * search result card), target `.visbl-badge` from that layout's stylesheet —
 * do NOT add placement rules here. This file owns the badge's own appearance
 * only, so it stays reusable everywhere.
 * =============================================================================
 */

.visbl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--visbl-badge-border, #E5C8B6);
  background: var(--visbl-badge-bg, #FFFAEB);
  color: var(--visbl-badge-text, #B54708);
  font-family: Wavehaus, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 22.86px;
}

.visbl-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.visbl-badge__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.visbl-badge__label {
  display: inline-block;
}