/**
 * NableU maintainer note
 * Purpose: Keeps worker affiliation, pricing and professional-eligibility filtering compact, readable and responsive.
 */

.worker-affiliation-summary {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

.worker-affiliation-detail {
  min-width: 0;
  overflow-wrap: anywhere;
}

.worker-affiliation-filter {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.worker-affiliation-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.worker-affiliation-filter-group strong {
  margin-right: 0.15rem;
}

.professional-filter-group {
  flex-basis: 100%;
  padding-top: 0.25rem;
}

.professional-filter-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.professional-filter-group select {
  width: auto;
  min-width: 9rem;
  max-width: 19rem;
}

.worker-professional-summary {
  flex-basis: 100%;
  margin-top: 0.4rem;
}

.worker-affiliation-filter .secondary[aria-pressed="true"] {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.worker-affiliation-filter-note {
  flex-basis: 100%;
  font-size: 0.9rem;
}

.worker-pricing-summary {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  margin: 0 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.worker-pricing-summary > p,
.worker-pricing-disclosure > p {
  margin: 0.35rem 0 0;
}

.worker-pricing-disclosure + .worker-pricing-disclosure {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .worker-affiliation-filter,
  .worker-affiliation-filter-group {
    align-items: stretch;
  }

  .worker-affiliation-filter-group {
    flex: 1 1 100%;
  }

  .worker-affiliation-filter-group > strong,
  .professional-filter-group label {
    flex-basis: 100%;
  }

  .professional-filter-group label {
    display: grid;
    gap: 0.3rem;
  }

  .professional-filter-group select {
    width: 100%;
    max-width: none;
  }

  .worker-affiliation-filter-group > button {
    flex: 1 1 auto;
  }
}