/* Booking inside the participant frame (shared/participant-frame.css): the study on the left, the booking
   in the box beside it, the brief and payment underneath. In the box the board is one column: who is
   joining, the calendar, the times, then the contact details. Loaded last. */
html[data-bb-design][data-bb-page='book'] .participant-frame > .hero { display: block; }
html[data-bb-design][data-bb-page='book'] .participant-frame > .hero > .status-pill { display: inline-flex; margin: 0 0 18px; }
html[data-bb-design][data-bb-page='book'] .booking-main { min-width: 0; }
html[data-bb-design][data-bb-page='book'] .booking-main > .booking-board { grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
/* Who is joining: the two choices side by side, everything else across the box. It opens the box, so it
   has no dividing line (bracketbridge-system.css draws one above each booking section). */
html[data-bb-design][data-bb-page='book'] .booking-main .booking-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 0; border: 0 !important; border-radius: 0; background: none; box-shadow: none; }
html[data-bb-design][data-bb-page='book'] .booking-main .booking-sidebar > :not(.field-block) { grid-column: 1 / -1; }
/* The calendar and the contact details each start under one line with the same space around it. */
html[data-bb-design][data-bb-page='book'] .booking-main .schedule-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0 0; border-top-color: var(--frame-line) !important; }
html[data-bb-design][data-bb-page='book'] .booking-main .schedule-panel > * { grid-column: 1 / -1; min-width: 0; }
html[data-bb-design][data-bb-page='book'] .booking-main .time-panel { min-height: 0; }
html[data-bb-design][data-bb-page='book'] .booking-main .time-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
html[data-bb-design][data-bb-page='book'] .booking-main .contact-panel { display: block; margin-top: 0; padding-top: 28px; border-top-color: var(--frame-line) !important; }
/* The optional sections open with their arrow inside the box edge, in line with the fields. */
html[data-bb-design][data-bb-page='book'] .booking-main details > summary { list-style-position: inside; }
html[data-bb-design][data-bb-page='book'] .booking-main :is(.contact-fields, .contact-fields.has-companion-name) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The phone reads as on interest registration: across the box, two fields of their own, the country menu
   wide enough for its code and the start of the country name, then the number, left to right in every
   language. The menu keeps the one arrow every participant menu has (shared/participant-shell.css), so its
   own icon is not drawn. */
html[data-bb-design][data-bb-page='book'] .booking-main .contact-fields > .phone-field { grid-column: 1 / -1; }
/* A pair: the second person's name and WhatsApp number follow the booker's details, each across the box. */
html[data-bb-design][data-bb-page='book'] .booking-main .contact-fields.has-companion-phone > #companionNameField { grid-column: 1 / -1; }
html[data-bb-design][data-bb-page='book'] .booking-main .phone-control { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 10px; direction: ltr; height: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-bb-design][data-bb-page='book'] .booking-main .country-code-select { border: 0; background: none; }
html[data-bb-design][data-bb-page='book'] .booking-main .country-code-select svg { display: none; }
html[data-bb-design][data-bb-page='book'] .booking-main .phone-control select { text-overflow: ellipsis; }
/* Availability in colour, as on the Swiss VOCI calendar: green days are open, amber days have few places
   left, grey days are fully booked and keep their place, blue days have someone waiting to be joined. The
   chosen day keeps the primary fill (bracketbridge-system.css), and the key under the calendar repeats each
   colour with its name. The work tokens have light and dark values. */
html[data-bb-design][data-bb-page='book'] .booking-main [data-availability] { --availability: var(--bb-work-done); }
html[data-bb-design][data-bb-page='book'] .booking-main [data-availability='limited'] { --availability: var(--bb-work-waiting); }
html[data-bb-design][data-bb-page='book'] .booking-main [data-availability='waiting'] { --availability: var(--bb-work-doing); }
html[data-bb-design][data-bb-page='book'] .booking-main [data-availability='full'] { --availability: var(--bb-text-2); }
/* Someone waiting reads in the waiting colour wherever it is named: the note above the times, the badge and
   the call to join on the time itself. */
