/* Storefront service badges (migration 0091) — /services table and the
   /new_order description card. Markup: service_badges_html() in
   app/helpers/service_badges_helper.php and serviceBadgesHtml() in
   assets/js/client.js. Loaded on its own because the guest layout does not
   include theme-sunrise.css. */

.svc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.svc-badge {
  --svc-badge-fg: #475569;
  --svc-badge-bg: rgba(100, 116, 139, 0.08);
  --svc-badge-bd: rgba(100, 116, 139, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--svc-badge-bd);
  background: var(--svc-badge-bg);
  color: var(--svc-badge-fg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: default;
}
.svc-badge .fa {
  font-size: 10px;
  line-height: 1;
}

.svc-badge--tested {
  --svc-badge-fg: #15803d;
  --svc-badge-bg: rgba(22, 163, 74, 0.09);
  --svc-badge-bd: rgba(22, 163, 74, 0.26);
}
.svc-badge--cancel {
  --svc-badge-fg: #1d4ed8;
  --svc-badge-bg: rgba(37, 99, 235, 0.08);
  --svc-badge-bd: rgba(37, 99, 235, 0.24);
}
.svc-badge--recommended {
  --svc-badge-fg: #a16207;
  --svc-badge-bg: rgba(234, 179, 8, 0.13);
  --svc-badge-bd: rgba(202, 138, 4, 0.32);
}
.svc-badge--popular {
  --svc-badge-fg: #475569;
  --svc-badge-bg: rgba(100, 116, 139, 0.08);
  --svc-badge-bd: rgba(100, 116, 139, 0.22);
}

/* Inside the order panel's description header the row sits inline */
.or-desc-svc-badges .svc-badges {
  margin-top: 0;
}

body.theme-dark .svc-badge--tested {
  --svc-badge-fg: #4ade80;
  --svc-badge-bg: rgba(34, 197, 94, 0.13);
  --svc-badge-bd: rgba(34, 197, 94, 0.32);
}
body.theme-dark .svc-badge--cancel {
  --svc-badge-fg: #93c5fd;
  --svc-badge-bg: rgba(59, 130, 246, 0.14);
  --svc-badge-bd: rgba(59, 130, 246, 0.34);
}
body.theme-dark .svc-badge--recommended {
  --svc-badge-fg: #fde047;
  --svc-badge-bg: rgba(234, 179, 8, 0.14);
  --svc-badge-bd: rgba(234, 179, 8, 0.34);
}
body.theme-dark .svc-badge--popular {
  --svc-badge-fg: #cbd5e1;
  --svc-badge-bg: rgba(148, 163, 184, 0.12);
  --svc-badge-bd: rgba(148, 163, 184, 0.28);
}