/* .view {
    width: 90% !important;
    height: 100vh !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin-top: 100px !important;
}
 */
/* 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 !important;
    flex-direction: column !important;
    min-height: 100vh !important;
} */
/* .search-step1 .elementor-shortcode {
    position: relative !important;
    flex: 1 !important;
    height: 100% !important;
    width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; 
    display: flex !important;
    align-items: flex-end !important;
} */

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

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

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

@media (max-width: 1024px) {
  .villa-search {
    box-shadow: none !important;
  }
}

.villa-search__fields {
  display: flex !important;
  align-items: center !important;
}

/* 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 !important;
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    width: auto !important;
    z-index: 10000 !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* СALENDAR */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .view {
    margin-top: 0 !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
 * Theme isolation overrides
 * Counter hello-elementor / Elementor Pro defaults that
 * leak into the search form (green button background,
 * forced uppercase, system font, button border).
 * ========================================================= */
/* Only `.vs-field` and `.villas-coupon-question` are intentionally borderless
   transparent triggers — the rest (stepper buttons, coupon input/Apply, submit)
   keep their original colours and borders. */
.searchform-page .villa-search .vs-field,
.searchform-page .villa-search .villas-coupon-question {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: "Founders Grotesk", sans-serif !important;
  text-shadow: none !important;
}

/* Submit button — pill background + uppercase. */
.searchform-page .villa-search .vs-submit {
  background: var(--btn) !important;
  color: var(--btn-text) !important;
  text-transform: uppercase !important;
}

/* Field hover/active states still need to win over theme. */
.searchform-page .villa-search .vs-field:hover {
  background-color: #e6f7ec !important;
}
.searchform-page .villa-search .vs-field[aria-expanded="true"] {
  background: var(--chip) !important;
}

/* Stepper +/- buttons — circle border + white background.
   High-specificity copy so theme button styles cannot break the look. */
.searchform-page .villa-search .vs-stepper__btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  flex: 0 0 32px !important;
  background: #fff !important;
  border: 1px solid #d9d9d9 !important;
  color: #191a1a !important;
  border-radius: 50% !important;
  font-family: "Founders Grotesk", sans-serif !important;
}
.searchform-page .villa-search .vs-stepper__btn:hover,
.searchform-page .villa-search .vs-stepper__btn:focus {
  background: #a9d4b8 !important;
  color: #191a1a !important;
}

/* Coupon input — full bordered rounded box. */
.searchform-page .villa-search .villas-coupon-input {
  background: #fff !important;
  border: 1px solid #b0b0b0 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px #b0b0b0 !important;
}

/* Coupon Apply button — black pill (.v-btn-style). */
.searchform-page .villa-search .villas-coupon-btn {
  background: #191a1a !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  font-family: "Founders Grotesk", sans-serif !important;
}

/* Auto-flip: when there's no room below the trigger, popovers drop upwards.
   JS toggles `.vs-popover--above` based on the viewport space available. */
.vs-popover.vs-popover--above {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}