/* Lane A2 — forms and the booking page */

/* ===========================================================================
   A4 — the customer's ticket (Forms V3 Reservation.dc.html)
   ======================================================================== */

/* The panel that renders this form wears no `.mc-sheet` class of its own (its
   wrapper belongs to another lane's file — player/_booking_modals.html.erb,
   admin/calendar/index.html.erb), so the shell facelift.css asks for on the
   panel's DIRECT child cannot see it: this form sits between the two. `display:
   contents` takes the <form> out of the box tree so the panel can be reached
   two levels down instead of the usual one, without touching either of those
   files. ponytail: a second bridge beside facelift.css's own `:has(> .mc-sheet
   __body)`, needed only because this partial's host is out of this lane's
   reach — drop it if that file ever adds `.mc-sheet` to the panel itself. */
.mc-modal__panel > form.mc-formv3-form { display: contents; }
.mc-modal__panel:has(> form.mc-formv3-form) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mc-modal__panel > form.mc-formv3-form > .mc-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Courts as chips: a real checkbox, visually hidden, inside the label that
   already carries `.mc-chip`'s look (facelift.css) — `:has()` reflects the
   checked state without a line of JS reaching for a class to toggle. */
.mc-chip { cursor: pointer; }
.mc-chip:has(:checked) {
  border-color: var(--mc-brand);
  background: rgba(123, 63, 33, 0.1);
  color: var(--mc-brand);
  font-weight: 600;
}
/* A10's reschedule dialog is the first `.mc-chip` that can hold a box the
   reader may NOT tick (Booking#hold_courts' court-count rule, kept by
   calendar.js's `syncCourtChoice`): the same dimming the plain Bootstrap
   checkbox used to show for free, now that the box itself is hidden inside
   the chip. Global rather than scoped to one dialog — any future `.mc-chip`
   that disables a box is owed the same affordance. */
.mc-chip:has(:disabled) { opacity: 0.45; cursor: not-allowed; }

/* The typed value between the kit's two −/+ buttons (facelift.css's own
   `.mc-step button` already styles those): a real number input standing where
   the kit draws a `<span>`, same width and centring, so stepUp()/stepDown()
   and typing both land in the one box the total is read from. */
.mc-step__input {
  width: 52px;
  border: 0;
  background: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mc-step__input:focus { outline: none; }

/* The Court Policies tick, once it stands under the button as the board's
   consent line rather than in its own boxed paragraph (facelift.css's own
   `.mc-agree` already centres it and sets the "(REQUIRED)" voice). */
.mc-agree--inline { margin-top: 0.6rem; }

/* ===========================================================================
   A10 — the customer's own reschedule dialog (Forms V3 RescheduleCustomer.dc
   .html). `.mc-reschedule--v3` scopes every rule below to it alone: the desk's
   dialog (admin_calendar_controller.js) draws the identical `.mc-reschedule`
   markup, down to the class names, and is left exactly as application.css
   already has it.
   ======================================================================== */

/* New date / New start, side by side the way the board draws them — was one
   `.mc-reschedule__inputs` row sharing both controls; now one label+box per
   field. */
.mc-reschedule--v3 .mc-reschedule__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}
.mc-reschedule--v3 .mc-reschedule__field { flex: 1 1 9rem; }
.mc-reschedule--v3 .mc-reschedule__field .form-control,
.mc-reschedule--v3 .mc-reschedule__field .form-select { min-height: 44px; }

/* The ticket's own Courts row sits closer to the time line above it than
   `.mc-ticket__row`'s default gap allows for a two-line header over it. */
.mc-reschedule--v3 .mc-reschedule__current .mc-ticket__row { margin-top: 14px; }