.filters__trigger {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--secondary);
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  font-weight: 700;
  padding: var(--wp--preset--spacing--30);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: var(--wp--preset--border-radius--sm, 4px);

  &:hover {
    background: var(--wp--preset--color--accent-variant);
    color: var(--wp--preset--color--base);
  }

  @media screen and (min-width: 782px) {
    display: none;
  }
}

.filters__dialog {
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  justify-content: flex-end;
  overflow: hidden; /* Prevent horizontal scroll during animation */
  transition: opacity 0.3s ease-in-out, display 0.3s ease-in-out allow-discrete, overlay 0.3s ease-in-out allow-discrete;

  @media screen and (min-width: 782px) {
    display: block;
    position: static;
    background: transparent;
    height: auto;
    overflow: visible;
    max-height: none;
  }
}

.filters__dialog-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 90%;
  background: var(--wp--preset--color--secondary);
  transition: transform 0.3s ease-out;

  @media screen and (max-width: 781px) {
    transform: translateX(100%);
  }

  @media screen and (min-width: 782px) {
    height: auto;
    background: transparent;
    width: auto;
    transform: none;
  }
}

.filters__dialog[open] .filters__dialog-inner {
  transform: translateX(0);
}

.filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--50);

  @media screen and (min-width: 782px) {
    display: none;
  }
}

.filters__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.filters__close {
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--secondary);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--wp--preset--color--base);
  border: none;
  box-shadow: var(--wp--preset--shadow--subtle);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, margin 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.filters__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--wp--preset--spacing--50);

  @media screen and (min-width: 782px) {
    padding: 0;
    overflow: visible;
  }
}

.filters__footer {
  padding: var(--wp--preset--spacing--50);

  @media screen and (min-width: 782px) {
    display: none;
  }
}

.filters__reset {
  background: transparent !important;
  color: inherit !important;
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--30);
  border: none;
  border: 2px solid currentColor !important;

  &:hover {
    border-color: var(--wp--preset--color--accent-variant) !important;
  }
}

.filters__apply {
  width: 100%;
}

/* Dialog open state on mobile */
.filters__dialog[open] {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100000;
}

/* Backdrop */
.filters__dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: all 0.3s ease-in-out;
  display: block !important;
}

.filters__dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

@starting-style {
  .filters__dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
  }

  .filters__dialog[open] .filters__dialog-inner {
    transform: translateX(100%);
  }
}

body.has-modal-open {
  overflow: hidden;
}

/** FacetWP Styles **/
.facetwp-facet-result_count {
  display: contents;
}

