/**
 * FacetWP — Color swatches for the "color" facet.
 *
 * Each .facetwp-checkbox inside .facetwp-facet-color gets a round swatch
 * generated from data-value (the term slug).  Text label is kept for a11y
 * but can be hidden if you prefer swatch-only display.
 */

/* ── Layout: horizontal row of swatches ── */
.facetwp-facet-color .facetwp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 6px 4px 0;
    cursor: pointer;
    background-image: none !important;
    padding-left: 0;
}

/* ── The swatch circle (pseudo-element before the label) ── */
.facetwp-facet-color .facetwp-checkbox::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* ── Active / checked state ── */
.facetwp-facet-color .facetwp-checkbox.checked::before {
    border-color: #333;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #333;
}

/* ── Hover state ── */
.facetwp-facet-color .facetwp-checkbox:hover::before {
    border-color: #666;
}

/* ── Individual color mappings (by data-value = term slug) ── */
.facetwp-facet-color .facetwp-checkbox[data-value="blue"]::before {
    background-color: #2196F3;
}

.facetwp-facet-color .facetwp-checkbox[data-value="green"]::before {
    background-color: #4CAF50;
}

.facetwp-facet-color .facetwp-checkbox[data-value="red"]::before {
    background-color: #F44336;
}

.facetwp-facet-color .facetwp-checkbox[data-value="gray"]::before {
    background-color: #9E9E9E;
}

.facetwp-facet-color .facetwp-checkbox[data-value="yellow"]::before {
    background-color: #FFEB3B;
}

/* ── Hide the default FacetWP checkbox indicator and counter ── */
.facetwp-facet-color .facetwp-checkbox svg,
.facetwp-facet-color .facetwp-checkbox .facetwp-counter,
.facetwp-facet-color .facetwp-checkbox .facetwp-checkbox-icon {
    display: none;
}

/* ── Optional: hide text labels for swatch-only display ── */
/*
.facetwp-facet-color .facetwp-checkbox .facetwp-display-value {
    display: none;
}
*/