.booking,
.booking-form,
.booking-field,
.booking-patient__fields {
  display: grid;
  gap: .625rem;
  min-inline-size: 0;
}

.booking-summary {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  padding: .75rem;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-bg-subtle, #f8fafc);
}

.booking-summary dt,
.booking-status,
.booking-starts__option span {
  font-size: .75rem;
  color: #475569;
}

.booking-summary dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.booking-field {
  margin: 0;
}

.booking-field legend,
.booking-field > label {
  font-size: .875rem;
  font-weight: 600;
}

.booking-patient__fields[hidden],
.booking-form [hidden] {
  display: none;
}

.booking-calendar__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .375rem;
}

.booking-calendar__heading h3 {
  font-size: .9375rem;
  text-align: center;
}

.booking-calendar {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 .25rem;
  text-align: center;
  font-size: .8125rem;
}

.booking-calendar th abbr {
  text-decoration: none;
}

.booking-calendar__day.btn {
  inline-size: 100%;
  min-block-size: 2rem;
  padding: .25rem;
}

.booking-calendar__day.btn[aria-disabled="true"] {
  color: #64748b;
  background: #f1f5f9;
  opacity: 1;
}

.booking-calendar__day[aria-current="date"] {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.booking-calendar__day[aria-pressed="true"],
.booking-starts__option[aria-pressed="true"] {
  outline: 1px solid #174ea6;
  outline-offset: -2px;
  background: #e8f0fe;
  color: #123c81;
  font-weight: 700;
}

.booking-calendar:focus-visible,
.booking-calendar__day:focus-visible,
.booking-starts:focus-visible,
.booking-starts__option:focus-visible,
.booking-starts__empty:focus-visible {
  outline: 2px solid #174ea6;
  outline-offset: 1px;
}

.booking-starts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
  gap: .375rem;
  max-block-size: 11rem;
  overflow: auto;
  padding: .25rem;
}

.booking-starts__option.btn {
  display: grid;
  place-content: center;
  min-block-size: 2.25rem;
  padding: .375rem;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.booking-starts__option.btn:disabled {
  color: #475569;
  background: #f1f5f9;
  opacity: 1;
}

.booking-patient__modes,
.booking-patient__search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.booking-patient__modes > div {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.booking-patient__search .input {
  flex: 1 1 10rem;
  min-inline-size: 0;
}

.booking-patient__results {
  display: grid;
  gap: .375rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-block-size: 10rem;
  overflow: auto;
}

.booking-patient__result.btn,
.booking-patient__selection {
  display: grid;
  justify-items: start;
  inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.booking-patient__result span,
.booking-patient__selection span {
  max-inline-size: 100%;
}

.booking-patient__selection:not(:empty) {
  padding: .625rem;
  border: 1px solid #b4caee;
  border-radius: .5rem;
  background: #e8f0fe;
}