/**
 * Module for product detail page with calendar
 */

// Calendar widget list style
.mybooking-product_calendar-step-list {
  counter-reset: steps-counter;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mybooking-product_calendar-step-list .mybooking-product_calendar-step {
  margin: 2.5rem 0 2.5rem 2.5rem;
  font-size: 1.1em;
  font-weight: 800;
  counter-increment: steps-counter;
  position: relative;
  list-style:  none;
}

.mybooking-product_calendar-step-list .mybooking-product_calendar-step::before {
  content: counter(steps-counter);
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: var(--brand-primary);
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50px;
  text-align: center;
}

// Calendar settings
h2.mybooking-product_calendar-date-range {
  font-size:  1em;
  border: 1px solid #cccccc;
  padding: 5px;
}

// Available date
.date-picker-wrapper .date-available {
  background-color: #3dd992;
  color: black;
}

// Selected date
.date-picker-wrapper .first-date-selected,
.date-picker-wrapper .last-date-selected,
.date-picker-wrapper .date-selected {
  background-color: #4499ee !important;
  color: white !important;
}

.date-picker-wrapper .month-wrapper {
  padding: 0;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background-color: #ffe684;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background-color: #3dd992;
}

.date-picker-wrapper .month-wrapper table .day.not-selectable-day.real-today,
.date-picker-wrapper .month-wrapper table .day.invalid.real-today {
    background-color: #eeeeee;
}

.mybooking-product_calendar-date {
  padding:0;
  font-size: 1.4em;
  min-width: 42px;
}

.mybooking-product_calendar-date span {
  font-weight:bold;
}

.mybooking-product_calendar-price {
  opacity:0.8;
  font-size: 0.6em;
  margin-top: 0.7em;
}

.mybooking-product_calendar-mindays {
  opacity:  0.6;
  font-size:  0.6em;
  margin-top:  0.5em;
  padding: 0.1em;
  display: inline-block;
}

.mybooking-product_calendar-mindays-data {
  background: #555555;
  color: #ffffff;
}

@media (min-width: 575.98px) {
  .mybooking-product_calendar-date {
    font-size: 1.2em;
  }
  .mybooking-product_calendar-price {
    font-size: 0.65em;
  }
}

input.mybooking-product_calendar-not_available_turn + span.mybooking-product_calendar-not_available_turn {
    color: var(--error);
}
