/* Default arrow color */
.dropdown-arrow-cat path {
  stroke: #b4b4b4;
}

/* Parent selected */
.category-item.selected > .category-header .dropdown-arrow-cat path {
  stroke: #006F9C;
}

/* Child selected */
.category-item .subcategory-list li.selected > .category-header .dropdown-arrow-cat path {
  stroke: #006F9C;
}

.category-count.selected.active {
  color: #006F9C;
}

.category-box {
  padding: 18px;
  background: #FCFCFC;
  border-radius: 12px;
  outline: 1px solid #D0D0D0;
  font-family: "BT Beau Sans", sans-serif;
  margin-top: 15px;
}

.category-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #000;
  text-transform: capitalize;
}

.category-item {
  border-bottom: 1px solid #eee;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 6px 0;
}

.category-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #5A5A5A;
}

.category-name a {
  text-decoration: none;
  color: inherit;
}

.category-count {
  font-size: 14px;
  color: #5A5A5A;
}

.dropdown-arrow-cat {
  transition: transform 0.3s ease;
}

.category-item.active > .category-header .dropdown-arrow-cat,
.category-item .subcategory-list li.active > .category-header .dropdown-arrow-cat {
  transform: rotate(90deg);
}

.subcategory-list {
  display: none;
  list-style: none;
  margin: 6px 0 0 20px;
  padding: 0;
}

.subcategory-list li {
  font-size: 14px;
  padding-bottom: 0px !important;
}

.subcategory-list a {
  text-decoration: none;
  color: #5A5A5A;
}

.subcategory-list a:hover {
  text-decoration: underline;
}

/* Highlight selected categories */
.category-item.selected > .category-header .category-name a {
  color: #006F9C; /* parent selected color */
}

.category-item.selected > .category-header .category-name a:hover {
  color: #006F9C !important; /* darker or custom hover color */
}

.category-name a:hover {
  color: #006F9C !important; /* hover color */
}


.category-item.selected
{
  display: block;
}

.category-item .subcategory-list li.selected > .category-header .category-name a {
  color: #006F9C; /* child selected color */
}

/* Responsive text wrap for deep levels */
.category-item .subcategory-list li .category-name a {
  word-wrap: break-word;
  font-size: 14px;
}

