/* Booking page only (P4). Loaded after widget.css, which carries the panel,
   form and message rules this page shares with the P5 events, tickets and
   loyalty pages (P5 refactor: the rules moved, none of them changed). What is
   left here is the room/slot picker, which nothing else has. Nothing in either
   file is used by the home page - that is what keeps the fidelity test honest. */

.book-booths {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1.2rem;
}

.book-chip,
.book-slot {
  min-height: 3rem;
  padding: .65rem 1rem;
  border: 3px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.book-chip[aria-pressed="true"],
.book-slot[aria-pressed="true"] {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
}

.book-slot small { display: block; font-weight: 400; opacity: .8; }
.book-chip:disabled,
.book-slot:disabled { opacity: .35; cursor: not-allowed; }

.book-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .7rem;
}

.book-slots-booth { margin: .4rem 0 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

.book-total { margin: 1.2rem 0; font-family: var(--display); font-size: 1.6rem; }

.book-date { display: block; font-weight: 700; }

.book-enquiry { border-color: var(--blue); }

#bookPayment { margin-bottom: 1.2rem; }