/*
 * Product listing filters.
 *
 * The four WooCommerce filter blocks bring their own markup and their own wc-blocks-style; this file
 * dresses them to the design's sidebar — one cream panel, a hairline between each section, a bold
 * heading with a collapse control, and checkbox rows with the count on the right.
 *
 * A theme file, not the UI team's: product.css and the rest of the prototype's stylesheets are
 * untouched. The design never drew this sidebar in the prototype — it held the literal text
 * "Wordpress plugin Here" — so the reference is the client's screenshot.
 *
 * Class names are WooCommerce's, so they can move under it. The ones this leans on:
 *   .wc-block-product-filters__overlay-content        the column the boxes sit in
 *   .wp-block-woocommerce-product-filter-*            one box each
 *   .wc-block-product-filter-price-slider__range      the track, carrying --low / --high
 *   .wc-block-product-filter-checkbox-list__label     one row: input wrapper + text + count
 */

/* ============ The panel ============ */

.categorylistbox {
    border-radius: 10px;
    background-color: var(--cream);
    overflow: hidden;
}

.categorylistbox .wc-block-product-filters,
.categorylistbox .wc-block-product-filters__overlay,
.categorylistbox .wc-block-product-filters__overlay-wrapper,
.categorylistbox .wc-block-product-filters__overlay-dialog {
    display: block;
    max-width: 100%;
}

.categorylistbox .wc-block-product-filters__overlay-content {
    display: block;
    padding: 0;
}

/* Each box is a band of the panel, divided by a hairline. */
.categorylistbox .wp-block-woocommerce-product-filter-price,
.categorylistbox .wp-block-woocommerce-product-filter-taxonomy,
.categorylistbox .cmn-filter--special {
    padding: 24px 22px;
    border-bottom: 1px solid var(--border-light);
    background-color: transparent;
}

/* The last band of the panel, whichever it is, has nothing under it to divide from. */
.categorylistbox > .cmn-filter--special:last-child,
.categorylistbox .wc-block-product-filters__overlay-content > *:last-child {
    border-bottom: 0;
}

/* A box with nothing to show carries `hidden`; make sure it takes no space either. */
.categorylistbox [hidden],
.categorylistbox .wc-block-product-filter--hidden {
    display: none !important;
}

/* ============ Section headings ============ */

.categorylistbox .cmn-filter__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 18px;
    font-family: var(--font-body-family);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--primary);
}

/* The collapse control is added by assets/js/product-filters.js, so it only appears when it works. */
.categorylistbox .cmn-filter__title[role="button"] {
    cursor: pointer;
}

.cmn-filter__toggle {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.cmn-filter__toggle::before,
.cmn-filter__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 2px;
    background-color: var(--primary);
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

/* The upright of the plus — shown only once the section is collapsed. */
.cmn-filter__toggle::after {
    opacity: 0;
    transform: translateY(-50%) rotate(90deg);
}

.is-collapsed > .cmn-filter__title .cmn-filter__toggle::after {
    opacity: 1;
}

.is-collapsed > .wp-block-woocommerce-product-filter-checkbox-list,
.is-collapsed > .wp-block-woocommerce-product-filter-price-slider,
.is-collapsed > .cmn-filter__body {
    display: none;
}

/* ============ Price ============ */

.categorylistbox .wc-block-product-filter-price-slider__content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px 8px;
}

/*
 * WooCommerce sizes these columns from the amount boxes, which are 215px wide by default — in this
 * 260px column that computed to `215px 0px 215px`, the track spanned all three at 454px and ran out
 * over the product grid. Laid out here instead: boxes on the top row, track spanning beneath.
 */
.categorylistbox .wc-block-product-filter-price-slider__left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.categorylistbox .wc-block-product-filter-price-slider__right {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
}

/* The dash between the two amounts, as in the design. */
.categorylistbox .wc-block-product-filter-price-slider__left::after {
    content: "-";
    position: absolute;
    margin-left: 8px;
    color: var(--text-color);
}

