/* ==========================================================================
   Bridle2Fit · WP Store Locator (borden Verkooppunten en MVerkooppunten)
   Hoofdstuk 3a.2 en 7.4. De plugin houdt de verkooppunten, het zoeken en de
   kaart; het thema geeft alleen de schil.
   Mobiel: zoekkaart, de link om de kaart over te slaan, kaart van 260 px,
   lijst. Tablet: zoekveld en radius op één regel, kaart boven de lijst.
   Desktop: links zoeken en de lijst, rechts de kaart.
   ========================================================================== */

#wpsl-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"search" "skip" "map" "list";
  gap:16px;
  margin:0;
  padding:0 0 var(--b2f-section-y);
  font-family:var(--b2f-font);
}
#wpsl-wrap .wpsl-search{grid-area:search;margin:0;padding:20px;border:1px solid var(--b2f-line);background:var(--b2f-paper)}
#wpsl-wrap .wpsl-skip-to-results{grid-area:skip}
/* !important bij de hoogte, hier en in de mediaregels hieronder: de plugin zet
   de kaarthoogte uit zijn instellingen met !important in een style-blok. */
#wpsl-wrap #wpsl-map{grid-area:map;width:100%;height:260px !important;margin:0;border:1px solid var(--b2f-line)}
#wpsl-wrap #wpsl-result-list{grid-area:list;width:100%;margin:0}

/* ---------- Zoeken ---------- */
/* De plugin werkt hier met zware selectors en floats. Daarom drie id's in de
   selector, en floats binnen het zoekblok met !important uit: de plugin zet ze
   op allerlei div's met eigen id's. Haal je het weg, dan valt het zoekblok
   weer in kolommen uit elkaar. */

#wpsl-wrap #wpsl-search-wrap div{float:none !important;margin-inline-end:0 !important}
#wpsl-wrap #wpsl-search-wrap form{display:flex;flex-direction:column;gap:16px;margin:0}
#wpsl-wrap #wpsl-search-wrap .wpsl-input,
#wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap,
#wpsl-wrap #wpsl-search-wrap #wpsl-radius,
#wpsl-wrap #wpsl-search-wrap #wpsl-results{
  display:block;
  width:auto;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0;
}
#wpsl-wrap #wpsl-search-wrap label{
  display:block;
  float:none;
  width:auto;
  margin:0 0 8px;
  font-size:11.5px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--b2f-muted);
}
#wpsl-wrap #wpsl-search-wrap #wpsl-search-input{
  width:100% !important; /* !important: de plugin zet een vaste breedte met !important in een style-blok */
  height:auto;
  min-height:54px;
  padding:12px 14px 12px 40px;
  border:1px solid var(--b2f-line);
  border-radius:0;
  background:var(--b2f-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5B60' stroke-width='1.4'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0113 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") no-repeat 14px center;
  color:var(--b2f-charcoal);
  font:inherit;
  font-size:16px;
  line-height:1.4;
}
#wpsl-wrap #wpsl-search-wrap #wpsl-search-input:focus{outline:none;border-color:var(--b2f-gold-deep);box-shadow:inset 0 0 0 1px var(--b2f-gold-deep)}
#wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap{display:flex;flex-direction:column;gap:16px}

/* Radius als chips (locator.js). De keuzelijst van de plugin blijft bestaan en
   bepaalt het zoeken; de chips zetten alleen zijn waarde. !important: de
   plugin-JS zet display en breedte als style-attribuut op zijn keuzelijst. */
#wpsl-wrap #wpsl-search-wrap #wpsl-radius.b2f-has-chips .wpsl-dropdown,
#wpsl-wrap #wpsl-search-wrap #wpsl-radius.b2f-has-chips select{display:none !important}
#wpsl-wrap #wpsl-search-wrap .b2f-radius-chips{display:flex;flex-wrap:wrap;gap:8px}
#wpsl-wrap #wpsl-search-wrap .b2f-radius-chips .b2f-chip{
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--b2f-line);
  border-radius:0;
  background:transparent;
  color:var(--b2f-charcoal);
  font:inherit;
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
}
#wpsl-wrap #wpsl-search-wrap .b2f-radius-chips .b2f-chip[aria-checked="true"]{border-color:var(--b2f-gold-deep);box-shadow:inset 0 0 0 1px var(--b2f-gold-deep)}

/* Aantal resultaten: de eigen keuzelijst van de plugin, klein gehouden. */
#wpsl-wrap #wpsl-search-wrap #wpsl-results{display:flex;justify-content:flex-start;align-items:center;gap:12px;text-align:left}
#wpsl-wrap #wpsl-search-wrap #wpsl-results label{flex:none;margin:0}
/* !important bij de breedte: de plugin-JS meet zijn keuzelijsten op en zet de
   breedte als style-attribuut. */
#wpsl-wrap #wpsl-search-wrap #wpsl-results select,
#wpsl-wrap #wpsl-search-wrap #wpsl-results .wpsl-dropdown{width:auto !important;min-width:80px;min-height:44px;border:1px solid var(--b2f-line);border-radius:0;background-color:var(--b2f-paper);font:inherit;font-size:14px}
#wpsl-wrap .wpsl-dropdown{width:auto !important;min-width:80px;border:1px solid var(--b2f-line);border-radius:0;background:var(--b2f-paper);font-size:14px}
#wpsl-wrap .wpsl-dropdown .wpsl-selected-item{padding:10px 30px 10px 12px}

