.c-filters__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--vw) * 10);
  border-radius: calc(var(--vw) * 4);
  padding: calc(var(--vw) * 8) calc(var(--vw) * 12);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--black);
}

.c-filters__button__text {
  font-size: calc(var(--vw) * 16);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: var(--white);
  display: none;

  @media (min-width: 1024px) {
    display: inline;
  }
}

.c-filter__wrapper-buttons {
  z-index: 4;
  top: 0;
  background-color: var(--white);
  transition: all 0.3s ease-in-out;
}

.c-filters__buttons {
  display: flex;
  padding-left: calc(var(--vw) * 20);
  padding-right: calc(var(--vw) * 20);
  padding-bottom: calc(var(--vw) * 16);
  gap: calc(var(--vw) * 16);

  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  overflow: auto;
}

.c-filters__buttons__block {
  display: flex;
  align-items: center;
  gap: calc(var(--vw) * 20);

  .c-select__trigger {
    width: fit-content;
  }

  .c-select__dropdown {
    position: fixed;
  }
}

/* Primer bloque: Filtrar + selects + contador */
.c-filters__buttons__block:first-child {
  gap: calc(var(--vw) * 12);
}

.c-filters__buttons__block:first-child .filter-offers {
  order: 1;
}

.c-filters__buttons__block:first-child .c-filters__count {
  order: 2;
  margin-left: auto;
  border-left: none;
  padding-left: 0;

  @media (max-width: 1023px) {
    display: none;
  }
}

.c-filters__count.c-filters__count--mobile {
  display: inline-flex;
  padding-bottom: calc(var(--vw) * 16);

  @media (min-width: 1024px) {
    display: none;
    padding-bottom: calc(var(--vw) * 0);
  }
}

.c-filters__buttons__block:first-child .c-select {
  order: 3;
  width: 100%;
}

.c-filters__buttons__block:first-child #filter-loading-spinner {
  order: 4;
}

.c-filters__buttons__block:last-child {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: calc(var(--vw) * 12);
}

.c-filters__count {
  padding-left: calc(var(--vw) * 20);
  border-left: 1px solid var(--gray-200);
  height: 100%;
  display: flex;
  align-items: center;
}

.c-filters__count-text {
  white-space: nowrap;
  font-size: calc(var(--vw) * 16);
}

.c-filters__orderby {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: calc(var(--vw) * 8);
}

.c-filters__orderby .c-select {
  width: 100%;
}

.c-filters__orderby-label {
  font-size: calc(var(--vw) * 16);
  white-space: nowrap;
  color: var(--black);
  font-weight: 400;
}

.c-filters__modal {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--white);
  display: block;
  opacity: 0;
  z-index: 9999;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  overflow: auto;
}

.c-filters__modal-content {
  padding-top: calc(var(--vw) * 20);
  padding-left: calc(var(--vw) * 20);
  padding-right: calc(var(--vw) * 20);
  padding-bottom: calc(var(--vw) * 68);
}

.data_filter--sidebar li.is-hidden {
  display: none;
}

.c-filters__modal.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.data_filter.is-visible .data_filter--sidebar {
  box-shadow: 0 0 40px hsla(var(--dark), 0.8);
  z-index: 200;
}

.c-filters__modal-close {
  display: flex;
  justify-content: flex-end;
}

.c-filters__modal-close svg {
  cursor: pointer;
}

.c-filters__modal-title {
  font-weight: 700;
  color: var(--black);
  margin-bottom: calc(var(--vw) * 8);
}

.c-filters__modal-subtitle {
  font-weight: 400;
  font-size: calc(var(--vw) * 16);
  color: var(--black);
  margin-bottom: calc(var(--vw) * 8);
}

.data_filter--close:hover {
  opacity: 1;
}

.c-filters__modal-form__section {
  margin-bottom: calc(var(--vw) * 24);
  padding-bottom: calc(var(--vw) * 24);
  border-bottom: 1px solid var(--gray-200);
}

.c-filters__modal-form__section-title {
  font-weight: 700;
  font-size: calc(var(--vw) * 16);
  color: var(--black);
  margin-bottom: calc(var(--vw) * 8);
}

.c-filters__modal-form__section-options {
  display: flex;
  gap: calc(var(--vw) * 20);
  flex-wrap: wrap;
}

.c-filters__modal-form__section-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: calc(var(--vw) * 20);
  margin-bottom: calc(var(--vw) * 8);
}

.c-filters__modal-form__section-option.is-hidden {
  display: none;
}

