/**
 * @file
 * MLT Modern — Trust badge strip.
 *
 * Yellow-tick pills, typically rendered inside the hero against the blue
 * background, but the colour treatment uses semi-transparent fills so it
 * works against any background.
 *
 * Markup:
 *   <div class="mlt-trust-strip">
 *     <div class="mlt-trust-strip__item">NAPIT Registered</div>
 *     <div class="mlt-trust-strip__item">Which? Trusted Trader</div>
 *     ...
 *   </div>
 */

.mlt-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
}

.mlt-trust-strip__item {
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  border-radius: var(--mlt-radius-sm);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.mlt-trust-strip__item::before {
  content: "✓";
  color: var(--mlt-accent);
  font-weight: 900;
}

/* When trust strip is used outside a coloured hero, swap background. */
.mlt-trust-strip--on-light .mlt-trust-strip__item {
  background: var(--mlt-bg-soft);
  border: 1px solid var(--mlt-border);
  color: var(--mlt-text);
}