.filters-panel {
    --border: #e6e9ef;
    --muted: #6b7280;
    --accent: #6366f1;
    --bg-soft: #f6f8fb;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    font-family: Inter, system-ui, sans-serif;
}

/* SEARCH */
.filters-search {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

    .filters-search input {
        width: 100%;
        padding: 10px 40px 10px 12px; /* space for button on right */
        border-radius: 10px;
        border: 1px solid #e6e9ef;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .filters-search input:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
        }

/* Search button inside input */
.filters-search-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

    .filters-search-btn:hover {
        background: #4f46e5;
    }

/* SECTION */
.filters-section {
    margin-bottom: 26px;
}

.filters-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 10px;
}

/* TREE */
/* Filters Tree */
.filters-tree details {
    position: relative;
    margin-bottom: 6px;
}

.filters-tree summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background .2s ease;
}

    .filters-tree summary:hover {
        background-color: #f3f5f8;
    }

    /* Hide default disclosure arrow */
    .filters-tree summary::-webkit-details-marker {
        display: none;
    }

/* Custom collapse arrow */
.collapse-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    margin-left: 8px;
}

details[open] .collapse-arrow {
    transform: rotate(45deg);
}
/* Highlight main category when collapsed */
.filters-category-summary {
    transition: background 0.2s ease, color 0.2s ease;
}

/* Default (collapsed) */
.filters-category:not([open]) > .filters-category-summary {
    background-color: #f9fafb; /* light gray */
    border-radius: 8px;
}

/* Hover */
.filters-category-summary:hover {
    background-color: #f3f5f8;
}

/* Open state (children expanded) */
.filters-category[open] > .filters-category-summary {
    background-color: #eef2ff; /* subtle accent when expanded */
}
/* Children container */
.filters-children {
    margin-left: 16px;
    padding-left: 12px;
    border-left: 1px dashed #e3e7ee;
}

/* Tree items */
.filters-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .filters-tree-item:hover {
        background-color: #f5f7fa;
    }

    /* Radio buttons */
    .filters-tree-item input[type="radio"] {
        appearance: none;
        width: 16px;
        height: 16px;
        border: 1.5px solid #d1d5db;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
    }

        .filters-tree-item input[type="radio"]:checked {
            border-color: #6366f1;
        }

            .filters-tree-item input[type="radio"]:checked::after {
                content: '';
                position: absolute;
                top: 3px;
                left: 3px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #6366f1;
            }
    /* Hide default radio */
    input.custom-radio {
        opacity: 0;
        position: absolute;
        left: 0;
    }

    /* Custom radio box */
.filters-option-radio {
    display: flex;
    align-items: center;
    justify-content: space-between; /* text left, radio right */
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    gap: 8px;
}

    .filters-option-radio:hover {
        background-color: #f5f7fa;
    }

    /* Hide actual radio input */
    .filters-option-radio input.custom-radio {
        opacity: 0;
        position: absolute;
    }

    /* Radio circle */
    .filters-option-radio .radio-box {
        width: 16px;
        height: 16px;
        border: 2px solid #d1d5db;
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
    }

    /* Checked state */
    .filters-option-radio input.custom-radio:checked + .radio-box {
        border-color: #6366f1;
        background-color: #6366f1;
    }

        .filters-option-radio input.custom-radio:checked + .radio-box::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
        }

    /* Text styling */
    .filters-option-radio .option-text {
        font-size: 13px;
        color: #1c1f26;
        user-select: none;
    }
/* OPTIONS */
/* Container label */
.filters-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #e6e9ef;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 6px;
    transition: all 0.15s ease;
}

    .filters-option:hover {
        background: #f3f5f8;
    }

    /* Hide default checkbox */
    .filters-option input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        left: 0;
    }

    /* Custom box */
    .filters-option .checkbox-box {
        width: 18px;
        height: 18px;
        border: 2px solid #d1d5db;
        border-radius: 5px;
        flex-shrink: 0;
        transition: all 0.2s ease;
        position: relative;
    }

    /* Checkmark */
    .filters-option input[type="checkbox"]:checked + span + .checkbox-box::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* Checked state */
    .filters-option input[type="checkbox"]:checked + span + .checkbox-box {
        background: #6366f1;
        border-color: #6366f1;
    }

    /* Text next to checkbox */
    .filters-option span:first-child {
        user-select: none;
        color: #1c1f26;
        font-weight: 500;
        transition: color 0.15s ease;
    }

    .filters-option input[type="checkbox"]:checked + span:first-child {
        font-weight: 600;
        color: #6366f1;
    }

/* animation */
@keyframes filters-expand {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}