@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.FindAHomeWrapper {
  background-color: $bgColor;

  .FilterAndResultWrap {
    .overlayBG {
      backdrop-filter: blur(16px);
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 50%, #000000d4 100%);
      display: none;
      z-index: 999;
      transition: 0.3s ease;

      &.active {
        display: block;
      }
    }

    .searchLeftWrapper {
      display: none;
      position: relative;
      right: -100%;
      transition: transform 0.3s ease;

      &.active {
        display: grid;
        position: fixed;
        top: 20px;
        right: 0px;
        margin: 0px 15px;
        width: calc(100% - 30px);
        max-width: 520px;
        transition: transform 0.3s ease;
        // transform: translate(-50%, 0);
        z-index: 999;
      }

      .fitlerTitle {
        display: flex;

        h5 {
          color: $blackColor;
          margin: 0;
        }
      }

      .filterBodyWrap {
        height: calc(100dvh - 130px);
        overflow-y: auto;

        @media screen and (min-width: $md) {
          height: calc(100dvh - 150px);
        }
      }
    }

    .findHomeCardWrapper {
      .filterBtn {
        background-color: $primaryColor;
      }
    }
  }

  .bookingSearch {
    background-color: $whiteColor;
    padding: 10px 10px 10px 25px;
    width: 100%;
    border-radius: 60px;

    @media (min-width: $sm) {
      padding: 10px 10px 10px 25px;
      width: auto;
    }

    @media (min-width: $lg) {
      max-width: 500px;
      padding: 10px 10px 10px 30px;
    }

    @media (min-width: $xxl) {
      max-width: 600px;
    }

    .inputsBox {
      .inputWrapper {
        width: 100%;
        margin-right: 15px;
        padding-right: 15px;
        border-right: 1px solid $secondaryColor;

        @media (min-width: $sm) {
          border-bottom: 0px;
          margin-bottom: 0px;
          padding-bottom: 0px;
        }

        &:last-child {
          margin: 0;
          padding: 0;
          border: none;
        }

        label {
          line-height: 1.5;
          color: $primaryColor;
          display: block;
          font-size: $fs14;

          @media (min-width: $sm) {
            font-size: $fs16;
          }
        }

        input {
          line-height: 1;
          background: transparent;
          border: none;
          outline: none;
          color: $secondaryColor;
          width: 100%;
          font-size: $fs14 !important;

          &::placeholder {
            color: $secondaryColor;
          }

          @media (min-width: $sm) {
            font-size: $fs16 !important;
          }
        }

        input[type="date"] {
          width: auto;
          position: relative;

          &::-webkit-calendar-picker-indicator {
            background: transparent;
            bottom: 0;
            color: transparent;
            cursor: pointer;
            height: auto;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: auto;
          }
        }
      }
    }

    .searchBtn {
      display: none !important;

      @media screen and (min-width: $sm) {
        display: flex !important;
      }
    }

    &.srollActive {
      padding: 12px !important;
      border-radius: 16px !important;
      align-items: unset;
      gap: 10px;

      .inputsBox {
        flex-direction: column;
      }

      .inputWrapper {
        border-bottom: 1px solid $secondaryColor;
        padding-bottom: 10px;
        margin-bottom: 10px;
        width: 100% !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        border-right: 0 !important;

        &:first-child {
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid $secondaryColor;
        }
      }

      .searchBtn {
        height: auto;
        border-radius: 12px;
        transition: none !important;
        display: flex !important;
      }
    }

    .searchBtn {
      background-color: $secondaryColor;
      border: none;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: 0.3s ease-in-out;

      .icon {
        background-color: $whiteColor;
      }

      &:hover {
        background-color: #006a7180;
      }
    }
  }
}