/* ====================================
   VACANCY SELECTED FILTER TAGS (PILLS)
   Styles for the selected filter summary and tags.
==================================== */

/* === 1) CONTAINER === */
/* Flex wrapper for selected filters with spacing */
#selected-filters-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* === 2) FILTER PILL STYLING === */
/* Individual tag with rounded pill appearance */
.filter-pill {
  background-color: #deecec;
  color: #082337;
  padding: 6px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, color 0.2s;
  font-family: "Astra Sans Extended", sans-serif;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

/* Invert colors on hover for contrast feedback */
.filter-pill:hover {
  background-color: #082337;
  color: #deecec;
}