/**
 * CPC Active Filters Bar — chip bar above the shop loop.
 *
 * Loaded only on archive pages where filters are active (enqueue gate
 * lives in the main plugin file, Onda B). The bar itself ALWAYS
 * renders so users get instant feedback when toggling the first
 * facet — empty state is `visibility: hidden` (NOT display: none),
 * so the 52px slot is reserved and Cumulative Layout Shift stays
 * near zero.
 *
 * Color palette is the canonical Charutos Prime brand:
 *   --gold       #C9A84C  (focus ring, "×" glyph)
 *   --dark       #0D0625  (chip background, hover text)
 *   --text       #D4C4A0  (chip foreground)
 *   --text-muted #8A7A60  (label, "Limpar tudo")
 *
 * @package CharutosPrimeCatalog
 * @since   3.5.1
 */

/* ---------- Bar wrapper ---------------------------------------- */

.cpc-active-filters-bar {
    /* Inline-friendly toolbar layout. flex-wrap so chips spill
       to a new row on narrow viewports without overflowing. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    padding: 12px 16px;
    margin-bottom: 16px;

    background: #fff;
    border: 1px solid #e0d8c8;
    border-radius: 4px;

    /* CLS reservation. 52px = chip min-height (32px) + vertical
       padding (12px x2) — keep in sync with .cpc-chip below. */
    min-height: 52px;
}

/* When no filters are active the wrapper still occupies its slot
   but is invisible. Important: visibility (NOT display) so layout
   metrics are preserved and there is no shift on the first toggle. */
.cpc-active-filters-bar.is-empty {
    visibility: hidden;
}

/* ---------- "Filtros ativos:" label ---------------------------- */

.cpc-active-filters-bar .cpc-bar-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8A7A60;
    font-weight: 700;
    margin-right: 8px;
}

/* ---------- Chip ----------------------------------------------- */

.cpc-active-filters-bar .cpc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: #0D0625;
    color: #D4C4A0;

    padding: 6px 10px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.2;

    /* Reset native <button> styles. */
    border: 0;
    cursor: pointer;
    font-family: inherit;

    /* Tap target: 32px min-height keeps WCAG 2.5.5 (target size 24px
       AA / 44px AAA) comfortable; vertical padding handles the rest. */
    min-height: 32px;

    transition: background .15s ease;
}

.cpc-active-filters-bar .cpc-chip:hover {
    background: #1a1240;
}

/* Visible focus ring for keyboard users. The ring uses the brand
   gold so it reads as part of the design language, not a browser
   default; offset of 2px keeps the ring outside the chip's rounded
   corners. */
.cpc-active-filters-bar .cpc-chip:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 2px;
}

/* "×" glyph: gold + bold so it pops against the dark chip and reads
   as the affordance "remove this". aria-hidden in markup means
   screen readers skip it (the button itself carries the
   "Remover filtro: <label>" aria-label). */
.cpc-active-filters-bar .cpc-chip span[aria-hidden="true"] {
    color: #C9A84C;
    font-weight: 700;
}

/* ---------- "Limpar tudo" link --------------------------------- */

.cpc-active-filters-bar .cpc-clear-all {
    /* Push to the far right of the toolbar. */
    margin-left: auto;

    color: #8A7A60;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cpc-active-filters-bar .cpc-clear-all:hover {
    color: #0D0625;
}

.cpc-active-filters-bar .cpc-clear-all:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 2px;
}