/* ==========================================================================
   Hierarchical Categories - FINAL POLISHED VERSION (v2)
   ========================================================================== */

/* --- FIX FOR BULLETS (Maximum Specificity) --- */
div[id^="hierarchical-categories-"] ul,
div[id^="hierarchical-categories-"] li {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* --- White Bubbles for Top-Level Items --- */
/* CORRECTED SELECTOR: The "> ul" has been removed to match the HTML structure. */
div[id^="hierarchical-categories-"] > li.cat-item {
    background: white; /* For cream, try #fafafa or use a theme variable like var(--wp--preset--color--background) */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 8px !important; /* Keep !important here if needed to override widget margins */
    overflow: hidden;
}

/* --- Alignment and Spacing --- */
div[id^="hierarchical-categories-"] .cat-item-inner {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 10px;
}

/* --- Toggle Button Styles --- */
div[id^="hierarchical-categories-"] .category-toggle {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
div[id^="hierarchical-categories-"] .category-toggle:hover {
    background-color: #f0f0f0;
}
div[id^="hierarchical-categories-"] .category-toggle svg {
    width: 1em;
    height: 1em;
    display: block;
    color: black;
}

/* --- Category Link & Count Styling --- */
div[id^="hierarchical-categories-"] .cat-item-inner a {
    flex-grow: 1;
    text-decoration: underline;
    color: inherit;
    font-weight: 500;
}
div[id^="hierarchical-categories-"] .cat-count {
    flex-shrink: 0;
    color: #555;
    font-size: 0.9em;
}

/* --- Styling for Child Items --- */
div[id^="hierarchical-categories-"] li:not(.is-open) > ul.children {
    display: none;
}
div[id^="hierarchical-categories-"] ul.children {
    padding-left: 25px;
    margin: 5px 15px 15px 15px; /* Added a little top margin */
    border-left: 2px solid #e0e0e0;
}
/* This rule correctly ensures children DO NOT have the white bubble */
div[id^="hierarchical-categories-"] ul.children .cat-item {
    background: none;
    border: none;
    margin-bottom: 0;
    padding: 4px 0;
    border-radius: 0;
    overflow: visible;
}
div[id^="hierarchical-categories-"] ul.children .cat-item-inner a {
    font-weight: 400;
    font-size: 0.95em;
}

/* --- Icon Visibility Logic --- */
div[id^="hierarchical-categories-"] .category-toggle .bi-plus-square { display: block; }
div[id^="hierarchical-categories-"] .category-toggle .bi-dash-square { display: none; }
div[id^="hierarchical-categories-"] .is-open .category-toggle .bi-plus-square { display: none; }
div[id^="hierarchical-categories-"] .is-open .category-toggle .bi-dash-square { display: block; }