/* stylelint-disable selector-attribute-quotes */
/* stylelint-disable selector-id-pattern */
/* stylelint-disable CssSyntaxError */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable function-url-quotes */
/* stylelint-disable comment-empty-line-before */
/* container */
.guesty-widget__container {
  display: grid !important;
  gap: 0.5rem; /* 8px */
  grid-template-columns: 1fr 2fr 1fr auto !important;
}

/* widget item */
.guesty-widget__container .guesty-widget__item {
  margin: 0 !important;
  width: 100% !important;
}

/* first element */
.guesty-widget__container .selectr-container {
  margin: 0 !important;
  width: 100% !important;
}

.selectr-options-container {
  background: transparent !important;
  border: none !important;
}

.selectr-options {
  padding: 0.5rem 0 !important; /* 8px 0px */
  background: #fff !important;
  border: 0.0625rem solid #e3eafe !important; /* 1px */
  box-shadow: -0.25rem 0.25rem 1rem 0.25rem rgba(0, 0, 0, 0.12) !important; /* -4px 4px 16px 4px */
  border-radius: 1.5rem !important; /* 24px */
  overflow: auto !important;
}

.selectr-options li {
  font-family: Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.375rem !important; /* 22px */
  color: #232633 !important;
  background-color: #fff !important;
  transition: background-color 0.2s ease-in-out !important;
  padding: 10px 20px !important;
}

.selectr-options li:hover {
  background-color: #faf7f3 !important;
}

.guesty-widget__container .selectr-container .selectr-selected {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 0.625rem 0 0.625rem 42px !important; /* 10px 0 10px 42px */
  background: #f8f3ee !important;
  border-radius: 3rem !important; /* 48px */
  position: relative !important;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out !important;
  cursor: pointer !important;
  justify-content: center !important;
}

.guesty-widget__container .selectr-container .selectr-selected:hover {
  background: #f0e8e0 !important;
}

.guesty-widget__container .selectr-container .selectr-selected::before {
  content: "" !important;
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
  position: absolute !important;
  left: 1rem !important; /* 16px */
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-image: url(icons/location.svg) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
}

.guesty-widget__container .selectr-container .selectr-placeholder {
  font-family: Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.125rem !important; /* 18px */
  color: #4a5c86 !important;
  order: -1 !important;
  display: block !important;
  display: none !important;
}

.guesty-widget__container .selectr-container .selectr-label {
  font-family: Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.125rem !important; /* 18px */
  color: #232633 !important;
  order: 1 !important;
  display: block !important;
}

