/* 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;}
    /* Group header +/- (Device/Brand/Category/Attributes). Default (no
       .fp-collapsed) = minus shown, since groups start expanded in markup
       unless .fp-collapsed is present — closed-by-default groups get
       .fp-collapsed baked directly into the div by render_filter_panel(). */
    .fp-group-head .fp-toggle-icon{position:relative;display:inline-flex;width:12px;height:12px;flex:none;color:var(--fp-text-faint);font-weight:700;line-height:1;}
    .fp-group-head .fp-icon-plus, .fp-group-head .fp-icon-minus{position:absolute;top:50%;left:0;transform:translateY(-52%);}
    .fp-group-head .fp-icon-plus{display:none;}
    .fp-group-head .fp-icon-minus{display:inline;}
    .fp-group.fp-collapsed .fp-group-head .fp-icon-plus{display:inline;}
    .fp-group.fp-collapsed .fp-group-head .fp-icon-minus{display:none;}
    .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);}
    /* Tree-node +/- (Device Manufacturer, Category Main Class, etc.). Default
       (not yet expanded) = plus shown; expanded = minus. */
    .fp-expand-toggle .fp-toggle-icon{position:relative;display:inline-flex;width:12px;height:12px;font-weight:700;line-height:1;}
    .fp-expand-toggle .fp-icon-plus, .fp-expand-toggle .fp-icon-minus{position:absolute;top:50%;left:0;transform:translateY(-52%);}
    .fp-expand-toggle .fp-icon-plus{display:inline;}
    .fp-expand-toggle .fp-icon-minus{display:none;}
    .fp-node.fp-expanded > .fp-node-row .fp-expand-toggle .fp-icon-plus{display:none;}
    .fp-node.fp-expanded > .fp-node-row .fp-expand-toggle .fp-icon-minus{display:inline;}
    .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;}
    
    /* Tooltip on hover, after a 1s delay, for labels actually truncated by
       overflow (John's feedback). Attached to the BUTTON, not the .fp-label
       span itself — the label has overflow:hidden, which would clip a
       pseudo-element attached directly to it. .fp-has-tooltip and the
       data-tooltip value are both set by filter-panel.js after measuring
       actual truncation (can't detect it while collapsed/hidden). */
    .fp-node-select{position:relative;}
    .fp-node-select.fp-has-tooltip::after{
      content:attr(data-tooltip);
      position:absolute;
      left:0;
      top:100%;
      margin-top:4px;
      background:#23262B;
      color:#fff;
      font-size:12px;
      font-weight:500;
      line-height:1.3;
      padding:5px 9px;
      border-radius:6px;
      white-space:normal;
      max-width:220px;
      z-index:20;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      box-shadow:0 2px 8px rgba(0,0,0,0.15);
      transition:opacity .15s ease, visibility 0s linear 0s;
    }
    .fp-node-select.fp-has-tooltip:hover::after{
      opacity:1;
      visibility:visible;
      transition:opacity .15s ease 1s, visibility 0s linear 1s;
    }
    .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. 
      */
    .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;}