html[data-bb-design][data-bb-page='book'] .booking-main .waiting-match-note { border-color: color-mix(in srgb, var(--bb-work-doing) 35%, var(--bb-canvas)); background: color-mix(in srgb, var(--bb-work-doing) 10%, var(--bb-canvas)); }
html[data-bb-design][data-bb-page='book'] .booking-main :is(.waiting-match-note strong, .time-copy .waiting-match-signal, .waiting-match-signal b, .time-copy .waiting-match-action) { color: var(--bb-work-doing); }
html[data-bb-design][data-bb-page='book'] .booking-main .waiting-match-signal b { background: color-mix(in srgb, var(--bb-work-doing) 14%, var(--bb-canvas)); }
html[data-bb-design][data-bb-page='book'] .booking-main .time-copy .waiting-match-action { border-color: color-mix(in srgb, var(--bb-work-doing) 35%, var(--bb-canvas)); background: var(--bb-canvas); }
html[data-bb-design][data-bb-page='book'] .booking-main :is(.date-button, .time-button)[data-availability] { border-color: color-mix(in srgb, var(--availability) 45%, var(--bb-canvas)); background: color-mix(in srgb, var(--availability) 14%, var(--bb-canvas)); }
html[data-bb-design][data-bb-page='book'] .booking-main :is(.date-button, .time-button)[data-availability]:hover:not(:disabled):not(.selected) { background: color-mix(in srgb, var(--availability) 22%, var(--bb-canvas)); }
html[data-bb-design][data-bb-page='book'] .booking-main .date-button[data-availability] .date-availability { background: none; }
html[data-bb-design][data-bb-page='book'] .booking-main .date-button[data-availability] .date-availability i { background: var(--availability); }
html[data-bb-design][data-bb-page='book'] .booking-main .time-button[data-availability]:not(.selected) .time-check { border: 1.5px solid var(--availability); background: var(--bb-canvas); color: var(--availability); }
html[data-bb-design][data-bb-page='book'] .booking-main .date-button.is-full { border-color: color-mix(in srgb, var(--availability) 22%, var(--bb-canvas)); background: color-mix(in srgb, var(--availability) 12%, var(--bb-canvas)); color: var(--bb-text-2); cursor: default; }
html[data-bb-design][data-bb-page='book'] .booking-main .date-button.is-full strong { font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }
html[data-bb-design][data-bb-page='book'] .booking-main .availability-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--bb-text-2); font-size: 13px; line-height: 1.4; }
html[data-bb-design][data-bb-page='book'] .booking-main .availability-legend[hidden] { display: none; }
html[data-bb-design][data-bb-page='book'] .booking-main .availability-legend li { display: inline-flex; align-items: center; gap: 8px; }
html[data-bb-design][data-bb-page='book'] .booking-main .availability-legend i { flex: none; width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--availability) 45%, var(--bb-canvas)); border-radius: 4px; background: color-mix(in srgb, var(--availability) 14%, var(--bb-canvas)); }
html[data-bb-design][data-bb-page='book'] .booking-main .availability-legend [data-availability='full'] i { background: color-mix(in srgb, var(--availability) 12%, var(--bb-canvas)); }
@media (forced-colors: active) {
  html[data-bb-design][data-bb-page='book'] .booking-main .date-button.is-full { border-style: dashed; }
}
/* Closed, existing-booking and confirmation states replace the board inside the same box. */
html[data-bb-design][data-bb-page='book'] .booking-main > .panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 560px) {
  html[data-bb-design][data-bb-page='book'] .booking-main .booking-sidebar { grid-template-columns: minmax(0, 1fr); }
  html[data-bb-design][data-bb-page='book'] .booking-main :is(.contact-fields, .contact-fields.has-companion-name) { grid-template-columns: minmax(0, 1fr); }
  html[data-bb-design][data-bb-page='book'] .booking-main .phone-control { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
}