.search-header-page {
  .wrapper {
    flex-direction: column-reverse;
    row-gap: 25px;

    .search-recomm {
      & .search-recomm-title {
        display: none;
      }

      & .search-recomm-list {
        gap: 14px 8px;

        .search-recomm-list-item {
          padding: 5px 13px;
          font-family: var(--body-font-arena);
          font-size: 0.75rem;
          font-weight: 300;
          border: 0.5px solid var(--bars-unselected);
          border-radius: unset;
          min-width: 68px;
          height: 25px;
          align-items: center;
          justify-content: center;
          display: flex;
          line-height: 1rem;
          @media (width >=1024px) {
            font-size: 0.875rem;
            line-height: 1.25rem;
          }
        }
      }
    }
  }

  & .menu-header {
    .menu-title {
      font-size: 18px;
      margin: 0 auto;
      color: var(--primary-text);
    }
  }

  & .search-form {
    margin-top: 24px;

    & .search-input {
      input {
        font-size: 0.875rem;
        font-weight: var(--fw-700);
        line-height: 1.25rem;
        border-bottom: 0.5px solid #8d8d8d;
        color: var(--tertiary-black);

        @media (width >= 1024px) {
          font-size: 0.75rem;
        }
      }

      .search-icon {
        background: url(/icons/search_icon_blue.svg) transparent no-repeat center / contain;

        &.hide {
          @media (width < 1200px) {
            display: none;
          }
        }
      }
      .clear-btn {
        width: 24px;
        height: 24px;
        background: url(/icons/close-grey.svg) transparent no-repeat center / contain;
        position: absolute;
        right: 0;
        top: 6px;
        border: 0;
        cursor: pointer;
        padding: 0;
        background-size: 24px;
        display: none;

        @media (width >=1024px) {
          right: 48px;
        }

        &.show {
          display: block;
          & + .search-icon {
            display: none;
            @media (width >=1024px) {
              display: block;
            }
          }

          &::after {
            @media (width >=1024px) {
              display: block;
            }
          }
        }

        &::after {
          content: '';
          width: 24px;
          height: 24px;
          position: absolute;
          top: 0;
          right: -24px;
          pointer-events: none;
          background: url(/icons/search-divider.svg) transparent no-repeat center / contain;
          display: none;
        }
      }
    }
    & .search-suggestions {
      box-shadow: 0px 8px 22px 0px rgba(0, 0, 0, 0.05);
      padding: 0px 18px;
      & .suggestion-item {
        margin-bottom: 8px;
        button {
          .highlight-letters {
            font-weight: 500;
            color: var(--primary-black);
          }
        }
      }
    }

  }
}

.panel {
  &.mob-popupsearch {
    background: var(--tertiary-white);
  }
}

@media screen and (width >=768px) {
  .search-header {
    &.block {
      display: flex;
      justify-content: center;
    }

    .search-header-page {
      &.container {
        padding: 22px 0 0 0;
      }

      & .search-form {
        margin-top: 0px;

        & .search-input {
          input {
            color: var(--tertiary-black);
            font-weight: 700;

            &::placeholder {
              color: var(--inactive-content);
              font-weight: 500;
            }
          }
        }

        & .search-suggestions {
          overflow-y: auto;

          & .suggestion-item {
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 1px;
              background: linear-gradient(
                90deg,
                rgba(178, 178, 178, 0) 0%,
                #b2b2b2 50.5%,
                rgba(178, 178, 178, 0) 100%
              );
            }

            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              width: 24px;
              height: 24px;
              background: url(/icons/blue-arrow-top-right.svg) no-repeat
                center;
              background-size: contain;
              transform: translateY(-50%);
              pointer-events: none;
            }

            button {
              color: var(--raisin-black);
              padding: 0.5rem 0 0.5rem 0;
              font-style: normal;
              line-height: 1.25rem;
            }
          }

          & .suggestion-item:last-child::before {
            display: none;
          }
        }
      }

      & .wrapper {
        row-gap: 24px;

        & .search-recomm {
          & .search-recomm-list {
            gap: 16px;
          }
        }
      }
    }
  }
}

.car-filter-menu:has(input.header-search) {
  overflow: hidden;

  .car-panel-header,
  .car-filter {
    position: relative;
    top: -64px;
    z-index: -9;
  }

  .search-header-page {
    .wrapper {
      row-gap: 10px;

      .search-recomm {
        margin-top: 0;
      }

      .search-form {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        margin-top: 0;

        .search-input {
          background-color: var(--secondary-gray-10);

          input {
            color: var(--tertiary-black);
          }

          .back-arrow-btn {
            background: url(/icons/arrow_backward_blue.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: 18px;
            height: 18px;
          }

          .search-icon {
            position: unset;
            background-image: url(/icons/search_icon_blue.svg);
          }
        }

        .search-suggestions {
          @media (width >= 768px) {
            padding-left: 20px;
            padding-right: 12px;
          }
          .suggestion-item {
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 1px;
              background: linear-gradient(
                90deg,
                rgba(178, 178, 178, 0) 0%,
                #b2b2b2 50.5%,
                rgba(178, 178, 178, 0) 100%
              );
            }

            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              width: 24px;
              height: 24px;
              background: url(/icons/blue-arrow-top-right.svg) no-repeat
                center;
              background-size: contain;
              transform: translateY(-50%);
            }
          }

          .suggestion-item:last-child::before {
            display: none;
          }
        }
      }
      .clear-btn{
        position: unset;
        top: 20px;
        right: 0;
        &::after {
          display: none;
        }
      }
    }
  }
}