#primary {
  margin-bottom: 48px;
}

.vehicle-header {
  background-color: var(--bs-secondary-light);
  padding: 48px 32px;
  margin-bottom: 48px;
}

.vehicle-header .header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1000px;
  margin-inline: auto;
}

.vehicle-header-info h1 {
  color: var(--bs-primary)
}

.vehicle-filters__container {
  display: flex;
  gap: 80px;
}

.vehicle-filters__section {
  min-width: 300px;
  height: fit-content;
  background-color: var(--bs-white);
  border: 1px solid #D9D9D9;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 20px 24px;
}

#vehicle-filters {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

#vehicle-filters .filter-group select {
  width: 100%;
}

.filters__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}


.filters__heading a {
  color: var(--bs-complementary-primary);
}

.filters__heading .close-filters {
  display: none;
  width: 44px;
  height: 44px;
  background-color: var(--bs-white);
  color: var(--bs-complementary-primary);
  border: 1px solid var(--bs-complementary-primary);
  font-family: sans-serif;
  font-weight: 400;
  border-radius: 4px;
}

.toggle-filters-button {
  display: none;
  background-color: var(--bs-white);
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  font-family: sans-serif;
  font-weight: 400;
  border-radius: 4px;
}

.sentinel {
  display: none;
}

@media screen and (max-width: 1023px) {
  .vehicle-header .header__container {
    flex-direction: column;
    text-align: center;
  }

  .vehicle-header-info p {
    max-width: 500px;
    margin-inline: auto;
  }

  .vehicle-filters__container {
    flex-direction: column;
    gap: 40px;
  }

  .vehicle-filters__section {
    position: fixed;
    translate: -100% 0;
    inset: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: translate 0.25s ease-in-out;
  }

  .filters__heading .close-filters {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .vehicle-filters__section.open {
    translate: 0 0;
  }

  .toggle-filters-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
  }

  .toggle-filters-button.is-sticky {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transition: border-top-left-radius ease 200ms, border-top-right-radius ease 200ms
  }

  /* 
    The translate is necessary so that the gap of the container does not affect the trigger of the filters button
    and that the intersection observer detects the element where it should apply the sticky.
   */
  .sentinel {
    display: block;
    transform: translateY(var(--gap));
  }

}



/* Loop vehicles */
.vehicle-listings__container {
  --gap: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Header count and sort */
.vehicle-listings__container .vehicle-listings__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-listing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
}

.pagination-arrows {
  display: flex;
  align-items: center;
  gap: 49px;
}

.pagination-arrows span.disabled>svg>path {
  fill: #666666 !important;
  pointer-events: none;
}

/* @media screen and (max-width: 1280px) {
  .vehicle-listing {
    grid-template-columns: repeat(2, 1fr);
  }
} */


@media screen and (max-width: 1023px) {

  .pagination-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .pagination-arrows {
    margin-top: 20px;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 640px) {
  .vehicle-listing {
    grid-template-columns: 1fr;
  }
}


/* No vehicles found styles */
.vehicle-listings__container:has(.no-vehicles-found) {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.no-vehicles-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.no-vehicles-found p {
  text-align: center;
}