.filter-controls {
  background: var(--bs-secondary-bg);
  position: sticky;
  inset-block-start: calc(var(--nav-height));
  height: calc(var(--gap) / 2 + var(--nav-height));
  z-index: 1022;
  padding-block-start: calc(var(--gap) / 1);
  padding-block-end: calc(var(--gap) / 2);
  display: flex;
  gap: min(1rem, var(--gap) / 2);
  flex-wrap: nowrap;
}

.filter-menu-button {
  width: calc(max(min(25vw, 32rem), 16rem) - var(--gap));
}

.voice-search-container {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 100%;
}

.filter-results-container {
  width: 100%;
  justify-items: center;
}

.filter-panel.collapse.show:has(.collapsing) {
  overflow: hidden;
}

.filter-panel .actor-name-search {
  width: 100%;
  margin-block-start: 1.3rem;
}

@media (width >= 992px) {
  .voice-search-container .filter-panel.collapsing {
    width: 0;
    height: fit-content;
    overflow: hidden;
    transition-property: width, height;
    transition-duration: calc(var(--speed) * 2);
  }

  .voice-search-container {
    .filter-panel.collapse.show,
    .filter-panel.collapse {
      transition-property: width, height;
      transition-duration: calc(var(--speed) * 2);
    }
  }

  .voice-search-container .filter-panel.collapsing .filter-option-items {
    overflow: hidden;
    min-width: min(23vw, 30rem);
  }

  .filter-results-container {
    grid-column: 2 / 4;
  }

  .voice-search-container:has(.filter-panel.collapse:not(.show))
    .filter-results-container {
    grid-column: 1 / 4;
  }

  .voice-search-container:has(.filter-panel.collapse.show)
    .filter-results-container {
    grid-column: 2 / 4;
    padding-inline-start: var(--gap);
  }

  .voice-search-container:has(.filter-panel.collapsing) .filter-panel > * {
    min-width: max(min(23vw, 30rem), 14rem);
  }

  .voice-search-container:has(.filter-panel.collapse.show) .filter-panel > * {
    min-width: max(min(23vw, 30rem), 14rem);
  }
}

@media (width <= 992px) {
  .filter-panel {
    outline: calc(var(--gap) / 2) solid var(--bs-secondary-bg);
  }
  .filter-controls {
    z-index: 1025;
    margin-block-start: -3rem !important;
  }
}

.filter-panel {
  width: max(min(24vw, 31rem), 15rem);
  grid-column: 1 / 2;
  position: sticky;
  inset-block-start: calc(var(--nav-height) * 2 + (var(--gap) / 2));
  height: fit-content;
  max-height: calc(100dvh - (var(--nav-height) * 2 + 1.5rem));
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  scrollbar-color: currentColor transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  z-index: 1021;
  background: var(--bs-secondary-bg);
}

body:has(.player-elements.show) .filter-panel {
  max-height: calc(
    100dvh - (var(--nav-height) * 2) - (var(--player-height) + 1.5rem)
  );
}

.filter-options > div .collapsing {
  scrollbar-width: none;
}

.filter-options {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-end: 3ch;
  text-align: start;
  border-bottom: max(var(--border) * 0.6666, 0.66667px) solid transparent !important;
}

.filter-options::after {
  content: "▼";
  transform-origin: center;
  transform: rotate(0deg);
  color: currentColor;
  border: solid transparent;
  position: absolute;
  right: 1ch;
  margin-block-start: 0px;
  scale: 100% 60%;
  opacity: 1;
  transition-property: transform, opacity, margin;
  transition-duration: calc(var(--speed) / 1);
  transition-timing-function: var(--ease-out);
  font-size: 0.8rem;
}

.filter-options:not(.collapsed)::after {
  content: "▼";
  transform: rotate(180deg);
}

/* ORDER the FILTERS for some reason */

#genderFilters .filter-option-items {
  .btn:nth-child(4) {
    order: -1;
  }
}

#toneFilters .filter-option-items {
  .btn:nth-child(4) {
    order: 3;
  }

  .btn-secondary {
    order: 4;
  }
}

.filter-panel.collapsing {
  overflow: hidden;
}

.filter-panel.collapsing:not(.show) > .filter-options::after {
  margin-inline-end: -0.25rem;
  opacity: 0;
  transition-property: opacity, margin;
  transition-duration: calc(var(--speed) / 2);
  transition-timing-function: (--ease-out);
}

.filter-panel.collapse:not(.show) > .filter-options::after {
  margin-inline-end: -0.25rem;
  opacity: 0;
  animation: fade-it-in calc(var(--speed) / 2) forwards;
}

.filter-type-title {
  margin-inline-start: 0;
  opacity: 1;

  transition-property: opacity, margin;
  transition-duration: calc(var(--speed) / 2);
  transition-property: var(--ease-out);
  animation: fade-it-in calc(var(--speed) * 2) forwards;
}

.filter-panel.collapsing > .filter-type-title {
  margin-inline-start: -0.75rem;
  opacity: 0;
}

.filter-option-items {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 6);
  padding-block: calc(var(--gap) / 6);
  padding-block-end: calc(var(--gap) / 3);
  width: 100%;
  justify-content: stretch;
  text-transform: capitalize;
}

.filter-option-items .btn {
  flex-grow: 1;
  min-width: fit-content;
  width: max-content;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border: var(--bs-btn-border-width) solid currentColor !important;
}

.filter-option-items .btn-secondary {
  flex-grow: 1;
  width: 100%;
  max-width: unset;
  justify-content: center;
  border: var(--bs-btn-border-width) solid var(--bs-btn-bg) !important;
}

.or-divider {
  font-size: var(--fs-4xs);
}

