/* 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-wrap{position:relative;flex:none;width:14px;height:14px;}
  .fp-node-select .fp-check-wrap .fp-check,
  .fp-node-select .fp-check-wrap .fp-x{position:absolute;top:0;left:0;width:14px;height:14px;visibility:hidden;}
  .fp-node-select .fp-check-wrap .fp-check{color:var(--fp-accent-strong);}
  .fp-node-select .fp-check-wrap .fp-x{color:#B33A3A;}
  .fp-node.fp-selected > .fp-node-row{background:var(--fp-accent-bg);}
  .fp-node.fp-selected > .fp-node-row .fp-node-select .fp-check-wrap .fp-check{visibility:visible;}
  .fp-node.fp-selected > .fp-node-row .fp-node-select .fp-label{font-weight:600;}
  /* On hover of an already-selected item, swap the check for an X — signals
     "click to remove" instead of showing the same ambiguous checkmark John
     flagged. Unselected items are untouched by this rule. */
  .fp-node.fp-selected > .fp-node-row .fp-node-select:hover .fp-check-wrap .fp-check{visibility:hidden;}
  .fp-node.fp-selected > .fp-node-row .fp-node-select:hover .fp-check-wrap .fp-x{visibility:visible;}
  .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;}