.rb-list-filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--rb-padding-01);
}

.rb-filter-01 {
  display: flex;
  flex-direction: column;
  gap: var(--rb-padding-04);
  padding: var(--rb-padding-04);
  background-color: var(--rb-gray-02);
}

.rb-filter-01 .rb-section .rb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.rb-filter-01.no-script .rb-section .rb-header {
  cursor: default;
}

.rb-filter-01 .rb-section .rb-content {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  transition: all 150ms ease-in-out;
}

.rb-filter-01 .rb-section .rb-content > * {
  overflow: hidden;
}

.rb-filter-01.no-script .rb-section .rb-content,
.rb-filter-01 .rb-section.active .rb-content {
  grid-template-rows: 1fr;
  padding-top: var(--rb-padding-04);
}

.rb-filter-01 .rb-title {
  color: var(--rb-white-01);
  font-size: 1.47rem;
  margin: 0;
}

.rb-filter-01 .rb-chevron {
  fill: var(--rb-white-01);
  transition: transform 150ms ease-in-out;
}

.rb-filter-01.no-script .rb-section .rb-chevron,
.rb-filter-01 .rb-section.active .rb-chevron {
  transform: rotate(180deg);
}

.rb-filter-01 .rb-filter-fields {
  display: flex;
  flex-direction: column;
  gap: var(--rb-padding-04);
}

.rb-filter-01 .rb-filter-row {
  display: flex;
  gap: var(--rb-padding-02);
}

.rb-filter-01 .rb-filter-row .rb-filter-field {
  flex: 1;
}

.rb-filter-01 .rb-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--rb-padding-01);
}

.rb-filter-01 .rb-filter-list {
  display: flex;
  flex-direction: column;
  gap: var(--rb-padding-01);
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.rb-filter-01 .rb-filter-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rb-padding-01);
  margin: 0;
}

.rb-filter-01 .rb-item-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--rb-padding-01);
}

.rb-filter-01 .rb-filter-item .rb-checkbox {
  padding-top: 2px;
}

.rb-filter-01 .rb-filter-field .rb-label,
.rb-filter-01 .rb-filter-item .rb-label {
  color: var(--rb-white-01);
  cursor: pointer;
}

.rb-filter-01 .rb-filter-item > .rb-filter-list {
  padding-left: calc(20px + var(--rb-padding-01));
}

.rb-filter-01 .rb-letter-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rb-padding-01);
}

.rb-filter-01 .rb-footer {
  display: flex;
  justify-content: center;
  gap: var(--rb-padding-01);
}

.rb-filter-icon-section {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: var(--rb-padding-02);
  padding: 0 var(--rb-padding-04);
  scroll-margin-top: var(--rb-header-height-01);
}

.rb-filter-icon-section .rb-title {
  margin: 0;
}

.rb-filter-icon-section .rb-square-button-01.rb-bg-dark-blue:hover {
  background-color: var(--rb-gray-01);
}

@media (max-width: 1177px) {
  body:has(.rb-list-filter-form.no-script:target),
  body.rb-list-filter-form-active {
    overflow: hidden;
  }

  .rb-list-filter-form {
    position: fixed;
    top: var(--rb-header-height-01);
    width: 100%;
    height: calc(100% - var(--rb-header-height-01));
    background-color: var(--rb-white-01);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    z-index: 500;
    transition: opacity 150ms ease-in-out;
  }

  .rb-list-filter-form.no-script:target,
  body.rb-list-filter-form-active .rb-list-filter-form {
    opacity: 1;
    pointer-events: auto;
  }

  .rb-list-filter-form .rb-filter-01 {
    flex: 1;
  }

  .rb-filter-01 {
    padding-bottom: 0;
  }

  .rb-filter-01 .rb-footer {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding: var(--rb-padding-04) 0;
    background-color: var(--rb-gray-02);
  }

  .rb-filter-icon-section {
    display: flex;
  }
}

@media (max-width: 768px) {
  .rb-list-filter-form {
    top: var(--rb-header-height-02);
    height: calc(100% - var(--rb-header-height-02));
  }

  .rb-filter-01 {
    padding: var(--rb-padding-02);
    padding-bottom: 0;
  }

  .rb-filter-01 .rb-footer {
    padding: var(--rb-padding-02) 0;
  }

  .rb-filter-icon-section {
    scroll-margin-top: var(--rb-header-height-02);
  }

  .rb-filter-icon-section {
    padding: 0 var(--rb-padding-02);
  }
}