.categorylistbox .wc-block-product-filter-price-slider__range {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    min-width: 0;
}

/*
 * Matched by their wrappers, not by `input[type="text"]` — the amount inputs carry no `type`
 * attribute at all, so the attribute selector never matches even though the DOM reports them as
 * text. Scoped to __left / __right so the two range inputs inside __range are left alone.
 */
.categorylistbox .wc-block-product-filter-price-slider__left input,
.categorylistbox .wc-block-product-filter-price-slider__right input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-default);
    background-color: var(--white);
    font-size: 15px;
    color: var(--text-color);
    text-align: left;
}

/* ---- The track ---- */

.categorylistbox .wc-block-product-filter-price-slider__range {
    position: relative;
    height: 20px;
    background: none;
}

/*
 * --low and --high are set inline by the block's interactivity bindings as the handles move, so the
 * filled section follows the selection without any script of ours.
 */
.categorylistbox .wc-block-product-filter-price-slider__range .range-bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    transform: translateY(-50%);
    background: linear-gradient(
        to right,
        var(--border-color) 0,
        var(--border-color) var(--low, 0%),
        var(--theme) var(--low, 0%),
        var(--theme) var(--high, 100%),
        var(--border-color) var(--high, 100%),
        var(--border-color) 100%
    );
}

.categorylistbox .wc-block-product-filter-price-slider__range input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.categorylistbox .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme);
    border-radius: var(--circle);
    background-color: var(--white);
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

.categorylistbox .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme);
    border-radius: var(--circle);
    background-color: var(--white);
    cursor: pointer;
    pointer-events: auto;
}

/* ============ Checkbox lists ============ */

.categorylistbox .wc-block-product-filter-checkbox-list fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.categorylistbox .wc-block-product-filter-checkbox-list__items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.categorylistbox .wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.categorylistbox .wc-block-product-filter-checkbox-list__input-wrapper {
    display: flex;
    flex-shrink: 0;
}

.categorylistbox .wc-block-product-filter-checkbox-list__input {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--white);
    cursor: pointer;
}

.categorylistbox .wc-block-product-filter-checkbox-list__text-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.categorylistbox .wc-block-product-filter-checkbox-list__text {
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-color);
}

/*
 * The design shows a bare number; the block wraps it in literal "(" and ")" text nodes either side
 * of the count span, which no selector can reach. Zeroing the wrapper's font hides the brackets and
 * the inner span brings the number back.
 */
.categorylistbox .wc-block-product-filter-checkbox-list__count {
    flex-shrink: 0;
    font-size: 0;
    color: var(--gray-dark);
}

.categorylistbox .wc-block-product-filter-checkbox-list__count > span {
    font-size: 15px;
}

/* ============ On Specials ============ */

.cmn-filter--special .cmn-filter__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

/* The pill switch, built from the checkbox itself so the control stays a real checkbox. */
.cmn-filter--special .cmn-filter__row input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background-color: #cfcfc7;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cmn-filter--special .cmn-filter__row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--circle);
    background-color: var(--white);
    transition: transform 0.2s ease;
}

.cmn-filter--special .cmn-filter__row input[type="checkbox"]:checked {
    background-color: var(--theme);
}

.cmn-filter--special .cmn-filter__row input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

/* The design labels the row from the heading above it, so the repeated name is for screen readers. */
.cmn-filter--special .cmn-filter__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cmn-filter--special .cmn-filter__count {
    margin-left: auto;
    font-size: 15px;
    color: var(--gray-dark);
}

/* ============ Active filters ============ */

.categorylistbox .wp-block-woocommerce-product-filter-active {
    padding: 18px 22px 0;
}

/* ============ Mobile ============ */

@media (max-width: 991.98px) {
    .categorylistbox .wp-block-woocommerce-product-filter-price,
    .categorylistbox .wp-block-woocommerce-product-filter-taxonomy,
    .categorylistbox .cmn-filter--special {
        padding: 20px 18px;
    }
}