/* Custom dropdown arrow as a CSS triangle */
.custom-dropdown-arrow {
    float: right;
    cursor: pointer;
    margin-left: auto;

    /* triangle */
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px; /* size/shape, tweak if needed */
    margin-right: 2.5px;
    border-color: #333 transparent transparent transparent; /* dark gray arrow */

    transition: transform 0.3s, border-color 0.3s;
}

/* 180° turn when clicked (so it points up when open) */
.custom-dropdown-arrow.open {
    transform: rotate(180deg);
}

/* Arrow color blue if has a selection */
.custom-dropdown-arrow.has-selection,
.custom-dropdown-arrow.open.has-selection {
    border-color: #007bff transparent transparent transparent;
}

/* Main container */
ul.tags-nav {
    overflow: hidden;
    transition: height 0.3s ease;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

/* Main list items - minimal vertical spacing */
ul.tags-nav > li {
    padding: 0.3rem 0; /* minimal consistent spacing */
    margin: 0; /* remove margin completely */
    border: 0;
}

/* Sub-options block */
.sub-options {
    overflow: hidden;
    transition: height 0.3s ease;
    margin: 0;
    padding-left: 1.5rem; /* ? Indent sub-options clearly to the right */
}

.custom-toggle-header {
    border-bottom: 1.5px solid rgb(201, 201, 201); /* Light gray separator line */
}