/* ============================================================================
   WNC — Review filter. Single source of truth.
   ----------------------------------------------------------------------------
   Replaces the inline filter CSS that was split across the priority-220 block
   and part of the priority-400 mockup block.

   Two changes of substance beyond the skin:

   1. Fuel and body type are separate groups. They were one alphabetical row, so
      "Petrol, Pickup, Plug-in Hybrid" sat together as if they answered the same
      question. They answer two.
   2. The panel is collapsed at rest. Expanded it is about a third of a laptop
      screen, every visit, for something most readers never touch. A single bar
      holds the state instead - which matters most for anyone arriving from a
      brand or category page, who needs to see a filter they did not set.

   Progressive enhancement: the panel is open in the HTML and JS collapses it,
   so with no JS the filter is a plain GET form that still works.
   ========================================================================== */

.wcn-filter, .wcn-filter *{ box-sizing:border-box; }
.wcn-filter{ margin:0 0 30px; }

/* ------------------------------------------------------------- the bar -- */
.wcn-filter__bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--wnc-panel,#fff); border:1px solid var(--wnc-panel-line,#e5e7eb); border-radius:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.08); padding:10px 14px;
}
.wcn-filter__toggle{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  min-height:44px; padding:0 16px; border:0; border-radius:10px; cursor:pointer;
  background:#0284c7; color:#fff; font:inherit;
  font-weight:700; font-size:14.5px;
}
.wcn-filter__n{
  display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  border-radius:999px; background:#fff; color:#0284c7;
  font-size:12px; font-weight:800;
}
.wcn-filter__cv{ transition:transform .2s ease; }
.wcn-filter__toggle[aria-expanded="true"] .wcn-filter__cv{ transform:rotate(180deg); }
.wcn-filter__sl{
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#6b7280;
}
/* Only the count is pushed right. Two margin-left:autos in one flex row means
   the first eats the slack and strands whatever follows it. */
/* It carries .wcn-btn--ghost so the existing live-reset handler picks it up,
   but in the bar it should read as a link, not a second button. Specificity
   raised deliberately: .wcn-btn--ghost is defined later in this file. */
