/* ============================================================================
   components.css — Cards, badges, alerts, pills (IAPrompt #33). Prefixed, opt-in.
   ============================================================================ */

/* Cards */
.wa-card {
  background: var(--wa-surface); border: 1px solid var(--wa-border);
  border-radius: var(--wa-radius-lg); padding: var(--wa-space-5);
  margin-bottom: var(--wa-space-5);
}
.wa-card__title {
  font-size: var(--wa-fs-sm); font-weight: 700; color: var(--wa-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--wa-space-4); padding-bottom: var(--wa-space-3);
  border-bottom: 1px solid var(--wa-border-soft);
}

/* Badges / status pills */
.wa-badge {
  display: inline-block; padding: 0.18rem 0.55rem; border-radius: var(--wa-radius-sm);
  font-size: var(--wa-fs-xs); font-weight: 700; line-height: 1.4;
}
.wa-badge--blue { background: var(--wa-blue-soft); color: var(--wa-blue); }
.wa-badge--green { background: var(--wa-green-soft); color: var(--wa-green); }
.wa-badge--amber { background: var(--wa-amber-soft); color: var(--wa-amber); }
.wa-badge--red { background: var(--wa-red-soft); color: var(--wa-red); }
.wa-badge--gray { background: var(--wa-border-soft); color: var(--wa-text-muted); }
.wa-badge--pill { border-radius: var(--wa-radius-pill); }

/* Temperature badges (CRM) */
.wa-badge--hot { background: var(--wa-red-soft); color: var(--wa-red); }
.wa-badge--warm { background: var(--wa-amber-soft); color: var(--wa-amber); }
.wa-badge--cold { background: #e0f2fe; color: var(--wa-cyan); }

/* Alerts / inline notices */
.wa-alert { padding: 0.7rem 1.1rem; border-radius: var(--wa-radius); margin-bottom: var(--wa-space-4); font-size: var(--wa-fs-sm); }
.wa-alert--success { background: var(--wa-green); color: #fff; }
.wa-alert--error { background: var(--wa-red); color: #fff; }
.wa-alert--info { background: var(--wa-blue-soft); color: var(--wa-blue); }
.wa-alert--warn { background: var(--wa-amber-soft); color: var(--wa-amber); border: 1px solid #fde68a; }