/* Blumenfreude overrides for the dp-tickets booking UI */

/*
 * The plugin drives its whole booking widget from four custom properties. Its
 * defaults (olive #a7b241, signal orange #ec7723) clash with the brand palette
 * and the olive only reaches 2.3:1 on white, so the free dates were hard to
 * read. Remapping the properties keeps the widget on brand without patching
 * the plugin.
 */
.bf-workshops .dp-tickets-booking-list {
  --dp-booking-green: #2f7d4f;
  --dp-booking-orange: var(--bf-berry);
  --dp-booking-gray: #6e6b68;
  --dp-booking-light-gray: var(--bf-mist-deep);
}

.bf-workshops .dp-tickets-booking-list {
  display: grid;
  gap: var(--bf-space-xl);
}

/* Sit on the page surface – no card chrome around the booking widgets. */
.bf-workshops .dp-booking-event {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin: 0;
  padding-bottom: var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-line);
}

.bf-workshops .dp-booking-event:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bf-workshops .dp-booking-event__header h2,
.bf-workshops .dp-booking-event__header h3 {
  font-family: "Lobster Two", cursive;
  color: var(--bf-berry-deep);
}

/*
 * The plugin markup assumes a bootstrap-style grid (.row/.col-md-5/.col-md-7)
 * that isn't bundled here, so the columns had no width or flex rules at all
 * and the photo rendered edge-to-edge at its native (often portrait) aspect
 * ratio. Define the two-column layout ourselves, scoped to this component.
 */
.bf-workshops .dp-booking-event__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-lg);
  align-items: flex-start;
}

.bf-workshops .dp-booking-event__image-col {
  flex: 1 1 300px;
  max-width: 380px;
}

.bf-workshops .dp-booking-event__intro-col {
  flex: 1 1 380px;
  min-width: 0;
}

@media (max-width: 640px) {
  .bf-workshops .dp-booking-event__image-col {
    max-width: none;
    width: 100%;
  }
}

/* Small photo gallery in place of the single oversized <img> */
.bf-workshops .dp-booking-event__gallery {
  display: grid;
  gap: var(--bf-space-xs);
}

.bf-workshops .dp-booking-event__gallery-main.bf-gallery__trigger .bf-gallery__img {
  aspect-ratio: 4 / 3;
}

.bf-workshops .dp-booking-event__gallery-thumbs.bf-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bf-space-2xs);
}

.bf-workshops .dp-booking-event__gallery-thumbs .bf-gallery__img {
  aspect-ratio: 1 / 1;
}

.bf-workshops .dp-booking-event__gallery-thumbs .bf-gallery__zoom {
  width: 1.75rem;
  height: 1.75rem;
  right: 0.4rem;
  bottom: 0.4rem;
}

.bf-workshops .dp-booking-event__gallery-thumbs .bf-gallery__zoom svg {
  width: 0.85rem;
  height: 0.85rem;
}

.bf-workshops .dp-btn,
.bf-workshops button.dp-booking-submit {
  border-radius: 999px;
}

/*
 * Berry now carries the "book me" accent, so a booked day must not repeat it.
 * Amber keeps the traffic-light reading of the legend intact.
 */
.bf-workshops .dp-booking-grid__day.is-booked,
.bf-workshops .dp-booking-legend__item--booked .dp-booking-legend__swatch {
  color: #a1650e;
}
.bf-workshops .dp-booking-legend__item--booked .dp-booking-legend__swatch {
  background: #a1650e;
}

.bf-workshops .dp-calendar-day.is-available {
  border-color: var(--bf-berry);
}

.bf-workshops .dp-calendar-day.is-selected {
  background: var(--bf-berry-deep);
  color: #fff;
}