body {
  background: #333;
}

/* .view {
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 100px;
}
 */
/* When .search-step1 is present, place .searchform-page at bottom of viewport (no scroll) */
/* Applies to all breakpoints: mobile, tablet, desktop */
/* .search-step1 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
} */
/* .search-step1 .elementor-shortcode {
    position: relative;
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
    display: flex;
    align-items: flex-end;
} */

.search-step1 .elementor-shortcode {
  position: absolute !important;
  bottom: 0;
  width: 100%;
}

.search-step1 .searchform-page {
  order: 999;
  flex-shrink: 0;
  margin-top: auto;
  padding-bottom: env(
    safe-area-inset-bottom,
    0
  ); /* Notch/home indicator on iPhone X+ */
  display: flex;
  justify-content: center; /* Centered horizontally */
  /* transform: translateY(var(--searchform-popover-offset, 0)); JS sets when popover open */
  transition: transform 0.25s ease;
}

.villa-search {
  --r: 38px;
  --pad: 3px;
  --sep: #e6e6e6;
  --bg: #fff;
  --btn: #a9d4b8;
  --btn-text: #191a1a;
  --chip: #e6f2e8;
  border-radius: var(--r);
  background: var(--bg);
  padding: var(--pad);
  display: inline-block;
  position: relative;
  box-shadow: inset 0px 0px 0px 1px #d3d3d3;
}
.villa-search__fields {
  display: flex;
  align-items: center;
}

/* Hide searchform inside second listing header */
.listing-header:nth-of-type(2) .header-searchform {
  display: none !important;
}

@media (min-width: 1025px) {
  /* Hide all searchforms except the one under .header-searchform or on the searchform page */
  .villa-search {
    display: none !important;
  }
  .header-searchform .villa-search,
  .searchform-page .villa-search {
    display: inline-block !important;
  }

  .header-searchform {
    visibility: visible;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 0;
    width: auto;
    z-index: 10000;
  }

  .header-searchform.is-positioned {
    visibility: visible;
    display: block;
  }

  .mob-villas-searchform {
    display: none;
  }

  .listing-header .shortcodes_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
  }
}

.vs-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  line-height: 1.1;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  min-width: 169px;
  padding: 10px 24px;
  transition: background-color 0.3s ease;
  font-family: "Founders Grotesk";
}

.vs-field:hover {
  background-color: #e6f7ec;
}

.vs-field__label {
  font-size: 12px;
  color: rgba(25, 26, 26, 0.5);
}
.vs-field__value {
  font-size: 14px;
  font-weight: 400;
  color: #191a1a;
}
.vs-field[aria-expanded="true"] {
  background: var(--chip);
}
.vs-divider {
  width: 1px;
  height: 27px;
  background: #d9d9d9;
  transition: opacity 0.2s ease;
}

.vs-divider {
  transition: opacity 0.2s ease;
}

.vs-field:hover + .vs-divider,
.vs-divider:has(+ .vs-field:hover) {
  opacity: 0;
}

.vs-field[aria-expanded="true"] + .vs-divider,
.vs-divider:has(+ .vs-field[aria-expanded="true"]) {
  opacity: 0;
}
.vs-submit {
  margin-left: auto;
  padding: 19px 24px;
  border-radius: 999px;
  border: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--btn);
  color: var(--btn-text);
  cursor: pointer;
  white-space: nowrap;
  font-family: "Founders Grotesk";
  text-transform: uppercase;
}
.vs-popover {
  position: absolute;
  margin-top: 5px;
}
.vs-popover[hidden] {
  display: none;
}
.vs-popover--calendar .vs-calendar {
  border-radius: 30px;
  overflow: hidden;
}

.vs-popover--guests {
  width: 355px;
  right: 0;
  margin-top: 10px;
  z-index: 2;
  bottom: 70px;
}
.vs-guestsbox {
  min-width: 320px;
  background: #fff;
  border-radius: 30px;
  padding: 23px 28px;
  width: 100%;
  box-shadow: inset 0px 0px 0px 1px #d3d3d3;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vs-guestsbox__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vs-guestsbox .villas-coupon {
  padding: 20px 0;
}

.vs-guestsbox .villas-coupon-question {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  width: 100%;
}

