/* ============================================================
   Behandlingsnett – filtrering ([ptlr_filter])
   Sidekolonne på desktop, ark fra bunnen på mobil.

   MERK: Alle regler er prefikset med .bnfilter (spesifisitet 0-2-0). Elementor Kit
   setter `.elementor-kit-XXXX button { … }` med 0-1-1, som ellers ville
   overstyrt hver eneste knapp her – samme fella som traff bestillingsskjemaet.
   Nullstillingen under fanger knapper vi ikke har gitt egen klasse.
   ============================================================ */

.bnfilter{
  --fl-green:#388051;
  --fl-green-dark:#2f7048;
  --fl-ink:#14241d;
  --fl-ink-2:#3f4f47;
  --fl-muted:#6a7a72;
  --fl-line:#e6e8e6;
  --fl-line-2:#cfd5d1;
  --fl-soft:#f4f6f4;
  --fl-white:#fff;
  --fl-radius:5px;

  color:var(--fl-ink);
  font-family:var(--bnett-font-body, "Inter", -apple-system, system-ui, sans-serif);
  line-height:1.5;
}
.bnfilter *{ box-sizing:border-box; }
.bnfilter [hidden]{ display:none !important; }

/* Skjerming mot temaets globale knappestil */
.bnfilter button{
  -webkit-appearance:none; appearance:none;
  background:transparent; background-image:none;
  color:inherit; border:0; margin:0; padding:0; border-radius:0;
  font:inherit; font-weight:inherit; letter-spacing:normal;
  text-transform:none; text-shadow:none; box-shadow:none;
  line-height:1.5; min-height:0; width:auto; cursor:pointer;
}
.bnfilter button:hover, .bnfilter button:focus{
  background:transparent; background-image:none; color:inherit; box-shadow:none;
}
.bnfilter button:focus-visible{ outline:2px solid var(--fl-green); outline-offset:2px; }

/* 0-2-0-liste som alltid slår temaet, uansett lasterekkefølge */
.bnfilter .bnfilter-btn,
.bnfilter .bnfilter-chip,
.bnfilter .bnfilter-tag,
.bnfilter .bnfilter-seg__btn,
.bnfilter .bnfilter-reset,
.bnfilter .bnfilter-openBtn,
.bnfilter .bnfilter-panel__close,
.bnfilter .bnfilter-input__clear,
.bnfilter .bnfilter-suggest__item,
.bnfilter .bnfilter-active__chip,
.bnfilter .bnfilter-active__clear{
  font-weight:inherit; letter-spacing:normal; text-transform:none;
  line-height:1.5; border-radius:0; border:0; margin:0; min-height:0;
}

/* ---------- layout ----------

   TILBAKESTILT i 8.36.1.

   Her sto det kort en container-sporring, med `container-type:inline-size`
   paa .bnfilter. Tanken var riktig – layouten skal maale spalten, ikke
   vinduet – men grepet var feil. `container-type` slaar paa storrelses-
   inneslutning: elementets bredde regnes SOM OM det var tomt. Staar
   .bnfilter som barn i en flex- eller grid-beholder, faller den da sammen
   til nesten ingenting. Det gjorde den, paa hver eneste kategoriside –
   ogsaa dem som ikke bruker de nye kortene.

   Tilbake til mediesporringen inntil vi vet hvorfor innholdsspalten er
   smal. Det er den som er det egentlige problemet.
   ------------------------------------------------------------ */
/* Tre bokser, to spalter.

   Stedskortet staar foerst i markupen fordi det er foerst paa telefon –
   spoersmaalet «hvem finnes der jeg bor?» skal ikke ligge bak en knapp.

   Paa skjerm legger grid-areas det tilbake oeverst i venstre spalte, over
   resten av filteret. Samme element, to plasser, ingen kopi. */