/* second element */
.guesty-widget__container [id="guesty-search-widget__datepicker"] {
  margin: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 0.5rem; /* 8px */
  grid-template-columns: 1fr 1fr auto !important;
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div,
.guesty-widget__container .selectr-selected {
  height: 3.75rem !important; /* 60px */
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div {
  background: #f8f3ee !important;
  border-radius: 3rem !important; /* 48px */
  position: relative !important;
  height: 3.75rem !important; /* 60px */
  transition: background-color 0.2s ease-in-out !important;
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div:last-of-type {
  margin-right: -0.5rem !important;
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div:hover {
  background: #f0e8e0 !important;
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div {
  padding-left: 42px !important; /* 42px */
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div::before {
  content: "" !important;
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
  position: absolute !important;
  left: 1rem !important; /* 16px */
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
}

.guesty-root-element.small-size.guesty-widget__container .guesty-widget__item #guesty-search-widget__datepicker [id^=date-picker-wrapper] {
  width: auto !important;
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div:first-of-type::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3337 1.66699V5.00033M6.66699 1.66699V5.00033' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8333 3.33301H9.16667C6.02397 3.33301 4.45262 3.33301 3.47631 4.30932C2.5 5.28563 2.5 6.85697 2.5 9.99967V11.6663C2.5 14.809 2.5 16.3804 3.47631 17.3567C4.45262 18.333 6.02397 18.333 9.16667 18.333H10.8333C13.976 18.333 15.5474 18.333 16.5237 17.3567C17.5 16.3804 17.5 14.809 17.5 11.6663V9.99967C17.5 6.85697 17.5 5.28563 16.5237 4.30932C15.5474 3.33301 13.976 3.33301 10.8333 3.33301Z' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.5 8.33301H17.5' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3333 13.3333H7.91667M9.58333 15.4167C9.16192 15.0071 7.5 13.9168 7.5 13.3333C7.5 12.7498 9.16192 11.6596 9.58333 11.25' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] > div:last-of-type::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3337 1.66699V5.00033M6.66699 1.66699V5.00033' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8333 3.33301H9.16667C6.02397 3.33301 4.45262 3.33301 3.47631 4.30932C2.5 5.28563 2.5 6.85697 2.5 9.99967V11.6663C2.5 14.809 2.5 16.3804 3.47631 17.3567C4.45262 18.333 6.02397 18.333 9.16667 18.333H10.8333C13.976 18.333 15.5474 18.333 16.5237 17.3567C17.5 16.3804 17.5 14.809 17.5 11.6663V9.99967C17.5 6.85697 17.5 5.28563 16.5237 4.30932C15.5474 3.33301 13.976 3.33301 10.8333 3.33301Z' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.5 8.33301H17.5' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.25 15.4167C11.6714 15.0071 13.3333 13.9168 13.3333 13.3333C13.3333 12.7498 11.6714 11.6596 11.25 11.25M12.9167 13.3333H7.5' stroke='%23232633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] .__super-input {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 0.625rem 0 0.625rem 0 !important; /* 10px 0 10px 0 */
  background: transparent !important;
  border-radius: 3rem !important; /* 48px */
  position: relative !important;
  height: 3.75rem !important; /* 60px */
  font-family: Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.125rem !important; /* 18px */
  color: #232633 !important;
  order: 1 !important;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out !important;
  cursor: pointer !important;
}

.guesty-widget__container [id="guesty-search-widget__datepicker"] .__super-input::placeholder {
  font-family: Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.125rem !important; /* 18px */
  color: #4a5c86 !important;
  order: -1 !important;
  display: block !important;
  display: none !important;
}

/* third element */
.guesty-widget__container .guests-dropdown .selectr-container .selectr-selected::before {
  background-image: url(icons/people.svg) !important;
}

/* fourth element */
.guesty-widget__container .guesty-search-submit-btn {
  height: 3.75rem !important; /* 60px */
  padding: 1.25rem 1.5rem 1.25rem 2.75rem !important; /* 20px 24px 20px 44px */
  border-radius: 3rem !important; /* 48px */
  border: none !important;
  background: #ff3e3a !important;
  font-family: Inter, sans-serif !important;
  font-style: semibold !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important; /* 15px */
  line-height: 1.25rem !important; /* 20px */
  width: 100% !important;
  position: relative !important;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out !important;
  cursor: pointer !important;
}

.guesty-widget__container .guesty-search-submit-btn:hover {
  background: #e63530 !important;
}

.guesty-widget__container .guesty-search-submit-btn::before {
  content: "" !important;
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
  position: absolute !important;
  left: 1rem !important; /* 16px */
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-image: url(icons/compass.svg) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
}

.guesty-root-element section.lightpick {
  top: calc(100% + 5px) !important;
  padding: 0.625rem 0 !important;
  background: #fff !important;
  border: 0.0625rem solid #e3eafe !important;
  box-shadow: -0.25rem 0.25rem 1rem 0.25rem rgba(0, 0, 0, 0.12) !important;
  border-radius: 1.5rem !important;
}

.guesty-root-element .lightpick__toolbar {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  margin-top: 0.75rem !important;
}

.guesty-root-element .lightpick__months,
.guesty-root-element .lightpick__month {
  background: transparent !important;
}

.guesty-root-element .lightpick__days-of-the-week {
  padding: 0.5rem 0.5rem 0 !important;
}

.guesty-root-element .lightpick__days {
  row-gap: 0.5rem !important;
  padding: 0.5rem 0 !important;
}

.guesty-root-element .lightpick__day {
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

.guesty-root-element .lightpick__day:hover {
  background: #f8f3ee !important;
}

.guesty-root-element .lightpick__month {
  padding: 0 0.5rem !important;
}

.guesty-root-element .lightpick__month-title {
  margin: 0.125rem auto !important;
  padding: 0 !important;
  transition: background-color 0.2s ease-in-out !important;
}

.guesty-root-element .lightpick__month .lightpick__month-title:hover {
  background: #f8f3ee !important;
}

.guesty-root-element .lightpick__day.is-in-range {
  background: #f8f3ee !important;
  border: none !important;
}

.guesty-root-element .lightpick__day.is-start-date.is-in-range,
.guesty-root-element .lightpick__day.is-end-date.is-in-range {
  background: #ff3e3a !important;
  border-radius: 0.5rem !important;
}

.guesty-root-element .lightpick .lightpick__select {
  height: 2rem !important;
  border: 1px solid #e4e7e7 !important;
  border-radius: 4px !important;
}

.guesty-root-element .lightpick__previous-action {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

.guesty-root-element .lightpick__next-action {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

/* Media queries apply only to widget in search container, not in drawer */
@media (min-width: 40.0625rem) and (max-width: 52.125rem) {
  /* 641px-834px - Tablet */
  .rentplanet-hero-search-container .guesty-widget__container {
    grid-template-columns: 1fr 1fr auto !important;
  }

  .rentplanet-hero-search-container .guesty-widget__container .guesty-widget__item:nth-of-type(2) {
    display: none !important;
  }
}

@media (max-width: 56.25rem) {
  /* 640px - Phone */
  .rentplanet-hero-search-container .guesty-widget__container {
    grid-template-columns: 1fr auto !important;
  }

  .rentplanet-hero-search-container .guesty-widget__container .guesty-widget__item {
    display: none !important;
  }

  .rentplanet-hero-search-container .guesty-widget__container .guesty-widget__item.cities-dropdown,
  .rentplanet-hero-search-container .guesty-widget__container .guesty-widget__item:last-child {
    display: flex !important;
  }

  /* Drawer shows all items in one column, 4 rows */
  .rentplanet-hero-search-drawer-content .guesty-widget__container {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, auto) !important;
  }

  .rentplanet-hero-search-drawer-content .guesty-widget__container .guesty-widget__item {
    display: flex !important;
  }
}

@media (min-width: 56.3125rem) and (max-width: 60rem) {
  /* 640px - Phone */
  .rentplanet-hero-search-container .guesty-widget__container {
    grid-template-columns: 1fr 2fr 0.7fr auto !important;
  }
}
