@charset "UTF-8";
:root {
  --form-input-background: var(--color-static-background-light-primary);
  --form-label-active-font-size: var(--font-size-small);
  --form-input-label-color: var(--color-static-on-background-light-variant-10);
  --form-input-border-color: var(--color-static-on-background-light-neutral);
  --form-input-border-bottom-color: transparent;
  --form-placeholder-color: var(--color-static-on-background-light-neutral);
  --form-input-color: var(--color-static-on-background-light-primary);
  --form-input-checked-color: var(--color-static-on-background-light-variant-10);
  --form-label-width: calc(100% - calc(var(--form-input-ps) * 2.5) - var(--form-input-pe));
  --form-checkbox-dimensions: 20px;
  --form-validation-invalid-color: red;
  --form-validation-valid-color: var(--color-key-green-primary);
  --form-validation-valid-position-top: calc(var(--form-input-pt) + 1.9rem);
  --form-validation-valid-position-right-base: 1.25rem;
  --form-validation-valid-position-right: var(--form-validation-valid-position-right-base);
  --finca-search-wrapper-height: auto;
  --checkout-progress-step-background: var(--color-static-background-light-neutral);
  --checkout-progress-step-font-family: var(--font-family-regular);
  --validation-animation-time: 0.4s;
}

.form-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-3);
}

