/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 18 2025 | 11:51:45 */
body {
  background: #333;
}

.view {
  width: 90%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 100px;
}

.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;
}
.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: "Test 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: "Test 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;
}
.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__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%;
  z-index: 50;
  width: 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__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) {
  .view {
    margin-top: 0;
  }

  .villa-search {
    position: fixed;
    width: 100%;
    height: auto;
	max-height: 50%;
	left: 0;
	bottom: 0;
    margin: 0;
    border-radius: 0;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    gap: 0px;
	overflow-y: auto;
	botder: none !important;
  }
	
	.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: 10px;
	flex-wrap: nowrap;
	background: #fff;
	border-radius: 48px;
  }

  .vs-field {
	width: 35%;
    background: #ffffff;
/*     border: 1px solid #d3d3d3; */
	min-width: auto;
	  padding: 10px 24px;
	  overflow-x: hidden;
	  flex-wrap: nowrap;
  }
	
/* 	.vs-field:hover {
 		background-color: #fff;
	} */
	
	.vs-field__value {
		overflow: hidden;
		white-space: nowrap;
	}

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

  #vs-guests-pop,
  #vs-datepicker {
    position: relative;
    width: 95%;
    margin-top: 10px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: auto;
	border: none;
  }
	
  .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: none;
  }

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