.bnfilter__layout{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:961px){
  .bnfilter__layout{
    grid-template-columns:272px minmax(0,1fr);
    gap:18px 34px;
    align-items:start;
  }

  /*
   * Arealene settes BARE naar stedskortet faktisk staar der.
   *
   * Uten `:has()` fikk hver layout de tre arealene, ogsaa de som ikke har
   * noe stedskort – og da havnet listen i «sted»-raden i stedet for i
   * sin egen spalte. Den ble 272 piksler bred paa en 1920 pikslers skjerm.
   *
   * Det ble fanget av smalspalte-testen, som maaler nettopp dette fordi
   * listen én gang kollapset til hundre piksler paa /gynekolog/.
   */
  .bnfilter__layout:has(> .bnfilter__stedkort){
    grid-template-areas:"sted liste" "panel liste";
  }
  .bnfilter__layout:has(> .bnfilter__stedkort) > .bnfilter__stedkort{ grid-area:sted; }
  .bnfilter__layout:has(> .bnfilter__stedkort) > .bnfilter-panel{ grid-area:panel; }
  .bnfilter__layout:has(> .bnfilter__stedkort) > .bnfilter-results{ grid-area:liste; }
}

/* Paa telefon er kortet en egen hvit boks, som panelet. Paa skjerm er det
   toppen av venstre spalte, og da skal det se ut som én ting sammen med
   panelet under. */
.bnfilter__stedkort{
  display:block;
  background:var(--fl-white);
  border:1px solid var(--fl-line);
  border-radius:7px;
  padding:14px 16px 16px;
  box-shadow:0 1px 2px rgba(20,36,29,.04), 0 8px 24px -18px rgba(20,36,29,.22);
}
.bnfilter__stedkort > .bnfilter-group{ margin:0; }

/* ---------- panel ----------
   Panelet er et verktoey, ikke en plakat: rolig flate, tydelige grupper og
   nok luft til at oeyet finner fram uten aa lete. Den myke skyggen loefter
   det saa vidt fra siden, slik at det leses som noe man kan bruke. */
.bnfilter-panel{
  background:var(--fl-white);
  border:1px solid var(--fl-line);
  border-radius:7px;
  box-shadow:0 1px 2px rgba(20,36,29,.04), 0 8px 24px -18px rgba(20,36,29,.22);
}
/* Panelet har ingen egen rullefelt paa desktop.
   To rulleflater oppaa hverandre er forvirrende: musehjulet blir fanget i
   panelet, «Nullstill alle filtre» havnet under kanten uten at noe tydet paa
   at det fantes mer, og paa en kort skjerm ble halve panelet usynlig.
   Panelet er i stedet like hoyt som innholdet.

   Klistringen er BETINGET, og skrus paa av skriptet bare naar panelet
   faktisk faar plass i vinduet. Et sticky element som er hoyere enn
   skjermen laaser nemlig fast med bunnen utenfor bildet – da ville
   «Nullstill alle filtre» blitt umulig aa naa. Uten JavaScript ruller
   panelet med siden, som er den trygge oppfoerselen.
   Lange verdilister kortes ned med «Vis alle», se lenger nede. */
@media (min-width:961px){
  .bnfilter-panel.is-klistret{
    position:sticky;
    /* Headeren er sticky. Uten dette la panelet seg under den. */
    top:calc(var(--bnett-sticky-h, 76px) + 16px);
    align-self:start;
  }
}
.bnfilter-panel__grip,
.bnfilter-panel__head,
.bnfilter-panel__foot{ display:none; }

.bnfilter-panel__body{ padding:20px; }

.bnfilter-group{ padding:0 0 18px; margin:0 0 18px; border-bottom:1px solid var(--fl-line); }
.bnfilter-group:last-of-type{ border-bottom:0; padding-bottom:0; margin-bottom:0; }

/* Gruppetitlene er navigasjon, ikke overskrifter. Litt mindre, litt
   tyngre og litt dus – da leser man dem som etiketter og hopper videre
   til valgene, som er det man er ute etter. */
.bnfilter-group__label{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--fl-muted);
  margin:0 0 10px;
}

/* ---------- felt ----------
 *
 * Formen kommer fra den felles feltstilen i bnett-design.css – ikke
 * herfra. Panelet hadde sine egne mål: 6px hjørner, 15px skrift, 1px
 * ramme, 11px fôring. Bestillingsskjemaet hadde 4px, 16px og 1.5px.
 * Samme nettsted, to ulike felt, avhengig av hvilken side du sto på.
 *
 * De 15 pikslene var dessuten en egen feil: under 16px zoomer iOS
 * Safari inn når feltet får fokus, og da hopper hele siden idet
 * brukeren begynner å skrive stedsnavnet sitt.
 *
 * Det som står igjen her, er bare det som er SÆREGENT for panelet:
 * bredden og plassen til nedtrekkspilen.
 */
