:root {
  --clickets-icon-size: 1.15em;
  --clickets-icon-bg: color-mix(in srgb, var(--clickets-theme-accent, var(--accent, #38bdf8)) 18%, transparent);
  --clickets-icon-fg: var(--clickets-theme-accent, var(--accent, #38bdf8));
  --clickets-icon-border: color-mix(in srgb, var(--clickets-theme-accent, var(--accent, #38bdf8)) 38%, transparent);
}

.clickets-icon {
  display: inline-flex;
  width: var(--clickets-icon-size);
  height: var(--clickets-icon-size);
  min-width: var(--clickets-icon-size);
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
  border-radius: 999px;
  border: 1px solid var(--clickets-icon-border);
  background: var(--clickets-icon-bg);
  color: var(--clickets-icon-fg);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  margin-inline-end: .38rem;
  overflow: hidden;
}

.clickets-icon svg,
.clickets-icon-svg {
  width: 1em;
  height: 1em;
  display: block;
  color: currentColor;
  stroke: currentColor;
  fill: none;
}

.clickets-icon--svg-loaded {
  font-size: 1rem;
}

[data-clickets-icon-adopted="true"] {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
}

h1[data-clickets-icon-adopted="true"],
h2[data-clickets-icon-adopted="true"],
h3[data-clickets-icon-adopted="true"],
.card-head h1[data-clickets-icon-adopted="true"],
.card-head h2[data-clickets-icon-adopted="true"] {
  gap: .45rem;
}

.btn[data-clickets-icon-adopted="true"],
button[data-clickets-icon-adopted="true"],
a.btn[data-clickets-icon-adopted="true"] {
  justify-content: center;
}

.clickets-visible-icons-normal-route .card,
.clickets-visible-icons-normal-route .marketplace-home-hero,
.clickets-visible-icons-normal-route .event-workspace-full-canvas,
.clickets-visible-icons-normal-route .marketplace-card-grid > *,
.clickets-visible-icons-normal-route .media-role-card {
  --clickets-icon-bg: color-mix(in srgb, var(--clickets-theme-accent, var(--accent, #38bdf8)) 14%, transparent);
}

.icon-runtime-preview-badge,
.clickets-icon-status-card {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid var(--clickets-icon-border);
  background: color-mix(in srgb, var(--clickets-icon-bg) 85%, transparent);
}

.clickets-icon-status-card {
  display: block;
}

.clickets-icon-status-card ul {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: grid;
  gap: .45rem;
}

.clickets-icon-status-card li,
.clickets-icon-row {
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* PHASEUXR3K-G: internal icon preview badges stay out of normal product UI. */
.icon-runtime-preview-badge {
  display: none !important;
}
html[data-clickets-internal-debug="true"] .icon-runtime-preview-badge,
body[data-clickets-internal-debug="true"] .icon-runtime-preview-badge {
  display: inline-flex !important;
}