/* Styles for the bookings search view (app.booking.search). As a route view, not a component, every rule hangs from the
   '.booking-search' root class to scope it and to outweigh generic classes on the same element. */

.booking-search .booking-search__title {
  margin-bottom: var(--md-spacing-sm);
}

.booking-search .booking-search__subtitle {
  font-size: var(--md-font-size-6);
}

/* Two columns: search form and shortcuts; the shortcuts wrap below the form on narrow screens */
.booking-search .booking-search__layout {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: var(--md-spacing-xl);
  max-width: var(--md-max-width-xl);
}

.booking-search .booking-search__main,
.booking-search .booking-search__shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}

/* no token: column widths of the search layout */
.booking-search .booking-search__main {
  flex: 2 0 0;
  min-width: 400px;
  max-width: 700px;
}

.booking-search .booking-search__shortcuts {
  flex: 1 0 0;
  min-width: 200px;
  max-width: 424px;
}

/* Buttons of the search form */
.booking-search .booking-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-3xs);
  font-size: var(--md-font-size-4);
}