.filter-categories__item {
    display: block; /* Makes <li> behave as a block to stack content vertically */
    margin-bottom: 5px; /* Optional spacing between parent and children */
}

.filter-categories__icon {
    color: #ccc; /* Match the original arrow's color */
    position: absolute;
    top: 9px; /* Adjust vertical alignment */
    left: -1px; /* Align to the right for LTR layouts */
    cursor: pointer; /* Pointer cursor to indicate it's clickable */
    font-size: 10px; /* Adjust the size to match the original arrow */
    line-height: 18px; /* Consistent with the original layout */
    transition: color 0.2s ease; /* Smooth hover effect */
    transform: rotate(0deg); /* No rotation */
    transition: transform 0.3s ease; /* Smooth rotation effect */
}

/* Optional: Hover effect to change color */
.filter-categories__icon:hover {
    color: #0c4a30; /* Change color on hover */
}
/* Rotated state */
.filter-categories__icon--rotated {
    transform: rotate(180deg); /* Rotate 90 degrees clockwise */
}

.filter-categories__item--selected > a {
    font-weight: bold; /* Highlight with bold text */
    color: #000000; /* Use a distinct color */
}