/*
 * Booking-calendar skin for Flatpickr.
 * This is the Flatpickr equivalent of the retired Pikaday custom stylesheet.
 */
#torwebbooking .flatpickr-calendar {
  width: 100%;
  max-width: 430px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
}

#torwebbooking .flatpickr-calendar.arrowTop::before,
#torwebbooking .flatpickr-calendar.arrowTop::after,
#torwebbooking .flatpickr-calendar.arrowBottom::before,
#torwebbooking .flatpickr-calendar.arrowBottom::after { display: none; }

#torwebbooking .flatpickr-months { align-items: center; }
#torwebbooking .tor-calendar-month {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}
#torwebbooking .tor-calendar-month > .flatpickr-months { order: 2; flex: 0 0 100%; }
#torwebbooking .tor-calendar-month > .tor-calendar-type { order: 1; }
#torwebbooking .tor-calendar-month > .calendar-filters { order: 3; flex: 0 0 100%; }
#torwebbooking .flatpickr-month {
  height: 38px;
  color: var(--primary-system-font-color);
}
#torwebbooking .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
#torwebbooking .flatpickr-current-month .numInputWrapper { width: 4.5em; }
#torwebbooking .flatpickr-current-month input.cur-year {
  height: 28px;
  color: var(--primary-system-font-color);
  font-weight: 600;
}
#torwebbooking .flatpickr-prev-month,
#torwebbooking .flatpickr-next-month {
  top: 4px;
  padding: 8px 10px;
  fill: var(--primary-system-font-color);
}
#torwebbooking .flatpickr-prev-month:hover svg,
#torwebbooking .flatpickr-next-month:hover svg { fill: var(--primary-color); }

#torwebbooking .flatpickr-innerContainer,
#torwebbooking .flatpickr-rContainer,
#torwebbooking .flatpickr-days,
#torwebbooking .dayContainer { width: 100%; min-width: 0; max-width: none; }
#torwebbooking .flatpickr-weekdays { height: auto; }
#torwebbooking span.flatpickr-weekday {
  height: auto;
  color: var(--primary-system-font-color);
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: none;
  border: 1px solid #ddd;
  padding: 4px;
}
#torwebbooking .flatpickr-days { padding: 4px 0; }
#torwebbooking .flatpickr-day {
  position: relative;
  display: flex;
  flex: 0 0 calc(14.2857% - 4px);
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 42px;
  margin: 2px;
  color: var(--primary-system-font-color);
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  background: var(--available-key-color);
  border: 2px solid var(--available-key-color) !important;
  border-radius: 5px;
}
#torwebbooking .flatpickr-day:hover,
#torwebbooking .flatpickr-day:focus { color: #333; background: #ccc; border-color: #ccc; }
#torwebbooking .flatpickr-calendar:not([data-show-adjacent-days="true"]) .flatpickr-day.prevMonthDay,
#torwebbooking .flatpickr-calendar:not([data-show-adjacent-days="true"]) .flatpickr-day.nextMonthDay { visibility: hidden; }
#torwebbooking .flatpickr-day.today { border-color: var(--available-key-color); }
#torwebbooking .flatpickr-day.selected,
#torwebbooking .flatpickr-day.is-selected {
  color: #fff !important;
  background: var(--selected-key-color) !important;
  border-color: var(--selected-key-color) !important;
}
#torwebbooking .flatpickr-day.pika-day--red {
  text-decoration: line-through;
  background: var(--sold-out-key-color) !important;
  border-color: var(--sold-out-key-color) !important;
  pointer-events: none;
}
#torwebbooking .flatpickr-day.pika-day--disabled,
#torwebbooking .flatpickr-day.is-disabled,
#torwebbooking .flatpickr-day.notAllowed,
#torwebbooking .flatpickr-day.tor-calendar-filtered-out {
  color: var(--unavailable-key-text-colour) !important;
  background: var(--unavailable-key-colour) !important;
  border-color: var(--unavailable-key-colour) !important;
  opacity: 1;
  pointer-events: none;
}
#torwebbooking .flatpickr-day .calendar-pips { position: absolute; bottom: 2px; left: 0; right: 0; }
#torwebbooking .tor-calendar-wrap__calendar .flatpickr-days { width: 100%; }

/* The booking shell is supplied by client HTML and is not always nested under
   #torwebbooking. Keep the calendar skin attached to the picker itself. */
