/* filter-panel.css
   Extracted from the static prototype. Reference this the same way search.php
   already references other stylesheets — no changes needed as the data
   source moves from placeholder arrays to real DB-backed arrays, since this
   only styles class names, not data. */

.fp-panel{
  --fp-border:#E4E4DE;
  --fp-border-soft:#EDEDE8;
  --fp-text:#23262B;
  --fp-text-muted:#888D95;
  --fp-text-faint:#B7BBC0;
  --fp-accent-bg:#E7EFB0;
  --fp-accent-strong:#5D6B1A;
  --fp-accent-border:#C7D879;
  --fp-chip-bg:#EEF4C6;
  --fp-chip-text:#51601A;
  --fp-chip-border:#D3E39A;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--fp-text);
  background:#fff;
  border:1px solid var(--fp-border);
  border-radius:12px;
  padding:20px 18px 24px;
}
.fp-panel *{box-sizing:border-box;}

.fp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.fp-head h1{font-size:16.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.fp-item-count{font-size:12.5px;color:var(--fp-text-muted);font-variant-numeric:tabular-nums;}

.fp-panel input[type="text"]{
  width:100%;border:1px solid var(--fp-border);border-radius:6px;
  padding:9px 12px 9px 34px;font-size:13.5px;font-family:inherit;color:var(--fp-text);
  background:#fff no-repeat 11px center / 14px 14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A7ABB2' stroke-width='1.6'><circle cx='6' cy='6' r='5'/><line x1='9.6' y1='9.6' x2='13' y2='13'/></svg>");
}
.fp-panel input[type="text"]::placeholder{color:var(--fp-text-faint);}
.fp-panel input[type="text"]:focus{outline:none;border-color:var(--fp-accent-border);box-shadow:0 0 0 3px rgba(199,216,121,0.35);}
.fp-field-gap{margin-bottom:10px;}

.fp-instock-row{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;margin:14px 0 12px;cursor:pointer;user-select:none;}
.fp-instock-row input{width:16px;height:16px;accent-color:var(--fp-accent-strong);cursor:pointer;}

.fp-chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px;}
.fp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--fp-chip-bg);color:var(--fp-chip-text);border:1px solid var(--fp-chip-border);border-radius:100px;padding:4px 6px 4px 11px;font-size:12.5px;font-weight:600;white-space:nowrap;}
.fp-chip-x{border:none;background:rgba(0,0,0,0.06);color:var(--fp-chip-text);width:16px;height:16px;border-radius:50%;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.fp-chip-x:hover{background:rgba(0,0,0,0.14);}
.fp-clear-all{border:none;background:none;font-size:12.5px;font-weight:600;color:var(--fp-text-muted);text-decoration:underline;cursor:pointer;padding:4px 2px;}
.fp-clear-all:hover{color:var(--fp-text);}
.fp-clear-all[hidden]{display:none;}

.fp-rule{border:none;border-top:1px solid var(--fp-border-soft);margin:14px 0 6px;}

.fp-group + .fp-group{margin-top:2px;}
.fp-group-head{width:100%;display:flex;align-items:center;gap:6px;background:none;border:none;padding:12px 2px 8px;font-size:11px;font-weight:700;letter-spacing:0.08em;color:var(--fp-text-muted);text-transform:uppercase;cursor:pointer;}
.fp-group-head .fp-chev{transition:transform .15s ease;color:var(--fp-text-faint);}
.fp-group.fp-collapsed .fp-group-head .fp-chev{transform:rotate(-90deg);}
.fp-group.fp-collapsed .fp-group-body{display:none;}
.fp-group-badge{background:var(--fp-accent-bg);color:var(--fp-accent-strong);font-size:10.5px;font-weight:700;border-radius:100px;padding:1px 7px;}
.fp-group-body{padding:0 2px 4px;}

.fp-tree, .fp-children{list-style:none;margin:0;padding:0;}
.fp-children{padding-left:18px;margin-top:2px;}
.fp-node{margin:1px 0;}
.fp-node-row{display:flex;align-items:center;border-radius:6px;padding:6px 8px 6px 6px;gap:4px;}
.fp-node.fp-active-path > .fp-node-row{background:var(--fp-accent-bg);}
.fp-expand-toggle{flex:none;width:20px;height:20px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--fp-text-muted);border-radius:5px;}
.fp-expand-toggle:hover{background:rgba(0,0,0,0.05);}
.fp-expand-toggle svg{transition:transform .15s ease;}
.fp-node.fp-expanded > .fp-node-row .fp-expand-toggle svg{transform:rotate(90deg);}
.fp-expand-spacer{width:20px;flex:none;}
.fp-node-select{flex:1 1 auto;display:flex;align-items:center;gap:7px;border:none;background:none;text-align:left;font-size:13.5px;color:var(--fp-text);cursor:pointer;padding:2px 0;min-width:0;}
.fp-node-select .fp-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fp-node-select .fp-check{flex:none;width:14px;height:14px;color:var(--fp-accent-strong);visibility:hidden;}
.fp-node.fp-selected > .fp-node-row{background:var(--fp-accent-bg);}
.fp-node.fp-selected > .fp-node-row .fp-node-select .fp-check{visibility:visible;}
.fp-node.fp-selected > .fp-node-row .fp-node-select .fp-label{font-weight:600;}
.fp-nav-only{flex:1 1 auto;display:flex;align-items:center;border:none;background:none;text-align:left;font-size:13.5px;color:var(--fp-text);cursor:pointer;padding:2px 0;gap:7px;}
.fp-node-count{flex:none;font-size:12px;color:var(--fp-text-muted);font-variant-numeric:tabular-nums;padding-left:8px;}
.fp-node[hidden], .fp-attr-pill[hidden]{display:none !important;}

.fp-show-more-link{display:inline-block;margin:6px 0 2px 6px;font-size:12.5px;font-weight:600;color:var(--fp-accent-strong);background:none;border:none;cursor:pointer;padding:2px 0;}
.fp-show-more-link:hover{text-decoration:underline;}

.fp-attr-block{margin:10px 2px 4px;}
.fp-attr-block-label{font-size:12.5px;font-weight:600;color:var(--fp-text);margin-bottom:8px;}
.fp-attr-block.fp-dynamic .fp-attr-block-label::after{content:"responsive to Category";margin-left:8px;font-size:10.5px;font-weight:600;color:var(--fp-accent-strong);background:var(--fp-accent-bg);border-radius:100px;padding:1px 8px;vertical-align:middle;}
.fp-pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
.fp-attr-pill{border:1px solid var(--fp-border);background:#fff;color:var(--fp-text);font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:100px;cursor:pointer;}
.fp-attr-pill:hover{border-color:var(--fp-accent-border);}
.fp-attr-pill.fp-selected{background:var(--fp-accent-bg);border-color:var(--fp-accent-border);color:var(--fp-accent-strong);font-weight:700;}