/* EVE — Chips. Spec: docs/specs/components.md §7.1–7.3. */

/* Car spec chip (CarCard v3): h32, #F4F4F4, r24, pad 6/12, gap 8, Inter 14/400 lh20 #333333. */
.eve-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eve-space-2);
  height: 32px;
  padding: 6px var(--eve-space-3);
  border-radius: var(--eve-radius-xl);
  background: var(--eve-color-gray-100);
  font-family: var(--eve-font-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--eve-color-gray-800);
  white-space: nowrap;
}

.eve-chip > svg { width: 16px; height: 16px; flex: none; }

/* Wide CarCard chip: h44, pad 8/16, Inter 20/400 lh28. */
.eve-chip--lg {
  height: 44px;
  padding: var(--eve-space-2) var(--eve-space-4);
  font-size: 20px;
  line-height: 28px;
}

/* Tall CarCard variant chip: h40, Inter 20/400 lh24. */
.eve-chip--md {
  height: 40px;
  font-size: 20px;
  line-height: 24px;
}

/* Brand filter chip (Search, dark): h32, white 8%, r40, pad 4/12/4/8, Inter 14/500 lh16 white. */
.eve-chip--brand {
  height: 32px;
  padding: var(--eve-space-1) var(--eve-space-3) var(--eve-space-1) var(--eve-space-2);
  border-radius: var(--eve-radius-3xl);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 500;
  line-height: 16px;
  color: var(--eve-color-white);
}
.eve-chip--brand > svg,
.eve-chip--brand > img { width: 24px; height: 24px; }
.eve-chip--brand:hover { background: rgba(255, 255, 255, 0.14); } /* [system] */

/* "Show more" chip: transparent, stroke white 16%, label white 50%. */
.eve-chip--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
}
.eve-chip--outline:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); } /* [system] */

/* Glass info chip (hero): white 16% + backdrop blur 64, r40, pad 8/16, Inter 16/400 white 72%. */
.eve-chip--glass {
  height: 40px;
  padding: var(--eve-space-2) var(--eve-space-4);
  border-radius: var(--eve-radius-3xl);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(var(--eve-blur-glass));
  -webkit-backdrop-filter: blur(var(--eve-blur-glass));
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.72);
}
.eve-chip--glass > svg { width: 24px; height: 24px; color: var(--eve-color-white); }

/* Color swatch inside the "Interior color" chip: 20x20 circle. */
.eve-chip__swatch {
  width: 20px;
  height: 20px;
  border-radius: var(--eve-radius-pill);
  flex: none;
}