.bnfilter .bnfilter-input,
.bnfilter .bnfilter-select select{
  width:100%;
  color:var(--fl-ink);
}
.bnfilter .bnfilter-select{ position:relative; }
.bnfilter .bnfilter-select select{ appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; }
.bnfilter .bnfilter-select::after{
  content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--fl-muted); border-bottom:2px solid var(--fl-muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* ---------- segmentert bryter ---------- */
.bnfilter-seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:var(--fl-soft); border-radius:5px; padding:3px;
}
.bnfilter-seg--wide{ grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); }
.bnfilter .bnfilter-seg__btn{
  padding:9px 10px; border-radius:3px; font-size:14px; text-align:center;
  color:var(--fl-ink-2); transition:background .12s ease, color .12s ease;
}
.bnfilter .bnfilter-seg__btn[aria-pressed="true"]{
  background:var(--fl-white); color:var(--fl-ink); font-weight:600;
  box-shadow:none; border:1px solid var(--fl-line-2);
}

/* ---------- autocomplete ---------- */
.bnfilter-place{ margin-top:10px; }
.bnfilter-autocomplete{ position:relative; }
.bnfilter .bnfilter-input__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; font-size:19px; line-height:1;
  color:var(--fl-muted); display:flex; align-items:center; justify-content:center;
}
.bnfilter .bnfilter-input__clear:hover{ background:var(--fl-soft); color:var(--fl-ink); }

.bnfilter-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:30;
  background:var(--fl-white); border:1px solid var(--fl-line);
  border-radius:4px; overflow:hidden; box-shadow:none;
}
.bnfilter .bnfilter-suggest__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  width:100%; padding:10px 13px; text-align:left; font-size:14.5px;
  border-bottom:1px solid var(--fl-line);
}
.bnfilter .bnfilter-suggest__item:last-child{ border-bottom:0; }
.bnfilter .bnfilter-suggest__item:hover{ background:var(--fl-soft); }
.bnfilter .bnfilter-suggest__item b{ font-weight:500; }
.bnfilter .bnfilter-suggest__item em{ font-style:normal; font-size:12px; color:var(--fl-muted); }

/* ---------- populære steder ---------- */
.bnfilter-popular{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }

/* Stedsknappene baerer et tall. Tallet er en opplysning, ikke en del av
   navnet, saa det staar dempet og til hoeyre – da kan man skumme navnene
   loddrett uten at tallene bryter linja. */
.bnfilter .bnfilter-tag{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  font-size:13.5px;
  background:var(--fl-soft);
  border:1px solid var(--fl-line);
  color:var(--fl-ink);
  transition:border-color .12s ease, background .12s ease;
}
.bnfilter .bnfilter-tag:hover{
  background:#e8f0e4;
  border-color:#bcd3c1;
  color:var(--fl-ink);
}
.bnfilter .bnfilter-tag .bnfilter-tag__n,
.bnfilter .bnfilter-tag small{
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--fl-muted);
}

/* ---------- nær meg ---------- */
.bnfilter-near{ margin-top:10px; }
.bnfilter-near__status{ margin:0 0 12px; font-size:13px; color:var(--fl-muted); line-height:1.45; }
.bnfilter-range{ display:block; font-size:13.5px; color:var(--fl-ink-2); }
.bnfilter-range span{ display:block; margin-bottom:7px; }
.bnfilter-range b{ color:var(--fl-ink); font-weight:600; }
.bnfilter-range input[type=range]{ width:100%; accent-color:var(--fl-green); }

