/* Bergs Auto stock finder.
   Colour-free on purpose where the theme already has an opinion: it
   borrows the theme's own variables and falls back to the palette
   values only when the theme has not defined them. Every rule is low
   specificity so the theme can override any of it. */

.bsf{margin:0 0 18px}
.bsf-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.bsf-sortlabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel,#5C6B78)}
.bsf-sort{font-size:13px;padding:8px 10px;border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;background:var(--surface,#fff);color:inherit}
.bsf-count{margin-left:auto;font-size:12px;letter-spacing:.04em;color:var(--steel,#5C6B78)}
.bsf-btn{font-size:13px;font-weight:600;padding:9px 14px;border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;background:var(--surface,#fff);color:inherit;cursor:pointer}
.bsf-btn:hover{border-color:var(--steel,#5C6B78)}
.bsf-btn:disabled{opacity:.45;cursor:default}

.bsf-searchwrap{margin:0 0 12px}
.bsf-searchbox{position:relative}
.bsf-searchbox input{width:100%;font-size:16px;padding:12px 40px 12px 13px;border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;background:var(--surface,#fff);color:inherit}
.bsf-searchbox input:focus{outline:2px solid var(--rust,#B54A3A);outline-offset:-1px}
.bsf-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:18px;line-height:1;padding:6px 10px;cursor:pointer;color:var(--steel,#5C6B78)}

.bsf-active{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.bsf-active:empty{display:none}
.bsf-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.03em;background:var(--paper-2,#E3E4E0);border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;padding:4px 6px 4px 9px}
.bsf-pill button{background:none;border:0;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;color:var(--steel,#5C6B78)}
.bsf-clearall{border-style:dashed;background:transparent;cursor:pointer}

.bsf-rail{background:var(--surface,#fff);border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;padding:16px;margin:0 0 18px}
.bsf-grp{margin:0 0 16px}
.bsf-grp h3{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel,#5C6B78);margin:0 0 8px;font-weight:500}
.bsf-chips{display:flex;flex-wrap:wrap;gap:5px}
.bsf-chip{font-size:12px;font-weight:500;padding:5px 9px;border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;background:var(--surface,#fff);color:inherit;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.bsf-chip:hover{border-color:var(--steel,#5C6B78)}
.bsf-chip[aria-pressed="true"]{background:var(--navy,#14212F);color:var(--on-navy,#EDEEEC);border-color:var(--navy,#14212F)}
.bsf-chip:disabled{opacity:.32;cursor:not-allowed}
.bsf-n{font-size:10px;opacity:.65}
.bsf-chipclear{border-style:dashed;background:transparent;color:var(--steel,#5C6B78);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.bsf-pair{display:flex;gap:6px;align-items:center}
.bsf-pair input{width:100%;min-width:0;font-size:12px;padding:7px 8px;border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;background:var(--surface,#fff);color:inherit}
.bsf-seg{display:flex;border:1px solid var(--line,rgba(20,33,47,.14));border-radius:2px;overflow:hidden}
.bsf-seg button{flex:1;font-size:12px;font-weight:500;padding:7px 4px;border:0;border-right:1px solid var(--line,rgba(20,33,47,.14));background:var(--surface,#fff);color:inherit;cursor:pointer}
.bsf-seg button:last-child{border-right:0}
.bsf-seg button[aria-pressed="true"]{background:var(--navy,#14212F);color:var(--on-navy,#EDEEEC)}
.bsf-reset{width:100%}
.bsf-railclose{display:none;width:100%;margin-bottom:14px}

.bsf-why{display:block;font-size:10px;letter-spacing:.04em;color:var(--reserved,#8A4A12);padding:0 12px 10px}
.bsf-empty{padding:40px 0;text-align:center;color:var(--steel,#5C6B78)}
.bsf-scrim{display:none}

/* The one rule the whole filter depends on. The theme gives cards
   display:flex, which overrides the browser's [hidden] rule, so the
   attribute alone hides nothing. !important is deliberate here. */
.bsf-hidden{display:none !important}

/* Until the script runs, the panel would be a wall of controls that do
   nothing, so it stays out of the way and the page is just the stock
   list. The script adds bsf-ready once it has wired itself up. */
.bsf:not(.bsf-ready) .bsf-rail,
.bsf:not(.bsf-ready) .bsf-top,
.bsf:not(.bsf-ready) .bsf-searchwrap{display:none}

/* The two columns. Narrow screens stack them; from 900px up the
   filters become a proper sidebar on the LEFT with the cars beside
   them, and the panel sticks as you scroll the list. */
.bsf-layout{display:block}

@media (min-width:900px){
  .bsf-layout{display:grid;grid-template-columns:var(--bsf-rail-width,260px) minmax(0,1fr);
    gap:var(--bsf-gap,26px);align-items:start}
  .bsf-layout > .bsf-rail{position:sticky;top:12px;margin:0;max-height:calc(100vh - 24px);overflow:auto}
  /* Whatever the theme's grid does, the cars take the second column
     and are never allowed to push the page sideways. */
  .bsf-layout > .bav-cards,
  .bsf-layout > .bsf-list{min-width:0}
  .bsf-ready #bsf-toggle{display:none}
}

/* Put the panel on the right instead by adding bsf-right to the
   stock page's body, or set --bsf-side: right on .bsf-layout. */
@media (min-width:900px){
  .bsf-right .bsf-layout{grid-template-columns:minmax(0,1fr) var(--bsf-rail-width,260px)}
  .bsf-right .bsf-layout > .bsf-rail{order:2}
}

/* Narrow: the panel slides over, as on a phone. */
@media (max-width:899px){
  .bsf-layout{display:block}
  .bsf-ready .bsf-rail{position:fixed;z-index:60;top:0;left:0;bottom:0;width:min(320px,88vw);
    margin:0;border-radius:0;overflow:auto;transform:translateX(-102%);transition:transform .22s ease;
    padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px))}
  .bsf-ready .bsf-rail.is-open{transform:none;box-shadow:0 10px 40px rgba(0,0,0,.35)}
  .bsf-ready .bsf-railclose{display:block}
  .bsf-scrim.is-on{display:block;position:fixed;inset:0;background:rgba(10,16,22,.5);z-index:55}
}

@media (prefers-reduced-motion:reduce){ .bsf-ready .bsf-rail{transition:none} }