/**
 * FacetWP overrides (product category PLP)
 *
 * Restyles FacetWP checkbox facets inside the category filter panel to match
 * .category-filters__check / .category-filters__checkbox-input (category-block.css):
 * custom box + checkmark on desktop; mobile / tablet drawer pills follow Figma
 * idk-bcd-category-filters-tablet-v06 (node 9385:8851): tertiary outline, primary
 * fill when .checked, nav badges use selected counts (see category-block.js).
 * Soft-limit toggles use category-filters__text-btn via facetwp_facet_html (frontend.php).
 * Hierarchical checkbox [+]/[-] (.facetwp-expand) is hidden; depths stay open in this panel.
 */

/*---*\
  PLP toolbar: result count facet (product_count) uses same inner markup as static .category-results__count;
  cancel FacetWP shell margin (front.css .facetwp-facet { margin-bottom: 40px }) so the flex row stays tight.
\*---*/

.category-results__toolbar .facetwp-facet.facetwp-facet-product_count ,
.category-results__footer .facetwp-facet,
.facetwp-facet {
    margin-bottom: 0 !important;
}

.category-results__sort .choices__placeholder {
    opacity: 1 !important;
    font-size: 14px;
    color : #636363;
}

.category-results__sort-wrap .choices[data-type*='select-one']::after {
    font-size: 14px;
}
/* Load more pager: theme button classes (see frontend.php facetwp_facet_html). */
.category-results__footer .facetwp-load-more.btn {
    margin-top: 0;
}

/*---*\
  Shell: drop default FacetWP spacing inside the accordion panel
\*---*/

.category-filters__panel-body .facetwp-facet.facetwp-type-checkboxes {
    margin-bottom: 0;
}

.category-filters__panel-body .facetwp-type-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*---*\
  Hierarchy: hide FacetWP [+]/[-] (.facetwp-expand) and keep all depths open.

  FacetWP front.css hides .facetwp-depth until .visible; expand clicks toggle that.
  Static category filters show the full tree with indent only, so we mirror that.
\*---*/

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-expand {
    display: none !important;
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-depth {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-left: 0;
    padding-left: 30px;
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-depth .facetwp-depth {
    padding-left: 30px;
}

/*---*\
  Checkbox row (desktop / sidebar: mirrors .category-filters__check)
\*---*/

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    padding-left: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-family-body), sans-serif;
    font-size: var(--font-size-paragraph);
    line-height: 1.5;
    color: var(--color-paragraph);
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox::before {
    content: "";
    flex-shrink: 0;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 0.5px solid var(--color-tertiary);
    border-radius: 5px;
    background-color: var(--color-white);
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.checked::before {
    border: 0.5px solid var(--color-quaternary);
    border-radius: 5px;
    background: var(--color-quaternary-very-light);
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.checked::after {
    content: "\e926";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "bcd", sans-serif;
    line-height: 1;
    font-size: 12px;
    color: var(--color-quaternary);
    pointer-events: none;
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox .facetwp-display-value {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
}

/* Static markup does not show counts; hide for parity */
.category-filters__panel-body .facetwp-type-checkboxes .facetwp-counter {
    display: none;
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.disabled,
.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.disabled .facetwp-display-value {
    opacity: 0.45;
    cursor: default;
}

.category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 4px;
}

/*---*\
  Soft-limit toggles: <a> gets .category-filters__text-btn via facetwp_facet_html (frontend.php).
  Chevron via ::after so FacetWP can run .text() on the link for {num} without stripping an <i>.
\*---*/

.category-filters__panel-body a.category-filters__text-btn.facetwp-toggle {
    text-decoration: none;
}

.category-filters__panel-body a.category-filters__text-btn.facetwp-toggle::after {
    content: "\e903";
    flex-shrink: 0;
    margin-left: 6px;
    font-family: "bcd", sans-serif;
    font-size: 8px;
    line-height: 1;
    color: inherit;
}

.category-filters__panel-body a.category-filters__text-btn.facetwp-toggle.category-filters__text-btn--less::after {
    transform: rotate(180deg);
}

/*---*\
  Mobile drawer: Figma tablet filter drawer (9385:8851) pill rows.

  Selected: solid primary fill, white label, tertiary accent icon (bcd \\e901).
  Default: 1px tertiary border, white fill, paragraph text #313131.
\*---*/

@media (max-width: 1365px) {
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-depth,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-depth {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        padding-left: 0;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-depth .facetwp-depth,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-depth .facetwp-depth {
        padding-left: 0;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio {
        position: relative;
        display: inline-flex;
        flex: 0 1 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 100%;
        margin: 0;
        padding: 13px 15px 15px;
        border: 1px solid var(--color-tertiary);
        border-radius: 600px;
        background-color: var(--color-white);
        font-family: var(--font-family-body), sans-serif;
        font-size: 12px;
        font-weight: var(--font-weight-regular);
        line-height: 0.9;
        color: var(--color-paragraph);
        text-align: center;
        cursor: pointer;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox:not(.checked) .facetwp-display-value,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio:not(.checked) .facetwp-display-value {
        flex: 0 1 auto;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox::before,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio::before {
        display: none;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.checked,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio.checked {
        justify-content: flex-start;
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: var(--color-paragraph-inverse);
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.checked .facetwp-display-value,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio.checked .facetwp-display-value {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        color: var(--color-paragraph-inverse);
        padding-right: 10px;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.checked::after,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio.checked::after {
        content: "\e901";
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-left: auto;
        padding: 0;
        font-family: "bcd", sans-serif;
        font-size: 10px;
        line-height: 1;
        color: var(--color-tertiary);
        pointer-events: none;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.disabled,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio.disabled,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox.disabled .facetwp-display-value,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio.disabled .facetwp-display-value {
        opacity: 0.45;
        cursor: default;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox:focus-visible,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 3px;
    }

    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-counter {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-checkboxes .facetwp-checkbox,
    .category-filters__drawer-content .category-filters__panel-body .facetwp-type-radio .facetwp-radio {
        padding: 13px 15px 15px;
        font-size: 14px;
    }
}