.c-timeslots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-ui);
}

.c-timeslots__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-timeslots__group-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.c-timeslots__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.c-timeslot {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.c-timeslot:hover:not(.is-unavailable):not(.is-selected) {
  background: var(--color-bg-overlay);
  border-color: var(--color-accent);
}
.c-timeslot.is-selected {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.c-timeslot.is-unavailable {
  background: transparent;
  color: var(--color-text-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: line-through;
}

.c-timeslots__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-5);
  margin: 0;
}