.form-item {
  /* Add keyframes for fading in the validation state */
  /* Define the animation properties for validation icons and border colors */
  /* Special handling for dropdown-counter to prevent flashing */
}
.form-item > div input[placeholder]:not([placeholder=""]) ~ label,
.form-item > div textarea[placeholder]:not([placeholder=""]) ~ label,
.form-item > div input:not(:placeholder-shown) ~ label,
.form-item > div input:focus ~ label {
  top: var(--form-input-pt);
}
.form-item > div:not(.has-checkbox):not(.has-radio):not([class*=-feedback]) {
  width: 100%;
  border: 1px solid var(--form-input-border-color);
  border-radius: var(--number-corner-1);
}
.form-item > div.has-checkbox, .form-item > div.has-radio {
  --form-label-font-size: var(--font-size-default);
  --form-label-active-font-size: var(--font-size-default);
  align-items: center;
  gap: var(--number-space-2);
}
.form-item > div.has-checkbox input, .form-item > div.has-radio input {
  flex: initial;
  width: var(--form-checkbox-dimensions);
  min-width: var(--form-checkbox-dimensions);
  height: var(--form-checkbox-dimensions);
  border-radius: var(--number-corner-1);
}
.form-item > div.has-checkbox input[type=checkbox]::before, .form-item > div.has-checkbox input[type=radio]::before, .form-item > div.has-radio input[type=checkbox]::before, .form-item > div.has-radio input[type=radio]::before {
  width: var(--form-checkbox-dimensions);
  height: var(--form-checkbox-dimensions);
  border-radius: inherit;
}
.form-item > div.has-checkbox input[type=checkbox]::after, .form-item > div.has-checkbox input[type=radio]::after, .form-item > div.has-radio input[type=checkbox]::after, .form-item > div.has-radio input[type=radio]::after {
  display: flex;
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  width: 0.4rem;
  min-width: 0.4rem;
  height: 0.75rem;
  transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
  border-width: 0px 2px 2px 0;
  border-style: solid;
  border-color: white;
  content: "";
  opacity: 0;
}
.form-item > div.has-checkbox input[type=checkbox]:checked::after, .form-item > div.has-checkbox input[type=radio]:checked::after, .form-item > div.has-radio input[type=checkbox]:checked::after, .form-item > div.has-radio input[type=radio]:checked::after {
  opacity: 1;
}
.form-item > div[class*=-feedback] {
  padding: 0px;
  padding-left: var(--number-space-1);
}
.form-item > div label {
  top: calc(var(--form-input-pt) + 0.65rem);
  line-height: 1.6;
}
.form-item__high-contrast {
  --form-input-border-color: var(--color-static-on-background-light-variant-10);
}
.form-item__disabled {
  --form-input-border-color: var(--color-static-background-light-variant-30);
  cursor: not-allowed;
}
.form-item__disabled > div {
  pointer-events: none;
}
.form-item--focused > div:not(.has-checkbox):not(.has-radio):not([class*=-feedback]) {
  border-color: var(--color-key-primary);
}
.form-item--has-dropdown {
  all: unset;
  display: flex;
  position: relative;
  flex-direction: column;
  place-content: center;
  gap: 0.5rem;
}
.form-item--has-dropdown > div label {
  pointer-events: all;
}
.form-item--has-dropdown > div label.dropdown-label {
  width: var(--form-label-width);
  font-size: var(--form-label-font-size);
}
.form-item--has-dropdown > div label.dropdown-label::after {
  position: absolute;
  top: 50%;
  right: 0.25rem;
}
.form-item--has-icon {
  flex: 1 0 0;
  align-items: center;
  gap: var(--number-space-1);
}
.form-item--has-icon > div {
  padding-left: calc(var(--form-input-ps) * 2.5);
}
.form-item--has-icon > div label {
  display: inline-block;
  top: calc(var(--form-input-pt) + 0.5rem);
  left: calc(var(--form-input-ps) * 2.5);
  width: var(--form-label-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-item--button {
  --form-input-pt: 14px;
  --form-input-pb: 14px;
  --form-input-padding: var(--form-input-pt) var(--form-input-pe) var(--form-input-pb) var(--form-input-ps);
  cursor: pointer;
}
.form-item--button.form-item--text-lg {
  font-size: var(--font-size-big);
}
.form-item--button.form-item--text-lg > div label {
  top: calc(var(--form-input-pt) * 1.125 - 2px);
}
.form-item--button .form-item--icon {
  top: calc(var(--form-input-pt) * 1.5 - 3px);
}
.form-item--button > div input {
  cursor: pointer;
}
.form-item--button > div input::placeholder {
  color: var(--form-input-label-color);
}
.form-item--button > div input ~ label {
  opacity: 0;
}
.form-item--icon {
  position: absolute;
  top: calc(var(--form-input-pt) + 0.9rem);
  left: var(--form-input-ps);
}
.form-item--icon path {
  fill: var(--color-static-on-background-light-primary);
}
.form-item--text-lg {
  --form-label-font-size: var(--font-size-big);
}
.form-item.is-valid .valid-feedback, .form-item.is-invalid .invalid-feedback {
  display: block;
}
@keyframes fadeInValidation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.form-item.is-valid > div:first-child, .form-item.is-invalid > div:first-child {
  transition: border-color var(--validation-animation-time) ease-in;
}
.form-item.is-valid > div:first-child::after, .form-item.is-invalid > div:first-child::after {
  animation: fadeInValidation var(--validation-animation-time) ease-in;
}
.form-item.is-valid {
  /* Button type */
  /* No validation icon */
}
.form-item.is-valid > div:first-child {
  border-color: green !important;
}
.form-item.is-valid > div:first-child::after {
  position: absolute;
  top: var(--form-validation-valid-position-top);
  right: var(--form-validation-valid-position-right);
  transform: translateY(-50%);
  content: "✓";
  color: green;
  font-weight: bold;
  font-size: 1rem;
}
.form-item.is-valid.form-item--has-datepicker > div:first-child {
  border-color: var(--form-input-border-color) !important;
}
.form-item.is-valid.form-item--button > div:first-child::after {
  top: 50%;
  padding: 0.25rem;
  background: var(--color-static-background-light-primary);
}
.form-item.is-valid.validation-icon-unset > div:first-child::after {
  content: unset;
}
.form-item.is-invalid {
  /* Button type */
  /* No validation icon */
}
.form-item.is-invalid > div:first-child {
  border-color: red !important;
}
.form-item.is-invalid > div:first-child::after {
  position: absolute;
  top: calc(var(--form-input-pt) + 2rem);
  right: var(--form-validation-valid-position-right);
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  content: url("/images/icon/error.svg");
}
.form-item.is-invalid.form-item--button > div:first-child::after {
  top: 50%;
  background: var(--color-static-background-light-primary);
}
.form-item.is-invalid.validation-icon-unset > div:first-child::after {
  content: unset;
}
.form-item.dropdown-counter.is-valid, .form-item.dropdown-counter.is-invalid {
  /* Use a slightly longer animation to mask any flash effects */
}
.form-item.dropdown-counter.is-valid > div:first-child, .form-item.dropdown-counter.is-invalid > div:first-child {
  transition: border-color var(--validation-animation-time) ease-in;
}
.form-item.dropdown-counter.is-valid > div:first-child::after, .form-item.dropdown-counter.is-invalid > div:first-child::after {
  animation: fadeInValidation var(--validation-animation-time) ease-in;
}
.form-item .valid-feedback,
.form-item .invalid-feedback {
  display: none;
  position: absolute;
  top: 100%;
  font-size: var(--font-size-small);
  line-height: var(--text-line-height-variant-10);
}
.form-item .valid-feedback {
  color: var(--form-validation-valid-color);
}
.form-item .invalid-feedback {
  color: var(--form-validation-invalid-color);
}
.form-item--has-dropdown:not(.form-item--button) {
  --form-validation-valid-position-right: calc(var(--form-validation-valid-position-right-base) * 2);
}
.form-item--has-numfield {
  --form-validation-valid-position-right: calc(var(--form-validation-valid-position-right-base) * 2.5);
}

.has-finca-search-wrapper--overlap {
  position: relative;
}
@media (min-width: 992px) {
  .has-finca-search-wrapper--overlap {
    --finca-search-wrapper-height: 82px;
    margin-top: calc(-1 * var(--finca-search-wrapper-height) * 0.5);
    margin-bottom: calc(var(--finca-search-wrapper-height) * 0.5);
  }
}

.finca-search-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  margin: var(--number-space-4) 0;
  padding: var(--number-space-2);
  gap: var(--number-space-2);
  transform: unset;
  border: 1px solid var(--color-static-background-light-variant-30);
  border-radius: var(--number-corner-2);
  background: var(--color-static-background-light-variant-10);
}
.has-finca-search-wrapper--overlap .finca-search-wrapper {
  box-shadow: var(--shadow-20);
}

.finca-search-wrapper .finca-search--detail-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--number-space-2);
}
.finca-search-wrapper .finca-search--detail-wrapper .form-item:last-of-type {
  grid-column: 1/-1;
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .finca-search-wrapper .finca-search--detail-wrapper .form-item--has-datepicker > div {
    justify-content: center;
    height: 100%;
    padding-right: 0.75rem;
    font-size: 15px;
  }
}
@media (min-width: 992px) {
  .finca-search-wrapper {
    grid-template-columns: 320px auto auto;
    margin: unset;
  }
  .finca-search-wrapper .finca-search--detail-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .finca-search-wrapper .finca-search--detail-wrapper .form-item:last-of-type {
    grid-column: unset;
  }
}