.vs-guestsbox .villas-coupon-form {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}

.vs-guestsbox .villas-coupon-form.active {
  height: auto;
}

/* When collapsed, prevent form from blocking clicks on .vs-help below */
.vs-guestsbox .villas-coupon:not(.is-open) .villas-coupon-form {
  pointer-events: none;
}

.vs-guestsbox__title {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #191a1a;
}
.vs-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vs-stepper__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  color: #191a1a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vs-stepper__btn:hover,
.vs-stepper__btn:focus {
  background: #a9d4b8;
  color: #191a1a;
}
.vs-stepper__value {
  font-family: "Inter", sans-serif;
  min-width: 24px;
  text-align: center;
  font-size: 15px;
  color: #191a1a;
}
.vs-help {
  margin: 20px 0 0;
  color: #191a1a;
  font-size: 14px;
  line-height: 1.1;
}

.vs-help a {
  color: #7ab08d;
  font-weight: 500;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .villa-search__fields {
    flex-wrap: wrap;
  }
  .vs-submit {
    width: 100%;
  }
}

/* СALENDAR */

.vs-popover--calendar {
  position: absolute;
  left: 0;
  right: 0;
  /* top: 100%; */
  bottom: 70px;
  z-index: 50;
  width: 100%;
}
.mob-villas-searchform .vs-popover--calendar,
.header-searchform .vs-popover--calendar {
  top: 100%;
}
.mob-villas-searchform .vs-popover--guests,
.header-searchform .vs-popover--guests {
  top: 100%;
}
.mycal {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 30px;
  padding: 20px 24px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #d3d3d3;
  box-shadow: inset 0px 0px 0px 1px #d3d3d3;
}
.mycal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}

.mycal__head {
  position: relative;
  height: 28px;
}

.mycal__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 15px;
  color: #333333;
}

.mycal__btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.mycal__btn:hover {
  background: #e6f7ec;
}
.mycal__btn--prev {
  position: absolute;
  left: 0;
  top: 0;
}
.mycal__btn--next {
  position: absolute;
  right: 0;
  top: 0;
}

.mycal__btn--next-mobile {
  position: absolute;
  right: 0;
  bottom: 0;
  visibility: hidden;
}

.mycal__hdr {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 6px;
  font-weight: 400;
  font-size: 15px;
  color: #333333;
  padding: 8px 0;
}

