/* Blood Clinic locations finder — self-contained, scoped under .bclml-locator so
   it drops into any page (Elementor) without leaking styles or colliding.
   Black / gold / Poppins to match the site. Leaflet's own CSS is loaded
   separately; the .leaflet-* overrides below only apply inside our map. */

.bclml-locator{
  --bg:#0A0A0A; --card:#141414; --raise:#1C1C1C; --raise-2:#242424;
  --ink:#FFFFFF; --ink-soft:#B4B4B4; --ink-dim:#7A7A7A;
  --gold:#E6BB03; --gold-2:#F5CE2E; --gold-ink:#161100;
  --gold-wash:rgba(230,187,3,.13); --gold-line:rgba(230,187,3,.38);
  --line:#2A2A2A; --line-soft:#202020; --r:16px; --r-sm:11px;
  font-family:'Poppins',system-ui,sans-serif; color:var(--ink); line-height:1.5;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7); overflow:hidden;
  display:grid; grid-template-columns:minmax(320px,400px) 1fr;
  width:100%; margin:0 auto; -webkit-font-smoothing:antialiased;
}
.bclml-locator *{box-sizing:border-box;margin:0;padding:0}
.bclml-locator .num{font-variant-numeric:tabular-nums}
.bclml-locator .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---- Left panel ------------------------------------------------------ */
.bclml-locator__panel{display:flex;flex-direction:column;min-height:520px;max-height:640px;border-right:1px solid var(--line-soft)}
.bclml-locator__head{padding:22px 22px 16px}
.bclml-locator__head h2{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.bclml-locator__head p{font-size:12.5px;color:var(--ink-soft);margin-top:4px}

.bclml-locator__search{padding:0 22px 14px}
.bclml-locator__search-row{position:relative;display:flex;gap:8px;align-items:stretch}
.bclml-locator__search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-dim);pointer-events:none}
.bclml-locator__search-ic svg{width:17px;height:17px;display:block}
.bclml-locator__search input{flex:1;font-family:inherit;font-size:15px;padding:12px 14px 12px 38px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--raise);color:var(--ink);width:100%}
.bclml-locator__search input::placeholder{color:var(--ink-dim)}
.bclml-locator__search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.bclml-locator__go{flex:none;font-family:inherit;font-size:14px;font-weight:700;padding:0 18px;border:0;border-radius:var(--r-sm);background:var(--gold);color:var(--gold-ink);cursor:pointer;transition:.16s}
.bclml-locator__go:hover{background:var(--gold-2)}
.bclml-locator__go:disabled{opacity:.6;cursor:default}

.bclml-locator__legend{display:flex;gap:16px;padding:0 22px 12px;flex-wrap:wrap}
.bclml-locator__leg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft)}
.bclml-locator__dot{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(45deg);flex:none}
.bclml-locator__dot--own{background:var(--gold);box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 3px var(--gold)}
.bclml-locator__dot--partner{background:var(--gold);opacity:.85}

.bclml-locator__status{padding:0 22px;font-size:12.5px;color:var(--gold-2);min-height:0}
.bclml-locator__status:not(:empty){padding-bottom:10px}

/* ---- Result list ----------------------------------------------------- */
.bclml-locator__list{flex:1;overflow-y:auto;padding:4px 22px 22px;display:grid;gap:10px;align-content:start}
.bclml-locator__empty{padding:26px 18px;text-align:center;font-size:13px;color:var(--ink-soft);border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--raise)}

