/* Public booking block and self-service booking forms. */

/*
 * Keep the public booking block deliberately simple. The surrounding page is
 * composed in Layout Builder, while Bootstrap supplies button and alert
 * presentation through the active front-end theme.
 */
.bei-public-booking {
  margin-top: 0;
}

/*
 * The booking block normally sits in the right-hand event column. Give it the
 * same visual gutter as the rest of that sidebar without requiring a custom
 * Layout Builder class.
 */
@media (min-width: 768px) {
  .bei-public-booking {
    margin-left: 2rem;
  }
}

.bei-public-booking .alert:last-child {
  margin-bottom: 0;
}

/*
 * Front-end booking/cancellation confirmation pages use Bootstrap for their
 * visual language. These rules only provide sensible page width and neutralise
 * margins added by Drupal form themes so Bootstrap utilities can do their job.
 */
.bei-public-booking-form {
  width: 100%;
  max-width: none;
  margin: 0 0 2rem;
}

.bei-public-booking-form__panel {
  overflow: hidden;
}

/*
 * When the confirmation route is opened through Drupal's AJAX dialog, the
 * dialog itself already supplies the containing surface and padding. Flatten
 * the fallback page card so we do not render a card inside a modal.
 */
.ui-dialog .bei-public-booking-form {
  margin: 0;
}

.ui-dialog .bei-public-booking-form__panel {
  border: 0 !important;
  box-shadow: none !important;
}

.ui-dialog .bei-public-booking-form__panel > .card-body {
  padding: 0 !important;
}

.bei-public-booking-form__summary {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.bei-public-booking-form__summary h2 {
  margin-top: 0;
}

.bei-public-booking-form__date,
.bei-public-booking-form__timezone {
  line-height: 1.4;
}

.bei-public-booking-form__actions.form-actions {
  margin: 0 !important;
  padding: 0 !important;
}

.bei-public-booking-form__actions.form-actions > * {
  margin: 0 !important;
}

.bei-public-booking-form__actions .btn,
.bei-public-booking-form__actions .button {
  min-width: 9rem;
}

@media (max-width: 575.98px) {
  .bei-public-booking-form__actions .btn,
  .bei-public-booking-form__actions .button {
    width: 100%;
  }
}

/* Upcoming event dates block for public event-series pages. */
.bei-series-events__list {
  overflow: hidden;
}

.bei-series-events__event {
  background: var(--bs-body-bg, #fff);
}

.bei-series-events__date {
  line-height: 1.35;
}

.bei-series-events__timezone {
  line-height: 1.25;
}

.bei-series-events__status {
  font-size: .8rem;
  line-height: 1.2;
  padding: .45em .7em;
}

.bei-series-events__action {
  min-width: 6.5rem;
}

@media (max-width: 767.98px) {
  .bei-series-events__booking {
    width: 100%;
  }

  .bei-series-events__action {
    flex: 1 1 auto;
  }
}

/*
 * Keep long event series compact on the public landing page. The first few
 * dates stay visible and the remainder sit inside a native <details> element,
 * so expansion works without JavaScript.
 */
.bei-series-events {
  margin-bottom: 2rem;
}

.bei-series-events__heading {
  margin-bottom: 1rem;
}

.bei-series-events__more {
  margin-top: .75rem;
}

.bei-series-events__more > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem 0;
  color: var(--bs-primary, currentColor);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.bei-series-events__more > summary::-webkit-details-marker {
  display: none;
}

.bei-series-events__more > summary::before {
  content: "\25BE";
  display: inline-block;
  font-size: .9rem;
  line-height: 1;
  transition: transform .2s ease;
}

.bei-series-events__more[open] > summary::before {
  transform: rotate(180deg);
}

.bei-series-events__show-less {
  display: none;
}

.bei-series-events__more[open] .bei-series-events__show-more {
  display: none;
}

.bei-series-events__more[open] .bei-series-events__show-less {
  display: inline;
}

.bei-series-events__more-list {
  margin-top: .75rem;
  overflow: hidden;
  border-radius: var(--bs-border-radius, .375rem);
}

@media (max-width: 767.98px) {
  .bei-series-events__secondary {
    flex: 1 1 auto;
  }
}