/*
 * marketing-channel-rails.css — region-aware payment + messaging "rails strip".
 *
 * Renders a horizontal-WRAPPING strip of labeled chips for the fees +
 * communications marketing pages. Accent flows from the personality system
 * (var(--mkt-personality-accent)). Mobile-money chips carry a subtly stronger
 * token-based fill to draw the eye. Light + dark safe; no viewport-lock; no
 * nowrap/ellipsis clipping — chips wrap to as many rows as they need.
 */

.mkt-rails {
  display: block;
  margin-block: var(--space-6, 1.5rem);
}

.mkt-rails__title {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: var(--type-size-200, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, var(--mkt-edt-muted));
}

.mkt-rails__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
}

/* Each chip: a token-bordered pill. Plain spans (non-interactive) or a div
   when it carries a visible note. */
.mkt-rails__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  max-width: 100%;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--hairline, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-elevated, color-mix(in srgb, currentColor 4%, transparent));
  color: var(--text-primary, inherit);
  font-size: var(--type-size-300, 0.9375rem);
  line-height: 1.3;
}

/* Chips with a note are a little taller and align to the top so label + note
   stack cleanly. */
.mkt-rails__chip--note {
  align-items: flex-start;
  border-radius: var(--radius-md, 14px);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

.mkt-rails__chip-glyph {
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-top: 0.2em;
  border-radius: 999px;
  background: var(--mkt-personality-accent, var(--mkt-edt-accent, currentColor));
}

.mkt-rails__chip-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mkt-rails__chip-label {
  font-weight: 600;
  color: inherit;
}

.mkt-rails__chip-note {
  font-size: var(--type-size-200, 0.8125rem);
  font-weight: 400;
  color: var(--text-secondary, var(--mkt-edt-muted));
}

/* Kind accents — all token-based via color-mix on the personality accent.
   mobile_money draws the eye with a stronger fill + accent border. */
.mkt-rails__chip--mobile_money {
  border-color: color-mix(in srgb, var(--mkt-personality-accent, currentColor) 45%, transparent);
  background: color-mix(in srgb, var(--mkt-personality-accent, currentColor) 12%, var(--surface-elevated, transparent));
}

.mkt-rails__chip--mobile_money .mkt-rails__chip-glyph {
  inline-size: 0.7rem;
  block-size: 0.7rem;
}

.mkt-rails__chip--wallet {
  border-color: color-mix(in srgb, var(--mkt-personality-accent, currentColor) 30%, transparent);
  background: color-mix(in srgb, var(--mkt-personality-accent, currentColor) 7%, var(--surface-elevated, transparent));
}

.mkt-rails__chip--card .mkt-rails__chip-glyph,
.mkt-rails__chip--bank .mkt-rails__chip-glyph,
.mkt-rails__chip--channel .mkt-rails__chip-glyph {
  background: color-mix(in srgb, var(--mkt-personality-accent, currentColor) 55%, transparent);
}

/* Messaging variant: WhatsApp / SMS lead. Slightly roomier note chips. */
.mkt-rails--messaging .mkt-rails__chip--channel {
  border-color: color-mix(in srgb, var(--mkt-personality-accent, currentColor) 22%, transparent);
}

.mkt-rails--payments .mkt-rails__chip {
  white-space: normal;
}