.c-filters__modal-form__checkbox,
.c-filters__modal-form__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.c-filters__modal-form__label-checkbox,
.c-filters__modal-form__label-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.c-filters__modal-form__label-text {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-100);
  border-radius: 2px;
  font-weight: 600;
  color: var(--gray-600);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.c-filters__modal-form__label-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--vw) * 24);
  padding: calc(var(--vw) * 4);
  border: 1px solid var(--gray-600);
  border-radius: calc(var(--vw) * 4);
  font-size: calc(var(--vw) * 14);
  font-weight: 400;
  color: var(--gray-600);
  background-color: transparent;
}

.c-filters__modal-form__checkbox:checked+.c-filters__modal-form__label-checkbox .c-filters__modal-form__label-text,
.c-filters__modal-form__radio:checked+.c-filters__modal-form__label-radio .c-filters__modal-form__label-text {
  background-color: var(--white);
  border-color: var(--secondary-color);
  color: var(--black);
}

.c-filters__modal-buttons {
  display: flex;
  justify-content: center;
  gap: calc(var(--vw) * 8);
  position: fixed;
  bottom: 0;
  left: 0;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--vw) * 16);
  padding-bottom: calc(var(--vw) * 16);
  background-color: var(--white);
  > button:first-child {
    border: 1px solid var(--black);
  }
}

.c-filters__results-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--vw) * 8);
  margin-top: calc(var(--vw) * 24);
}

@media (min-width: 1024px) {
  .c-filters__buttons {
    flex-direction: row;
    padding-bottom: calc(var(--vw) * 24);
    overflow: initial;
    justify-content: space-between;
  }

  .c-filter__wrapper-buttons {
    position: -webkit-sticky;
    position: sticky;
  }

  .c-filters__buttons__block:first-child {
    flex-wrap: nowrap;
  }

  .c-filters__buttons__block:first-child .filter-offers,
  .c-filters__buttons__block:first-child .c-filters__count,
  .c-filters__buttons__block:first-child .c-select {
    order: initial;
    flex: initial;
    width: auto;
    margin-left: 0;
  }

  .c-filters__buttons__block:first-child #filter-loading-spinner {
    order: initial;
    flex: initial;
  }

  .c-filters__count {
    border-left: 1px solid var(--gray-200);
    padding-left: calc(var(--vw) * 20);
  }

  .c-filters__buttons__block:last-child {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .c-filters__orderby {
    flex-direction: row;
    align-items: center;
    width: auto;
    display: flex;
  }

  .c-filters__orderby .c-select {
    width: auto;
  }
}



#delivery-trigger {
  anchor-name: --delivery-selector;
}

#car-type-trigger {
  anchor-name: --car-type-selector;
}

#km-trigger {
  anchor-name: --km-selector;
}

#sort-trigger {
  anchor-name: --sort-selector;
}

#delivery-options {
  position: fixed;
  position-anchor: --delivery-selector;
  top: anchor(--delivery-selector bottom);
  left: anchor(--delivery-selector left);
  width: anchor-size(--delivery-selector width);
  margin-top: 4px;
}

#car-type-options {
  position: fixed;
  position-anchor: --car-type-selector;
  top: anchor(--car-type-selector bottom);
  left: anchor(--car-type-selector left);
  width: anchor-size(--car-type-selector width);
  margin-top: 4px;
}

#km-options {
  position: fixed;
  position-anchor: --km-selector;
  top: anchor(--km-selector bottom);
  left: anchor(--km-selector left);
  width: anchor-size(--km-selector width);
  margin-top: 4px;
}

#sort-options {
  position: fixed;
  position-anchor: --sort-selector;
  top: anchor(--sort-selector bottom);
  left: anchor(--sort-selector left);
  width: anchor-size(--sort-selector width);
  margin-top: 4px;
}

#moto-type-trigger {
  anchor-name: --moto-type-selector;
}

#moto-km-trigger {
  anchor-name: --moto-km-selector;
}

#moto-sort-trigger {
  anchor-name: --moto-sort-selector;
}

#moto-type-options {
  position: fixed;
  position-anchor: --moto-type-selector;
  top: anchor(--moto-type-selector bottom);
  left: anchor(--moto-type-selector left);
  width: anchor-size(--moto-type-selector width);
  margin-top: 4px;
}

#moto-km-options {
  position: fixed;
  position-anchor: --moto-km-selector;
  top: anchor(--moto-km-selector bottom);
  left: anchor(--moto-km-selector left);
  width: anchor-size(--moto-km-selector width);
  margin-top: 4px;
}

#moto-sort-options {
  position: fixed;
  position-anchor: --moto-sort-selector;
  top: anchor(--moto-sort-selector bottom);
  left: anchor(--moto-sort-selector left);
  width: anchor-size(--moto-sort-selector width);
  margin-top: 4px;
}