.bclml-locator__card{position:relative;text-align:left;width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;background:var(--raise);cursor:pointer;transition:.15s;font-family:inherit;color:var(--ink);display:block}
.bclml-locator__card:hover{border-color:var(--gold-line);background:var(--raise-2)}
.bclml-locator__card.is-active{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.bclml-locator__card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bclml-locator__card-name{font-weight:600;font-size:14.5px;line-height:1.35}
.bclml-locator__card-badge{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
.bclml-locator__card-badge--own{background:var(--gold);color:var(--gold-ink)}
.bclml-locator__card-badge--partner{background:var(--gold-wash);color:var(--gold-2);border:1px solid var(--gold-line)}
.bclml-locator__card-addr{font-size:12.5px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
.bclml-locator__card-meta{display:flex;align-items:center;gap:12px;margin-top:11px}
.bclml-locator__card-dist{font-size:12px;font-weight:600;color:var(--gold-2)}
.bclml-locator__card-dist svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px;stroke:currentColor;fill:none}
.bclml-locator__card-links{display:flex;gap:8px;margin-top:12px}
.bclml-locator__card-link{font-size:12px;font-weight:600;text-decoration:none;padding:8px 12px;border-radius:9px;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.bclml-locator__card-link--primary{background:var(--gold);color:var(--gold-ink)}
.bclml-locator__card-link--primary:hover{background:var(--gold-2)}
.bclml-locator__card-link--ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.bclml-locator__card-link--ghost:hover{border-color:var(--gold-line);color:var(--ink)}
.bclml-locator__card-link svg{width:13px;height:13px;stroke:currentColor;fill:none}

/* ---- Map ------------------------------------------------------------- */
.bclml-locator__map-wrap{position:relative;min-height:520px}
.bclml-locator__map{position:absolute;inset:0;height:100%;width:100%;background:var(--raise)}
.bclml-locator .leaflet-container{font-family:inherit;background:var(--raise)}

/* Custom droplet pins (Leaflet divIcon) */
.bclml-pin{display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.bclml-pin svg{display:block}
.bclml-pin__drop{fill:var(--gold);stroke:#8a6a00;stroke-width:.7}
.bclml-pin__gloss{fill:rgba(255,255,255,.55)}
.bclml-pin--own .bclml-pin__drop{fill:var(--gold-2);stroke:#fff;stroke-width:1.3}
.bclml-pin--own .bclml-pin__gloss{fill:rgba(255,255,255,.7)}
.bclml-pin.is-active{filter:drop-shadow(0 0 6px rgba(230,187,3,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.5));z-index:1000}
.bclml-pin.is-active svg{transform:scale(1.18);transform-origin:bottom center}
.bclml-pin--origin .bclml-pin__drop{fill:#fff;stroke:var(--gold);stroke-width:1.3}
.bclml-pin--origin .bclml-pin__gloss{fill:rgba(230,187,3,.5)}

/* Dark popups to match the finder */
.bclml-locator .leaflet-popup-content-wrapper{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.bclml-locator .leaflet-popup-tip{background:var(--card);border:1px solid var(--line)}
.bclml-locator .leaflet-popup-content{margin:12px 14px;font-size:13px;line-height:1.5}
.bclml-locator .leaflet-popup-content b{color:var(--ink);font-weight:600}
.bclml-locator .leaflet-popup-content .bclml-pop-addr{color:var(--ink-soft);font-size:12px;display:block;margin-top:3px}
.bclml-locator .leaflet-popup-content a{color:var(--gold-2);font-weight:600;text-decoration:none}
.bclml-locator .leaflet-popup-close-button{color:var(--ink-dim)!important}
.bclml-locator .leaflet-bar a{background:var(--raise);color:var(--ink);border-bottom-color:var(--line)}
.bclml-locator .leaflet-bar a:hover{background:var(--raise-2)}
.bclml-locator .leaflet-control-attribution{background:rgba(20,20,20,.8);color:var(--ink-dim)}
.bclml-locator .leaflet-control-attribution a{color:var(--ink-soft)}

/* ---- Responsive: stack list above map ------------------------------- */
@media (max-width:820px){
  .bclml-locator{grid-template-columns:1fr}
  .bclml-locator__panel{max-height:none;min-height:0;border-right:0;border-bottom:1px solid var(--line-soft)}
  .bclml-locator__list{max-height:340px}
  .bclml-locator__map-wrap{min-height:360px;order:2}
}
@media (prefers-reduced-motion:reduce){
  .bclml-locator__card,.bclml-locator__go,.bclml-pin svg{transition:none}
}