/* ================================================
   Icon refresh (2026-10-04)
   Flat tinted icon pills and soft check badges, sitewide, with no page edits.
   Loaded after styles.min.css from header.cfm. To roll back, remove that one link.

   !important is needed because 50 pages set the old gradient inline
   (style="background: linear-gradient(...)") and Bootstrap's .text-success
   is itself !important. Inline gradients keep their color family through
   the [style*="#hex"] selectors below.
   Not in scope: .trust-badge-icon (gold badges), .tool-icon.
   ================================================ */

/* ---------- Color families ----------
   Pills (.icon-pill) and large bare icons (i.bi) share these.
   An element's family comes from its variant class or its inline color/gradient. */
.icon-pill, i.bi { --pill-bg: #eaf0fa; --pill-fg: #234093; } /* default: brand navy */

.icon-pill-blue, .icon-pill-software-selection,
.icon-pill[style*="#0066cc" i],
i.bi[style*="#4a90e2" i], i.bi[style*="#1565c0" i], i.bi[style*="#21759b" i] { --pill-bg: #e6f0fb; --pill-fg: #0058b3; }

.icon-pill-orange, .icon-pill-membership-growth,
.icon-pill[style*="#e85902" i], .icon-pill[style*="#fd7e14" i], .icon-pill[style*="#e65100" i],
i.bi[style*="#e65100" i] { --pill-bg: #fdeee4; --pill-fg: #c24a02; }

.icon-pill-yellow, .icon-pill-technology-operations,
.icon-pill[style*="#ffc107" i], .icon-pill[style*="#fcaf17" i], .icon-pill[style*="var(--accent)"] { --pill-bg: #fff4d6; --pill-fg: #946200; }

/* green icon color = the site's kelly green */
.icon-pill-green, .icon-pill-event, .icon-pill-event-management,
.icon-pill[style*="#28a745" i], .icon-pill[style*="#20c997" i],
i.bi[style*="#2e7d32" i], i.bi[style*="#28a745" i], i.bi[style*="#208637" i] { --pill-bg: #e6f4ea; --pill-fg: #178a35; }

.icon-pill-teal, .icon-pill-non-dues-revenue,
.icon-pill[style*="#17a2b8" i],
i.bi[style*="#00838f" i] { --pill-bg: #e2f3f6; --pill-fg: #0e7384; }

.icon-pill-purple, .icon-pill-member-engagement,
.icon-pill[style*="#6f42c1" i], .icon-pill[style*="#6a1b9a" i],
i.bi[style*="#7b1fa2" i], i.bi[style*="#6a1b9a" i] { --pill-bg: #f0eafa; --pill-fg: #5a2d91; }

.icon-pill[style*="#dc3545" i],
i.bi[style*="#c62828" i], i.bi[style*="#991b1b" i] { --pill-bg: #fbe9eb; --pill-fg: #b02a37; }

.icon-pill-marketing-communications { --pill-bg: #fbe8f1; --pill-fg: #ab2867; }

/* ---------- Icon pills ---------- */
/* Pills on dark sections (translucent white background) keep their look. */
.icon-pill:not([style*="rgba(255,255,255"]) {
  background: var(--pill-bg) !important;
  color: var(--pill-fg) !important;
  box-shadow: none !important;
}
.icon-pill:not([style*="rgba(255,255,255"]) i {
  color: inherit !important;
}

/* ---------- Organization-type circles (Who We Serve) ---------- */
.vertical-pill .rounded-circle[style*="linear-gradient"] { --pill-bg: #eaf0fa; --pill-fg: #234093; background: var(--pill-bg) !important; color: var(--pill-fg); }
.vertical-pill .rounded-circle[style*="linear-gradient"] i { color: inherit !important; }
.vertical-pill .rounded-circle[style*="#6f42c1" i] { --pill-bg: #f0eafa; --pill-fg: #5a2d91; }
.vertical-pill .rounded-circle[style*="#28a745" i] { --pill-bg: #e6f4ea; --pill-fg: #178a35; }
.vertical-pill .rounded-circle[style*="#dc3545" i] { --pill-bg: #fbe9eb; --pill-fg: #b02a37; }
.vertical-pill .rounded-circle[style*="#17a2b8" i] { --pill-bg: #e2f3f6; --pill-fg: #0e7384; }
.vertical-pill .rounded-circle[style*="#e85902" i] { --pill-bg: #fdeee4; --pill-fg: #c24a02; }

/* ---------- Large bare icons ---------- */
/* Big icons sized and colored inline (bright text-primary blue, solid navy fills,
   material colors) become tinted pills. Only icons with an inline 1.75rem+ size match,
   so small inline icons are untouched. White icons sit on dark sections and are skipped,
   as are icons already inside a pill or badge, and success checks (handled below). */
i.bi:is([style*="font-size: 2"], [style*="font-size: 3"], [style*="font-size: 1.75"]):not([style*="#fff" i]):not([style*="white"]):not(.text-white):not(.text-success):not(.icon-pill i):not(.trust-badge-icon i):not(.tool-icon i) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--pill-bg);
  color: var(--pill-fg) !important;
  font-size: 1.6rem !important;
  flex-shrink: 0;
}
i.bi:is([style*="font-size: 3"]):not([style*="#fff" i]):not([style*="white"]):not(.text-white):not(.text-success):not(.icon-pill i):not(.trust-badge-icon i):not(.tool-icon i) {
  width: 64px;
  height: 64px;
  font-size: 1.85rem !important;
}

/* ---------- Red X and dash marks ---------- */
/* Same soft treatment as the checks below, so "no" reads quieter than "yes". */
.bi-x-circle-fill.text-danger,
.bi-x-circle.text-danger,
.bi-dash-circle.text-danger,
.bi-dash-circle.text-muted,
.bi-dash-circle-fill.text-muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  vertical-align: -.125em;
  flex-shrink: 0;
}
.bi-x-circle-fill.text-danger,
.bi-x-circle.text-danger,
.bi-dash-circle.text-danger { background: #fbe9eb; color: #c4525e !important; }
.bi-dash-circle.text-muted,
.bi-dash-circle-fill.text-muted { background: #eef0f3; color: #7b8494 !important; }
.bi-x-circle-fill.text-danger::before,
.bi-x-circle.text-danger::before { content: "\f659"; font-size: .55em; line-height: 1; vertical-align: 0; } /* bi-x-lg */
.bi-dash-circle.text-danger::before,
.bi-dash-circle.text-muted::before,
.bi-dash-circle-fill.text-muted::before { content: "\f63b"; font-size: .6em; line-height: 1; vertical-align: 0; } /* bi-dash-lg */

/* ---------- Green check marks ---------- */
/* Solid green disc becomes a plain check on a pale green circle, same 1em footprint. */
.bi-check-circle-fill.text-success,
.bi-check-circle.text-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #e6f4ea;
  color: #178a35 !important;
  vertical-align: -.125em;
  flex-shrink: 0;
}
.bi-check-circle-fill.text-success::before,
.bi-check-circle.text-success::before {
  content: "\f633"; /* bi-check-lg */
  font-size: .68em;
  line-height: 1;
  vertical-align: 0;
}