/* Knop Zoeken in de vorm van .b2f-btn--gold, compact. */
#wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap{display:block;float:none;margin:0}
#wpsl-wrap #wpsl-search-wrap #wpsl-search-btn{
  display:block;
  height:auto;
  width:100%;
  min-height:48px;
  margin:0;
  padding:0 20px;
  border:0;
  border-radius:0;
  background:var(--b2f-gold);
  color:var(--b2f-graphite);
  font:600 12.5px/1.2 var(--b2f-font);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:filter var(--b2f-dur) var(--b2f-ease);
}
#wpsl-wrap #wpsl-search-wrap #wpsl-search-btn:hover{filter:brightness(1.08)}
#wpsl-wrap #wpsl-search-wrap #wpsl-search-btn:focus-visible{outline:2px solid var(--b2f-gold-deep);outline-offset:2px}

/* "Sla de kaart over": blijft zichtbaar (hoofdstuk 8), niet alleen bij focus.
   De plugin verplaatst de link met JavaScript naar binnen de kaart; daar staat
   hij rechtsboven, zoals op het bord. Zonder JavaScript staat hij boven de kaart. */
#wpsl-wrap .wpsl-skip-to-results{
  grid-area:skip;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  width:auto;
  height:auto;
  clip:auto;
  overflow:visible;
  font-size:12.5px;
  color:var(--b2f-gold-deep);
  text-decoration:underline;
  text-underline-offset:5px;
}
#wpsl-wrap #wpsl-map .wpsl-skip-to-results{
  position:absolute;
  top:12px;
  right:12px;
  left:auto;
  z-index:1000;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
  color:var(--b2f-charcoal);
  text-decoration:none;
}

/* Zoomknoppen van de kaart: aanraakvlak 44 px, vierkant zoals de rest.
   !important: Google Maps zet maten en hoeken als style-attribuut. */
#wpsl-wrap .leaflet-bar a,
#wpsl-wrap .gm-control-active{width:44px !important;height:44px !important;line-height:44px !important;border-radius:0 !important}
#wpsl-wrap .leaflet-bar{border-radius:0;border:1px solid var(--b2f-line);box-shadow:none}
#wpsl-wrap #wpsl-map .wpsl-skip-to-results:focus-visible{outline:2px solid var(--b2f-gold-deep);outline-offset:2px}

/* ---------- Resultaten ---------- */

/* !important: de plugin zet de hoogte van de lijst met !important in een
   style-blok; hier groeit de lijst gewoon mee. */
#wpsl-wrap #wpsl-stores{height:auto !important;overflow:visible}
#wpsl-wrap #wpsl-stores ul{counter-reset:b2f-store;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
#wpsl-wrap #wpsl-stores li{
  counter-increment:b2f-store;
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:2px 12px;
  margin:0;
  padding:14px 16px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
  font-size:13.5px;
  transition:border-color var(--b2f-dur) var(--b2f-ease);
}
#wpsl-wrap #wpsl-stores li::before{
  content:counter(b2f-store);
  grid-row:1 / span 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:var(--b2f-radius-round);
  background:var(--b2f-graphite);
  color:var(--b2f-warm-white);
  font-size:11px;
}
#wpsl-wrap #wpsl-stores li:hover,
#wpsl-wrap #wpsl-stores li.wpsl-active,
#wpsl-wrap #wpsl-stores li.wpsl-store-active{border-color:var(--b2f-gold-deep);box-shadow:inset 0 0 0 1px var(--b2f-gold-deep)}
#wpsl-wrap #wpsl-stores li.wpsl-no-results-msg{display:block;text-align:center;color:var(--b2f-muted)}
#wpsl-wrap #wpsl-stores li.wpsl-no-results-msg::before{content:none}
#wpsl-wrap .wpsl-store-location{grid-column:2;min-width:0}
#wpsl-wrap .wpsl-store-location p{margin:0;line-height:1.5}
#wpsl-wrap .wpsl-store-location strong{display:block;font-size:15px;font-weight:400;color:var(--b2f-charcoal)}
#wpsl-wrap .wpsl-store-location span{display:block;color:var(--b2f-muted)}
#wpsl-wrap .wpsl-store-thumb{display:none}
#wpsl-wrap .wpsl-direction-wrap{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;white-space:nowrap}
#wpsl-wrap .wpsl-distance{font-size:13px;color:var(--b2f-muted)}
#wpsl-wrap .wpsl-directions{position:relative;font-size:12px;color:var(--b2f-charcoal);text-decoration:underline;text-underline-offset:4px}
#wpsl-wrap .wpsl-directions::after{content:"";position:absolute;inset:-12px -6px}

/* Kaart: popups van de plugin in de huisstijl. */
#wpsl-wrap .wpsl-info-window,
#wpsl-wrap .leaflet-popup-content{font-family:var(--b2f-font);font-size:13.5px;color:var(--b2f-charcoal)}
#wpsl-wrap .leaflet-popup-content-wrapper,
#wpsl-wrap .leaflet-popup-tip{border-radius:0}

/* ---------- Tablet: zoekveld en radius op één regel, kaart boven de lijst ---------- */

@media (min-width:768px){
  #wpsl-wrap #wpsl-search-wrap form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;gap:16px 20px}
  #wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap{grid-column:1 / -1}
  #wpsl-wrap #wpsl-map{height:380px !important}
  #wpsl-wrap .wpsl-skip-to-results{justify-self:end}
}

/* ---------- Desktop: links zoeken en lijst, rechts de kaart ---------- */

@media (min-width:1100px){
  #wpsl-wrap{
    grid-template-columns:380px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"search map" "list map";
    gap:16px 32px;
    align-items:start;
  }
  #wpsl-wrap #wpsl-search-wrap form{display:flex;flex-direction:column}
  #wpsl-wrap #wpsl-map{
    position:sticky;
    top:calc(var(--b2f-header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px);
    height:620px !important;
  }
}