.flatpickr-calendar.pika-single {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.flatpickr-calendar.pika-single .flatpickr-months { position: relative; width: 100%; height: 38px; }
.flatpickr-calendar.pika-single .flatpickr-innerContainer,
.flatpickr-calendar.pika-single .flatpickr-rContainer,
.flatpickr-calendar.pika-single .flatpickr-days,
.flatpickr-calendar.pika-single .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.flatpickr-calendar.pika-single .flatpickr-current-month {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  padding: 0;
  color: var(--primary-text-color) !important;
  font-size: 16px !important;
  line-height: 38px;
  font-weight: 600;
  font-family: inherit !important;
  text-align: center;
  text-transform: uppercase;
}
.flatpickr-calendar.pika-single .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--primary-text-color) !important;
  opacity: 1 !important;
}
.flatpickr-calendar.pika-single .flatpickr-current-month span.cur-month {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 38px;
  vertical-align: middle;
}
.flatpickr-calendar.pika-single .flatpickr-current-month .numInputWrapper {
  width: auto !important;
  margin-left: .5ch;
  vertical-align: middle;
}
.flatpickr-calendar.pika-single .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar.pika-single .flatpickr-current-month span.cur-month:hover { background: transparent !important; }
.flatpickr-calendar.pika-single .flatpickr-current-month .numInputWrapper span { display: none !important; }
.flatpickr-calendar.pika-single .flatpickr-current-month input.cur-year {
  height: 38px;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 38px;
  vertical-align: middle;
  appearance: textfield;
  -moz-appearance: textfield;
}
.flatpickr-calendar.pika-single .flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-calendar.pika-single .flatpickr-current-month input.cur-year::-webkit-outer-spin-button { appearance: none; margin: 0; }
.flatpickr-calendar.pika-single .flatpickr-prev-month,
.flatpickr-calendar.pika-single .flatpickr-next-month {
  top: 0;
  z-index: 2;
  width: 40px;
  height: 38px;
  padding: 10px;
  background-color: var(--quantity-btn-color) !important;
  border-radius: 0 10px 10px 0;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 18px !important;
}
.flatpickr-calendar.pika-single .flatpickr-prev-month {
  background-image: url("../../images/calendar-month-icon--prev.svg") !important;
  border-radius: 10px 0 0 10px;
}
.flatpickr-calendar.pika-single .flatpickr-next-month { background-image: url("../../images/calendar-month-icon.svg") !important; }
.flatpickr-calendar.pika-single .flatpickr-prev-month svg,
.flatpickr-calendar.pika-single .flatpickr-next-month svg { display: none !important; }
.flatpickr-calendar.pika-single .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-calendar.pika-single .flatpickr-next-month.flatpickr-disabled {
  visibility: visible !important;
  opacity: .25;
}
.flatpickr-calendar.pika-single .flatpickr-weekdays,
.flatpickr-calendar.pika-single .flatpickr-days,
.flatpickr-calendar.pika-single .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.flatpickr-calendar.pika-single span.flatpickr-weekday {
  color: var(--primary-system-font-color) !important;
  font-size: 10px !important;
  line-height: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #ddd;
  padding: 4px;
}
.flatpickr-calendar.pika-single .flatpickr-day {
  display: flex !important;
  flex: 0 0 calc(14.2857% - 4px) !important;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px;
  height: auto !important;
  margin: 2px !important;
  color: var(--primary-system-font-color) !important;
  font-size: 16px !important;
  font-weight: 700;
  background: var(--available-key-color) !important;
  border: 2px solid var(--available-key-color) !important;
  border-radius: 5px !important;
}
.flatpickr-calendar.pika-single .flatpickr-day.selected,
.flatpickr-calendar.pika-single .flatpickr-day.is-selected {
  color: #fff !important;
  background: var(--selected-key-color) !important;
  border-color: var(--selected-key-color) !important;
}
.flatpickr-calendar.pika-single .flatpickr-day.pika-day--red {
  text-decoration: line-through;
  background: var(--sold-out-key-color) !important;
  border-color: var(--sold-out-key-color) !important;
}
.flatpickr-calendar.pika-single .flatpickr-day.pika-day--disabled,
.flatpickr-calendar.pika-single .flatpickr-day.is-disabled,
.flatpickr-calendar.pika-single .flatpickr-day.notAllowed,
.flatpickr-calendar.pika-single .flatpickr-day.tor-calendar-filtered-out {
  color: var(--unavailable-key-text-colour) !important;
  background: var(--unavailable-key-colour) !important;
  border-color: var(--unavailable-key-colour) !important;
  pointer-events: none;
}
.tor-calendar-month > .calendar-filters {
  display: flex !important;
  flex: 0 0 100%;
  flex-flow: row wrap;
  gap: 10px;
  width: 100%;
}
.tor-calendar-month .calendar-filter {
  flex: 1 1 auto;
  min-width: 94px;
  color: #24394C;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 5px;
  padding: 5px;
}
.tor-calendar-month .calendar-filter--active { border-color: var(--btn-color); }

/* Keep the view-switch controls and month navigation on one header row. */
.flatpickr-calendar.pika-single .tor-calendar-month {
  flex-flow: row wrap !important;
  justify-content: flex-start;
}
.flatpickr-calendar.pika-single .tor-calendar-month > .flatpickr-months {
  flex: 1 1 auto !important;
  min-width: 0;
  order: 2;
}
#torwebbooking .flatpickr-calendar.pika-single .tor-calendar-month > .flatpickr-months {
  flex: 1 1 auto !important;
}
.flatpickr-calendar.pika-single .tor-calendar-month > .tor-calendar-type { flex: 0 0 auto; }
.flatpickr-calendar.pika-single .tor-calendar-month > .calendar-filters {
  flex: 0 0 100% !important;
  order: 3;
}

/* The view buttons and title share a dedicated row; filters are outside it. */
.flatpickr-calendar.pika-single .tor-calendar-month > .tor-calendar-header {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  gap: 5px;
  min-width: 0;
  order: 1;
}
.flatpickr-calendar.pika-single .tor-calendar-header > .tor-calendar-type {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}
.flatpickr-calendar.pika-single .tor-calendar-header > .flatpickr-months {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  order: initial;
}