/* ---------- chips ---------- */
.bnfilter-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.bnfilter .bnfilter-chip{
  padding:7px 13px; border-radius:999px; font-size:13.5px;
  border:1px solid var(--fl-line-2); background:var(--fl-white); color:var(--fl-ink-2);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.bnfilter .bnfilter-chip:hover{ border-color:var(--fl-green); color:var(--fl-ink); }
.bnfilter .bnfilter-chip[aria-pressed="true"]{
  background:var(--fl-green); border-color:var(--fl-green); color:#fff; font-weight:600;
}

/* ---------- bryter ---------- */
.bnfilter-switch{ display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14.5px; }
.bnfilter-switch input{ position:absolute; opacity:0; width:0; height:0; }
.bnfilter-switch__track{
  flex:0 0 auto; width:40px; height:23px; border-radius:99px;
  background:var(--fl-line-2); position:relative; transition:background .15s ease;
}
.bnfilter-switch__knob{
  position:absolute; top:2.5px; left:2.5px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .15s ease;
  box-shadow:0 1px 2px rgba(20,36,29,.28);
}
.bnfilter-switch input:checked + .bnfilter-switch__track{ background:var(--fl-green); }
.bnfilter-switch input:checked + .bnfilter-switch__track .bnfilter-switch__knob{ transform:translateX(17px); }
.bnfilter-switch input:focus-visible + .bnfilter-switch__track{ outline:2px solid var(--fl-green); outline-offset:2px; }

/* ---------- nullstill ---------- */
.bnfilter .bnfilter-reset{
  width:100%; padding:10px; border-radius:4px; font-size:14px;
  color:var(--fl-muted); border:1px solid var(--fl-line);
}
.bnfilter .bnfilter-reset:hover{ color:var(--fl-ink); border-color:var(--fl-line-2); }

/* ---------- knapper ---------- */
.bnfilter .bnfilter-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:4px; font-size:15px; font-weight:600;
  border:1px solid var(--fl-line-2); background:var(--fl-white); color:var(--fl-ink);
}
.bnfilter .bnfilter-btn:hover{ border-color:var(--fl-green); }
.bnfilter .bnfilter-btn--primary{ background:var(--fl-green); border-color:var(--fl-green); color:#fff; }
.bnfilter .bnfilter-btn--primary:hover{ background:var(--fl-green-dark); border-color:var(--fl-green-dark); color:#fff; }

/* ---------- resultater ---------- */
.bnfilter-results__bar{
  display:flex; align-items:center; gap:10px;
  padding:0 0 12px; margin:0 0 4px; border-bottom:1px solid var(--fl-line);
}
.bnfilter-results__count{ font-size:14.5px; color:var(--fl-muted); font-variant-numeric:tabular-nums; }
.bnfilter-results__spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--fl-line-2); border-top-color:var(--fl-green);
  animation:bnfilter-spin .7s linear infinite;
}
@keyframes bnfilter-spin{ to{ transform:rotate(360deg); } }

.bnfilter-active{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 4px; }
.bnfilter-active:empty{ display:none; }
.bnfilter .bnfilter-active__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:4px; font-size:13px;
  background:var(--fl-soft); color:var(--fl-ink-2); border:1px solid var(--fl-line);
}
.bnfilter .bnfilter-active__chip:hover{ color:var(--fl-ink); border-color:var(--fl-line-2); }
.bnfilter .bnfilter-active__chip svg{ opacity:.55; flex:0 0 auto; }
.bnfilter .bnfilter-active__chip:hover svg{ opacity:1; }
.bnfilter .bnfilter-active__clear{
  padding:6px 4px; font-size:13px; color:var(--fl-green-dark); text-decoration:underline;
}

.bnfilter-list{ margin-top:16px; }
.bnfilter-more{ margin-top:22px; text-align:center; }

/* ---------- tom tilstand ---------- */
.bnfilter-empty{
  padding:38px 24px; text-align:center;
  border:1px dashed var(--fl-line-2); border-radius:5px; background:var(--fl-white);
}
.bnfilter-empty__title{ font-size:17px; font-weight:600; margin-bottom:7px; }
.bnfilter-empty__text{ margin:0 0 18px; color:var(--fl-muted); font-size:14.5px; }

/* ---------- mobil: knapp + ark ---------- */
.bnfilter .bnfilter-openBtn{ display:none; }

