/* ─────────────────────────────────────────────────────────────
   Vendor Onboarding — supplemental widget styles.
   Uses ONLY the design tokens defined in index.css (:root), so the
   look stays identical to the rest of the PawFred app. Classes are
   prefixed `vf-` to avoid any collision with the shared stylesheet.
───────────────────────────────────────────────────────────── */

/* multiselect chip toggle (categories, pet types, pet sizes) */
.vf-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; }
.vf-chip {
  font-family: var(--font); font-size: 12.5px; color: var(--text-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
  border-radius: 99px; padding: .5rem .95rem; cursor: pointer;
  transition: all var(--ease);
}
.vf-chip:hover { border-color: var(--border-2); color: var(--text-1); background: rgba(255,255,255,.06); }
.vf-chip.on { background: var(--blue-faint); border-color: var(--blue); color: var(--blue); }

/* char counter under a field */
.vf-char-count { font-size: 11.5px; color: var(--text-3); margin-top: 4px; text-align: right; }