/* Compact, translucent quick search inspired by Stay Tamarindo. */
.hero-tagline {
  max-width: 62.5rem;
  font-family: var(--siteFont2), serif;
  font-size: 2rem;
  font-weight: var(--wHeavy);
}
.hero-quick-search-wrap { background: hsla(var(--white), 50%); font-family: var(--bodyFont); font-size: 1rem; }
.hero-quick-search .row { padding: 0 0.9375rem; }
.hero-quick-search [class^=col] { padding: 0.5rem; }

.hero-quick-search .input-wrap,
.hero-quick-search .select-wrap,
.qs-dates-wrap { background: hsla(var(--white), 75%); }

.hero-quick-search .input-wrap input[type=text],
.hero-quick-search .bootstrap-select .dropdown-toggle {
  background: transparent;
  font-family: var(--bodyFont);
  font-size: 1rem;
  font-weight: var(--wRegular);
  line-height: 1.5;
}

.hero-quick-search .bootstrap-select .dropdown-toggle { padding: 1rem; }
.hero-quick-search .bootstrap-select .dropdown-toggle,
.hero-quick-search .bootstrap-select .dropdown-toggle .filter-option,
.hero-quick-search .bootstrap-select .dropdown-toggle .filter-option-inner,
.hero-quick-search .bootstrap-select .dropdown-toggle .filter-option-inner-inner { color: hsl(var(--siteColor2)); }

/* Stay Tamarindo uses a simple caret and no field or calendar icons. */
.hero-quick-search .bootstrap-select .dropdown-toggle:before,
.qs-dates-arrival:before,
.qs-dates-departure:before,
.qs-dates-departure:after { content: none; }

.hero-quick-search .bootstrap-select .dropdown-toggle:after {
  display: inline-block;
  flex-shrink: 1;
  width: 0.625rem;
  height: 0.25rem;
  margin: 0 0 0 0.255em;
  vertical-align: 0.255em;
  background: none;
  border-width: 0.3em 0.3em 0;
  border-style: solid solid none;
  border-color: currentColor transparent;
  border-radius: 0;
  color: hsl(var(--siteColor1));
  transform: none;
}

.hero-quick-search .bootstrap-select .dropdown-toggle[aria-expanded="true"]:after { transform: none; }
body .hero-quick-search .bootstrap-select .dropdown-item { padding: 0.5rem 1.5rem; }
body .hero-quick-search .bootstrap-select.show-tick .dropdown-menu li a span.text {
  margin-right: 2rem;
  white-space: nowrap;
  word-break: normal;
  hyphens: manual;
}

.qs-dates-wrap { padding: 1.25rem 0 1.25rem 1rem; }
.qs-dates-arrival,
.qs-dates-departure {
  height: auto;
  position: static;
  margin: 0 0.5rem;
  padding: 0;
  color: hsl(var(--siteColor2));
  font-size: 1rem;
  font-weight: 400;
}

.datepicker-reset-inline { display: block !important; }
.datepicker-reset-inline .icon { color: hsl(var(--lightGray)); }
.datepicker-reset-inline.active .icon { color: hsla(var(--siteColor2), 50%); cursor: pointer; }
.qs-datepicker-wrap { width: 100%; max-width: 30rem; }

.hero-quick-search button[type=submit] {
  background: hsla(var(--white), 75%) !important;
  color: hsl(var(--siteColor2));
  font-family: var(--bodyFont);
  font-style: normal;
  font-weight: var(--wMedium);
  outline: none !important;
  text-transform: capitalize !important;
  transform: none !important;
}

.hero-quick-search button[type=submit]:hover,
.hero-quick-search button[type=submit]:focus,
.hero-quick-search button[type=submit]:active {
  background: hsla(var(--white), 90%) !important;
  color: hsl(var(--siteColor2));
  text-transform: capitalize !important;
  transform: none !important;
}

@media (min-width: 480px) {
  .qs-datepicker-wrap { max-width: 100%; }
}

@media (min-width: 1025px) {
  .hero-tagline {
    bottom: calc(35% + 3.5rem);
    transform: translateX(-50%);
    font-size: 2.875rem;
  }

  .hero-quick-search-wrap {
    width: calc(100% - 2rem);
    max-width: 58rem;
    display: block;
    top: auto;
    right: 0;
    bottom: 35%;
    left: 0;
    margin: auto;
    padding: 0;
    background: transparent;
    border-radius: 1rem;
    transform: translateY(35%);
  }

  .hero-quick-search-wrap.int {
    top: 50%;
    bottom: auto;
    margin-top: calc(2 / 3 * var(--headerBarHeight));
    transform: translateY(-50%);
  }

  .hero-quick-search { max-width: none; }
  .hero-quick-search .row { margin: 0; padding: 0; background: transparent; border-radius: 0; }
  .hero-quick-search [class^=col] { margin: 0; padding: 0; }
  .hero-quick-search .col-dates { min-width: 18rem; }

  .hero-quick-search .input-wrap,
  .hero-quick-search .select-wrap,
  .hero-quick-search button[type=submit] { height: 3.5rem; }

  .hero-quick-search .bootstrap-select .dropdown-toggle,
  .qs-dates-group {
    font-size: 1.0625rem;
    font-weight: var(--wMedium);
    text-transform: capitalize;
  }

  .hero-quick-search .bootstrap-select .dropdown-toggle { padding: 1rem; }
  .hero-quick-search .qs-dates-wrap { padding: 0 2.25rem 0 1rem; }

  .hero-quick-search .input-wrap:after,
  .hero-quick-search .select-wrap:after,
  .hero-quick-search .col-submit:after {
    content: "";
    height: 60%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-left: 0.0625rem solid hsla(var(--black), 25%);
    z-index: 2;
  }
}