@media (max-width:960px){
  .bnfilter .bnfilter-openBtn{
    display:inline-flex; align-items:center; gap:9px;
    width:100%; justify-content:center;
    padding:13px 18px; border-radius:4px; margin:0 0 16px;
    border:1px solid var(--fl-line-2); background:var(--fl-white);
    font-size:15px; font-weight:600; color:var(--fl-ink);
  }
  .bnfilter .bnfilter-openBtn__count{
    min-width:21px; height:21px; padding:0 6px; border-radius:3px;
    background:var(--fl-green); color:#fff; font-size:12px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
  }

  .bnfilter-backdrop{
    position:fixed; inset:0; z-index:9998;
    background:rgba(16,32,24,.42); opacity:0; transition:opacity .25s ease;
  }
  .bnfilter-backdrop.is-open{ opacity:1; }

  .bnfilter-panel{
    position:fixed; left:0; right:0; bottom:0; z-index:9999;
    max-height:88vh; display:flex; flex-direction:column;
    border:0; border-radius:9px 18px 0 0;
    transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -14px 40px -12px rgba(16,32,24,.32);
  }
  .bnfilter-panel.is-open{ transform:translateY(0); }

  .bnfilter-panel__grip{
    display:block; width:38px; height:4px; border-radius:99px;
    background:var(--fl-line-2); margin:9px auto 2px;
  }
  .bnfilter-panel__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 18px 12px; border-bottom:1px solid var(--fl-line);
  }
  .bnfilter-panel__title{ font-size:16px; font-weight:600; }
  .bnfilter .bnfilter-panel__close{
    width:32px; height:32px; border-radius:50%; font-size:24px; line-height:1;
    color:var(--fl-muted); display:flex; align-items:center; justify-content:center;
  }
  .bnfilter .bnfilter-panel__close:hover{ background:var(--fl-soft); color:var(--fl-ink); }

  .bnfilter-panel__body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px; }
  .bnfilter-panel__foot{
    display:block; padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--fl-line); background:var(--fl-white);
  }
  .bnfilter-panel__foot .bnfilter-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .bnfilter-panel, .bnfilter-backdrop, .bnfilter .bnfilter-chip, .bnfilter .bnfilter-seg__btn,
  .bnfilter-switch__track, .bnfilter-switch__knob{ transition:none !important; }
  .bnfilter-results__spinner{ animation:none; }
}


/* Bakgrunnsforsvaret og autofyll-håndteringen lå her, uten !important –
   og dermed tapte de mot temaets egen input-regel. Begge deler står nå
   i den felles feltstilen i bnett-design.css, ett sted for hele
   nettstedet. Det som blir igjen her, er bare søkefeltets egne pynt. */
.bnfilter input[type="search"]::-webkit-search-decoration,
.bnfilter input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* ---- Sted dempes naar videotime er valgt ---- */
.bnfilter .bnfilter-group.is-dimmed .bnfilter-seg,
.bnfilter .bnfilter-group.is-dimmed .bnfilter-place,
.bnfilter .bnfilter-group.is-dimmed .bnfilter-near{
  opacity:.42;
  transition:opacity .18s ease;
}
.bnfilter .bnfilter-group.is-dimmed:hover .bnfilter-seg,
.bnfilter .bnfilter-group.is-dimmed:focus-within .bnfilter-seg,
.bnfilter .bnfilter-group.is-dimmed:hover .bnfilter-place,
.bnfilter .bnfilter-group.is-dimmed:focus-within .bnfilter-place,
.bnfilter .bnfilter-group.is-dimmed:hover .bnfilter-near,
.bnfilter .bnfilter-group.is-dimmed:focus-within .bnfilter-near{
  opacity:1;
}
.bnfilter .bnfilter-note{
  margin:0 0 10px; padding:9px 11px;
  background:var(--fl-soft); border-left:2px solid var(--fl-green);
  border-radius:3px; font-size:12.5px; line-height:1.45; color:var(--fl-ink-2);
}

/* ---- Litt mer luft mellom gruppene, roligere skiller ---- */
.bnfilter .bnfilter-group{ padding-bottom:20px; margin-bottom:20px; }
.bnfilter .bnfilter-panel__body{ padding:20px; }