.filtered-actors-actions {
  display: inline-flex;
  gap: calc(var(--gap) / 2);
  align-items: center;
  z-index: 1023;

  position: sticky;
  inset-block-start: var(--nav-height);

  width: 100%;
  min-height: calc(var(--gap) / 2 + var(--nav-height));
  background: var(--bs-secondary-bg);
  padding-block-end: calc(var(--gap) / 4);
  margin-inline-start: 0rem;
  padding-inline-end: 0rem;
  transition: margin-inline-start calc(var(--speed) / 3) linear,
    padding-inline-end calc(var(--speed) / 3) linear;
}

.filtered-actors-count {
  margin-inline-start: auto;
  min-width: fit-content;
  align-self: center;
}

@media (width >= 992px) {
  .search-page:not(:has(.shortlist-select)) {
    .filter-results-container {
      margin-block-start: calc((var(--nav-height) + var(--gap) / 2) * -1);
    }

    &:not(:has(.filter-panel.collapse.show)) {
      .filtered-actors-actions {
        margin-inline-start: calc(var(--gap) + max(min(24vw, 31rem), 15rem));
        padding-inline-end: calc(var(--gap) + max(min(24vw, 31rem), 15rem));
        transition: margin-inline-start 0s, padding-inline-end 0s;
      }
    }
  }
  .search-page:has(.shortlist-select) {
    .filtered-actors-actions {
      inset-block-start: calc(var(--nav-height) * 2 + (var(--gap) / 2));
      width: calc(var(--gap) + 100%);
      margin-inline-start: calc(var(--gap) / 2 * -1);
      padding-inline: calc(var(--gap) / 2);
    }
  }
}

@media (width <= 992px) {
  .filtered-actors-actions {
    inset-block-start: calc(var(--nav-height) * 2 + (var(--gap) / 2));
    width: calc(var(--gap) * 2 + 100%);
    margin-inline-start: calc(var(--gap) * -1);
    padding-inline: var(--gap);
    padding-block-start: 0.5rem;
  }
}

.selected-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 4);
  width: 100%;
  height: fit-content;
  position: relative;

  .name-search-active-message {
    position: absolute;
    inset: 0;
    background-color: color-mix(
      in srgb,
      var(--bs-secondary-bg),
      transparent 30%
    );
    place-content: center;
    align-content: center;
    padding-inline-start: calc(var(--gap) / 1.2);
    margin: calc(var(--gap) / 2 * -1);
    backdrop-filter: blur(2px);
    text-shadow: 0 0.063em 0.125em var(--bs-secondary-bg);
  }

  &.name-search-active .btn {
    pointer-events: none;
    position: relative;
  }
}

.selected-filters .btn {
  text-transform: capitalize;
  display: inline-flex;
  opacity: 0.75;
  filter: contrast(1.3) grayscale(0.95);
  border: none;
  font-size: var(--fs-3xs);
  padding-inline: 1.4em;
  flex-grow: 1;
  min-width: fit-content;
  max-width: 5rem;
  justify-content: center;
  white-space: wrap;
}

.clear-all .btn svg,
.selected-filters .btn svg {
  opacity: 0;
  padding-block-end: calc(var(--gap) / 4);
  position: absolute;
  top: -0.2em;
  right: -0.4em;
}

.clear-all .btn:hover svg,
.selected-filters .btn:hover svg {
  opacity: 1;
}

.filtered-actors {
  width: 100%;
  min-height: 100%;
}

.actors-loading {
  position: relative;
  z-index: 1022;
  filter: blur(4px);
  opacity: 0.4;
  transition-property: all;
  transition-duration: calc(var(--speed) / 2);

  .actors-load {
    animation: load-in calc(var(--speed) * 4) calc(var(--speed) * 2);
  }
}

.selected-filters {
  animation: load-in calc(var(--speed) * 4) calc(var(--speed) * 2);
}

.actors-load {
  animation: load-in calc(var(--speed) * 4);
}

@keyframes load-in {
  from {
    filter: blur(4px);
    opacity: 0.4;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

.filtered-actor-cards {
  width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}

.available-actor-count {
  color: color-mix(in srgb, currentColor, white 10%);
  font-size: calc(var(--fs-3xs) * 1);
  padding-inline-start: 0.85ch;
  position: relative;
  display: inline-flex;
  inset-block-start: -0.5em;
  font-variation-settings: "wght" 400;
  min-width: 4ch;
  justify-content: flex-end;
}

/* fix CTA SECTION BLOCK within filtered actors */

.filtered-actors section,
.filtered-actors section > div {
  padding-inline: 0;
  width: 100%;
}

@media (width <= 992px) {
  .filter-panel {
    width: 100%;
    max-width: max(100vw);
    grid-column: 1 / 4;
    scrollbar-gutter: revert;
    z-index: 1024;

    /* MAKE filters not sticky on small screens */
    position: relative;
    inset-block-start: revert;
  }

  .filter-results-container {
    grid-column: 1 / 4;
  }
}

@media (width <= 576px) {
  .filtered-actors-actions {
    flex-direction: column;
  }
}

@media (width <= 320px) {
  .filter-controls {
    flex-wrap: wrap;
    min-height: calc(var(--gap) / 2 + var(--nav-height));
    height: fit-content;
    inset-block-start: calc(var(--nav-height));
    gap: calc(var(--gap) * 1.1);
  }

  .filter-panel {
    inset-block-start: calc(var(--nav-height) * 3 - 0.5rem);
  }

  body:has(.user-menu) .filter-panel {
    inset-block-start: calc(var(--nav-height) * 3 + 1rem) !important;
  }

  .filter-menu-button {
    width: 100%;
  }

  .actor-card .form-floating,
  .filter-controls .form-floating {
    max-width: 100%;
  }
}