/* Custom Filters Sidebar Styling */
.custom-filters-sidebar {
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 8px;
}

/* Mobile specific styling */
.custom-filters-sidebar--mobile {
  padding: 2rem;
  border-radius: 0;
  margin: 0;
  margin-top: -1.5rem;
}

.custom-filters-sidebar--mobile .custom-filter-section {
  padding-bottom: 2rem;
}

.custom-filters-sidebar--mobile .custom-filters-sidebar__title {
  font-size: 2rem;
  margin-bottom: 2.5rem;
}

.custom-filters-sidebar__title {
  font-size: 1.8rem;
  font-weight: 500;
  color: #505050;
  margin: 1.5rem 0 2rem 0;
  text-align: left;
}

.custom-filter-section {
  margin-bottom: 0;
  padding-bottom: 1.5rem;
}

.custom-filter-section:last-child {
  padding-bottom: 0;
}

.custom-filter__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: #363636;
  border: none;
  background: none;
  border-bottom: 1px solid #cbcbcb;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}

.custom-filter__title:hover {
  color: #000;
}

.custom-filter__title-text {
  flex: 1;
}

.custom-filter__toggle-icon {
  transition: transform 0.3s ease;
  color: #666;
  margin-left: 1rem;
  transform: rotate(180deg);
}

.custom-filter__title[aria-expanded="false"] .custom-filter__toggle-icon {
  transform: rotate(0deg);
}

.custom-filter__content {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.custom-filter__content[aria-hidden="true"] {
  max-height: 0;
}

/* Vertical line list styling */
.custom-filter__list {
  margin: 0;
  padding: 0;
  padding-top: 1.5rem;
  list-style: none;
}

.custom-filter__item {
  position: relative;
  margin-bottom: 2rem;
}

/* Checkbox styling */
.custom-filter__label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 3.5rem;
}

.custom-filter__checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-filter__checkmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2.4rem;
  width: 2.4rem;
  background-color: #f8f8f8;
  border: 1px solid #dbdbdb;
  transition: all 0.2s ease;
}

.custom-filter__label:hover .custom-filter__checkmark {
  background-color: #e8e8e8;
}

.custom-filter__checkbox:disabled ~ .custom-filter__checkmark {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-filter__checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-filter__checkbox:checked ~ .custom-filter__checkmark:after {
  display: block;
}

.custom-filter__checkmark:after {
  left: 0.8rem;
  top: 0.4rem;
  width: 0.6rem;
  height: 1.2rem;
  border: solid #505050;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.custom-filter__text {
  font-size: 1.2rem;
  color: #505050;
  transition: color 0.2s ease;
  margin-left: 0.5rem;
}

.custom-filter__checkbox:checked ~ .custom-filter__text {
  font-weight: 500;
}

.custom-filter__checkbox:disabled ~ .custom-filter__text {
  color: #999;
}

.custom-filter__button {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.28rem;
  color: #666;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
  font-family: inherit;
}

.custom-filter__item.active .custom-filter__button {
  color: #22c55e;
  font-weight: 500;
}

.custom-filter__button:hover {
  color: #333;
}

.custom-filter__item.active .custom-filter__button:hover {
  color: #1e00a0;
}

.custom-filter__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Range inputs for price filters */
.custom-range {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}

.custom-range .field {
  display: flex;
  flex-direction: column;
}

.custom-range .field__label {
  font-size: 0.96rem;
  margin-bottom: 0.5rem;
  color: #555;
}

.custom-range .field__input {
  width: 100%;
  padding: 0.8rem;
  border: none;
  border-radius: 4px;
  font-size: 1.04rem;
  background-color: #f8f8f8;
  transition: background-color 0.2s ease;
}

.custom-range .field__input:focus {
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
}

.custom-filter__note {
  font-size: 0.96rem;
  color: #777;
  line-height: 1.5;
}

/* Sort by select */
.custom-sort-by {
  padding-top: 1.5rem;
}

.custom-sort-select {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
  font-size: 1.12rem;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  padding-right: 4rem;
}

.custom-sort-select:hover {
  border-color: #999;
}

.custom-sort-select:focus {
  outline: none;
  border-color: #00c851;
  box-shadow: 0 0 0 2px rgba(0, 200, 81, 0.1);
}