.car-filter {
  --filter-items-gap: var(--space-48);
  width: 100%;
  max-width: 1520px;

  background: var(--filter-gradient);

  position: relative;
  border-radius: var(--border-radius-2);

  padding: var(--filter-items-gap);
  margin-top: var(--filter-margin-top);
}

.car-filter-gradient-wrapper {
  overflow: hidden;
  border-radius: var(--border-radius-2);
  z-index: var(--z-index-minus-1);
}

.car-filter-gradient-container {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  overflow: hidden;
  border-image-source: var(--filter-border-gradient);
}

.car-filter .input.car-search {
  width: 100%;

  position: relative;
  z-index: var(--z-index-10);
  padding-bottom: var(--space-16);
}

.car-filter .input.car-search::placeholder {
  text-transform: uppercase;
}

.car-filter .headline-5 {
  max-width: 100%;

  text-align: center;

  margin-top: var(--filter-items-gap);
}

.car-filter .advanced-button .checkmark {
  width: 30px;
  height: 30px;
  stroke-width: 0;

  position: absolute;
  right: 2px;
  top: calc(50% - 15px);

  display: block;

  transform: rotate(90deg);
  fill: var(--white);
  transition: transform 0.3s ease;
}

.car-filter .advanced-button .checkmark.active {
  transform: rotate(270deg);
}

.car-filter .advanced-button {
  padding-right: 38px;
}

.car-filter .buttons-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-60);

  margin-top: var(--filter-items-gap);
  z-index: 1;
}

.filter-container {
  display: grid;
  grid-template-columns: repeat(4, 267px);
  grid-template-rows: auto;
  justify-content: space-between;
  align-items: center;
  row-gap: var(--space-48);
  column-gap: var(--space-12);

  margin-top: var(--filter-items-gap);
}

.filter-container.bottom {
  display: grid;
  max-height: 0;
  padding-top: 0;
  margin: 0;

  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.filter-container.bottom.active {
  max-height: 359px;

  border-top: var(--border-1) solid var(--white);

  padding-top: var(--filter-items-gap);
  margin-top: var(--filter-items-gap);
}

.car-filter .custom-select span:not(.custom-option) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 1620px) {
  .filter-container {
    grid-template-columns: repeat(4, 248px);
  }
}

@media (max-width: 1440px) {
  .filter-container {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    column-gap: var(--space-24);
  }
}

@media (max-width: 1240px) {
  .car-filter {
    padding: var(--space-24);
  }

  .filter-container {
    column-gap: var(--space-24);
  }

  .filter-container.bottom.active {
    max-height: 343px;
  }

  .car-filter .custom-select .value {
    width: 100%;
  }

  .car-filter .custom-select-wrapper {
    padding-left: var(--space-8);
  }
}

@media (max-width: 1140px) {
  .filter-container {
    column-gap: var(--space-16);
  }
}

@media (max-width: 1023px) {
 

  .car-filter {
    padding: var(--space-48) var(--space-24);
  }

  

 

  .filter-container.bottom.active {
    max-height: 533px;
  }
  .car-filter .custom-select {
    max-width: 100%;
  }

  .filter-container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-140);
    row-gap: var(--space-36);
  }

  /* .car-filter .headline-5 {
    margin-top: var(--space-40);
  } */

  .car-filter .custom-select-wrapper {
    padding-left: var(--space-20);
  }

  /* .filter-container.top {
    margin-top: var(--space-40);
  } */

  .range .input {
    width: 42%;
  }

  /* .car-filter .buttons-container .button.stroke {
    padding: var(--space-16) var(--space-64);
  } */
}

@media (max-width: 767px) {
  .filter-container {
    column-gap: var(--space-60);
  }
}

@media (max-width: 680px) {
  .car-filter {
    --filter-items-gap: var(--space-40);
  }
 
  .filter-container.bottom.active {
    max-height: 970px;
  }

  .car-filter {
    padding: var(--space-24) var(--space-16);
    margin-top: var(--space-32);
  }

  .filter-container {
    grid-template-columns: 1fr;
    row-gap: var(--space-24);
  }

 


  .car-filter .buttons-container {
    width: 100%;
   
    gap: var(--space-24);
    

    flex-direction: column;
  }

  .car-filter .buttons-container .button.stroke {
    width: 100%;
  }
}