/* =========================================================================
   TT Trust Badge + Trust Strip — Design System v2.
   One visual pattern, reused everywhere trust content appears.
   Component Library §1, §4.
   ========================================================================= */

.tt-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-trust-badge-gap);
  background: var(--tt-trust-badge-bg);
  border: 1px solid var(--tt-trust-badge-border);
  border-radius: var(--tt-trust-badge-radius);
  padding: var(--tt-space-8) var(--tt-space-12);
  text-decoration: none;
  color: inherit;
}

.tt-trust-badge__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--tt-color-primary);
}
.tt-trust-badge__icon svg {
  width: var(--tt-trust-badge-icon-size);
  height: var(--tt-trust-badge-icon-size);
}

.tt-trust-badge__text { display: flex; flex-direction: column; line-height: 1.2; }
.tt-trust-badge__label { font-size: var(--tt-fs-caption); font-weight: var(--tt-fw-medium); color: var(--tt-color-text); }
.tt-trust-badge__detail { font-size: 12px; color: var(--tt-color-text-soft); margin-block-start: 2px; }

.tt-trust-badge--interactive {
  transition: border-color var(--tt-motion-fast) var(--tt-motion-ease),
              background-color var(--tt-motion-fast) var(--tt-motion-ease);
}
.tt-trust-badge--interactive:hover {
  border-color: var(--tt-color-primary);
  background: var(--tt-trust-strip-bg);
}
.tt-trust-badge--interactive .tt-trust-badge__label { color: var(--tt-color-primary); }
.tt-trust-badge__chevron { color: var(--tt-color-primary); font-size: var(--tt-fs-caption); }

/* Security-specific expanded badge (Payment step) — distinct blue so
   security messaging reads as its own category. Component Library §6. */
.tt-trust-badge--security {
  background: color-mix(in srgb, var(--tt-security-accent) 8%, white);
  border-color: transparent;
  align-items: flex-start;
  gap: var(--tt-space-12);
  padding: var(--tt-space-12) var(--tt-space-16);
}
.tt-trust-badge--security .tt-trust-badge__icon { color: var(--tt-security-accent); margin-block-start: 1px; }
.tt-trust-badge--security .tt-trust-badge__label,
.tt-trust-badge--security .tt-trust-badge__detail { color: var(--tt-security-accent); }
.tt-trust-badge--security .tt-trust-badge__detail { font-size: var(--tt-fs-caption); }

/* --- Trust Strip --------------------------------------------------------- */
.tt-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-16);
  justify-content: center;
  background: var(--tt-trust-strip-bg);
  border-radius: var(--tt-radius-md);
  padding: var(--tt-space-24);
}

/* Mobile: minimum 2 badges per row, never single-column-stacked
   (wastes vertical space) and never 3+ per row (illegible at 360px).
   Mobile Design Spec §3. */
@media (max-width: 639px) {
  .tt-trust-strip {
    justify-content: flex-start;
    gap: var(--tt-space-8);
    padding: var(--tt-space-16);
  }
  .tt-trust-strip [role="listitem"] { flex: 1 1 calc(50% - var(--tt-space-8)); min-width: 140px; }
  .tt-trust-strip .tt-trust-badge { width: 100%; }
}