.finca-search--main-wrapper {
  align-self: stretch;
}
.finca-search--main-wrapper .form-item > div {
  place-content: center;
  height: 100%;
}

.newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--number-space-3);
}
.newsletter .form-item {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.75rem var(--number-space-3);
  border: 1px solid var(--color-static-background-light-variant-10);
  border-radius: var(--number-corner-1);
}
.newsletter .form-item label {
  line-height: 160%;
  font-family: var(--font-family-bold);
}
.newsletter .form-item input::placeholder {
  color: var(--color-static-on-background-light-neutral);
}

.list-checkout-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--number-space-3) var(--number-space-5);
}

.checkout-progress-wrapper {
  padding: var(--number-space-3);
  border-radius: var(--number-space-2);
  background-color: var(--color-static-background-light-variant-20);
}
.checkout-progress--item {
  display: flex;
  gap: 1rem;
  font-family: var(--font-family-regular);
}
.checkout-progress--item__active {
  --checkout-progress-step-background: var(--color-key-primary);
  --checkout-progress-step-font-family: var(--font-family-bold);
  font-family: var(--font-family-bold);
}
.checkout-progress--step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--number-corner-8);
  background: var(--checkout-progress-step-background);
  font-family: var(--font-family-bold);
}

/**
 * Focus styles
 * TODO: custom form-item need custom outline
 */
.navigation .search-wrapper input:focus {
  border-color: var(--focus-color);
}