/* Booking page (/book/) only, loaded after offshore.css. The template has no button-group
   control, so the day and time pickers get pill buttons styled like its form inputs
   (white on the gray form box, full radius); the selected one turns lime. */

.book-pills {
  grid-column-gap: var(--gap--gap-4);
  grid-row-gap: var(--gap--gap-4);
  flex-wrap: wrap;
  display: flex;
}

.book-pills.book-times {
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  display: grid;
}

.book-pill {
  border: 1px solid var(--color--transparent);
  border-radius: var(--border-radius--button);
  background-color: var(--color--white);
  color: var(--color--black);
  font-size: var(--_typography---body--body-md);
  line-height: var(--_typography---body--line-height-1);
  text-align: center;
  white-space: nowrap;
  padding: .875rem 1.25rem;
  transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}

.book-pill:hover {
  border-color: var(--color--gray-3);
}

.book-pill:focus-visible {
  outline: 2px solid var(--color--black);
  outline-offset: 2px;
}

.book-pill[aria-pressed="true"] {
  border-color: var(--color--primary-2);
  background-color: var(--color--primary-2);
  color: var(--color--black);
}

.book-tz-note {
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-sm);
}

/* "No open times" panel: same box as the template's form messages, in the form's colors */
.book-empty {
  border-radius: var(--border-radius--md);
  background-color: var(--color--white);
  color: var(--color--black);
  text-align: center;
  padding: .938rem;
}

.book-empty a {
  color: var(--color--black);
}

.book-empty[hidden],
.book-done-actions[hidden] {
  display: none;
}

.book-done-actions {
  margin-top: 1.25rem;
}

@media screen and (max-width: 479px) {
  .book-pill {
    padding: .75rem 1rem;
  }

  .book-pills.book-times {
    grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
  }
}