/* Hotelli Jahtihovi: Hotellinx-hakumaskin sovitus etusivulle.
   Lataa tämä tiedosto hlx-searchmask.scoped.css-tiedoston JÄLKEEN. */

#varaushaku {
  --jh-haku-kulta: #d6b25e;
  --jh-haku-sininen: #193a53;
}

#varaushaku hlx-searchmask {
  display: block;
  background: transparent;
  font-family: inherit;
}

/* Poistaa suuren vaalean taustalaatikon ja ylimääräisen ylävälin. */
#varaushaku hlx-searchmask .sm-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Rajaa välit vain hakuriviin ja sen kampanjakoodi/painike-riviin. */
#varaushaku hlx-searchmask .sm-container > .row,
#varaushaku hlx-searchmask .sm-bookingcode-and-book-button-parentcolumn > .row {
  --bs-gutter-x: 1rem;
  row-gap: 1rem;
  align-items: end;
}

#varaushaku hlx-searchmask .sm-item,
#varaushaku hlx-searchmask .sm-book {
  margin-top: 0;
}

#varaushaku hlx-searchmask .sm-container > .row > [class*="col-"] {
  min-width: 0;
}

/* Valkoinen teksti kuuluu hakurivin otsikoihin, ei avautuviin paneeleihin. */
#varaushaku hlx-searchmask .sm-container .sm-item > label {
  margin-bottom: 0.45rem;
  color: #f5f3ed;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Vaaleat kentät erottuvat sinisestä taustasta. */
#varaushaku hlx-searchmask .sm-arrival-departure-column .p-datepicker-input,
#varaushaku hlx-searchmask .sm-bookingcode-column > input,
#varaushaku hlx-searchmask .sm-rooms-and-occupants-column > .occupancy {
  min-height: 3.125rem;
  color: var(--jh-haku-sininen);
  background: #fff;
  border-color: #d7dfe5;
  box-shadow: none;
  font-family: inherit;
  font-size: 1rem;
}

#varaushaku hlx-searchmask .sm-arrival-departure-column .p-datepicker-input {
  min-width: 0;
}

#varaushaku hlx-searchmask .sm-arrival-departure-column .p-datepicker-dropdown {
  min-height: 3.125rem;
  flex-shrink: 0;
}

#varaushaku hlx-searchmask .sm-bookingcode-column > input::placeholder {
  color: #687783;
  opacity: 1;
}

/* Kohdistuu vain Hae-painikkeeseen. */
#varaushaku hlx-searchmask .sm-book > .p-button {
  width: 100%;
  min-height: 3.125rem;
  padding: 0.65rem 1rem;
  color: var(--jh-haku-sininen);
  background: var(--jh-haku-kulta);
  border: 1px solid var(--jh-haku-kulta);
  border-radius: 0.5rem;
  box-shadow: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
}

#varaushaku hlx-searchmask .sm-book > .p-button:not(:disabled):hover {
  color: var(--jh-haku-sininen);
  background: #e5c77e;