/* ---- Stedsliste i «Hvor» (erstatter [ptlr_location_counts_list]) ---- */
.bnfilter .bnfilter-popular__title{
  margin:12px 0 6px;
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fl-muted);
}
.bnfilter .bnfilter-tag__count{
  margin-left:5px; font-size:11.5px; font-weight:600; opacity:.6;
  font-variant-numeric:tabular-nums;
}
.bnfilter .bnfilter-tag.is-on{
  background:var(--fl-green, #388051); border-color:var(--fl-green, #388051); color:#fff;
}
.bnfilter .bnfilter-tag.is-on .bnfilter-tag__count{ opacity:.85; }
.bnfilter .bnfilter-suggest__item em{
  margin-left:auto; padding-left:10px; font-style:normal;
  font-size:12px; color:var(--fl-muted); white-space:nowrap;
}

/* ---------- lange verdilister ----------
   Panelet skal holde seg kortere enn skjermen. Verdilister med mange
   alternativer vises derfor avkortet, med «Vis alle» under. Ren CSS:
   en skjult avkrysning styrer resten, slik at knappen virker selv om
   JavaScript er utsatt eller siden kommer fra cache. */
/* Avkrysningen ligger inne i sin egen gruppe, rett ved knappen den styrer.
   Et klikk paa «Vis alle» flytter fokus dit – og siden knappen allerede er i
   bildet, har nettleseren ingenting aa rulle til. */
.bnfilter-group{ position:relative; }
.bnfilter .bnfilter-mer__styr{
  position:absolute; left:0; top:0; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none;
}
.bnfilter .bnfilter-chips--kortet .bnfilter-chip:nth-child(n+7){ display:none; }
.bnfilter .bnfilter-mer__styr:checked ~ .bnfilter-chips--kortet .bnfilter-chip:nth-child(n+7){
  display:inline-flex;
}
.bnfilter .bnfilter-popular--kortet .bnfilter-tag:nth-child(n+7){ display:none; }
.bnfilter .bnfilter-mer__styr:checked ~ .bnfilter-popular--kortet .bnfilter-tag:nth-child(n+7){
  display:inline-flex;
}
.bnfilter .bnfilter-mer{
  display:inline-block; margin:9px 0 0; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--fl-green-dark,#2f7048);
  text-decoration:underline; text-underline-offset:3px;
}
.bnfilter .bnfilter-mer:hover{ color:var(--fl-ink,#14241d); }
.bnfilter .bnfilter-mer__mindre{ display:none; }
.bnfilter .bnfilter-mer__styr:checked ~ .bnfilter-mer .bnfilter-mer__mer{ display:none; }
.bnfilter .bnfilter-mer__styr:checked ~ .bnfilter-mer .bnfilter-mer__mindre{ display:inline; }
.bnfilter .bnfilter-mer__styr:focus-visible ~ .bnfilter-mer{
  outline:2px solid var(--fl-green,#388051); outline-offset:2px; border-radius:3px;
}

/* ---------- statuslinje ved oppdatering ----------
   Et filtervalg gjoeres ofte langt nede paa siden. Da er baade telleren og
   toppen av listen utenfor bildet, og et klikk paa «Sorg» foeltes som om
   ingenting skjedde. Denne linjen ligger fast i bunnen av vinduet og sier
   hva som skjer – foerst «Oppdaterer treffene», saa hva resultatet ble. */
.bnfilter-varsel{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  z-index:9998;
  display:flex; align-items:center; gap:10px;
  max-width:min(92vw,460px);
  padding:11px 18px;
  border-radius:999px;
  background:#14241d; color:#fff;
  font-size:14.5px; line-height:1.35; font-weight:500;
  box-shadow:0 10px 30px -8px rgba(16,32,24,.45);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.bnfilter-varsel.is-synlig{ opacity:1; transform:translateX(-50%) translateY(0); }
.bnfilter-varsel__snurr{
  width:15px; height:15px; flex:none; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:bnfilter-snurr .7s linear infinite;
  display:none;
}
.bnfilter-varsel.is-jobber .bnfilter-varsel__snurr{ display:block; }
.bnfilter-varsel.is-ferdig{ background:#2f7048; }
@keyframes bnfilter-snurr{ to{ transform:rotate(360deg); } }

/* Mobil: over «Filtrer»-knappen, ikke oppaa den. */
@media (max-width:960px){
  .bnfilter-varsel{ bottom:84px; }
}

/* ---------- listen mens den hentes ----------
   Kortene dempes og laases, slik at man ser at innholdet er paa vei ut. */
.bnfilter-list.is-laster{
  opacity:.45; pointer-events:none;
  transition:opacity .12s ease;
}

/* Telleren blinker kort naar tallet er nytt. */
.bnfilter-results__count.er-oppdatert{
  animation:bnfilter-blink 1.1s ease;
  border-radius:4px;
}
@keyframes bnfilter-blink{
  0%   { background:rgba(56,128,81,.20); box-shadow:0 0 0 5px rgba(56,128,81,.20); color:var(--fl-ink); }
  70%  { background:rgba(56,128,81,.10); box-shadow:0 0 0 5px rgba(56,128,81,.10); color:var(--fl-ink); }
  100% { background:transparent; box-shadow:0 0 0 5px transparent; }
}

/* «Nær meg»-knappen mens posisjonen hentes. */
.bnfilter .bnfilter-seg__btn.is-jobber{ opacity:.75; }
.bnfilter .bnfilter-seg__btn.is-jobber::after{
  content:""; display:inline-block; width:11px; height:11px; margin-left:7px;
  vertical-align:-1px; border-radius:50%;
  border:2px solid rgba(20,36,29,.25); border-top-color:var(--fl-green);
  animation:bnfilter-snurr .7s linear infinite;
}
.bnfilter-near__status{ transition:color .2s ease; }
.bnfilter-near__status.er-viktig{ color:var(--fl-ink); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .bnfilter-varsel{ transition:none; }
  .bnfilter-varsel__snurr,
  .bnfilter .bnfilter-seg__btn.is-jobber::after{ animation:none; }
  .bnfilter-results__count.er-oppdatert{ animation:none; }
}

/* ============================================================
   Behandlere fra nabostedene
   ============================================================

   Står det tre psykologer i Porsgrunn, fyller vi på med dem som holder til
   i nærheten – men i en EGEN bolk, ikke blandet inn i listen.

   Den gamle løsningen i ruteren blandet dem rett inn uten å si fra. En som
   leter i Porsgrunn fikk en psykolog i Oslo i listen, oppdaget det selv når
   hun ringte, og da er det oss hun har mistet tilliten til.

   Derfor: en strek over, en overskrift som sier hva dette er, og avstanden
   på hvert eneste kort.
   ============================================================ */
.bnfilter .bnfilter-naer{
  display:block;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--fl-line);
}
.bnfilter .bnfilter-naer__topp{ margin-bottom:16px; }
.bnfilter .bnfilter-naer__tittel{
  margin:0;
  color:var(--fl-ink);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
}
.bnfilter .bnfilter-naer__ingress{
  margin:6px 0 0;
  color:var(--fl-muted);
  font-size:14.5px;
  line-height:1.5;
}
.bnfilter .bnfilter-naer__liste{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bnfilter .bnfilter-naer__kort{ display:block; }

/*
 * Avstanden står OVER kortet, ikke inni det.
 *
 * Kortet tegnes av BNETT_Kort, og den vet ingenting om hvor brukeren leter
 * fra – avstanden er en opplysning om søket, ikke om behandleren. Legges
 * den utenpå, slipper vi å sende en søkekontekst inn i kortrendereren og
 * kan vise det samme kortet overalt.
 */
.bnfilter .bnfilter-naer__avstand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 6px;
  padding:4px 10px;
  background:var(--fl-soft);
  border:1px solid var(--fl-line);
  border-radius:100px;
  color:var(--fl-ink-2);
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
}
.bnfilter .bnfilter-naer__avstand svg{ color:var(--fl-green); flex:none; }

@media (max-width:620px){
  .bnfilter .bnfilter-naer{ margin-top:22px; padding-top:20px; }
  .bnfilter .bnfilter-naer__tittel{ font-size:17.5px; }
}

/* «Betalte plasseringer vises først».

   Dempet med vilje. Den skal vaere lett aa finne naar man lurer, og lett
   aa overse naar man ikke gjoer det – ikke en advarsel. */
.bnfilter-plassering{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--fl-muted, #5a6b62);
}
.bnfilter-plassering svg{ flex:0 0 auto; margin-top:2px; opacity:.75; }