/* Alpenrose Waidring / Zimmersoft
   Compact version: fixed direct-booking bar at the bottom with about half height.
*/

:root {
  --zs-bottom-bar-height-desktop: 76px;
  --zs-bottom-bar-height-tablet: 82px;
  --zs-bottom-bar-height-mobile: 128px;
  --zs-bottom-bar-field-height: 42px;
}

html,
body {
  overflow-x: hidden !important;
}

body {
  padding-bottom: var(--zs-bottom-bar-height-desktop) !important;
}


/* Hide the empty grey spacer above the hero image. In the frame source,
   this is the first empty p-v-30/lightBg section after the header. */
form#form > .clx > section.p-v-30.lightBg.full:first-of-type,
form#form > .clx > section.p-v-30.lightBg.full:first-of-type + br,
form#form > .clx > #globalsearch:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

form#form > .clx > .homeBanner.bannerBg {
  margin-top: 0 !important;
}

.homeBanner .bookRoom.webbooking-overlay,
.bookRoom.webbooking-overlay {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px 18px calc(6px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  background: rgba(35, 35, 35, 0.88) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28) !important;
  z-index: 99990 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.bookRoom.webbooking-overlay h2 {
  flex: 0 0 285px !important;
  max-width: 285px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
  text-align: right !important;
  color: #fff !important;
}

.bookRoom.webbooking-overlay .s_10_container {
  flex: 1 1 900px !important;
  width: auto !important;
  max-width: 980px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bookRoom.webbooking-overlay .booking-fields-box {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 8px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.bookRoom.webbooking-overlay .booking-fields-box .container-fluid,
.bookRoom.webbooking-overlay .booking-fields-box .row {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bookRoom.webbooking-overlay .booking-fields-box .row {
  display: flex !important;
  align-items: center !important;
}

.bookRoom.webbooking-overlay .booking-fields-box .col-xl-4 {
  display: none !important;
}

.bookRoom.webbooking-overlay .booking-fields-box .col-xl-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.bookRoom.webbooking-overlay .inner-booking-fields-box {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

.bookRoom.webbooking-overlay .calender_box {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.bookRoom.webbooking-overlay .filter_control-person {
  flex: 0 0 58px !important;
}

.bookRoom.webbooking-overlay .filter_control-outer:last-child {
  flex: 0 0 auto !important;
}

.bookRoom.webbooking-overlay .t-datepicker,
.bookRoom.webbooking-overlay #two-inputs {
  width: 100% !important;
}

/* Reduce the height of the date fields, person field and submit button. */
.bookRoom.webbooking-overlay .t-check-in,
.bookRoom.webbooking-overlay .t-check-out,
.bookRoom.webbooking-overlay .t-input,
.bookRoom.webbooking-overlay .t-input-check-in,
.bookRoom.webbooking-overlay .t-input-check-out,
.bookRoom.webbooking-overlay .filter_control-outer,
.bookRoom.webbooking-overlay .filter_control-person,
.bookRoom.webbooking-overlay .travelCount,
.bookRoom.webbooking-overlay .submitBtn {
  min-height: var(--zs-bottom-bar-field-height) !important;
  height: var(--zs-bottom-bar-field-height) !important;
  line-height: var(--zs-bottom-bar-field-height) !important;
  box-sizing: border-box !important;
}

.bookRoom.webbooking-overlay .t-check-in,
.bookRoom.webbooking-overlay .t-check-out,
.bookRoom.webbooking-overlay .filter_control-outer,
.bookRoom.webbooking-overlay .submitBtn {
  font-size: 14px !important;
}

.bookRoom.webbooking-overlay .submitBtn {
  padding: 0 18px !important;
  white-space: nowrap !important;
}

/* Calendar/person popups must stay above the fixed bar. */
.bookRoom.webbooking-overlay .t-datepicker-day,
.t-datepicker-day,
.popCalender,
.room-persons-poppup-modal,
.modal-backdrop {
  z-index: 100000 !important;
}

/* With a bottom bar the datepicker should open upward instead of below the inputs. */
.bookRoom.webbooking-overlay .t-datepicker .t-datepicker-day {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
}

@media (max-width: 1100px) {
  body {
    padding-bottom: var(--zs-bottom-bar-height-tablet) !important;
  }

  .bookRoom.webbooking-overlay h2 {
    display: none !important;
  }

  .homeBanner .bookRoom.webbooking-overlay,
  .bookRoom.webbooking-overlay {
    gap: 0 !important;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom)) !important;
  }

  .bookRoom.webbooking-overlay .s_10_container {
    flex-basis: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 767px) {
  :root {
    --zs-bottom-bar-field-height: 40px;
  }

  body {
    padding-bottom: var(--zs-bottom-bar-height-mobile) !important;
  }

  .homeBanner .bookRoom.webbooking-overlay,
  .bookRoom.webbooking-overlay {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  .bookRoom.webbooking-overlay .booking-fields-box {
    padding: 6px !important;
  }

  .bookRoom.webbooking-overlay .inner-booking-fields-box {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .bookRoom.webbooking-overlay .calender_box {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .bookRoom.webbooking-overlay .filter_control-person {
    grid-column: 1 !important;
    width: 58px !important;
  }

  .bookRoom.webbooking-overlay .filter_control-outer:last-child {
    grid-column: 2 !important;
    width: 100% !important;
  }

  .bookRoom.webbooking-overlay .submitBtn {
    width: 100% !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}