.facetwp-facet[data-name^='label_'] {
  .facetwp-checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--20);
    background-image: unset;
    position: relative;
    margin-bottom: var(--wp--preset--spacing--50);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    margin: var(--wp--preset--spacing--20) 0;

    &:before {
      width: 51px;
      height: 31px;
      border-radius: 31px;
      background: #EFEFEF;
      border: none;
    }

    &:after {
      content: '';
      width: 27px;
      height: 27px;
      border-radius: 50%;
      background: var(--wp--preset--color--base);
      position: absolute;
      top: 2px;
      right: 22px;
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.06);
      transition: transform 0.3s ease-in-out;
    }

    &.checked {
      &:before {
        background: var(--wp--preset--color--primary);
      }

      &:after {
        transform: translateX(20px);
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

body .facetwp-facet {
  margin-bottom: 0;

  &.is-loading {
    opacity: 1;
  }

  .facetwp-input-wrap {
    width: 100%;
  }

  .facetwp-checkbox {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    background-image: unset;
    padding-left: 0;
    margin-bottom: var(--wp--preset--spacing--20);
    position: relative;

    &::before,
    &::after {
      content: '';
      font-family: "icomoon";
      align-items: center;
      justify-content: center;
      display: flex;
      width: 32px;
      min-width: 32px;
      height: 32px;
      background-color: var(--wp--preset--color--base);
      border-radius: var(--wp--preset--border-radius--sm);
      border: 1px solid var(--wp--preset--color--midtone);
      transition: all 0.3s ease-in-out;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--wp--preset--color--base);
      -webkit-mask: var(--wp--custom--icon--icomoon--check) center / 24px no-repeat;
      mask: var(--wp--custom--icon--icomoon--check) center / 24px no-repeat;
    }

    &.checked {
      background-image: unset;

      &::before {
        background-color: var(--wp--preset--color--accent-variant);
        border-color: var(--wp--preset--color--accent-variant);
      }
    }

    .facetwp-counter {
      display: none;
    }
  }

  &.facetwp-type-search,
  &.facetwp-type-proximity {
    color: var(--wp--preset--color--base);
    margin-bottom: var(--wp--preset--spacing--20);

    input,
    select {
      background: var(--wp--preset--color--base);
      color: var(--wp--preset--color--contrast);
      border: none;
      height: 50px;
      padding: 0 var(--wp--preset--spacing--30);
      padding-right: 40px;
      width: 100%;
      font-size: var(--wp--preset--font-size--normal);
      border-radius: var(--wp--preset--border-radius--sm);

      &::placeholder {
        color: var(--wp--preset--color--midtone);
      }

      option {
        color: var(--wp--preset--color--contrast);
      }
    }

    input.facetwp-location {
      min-width: unset;
    }

    select.facetwp-radius {
      padding: 0 var(--wp--preset--spacing--30);
      width: 150px;
    }

    select {
      background: url(../../assets/svg/chevron-down.svg) no-repeat right var(--wp--preset--spacing--20) center;
      background-size: 24px;
      appearance: none;
    }

    .facetwp-icon {
      opacity: 1;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--wp--preset--color--primary);
      font-size: 24px;
      width: auto;
      right: var(--wp--preset--spacing--30);

      &::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background: transparent;
        background-color: var(--wp--preset--color--secondary);
        -webkit-mask: var(--wp--custom--icon--icomoon--search) center / contain no-repeat;
        mask: var(--wp--custom--icon--icomoon--search) center / contain no-repeat;
      }

      &.f-loading::before {
        -webkit-mask: var(--wp--custom--icon--icomoon--spinner) center / contain no-repeat;
        mask: var(--wp--custom--icon--icomoon--spinner) center / contain no-repeat;
      }
    }
  }

  .facetwp-toggle {
    color: var(--wp--preset--color--accent);
    text-decoration: underline;
    padding: 6px 0;
    display: inline-block;
    margin-bottom: var(--wp--preset--spacing--20);
    &:hover {
      color: var(--wp--preset--color--accent-variant);
    }
    &.facetwp-hidden {
      display: none;
    }
  }

  &.facetwp-type-proximity {
    display: flex;
    gap: var(--wp--preset--spacing--40);

    .location-results {
      color: var(--wp--preset--color--contrast);
      z-index: 9;
    }
  }

  &.facetwp-type-reset {
    display: flex;

    button {
      background: var(--wp--preset--color--accent);
      color: var(--wp--preset--color--secondary);
      border: none;
      border-radius: var(--wp--preset--border-radius--sm);
      min-height: 20px;
      font-size: var(--wp--preset--font-size--body-sm);
      padding: 4px 8px;
      transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
      cursor: pointer;

      &:hover {
        background: var(--wp--preset--color--accent-variant);
        color: var(--wp--preset--color--base);
      }
    }

    &.facetwp-hidden {
      display: none;
    }
  }

  &.facetwp-type-slider {
    position: relative;

    .facetwp-slider-wrap {
      padding: 5px 1px 12px 7px;
    }

    .noUi-target {
      background: #EFEFEF;
      border: none;
    }

    .noUi-connect {
      background: var(--wp--preset--color--primary);
    }

    .noUi-handle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--wp--preset--color--base);
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.06);
    }

    .facetwp-slider-wrap {
      padding-bottom: var(--wp--preset--spacing--40);
    }

    .facetwp-slider-reset {
      position: absolute;
      right: 0;
      bottom: var(--wp--preset--spacing--20);
      background-color: transparent;
      font-size: var(--wp--preset--font-size--normal);
      border: 2px solid var(--wp--preset--color--base);
      color: var(--wp--preset--color--base);
      border-radius: 0;
      box-shadow: none;
      border-radius: var(--wp--preset--border-radius--lg);

      &:hover {
        background-color: var(--wp--preset--color--secondary);
        border-color: var(--wp--preset--color--accent-variant);
        color: var(--wp--preset--color--base);
      }
    }

    .facetwp-slider-label {
      margin-bottom: var(--wp--preset--spacing--20);
      display: inline-block;
    }
  }

  &.facetwp-type-pager:has(.facetwp-load-more) {
    display: flex;
    justify-content: center;
    align-items: center;

    .facetwp-load-more {
      background-color: var(--wp--preset--color--accent);
      border-radius: var(--wp--preset--border-radius--lg);
      border-width: 0;
      color: var(--wp--preset--color--secondary);
      font-family: var(--wp--custom--typography--font-family--heading);
      font-size: inherit;
      font-style: inherit;
      font-weight: 700;
      letter-spacing: inherit;
      line-height: 110%;
      padding-top: 0;
      padding-right: var(--wp--preset--spacing--50);
      padding-bottom: 0;
      padding-left: var(--wp--preset--spacing--50);
      text-decoration: none;
      text-transform: inherit;
      min-height: 58px;
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
      cursor: pointer;

      &:hover {
        background-color: var(--wp--preset--color--accent-variant);
        color: var(--wp--preset--color--base);
      }
    }

    &+.facetwp-type-pager {
      text-align: center;
      font-size: var(--wp--preset--font-size--body-sm);
      margin-top: var(--wp--preset--spacing--30);
    }
  }
}

body .facetwp-selections {
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    padding: 0;
    margin: 0;
  }

  li {
    display: contents;
  }

  .facetwp-selection-label {
    display: none
  }

  .facetwp-selection-value {
    background-image: unset;
    padding: 0 var(--wp--preset--spacing--20);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--secondary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wp--preset--border-radius--sm);
    padding: 4px 12px;
    font-size: var(--wp--preset--font-size--body-sm);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

    &:hover {
      background: color-mix(in srgb, var(--wp--preset--color--base) 80%, var(--wp--preset--color--secondary));
    }

    &::after {
      content: "+";
      font-size: var(--wp--preset--font-size--medium);
      margin-left: 8px;
      transform: rotate(45deg);
    }
  }
}

.facet-collapsible {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.50);

  .facet-toggle-title {
    width: 100%;
    padding: var(--wp--preset--spacing--40) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;

    &:after {
      content: "+";
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
      transform: rotate(0deg);
      color: var(--wp--preset--color--accent);
      font-weight: 400;
      font-size: var(--wp--preset--font-size--lg);
    }

    &:hover {
      &::after {
        color: var(--wp--preset--color--accent-variant);
      }
    }
  }

  .facetwp-facet {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    & > :last-child {
      margin-bottom: var(--wp--preset--spacing--40);
    }
  }

  &.facet-collapsible--open {
    .facet-toggle-title {
      &:after {
        transform: rotate(45deg);
      }
    }
  }
}

.wp-block-query .facetwp-no-results {
  display: none;
}