.mycal__hdr div {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mycal__month_left .mycal__hdr {
  padding-left: 20px;
}

.mycal__month_right .mycal__hdr {
  padding-left: 20px;
}

.mycal__days {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 6px;
}

.mycal__month_left .mycal__days {
  padding-left: 20px;
}

.mycal__month_right .mycal__days {
  padding-left: 20px;
}

.mycal__day {
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  color: #666666;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mycal__day:hover {
  background: #a9d4b8;
  color: #000000;
}
.mycal__day--empty {
  pointer-events: none;
}
.mycal__day.--disabled {
  color: #bbb;
  pointer-events: none;
}
.mycal__day.--in {
  background: rgba(169, 212, 184, 0.22);
}
.mycal__day.--start,
.mycal__day.--end {
  background: #a9d4b8;
  font-weight: 400;
  color: #000000;
}

.mycal__day.--hover-in {
  background: #eef9f1;
}
.mycal__day.--start.--hover-in,
.mycal__day.--end.--hover-in {
  background: #c6dfc9;
}

@media (max-width: 767px) {
  .searchform-page {
    width: 100%;
  }

  .search-step1 .searchform-page {
    background: #efefef;
    padding: 10px;
    padding-bottom: 30px;
  }

  .search-step1 .elementor-widget {
    width: 100%;
  }

  .header-searchform {
    visibility: hidden;
    display: none;
  }

  .header-searchform.is-positioned {
    visibility: hidden;
    display: none;
  }

  .mob-villas-searchform {
    display: block;
    visibility: visible;
  }

  .mob-villas-searchform.is-positioned {
    display: block;
    visibility: visible;
  }

  .mob-villas-searchform .header-searchform,
  .mob-villas-searchform .header-searchform.is-positioned {
    display: block;
    visibility: visible;
  }

  .mob-villas-searchform .villa-search {
    border: none;
    background: #f8f8f8;
    box-shadow: none;
  }
  .mob-villas-searchform .villa-search__fields {
    box-shadow: inset 0px 0px 0px 1px #d3d3d3;
  }
  .mob-villas-searchform .mycal {
    box-shadow: inset 0px 0px 0px 1px #d3d3d3;
  }
  .mob-villas-searchform .vs-guestsbox {
    box-shadow: inset 0px 0px 0px 1px #d3d3d3;
  }

  .view {
    margin-top: 0;
  }

  .villa-search {
    position: static;
    width: 100%;
    min-width: 342px;
    height: auto;
    max-height: none;
    left: auto;
    bottom: auto;
    margin: 0;
    border-radius: 38px;
    background: #fff;
    display: block;
    flex-direction: initial;
    gap: 0;
    overflow-y: visible;
    border: none !important;
    z-index: auto;
  }

  .search-step1 .villa-search {
    border: none;
    background: #efefef;
    box-shadow: none;
  }

  .mob-villas-searchform .villa-search {
    position: static;
  }

  #vs-checkout,
  .vs-divider {
    display: none;
  }

  .villa-search__fields {
    display: flex;
    flex-direction: row;
    gap: 0px;
    position: relative;
    padding: 2px;
    flex-wrap: nowrap;
    background: #fff;
    border-radius: 48px;
  }

  .vs-field {
    flex: 1 1 0;
    min-width: 95px;
    background: #ffffff;
    padding: 10px 12px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  #vs-checkin {
    min-width: 100px;
  }

  .vs-field__label,
  .vs-field__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .vs-submit {
    width: 30%;
    min-width: auto;
    padding: 19px 0;
  }

  #vs-guests-pop,
  #vs-datepicker {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 12px 0 0;
    transform: none;
    border: none;
    z-index: 10001;
    max-height: none;
    overflow: visible;
  }

  .mycal,
  .vs-guestsbox {
    box-shadow: 0px 14px 16px 0px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 14px 16px 0px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 14px 5px 16px rgba(0, 0, 0, 0.05);
  }

  .mycal__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: scroll;
    align-items: center;
    height: auto; /* 400px */
  }

  .mycal__grid {
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE Edge */
  }
  .mycal__grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .mycal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mycal__btn--next-mobile {
    visibility: visible;
  }

  .mycal__month_right .mycal__btn--next {
    visibility: hidden;
  }

  .mycal__month_left .mycal__hdr,
  .mycal__month_left .mycal__days,
  .mycal__month_right .mycal__hdr,
  .mycal__month_right .mycal__days {
    padding-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .header-searchform {
    visibility: hidden;
    display: none;
  }

  .header-searchform.is-positioned {
    visibility: hidden;
    display: none;
  }

  .mob-villas-searchform {
    display: block;
    visibility: visible;
  }

  .mob-villas-searchform.is-positioned {
    display: block;
    visibility: visible;
  }

  .mob-villas-searchform .header-searchform,
  .mob-villas-searchform .header-searchform.is-positioned {
    display: block;
    visibility: visible;
  }

  .mob-villas-searchform .villa-search {
    width: calc(100% - 32px);
    max-width: 960px;
    margin: 0 auto;
  }
}

/*@media (min-width: 768px) and (max-width: 1024px) {*/
/*    .header-searchform {*/
/*        visibility: hidden;*/
/*    }*/

/*    .header-searchform.is-positioned {*/
/*        visibility: visible;*/
/*    }*/

/*    body.header-searchform [data-elementor-type="header"] {*/
/*        position: relative;*/
/*        min-height: 140px;*/
/*        padding-bottom: 70px;*/
/*    }*/

/*    body.header-searchform .villa-search {*/
/*        position: relative;*/
/*        margin-top: -50px;*/
/*        z-index: 101;*/
/*    }*/

/*    body.header-searchform .currency-switcher {*/
/*        position: absolute;*/
/*        top: 14px;*/
/*        right: 16px;*/
/*        z-index: 102;*/
/*    }*/
/*}*/

@media (max-width: 767px) {
  .mycal__grid {
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mycal__btn--prev,
  .mycal__btn--next,
  .mycal__btn--next-mobile {
    display: none !important;
  }
}