.wcn-filter__bar .wcn-filter__clear{
  margin-left:4px; padding:0; min-height:0; border:0; background:none;
  font-size:13.5px; font-weight:700; color:#0284c7;
  text-decoration:underline; text-underline-offset:3px;
}
.wcn-filter__bar .wcn-filter__clear:hover{ color:#0ea5e9; }
.wcn-filter__bar .wcn-results-count{
  margin-left:auto; font-size:15px; font-weight:700; color:#0f172a; white-space:nowrap;
}
.wcn-filter__bar .wcn-results-count b{ color:#0284c7; }

/* a filter the page imposes: shown, but with no way to remove it */
.wcn-scopepill{
  display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:999px;
  background:#0284c7; color:#fff; font-size:13.5px; font-weight:700;
}
.wcn-pill{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 6px 0 12px;
  border-radius:999px; background:#eff6ff; color:#0284c7;
  font-size:13.5px; font-weight:700;
}
.wcn-pill__x{
  display:grid; place-items:center; width:22px; height:22px; border:0; padding:0;
  border-radius:50%; background:none; color:inherit; opacity:.7; cursor:pointer;
}
.wcn-pill__x:hover{ background:rgba(10,106,180,.16); opacity:1; }

/* ----------------------------------------------------------- the panel -- */
.wcn-archive-filter{
  background:var(--wnc-panel,#fff); border:1px solid var(--wnc-panel-line,#e5e7eb); border-radius:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.08); padding:18px 20px 16px; margin:10px 0 0;
}
.wcn-filter__head{ display:none; }
.wcn-filter__foot{ display:none; }

/* One grid runs the whole panel, so a cell in Body type sits directly under its
   opposite number in Fuel. Chips sized to their own text left every row ending
   somewhere different, which read as scattered. */
.wcn-fgroup{
  display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:start;
  padding:13px 0 0; margin-top:13px; border-top:1px solid #e5e7eb;
}
.wcn-fgroup--first{ border-top:0; margin-top:0; padding-top:0; }
.wcn-fgroup__l{
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#0284c7; padding-top:14px;
}
.wcn-fgroup--first .wcn-fgroup__l{ padding-top:20px; }

.wcn-ffields{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.wcn-ffield{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.wcn-ffield:nth-child(1), .wcn-ffield:nth-child(2){ grid-column:span 2; }
.wcn-ffield__l{ font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#6b7280; }
.wcn-ffield select{
  width:100%; min-height:44px; padding:0 34px 0 12px;
  border:1px solid #e5e7eb; border-radius:10px; background-color:#fff;
  font:inherit; font-size:15px; color:#0f172a; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235f7085' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.wcn-ffield select:disabled{ opacity:.55; cursor:not-allowed; background-color:#eef2f7; }
.wcn-ffield select:focus-visible{ outline:none; border-color:#0284c7; box-shadow:inset 0 0 0 1px #0284c7; }

.wcn-chiprow{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.wcn-chip{ position:relative; display:block; }
.wcn-chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.wcn-chip span{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:42px; padding:0 14px; border-radius:10px;
  background:#fff; border:1px solid #e5e7eb;
  font-size:14.5px; font-weight:600; line-height:1.15; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.wcn-chip b{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* counts right-aligned, so the numbers form their own column */
.wcn-chip em{ font-style:normal; font-size:12.5px; font-weight:700; color:#6b7280;
  flex:0 0 auto; font-variant-numeric:tabular-nums; }
.wcn-chip input:checked + span{ background:#0284c7; border-color:#0284c7; color:#fff; }
.wcn-chip input:checked + span em{ color:rgba(255,255,255,.85); }
.wcn-chip input:focus-visible + span{ outline:2px solid #0284c7; outline-offset:2px; }
@media (hover:hover){
  .wcn-chip input:not(:checked) + span:hover{ background:#f9fafb; border-color:#0ea5e9; }
}

/* =============================== DESKTOP ================================= */
@media (min-width:900px){
  .wcn-archive-filter.is-collapsed{ display:none; }
}

/* --------------------------------------------------- pager and empty -- */
/* Ported from the frozen build, where it lived in functions.php and was left
   behind: the page numbers rendered as bare run-together links ("12"). */
/* Page numbers moved to wnc_pager() in functions.php (10 Oct 2026), which
   loads on every listing, not only those with the filter. */
.wcn-finder__empty{
  background:var(--wnc-panel,#fff); border:1px solid var(--wnc-panel-line,#e5e7eb);
  border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,.08);
  padding:22px 24px; color:#64748b; font-size:15px;
}
.wcn-finder select:disabled{ opacity:.55; cursor:not-allowed; }

/* ================================ MOBILE ================================= */
@media (max-width:899.98px){
  .wcn-fgroup{ grid-template-columns:1fr; gap:8px; }
  .wcn-fgroup__l, .wcn-fgroup--first .wcn-fgroup__l{ padding-top:0; }
  .wcn-chiprow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wcn-ffields{ grid-template-columns:1fr; }
  .wcn-ffield:nth-child(1), .wcn-ffield:nth-child(2){ grid-column:span 1; }

  /* the panel becomes a sheet */
  .wcn-archive-filter{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    margin:0; border-radius:18px 18px 0 0; padding:0;
    max-height:88vh; max-height:88dvh; display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
    box-shadow:0 10px 24px rgba(0,0,0,.06); overscroll-behavior:none;
  }
  .wcn-archive-filter.is-open{ transform:translateY(0); }
  .wcn-filter__head{
    display:flex; align-items:center; position:relative; flex:0 0 auto;
    padding:14px 18px 12px; border-bottom:1px solid #e5e7eb;
  }
  .wcn-filter__head h2{
    margin:0; font-size:13px; font-weight:800; letter-spacing:.11em;
    text-transform:uppercase; color:#0284c7;
  }
  .wcn-filter__head::before{
    content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:2px; background:#e5e7eb;
  }
  .wcn-filter__close{
    position:absolute; top:8px; right:10px; width:44px; height:44px;
    display:grid; place-items:center; border:0; background:none; cursor:pointer;
    border-radius:10px; color:#0f172a;
  }
  /* min-height:0 lets the scroll area shrink inside the capped sheet, so it
     scrolls instead of spilling past it; contain keeps a scroll that reaches
     the end from carrying on into the page behind. */
  .wcn-filter__scroll{
    flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; touch-action:pan-y; padding:14px 18px 10px;
  }
  .wcn-filter__head{ touch-action:none; }
  .wcn-filter__foot{
    display:flex; gap:10px; align-items:center; flex:0 0 auto;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid #e5e7eb; background:rgba(234,244,254,.75);
  }
  .wcn-filter__foot .wcn-btn--primary{ flex:1; justify-content:center; }
  .wcn-filter__scroll .wcn-fgroup{ grid-template-columns:1fr; }

  .wcn-filter__scrim{
    position:fixed; inset:0; z-index:80; background:rgba(16,28,44,.45);
    opacity:0; pointer-events:none; transition:opacity .24s ease;
  }
  .wcn-filter__scrim.is-open{ opacity:1; pointer-events:auto; }
  html.wcn-filter-open{ overflow:hidden; overscroll-behavior:none; }
}

.wcn-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid transparent; border-radius:10px; font-size:14.5px; font-weight:700;
  text-decoration:none; cursor:pointer;
}
.wcn-btn--primary{ background:#0284c7; border-color:#0284c7; color:#fff; }
.wcn-btn--ghost{ background:transparent; border-color:#e5e7eb; color:#0f172a; }
.wcn-btn--ghost:hover{ border-color:#0ea5e9; color:#0284c7; }

@media (prefers-reduced-motion:reduce){
  .wcn-archive-filter, .wcn-filter__scrim, .wcn-filter__cv{ transition:none !important; }
}