@import "variables";
@import "mixins";

.component-search-bar {
  &.translate-top {
    transform: translate(0, -80px);
  }
  .vbmodhorsearchmaindiv,
  .vbdivsearch {
    padding: $space-md $space-md;
    background: $white;
    border-radius: $border-radius;
    width: 100%;
    box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 3px 6px 0px rgba(16, 76, 61, 0.05), 0px 12px 12px 0px rgba(16, 76, 61, 0.04), 0px 26px 16px 0px rgba(16, 76, 61, 0.03),
      0px 47px 19px 0px rgba(16, 76, 61, 0.01), 0px 73px 20px 0px rgba(16, 76, 61, 0);
    form {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      @include bp("lg") {
        flex-direction: row;
        flex-wrap: wrap;
      }
      .input-group {
        display: flex;
        flex-direction: row-reverse;
        @include bp("lg") {
          justify-content: flex-end;
          flex: 1;
        }
        .fa-calendar-alt {
          border: none;
          padding-left: 0;
          background: transparent;
          line-height: 20px;
          &:before {
            content: url(theme-url("/assets/icons/calendar.svg"));
            line-height: 40px;
          }
        }
        input,
        select {
          cursor: pointer;
          box-shadow: none !important;
          border-width: 0px !important;
          @include bp("lg") {
            width: 100% !important;
          }
        }
      }
      input,
      select {
        border-radius: 8px;
      }
      .vbmodhorsearchbookdiv {
        align-self: center;
        input.btn {
          @include button;
          background-color: $col-prm !important;
          border-color: $col-prm !important;
          border-radius: 8px !important;
          margin: 0;
          padding: $btn-pd !important;
          border-width: $btn-bw !important;
          &:hover {
            background-color: transparent !important;
          }
        }
      }
      .vbmodhorsearchrac > .vbmodhorsearchroomdentr > * {
        width: 100%;
      }
      > div {
        align-self: center;
        @include bp("lg") {
          display: flex;
          flex-direction: column;
          width: 100%;
          float: none;
          margin: 0 0 $space-xs;
        }
        @include bp("xl-up") {
          padding-right: 6rem;
          border-right: 1px solid $gray200;
        }
        &:last-child {
          @include bp("xl-up") {
            border-right: none;
            margin-right: 0;
            padding-right: 0;
          }
        }
        label {
          color: $gray300;
        }
        select {
          @include bp("lg") {
            width: 100% !important;
          }
        }
      }
      .vbmodhorsearchcheckindiv,
      .vbmodhorsearchcheckoutdiv {
        @include bp("lg") {
          flex: 1 0 calc(50% - 10px);
          max-width: calc(50% - 10px);
          margin-bottom: 1rem;
        }
      }
    }
  }
}
.vbmodhorsearchrac .vbmodhorsearchroomsel {
  @include bp("lg") {
    margin: 0 0 $space-xs !important;
  }
}
