/******  Booking front end. Started: K2shop, 2024 ********/
/*******  also used by admin booking *********************/
.bookingForm {
  position: relative;
}
.bookingForm .wsOrderAddresForm {
  margin-bottom: 36px;
}
.bookingForm .bookingDates .gFormRow2 {
  grid-template-columns: 1fr 2fr;
}
.bookingForm .cartGridLayout {
  margin-bottom: 32px;
}
.bookingForm .cartGridLayout .wsCartLabelGrid {
  grid-template-areas: ". item1 item2 item2 item2 .";
}
.bookingFront .bookingCalendar {
  padding: 24px;
  gap: 12px 24px;
  grid-template-areas: "item1 item2" "item3 item3";
  position: absolute;
  z-index: 20;
}
.bookingFront .bookingCalendar .calendarGrid {
  gap: 2px;
  grid-template-columns: repeat(7, min-content);
}
.bookingFront .bookingCalendar .calDay {
  width: 36px;
}
.bookingFront .bookingCalendar .bookingButtons {
  gap: 24px;
  grid-template-columns: 1fr auto auto;
}
.bookingFront .bookingCalendar .bookingButtons .sysPanel {
  margin: 0;
}
.bookingCalendar {
  background: #fff;
}
.bookingCalendar .calendarGrid {
  display: grid;
  align-content: start;
}
.bookingCalendar .calendarHead {
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
}
.bookingCalendar .calendarHead .navBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bookingCalendar .calendarHead .resetBtn {
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 32px;
}
.bookingCalendar .calDayName {
  text-align: center;
}
.bookingCalendar .calDay {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: 0.3s;
}
.bookingCalendar .calDay.bookingAvailable:hover,
.bookingCalendar .calDay.selected {
  background: #f0f0f0;
}
.bookingCalendar .calDay:not(.bookingAvailable) {
  color: #ddd;
}
.wsBookingProductName {
  font-size: 0.9em;
  font-weight: normal;
}
.wsProductData.filtered {
  color: #808080;
}
.wsProductData.filtered a {
  color: #808080;
}
.bookingNav {
  align-items: center;
}
.bookingNav .item1 {
  justify-self: right;
}
.bookingNav .sysPanel {
  margin: 0;
}
@media (min-width: 576px) {
  .bookingFront .bookingCalendar .calendarGrid {
    min-height: 270px;
  }
  .firstMonth .calendarHead .item3 .navBtn img,
  .lastMonth .calendarHead .item1 .navBtn img,
  .firstMonth .calendarHead .item3 .navBtn .iconContainer,
  .lastMonth .calendarHead .item1 .navBtn .iconContainer {
    display: none;
  }
}
@media (max-width: 1024px) {
  .bookingFront .bookingDates {
    grid-template-columns: 1fr 1fr auto;
  }
  .bookingForm .cartGridLayout .wsCartLabelGrid .item1,
  .bookingForm .cartGridLayout .wsCartLabelGrid .item2 {
    display: none;
  }
  .bookingCalendar {
    gap: 16px;
    padding: 16px;
  }
  .bookingCalendar .calItem {
    width: 32px;
    height: 32px;
    line-height: 22px;
    padding: 5px;
    text-align: center;
    border: 1px solid transparent;
  }
}
@media (max-width: 576px) {
  .bookingFront .bookingDates {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "item1 item2" "item3 item3";
  }
  .bookingFront .bookingDates .item3 {
    justify-self: right;
  }
  .bookingFront .bookingCalendar {
    padding: 12px;
  }
  .bookingFront .bookingCalendar .calendarGrid {
    margin-bottom: 16px;
  }
  .bookingFront .bookingCalendar .bookingButtons {
    gap: 16px;
    grid-template-columns: auto auto;
    grid-template-areas: "item2 item3";
  }
  .bookingFront .bookingCalendar .bookingButtons .sysPanel {
    margin: 0;
  }
  .bookingFront .bookingCalendar .bookingButtons .item1 {
    display: none;
  }
  .bookingFront .bookingCalendar,
  .bookingCalendar {
    width: 100%;
    grid-template-areas: "item1 item1" "item2 item2" "item3 item3";
  }
  .bookingFront .bookingCalendar .calendarGrid,
  .bookingCalendar .calendarGrid {
    grid-template-columns: repeat(7, 1fr);
  }
  .lastMonth .calendarHead .item1 .navBtn img,
  .lastMonth .calendarHead .item3 .navBtn img,
  .lastMonth .calendarHead .item1 .navBtn .iconContainer,
  .lastMonth .calendarHead .item3 .navBtn .iconContainer {
    display: none;
  }
  .bookingForm .sysPanel {
    width: 100%;
  }
  .bookingNav {
    grid-template-columns: 1fr;
    grid-template-areas: "item1" "item2";
  }
  .bookingNav .item1,
  .bookingNav .item2 {
    justify-self: center;
  }
}