@import url('/assets/site-color-palette.css');

:root {
  --tag-neutral-bg: var(--palette-surface);
  --tag-neutral-border: var(--palette-border-strong);
  --tag-neutral-text: var(--palette-text);
  --tag-success-bg: var(--palette-surface);
  --tag-success-border: var(--palette-border-strong);
  --tag-success-text: var(--palette-text);
  --tag-warning-bg: var(--palette-surface-muted);
  --tag-warning-border: var(--palette-border-strong);
  --tag-warning-text: var(--palette-text);
  --tag-muted-bg: var(--palette-surface-soft);
  --tag-muted-border: rgba(0, 0, 0, 0.72);
  --tag-muted-text: #333333;
  --tag-danger-bg: var(--palette-surface);
  --tag-danger-border: var(--palette-border-strong);
  --tag-danger-text: var(--palette-text);
  --tag-dark-bg: var(--palette-inverse);
  --tag-dark-border: rgba(0, 0, 0, 0.92);
  --tag-dark-text: var(--palette-inverse-text);
}

.pill,
.section-kicker,
.roadmap-pill,
.footer-pill,
.footer-kicker,
.mini-chip,
.roadmap-step-label,
.roadmap-display-meta,
.map-region-pill,
.phone-badge,
.phone-chip,
.billing-chip,
.badge,
.badge-green,
.badge-gold,
.badge-alt,
.badge-admin,
.badge-company,
.badge-verified,
.chip,
.chip-green,
.chip-gold,
.chip-muted,
.skill,
.tag,
.tag-option,
.tag-toggle,
.tag-entry,
.tag-entry input,
.tag,
.verify,
.level,
.plan,
span.status,
.status.live,
.status.busy,
.status.idle,
.toggle,
.followed-trainer-badge,
.trainer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--tag-neutral-border);
  background-color: var(--tag-neutral-bg);
  color: var(--tag-neutral-text);
  box-shadow: none;
  font-size: 0.8rem;
  font-weight: 780;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.pill i,
.section-kicker i,
.roadmap-pill i,
.footer-pill i,
.footer-kicker i,
.mini-chip i,
.roadmap-step-label i,
.roadmap-display-meta i,
.map-region-pill i,
.phone-badge i,
.phone-chip i,
.price-save i,
.billing-chip i,
.badge i,
.badge-green i,
.badge-gold i,
.badge-alt i,
.badge-admin i,
.badge-company i,
.badge-verified i,
.chip i,
.chip-green i,
.chip-gold i,
.chip-muted i,
.skill i,
.tag i,
.tag-option i,
.verify i,
.level i,
.plan i,
span.status i,
.status.live i,
.status.busy i,
.status.idle i,
.toggle i,
.followed-trainer-badge i,
.trainer-badge i {
  line-height: 1;
  font-size: 0.86rem;
  opacity: 0.88;
}

.pill,
.section-kicker,
.roadmap-pill,
.footer-pill,
.footer-kicker,
.mini-chip,
.roadmap-step-label,
.map-region-pill,
.phone-badge,
.phone-chip,
.badge,
.badge-alt,
.badge-company,
.chip,
.skill,
.tag,
.verify,
.plan,
.followed-trainer-badge,
.trainer-badge,
.tag-option,
.billing-chip {
  background-color: var(--tag-neutral-bg);
  border-color: var(--tag-neutral-border);
  color: var(--tag-neutral-text);
}

.badge-green,
.verify,
.chip-green,
.followed-trainer-badge.verified,
.status.live,
.badge-verified {
  background-color: var(--tag-success-bg);
  border-color: var(--tag-success-border);
  color: var(--tag-success-text);
}

.badge-gold,
.level,
.chip-gold,
.followed-trainer-badge.shortlist,
.trainer-badge--gold {
  background-color: var(--tag-warning-bg);
  border-color: var(--tag-warning-border);
  color: var(--tag-warning-text);
}

.chip-muted,
.plan,
span.status,
.status.idle,
.trainer-badge--silver {
  background-color: var(--tag-muted-bg);
  border-color: var(--tag-muted-border);
  color: var(--tag-muted-text);
}

.status.busy,
.badge-admin {
  background-color: var(--tag-danger-bg);
  border-color: var(--tag-danger-border);
  color: var(--tag-danger-text);
}

.toggle,
.billing-chip.active,
.trainer-badge--diamond {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
  box-shadow: none;
}

.trainer-badge--bronze {
  background-color: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.84);
  color: #111111;
}

.trainer-badge--platinum {
  background-color: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.84);
  color: #111111;
}

.section-kicker,
.footer-kicker,
.roadmap-step-label,
.roadmap-display-meta,
.phone-badge,
.phone-chip {
  min-height: 36px;
  padding-inline: 13px;
  border-radius: 999px;
}

.section-kicker,
.section-kicker i {
  color: var(--tag-neutral-text) !important;
}

.app-download .phone-badge,
.app-download .phone-chip,
.quote .section-kicker,
.intro .step,
.intro .meta li .badge,
.intro .meta li .badge-alt,
.intro .meta li .badge-company {
  background: var(--tag-dark-bg);
  border-color: var(--tag-dark-border);
  color: var(--tag-dark-text) !important;
  box-shadow: none;
}

.app-download .phone-badge i,
.app-download .phone-chip i,
.quote .section-kicker i {
  color: inherit !important;
}

.tag {
  min-height: 40px;
  padding: 9px 14px 9px 16px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  border-radius: 8px;
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: #111111;
  box-shadow: none;
}

.tag-option {
  min-height: 40px;
  padding-inline: 14px;
  cursor: pointer;
  border-radius: 8px;
}

.tag-option.active,
.tag-option:hover {
  background: #111111;
  border-color: rgba(0, 0, 0, 0.92);
  color: #ffffff;
}

.badge-verified {
  min-height: 30px;
  padding-inline: 10px;
}

.toggle {
  min-height: 30px;
  padding-inline: 11px;
  border-radius: 12px;
}

.billing-chip {
  min-height: 42px;
  border-radius: 14px;
}

.price-save {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 12px;
}