:root {
    --navy: #075180;
    --navy-dark: #082f50;
    --magenta: #a80059;
    --gold: #dbad22;
    --orange: #ef552b;
    --ink: #19212a;
    --muted: #64717d;
    --line: #d8e0e5;
    --soft: #f2f4f5;
    --white: #fff;
    --shadow: 0 18px 45px rgba(8, 47, 80, .16);
}

.locations { padding: 76px 5vw 92px; background: #fff; }
.section-title { max-width: 800px; margin: 0 auto 38px; text-align: center; }
.eyebrow { margin: 0 0 9px; color: var(--magenta); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.section-title h2 { margin: 0 0 13px; color: var(--navy-dark); font-size: clamp(32px, 4vw, 51px); line-height: 1.08; font-weight: 650; }
.section-title p { margin: 0; color: var(--muted); font-size: 17px; }

.explorer {
    max-width: 1440px;
    min-height: 740px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(355px, .83fr) minmax(580px, 1.35fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}
.list-panel { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.list-head { padding: 26px 27px 20px; border-bottom: 1px solid var(--line); }
.list-head h3 { margin: 0 0 5px; color: var(--navy-dark); font-size: 23px; }
.list-head p { margin: 0; color: var(--muted); font-size: 13px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.filter {
    border: 1px solid #c8d3db;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--navy-dark);
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.filter:hover, .filter.is-active { border-color: var(--magenta); color: #fff; background: var(--magenta); }
.facility-list { flex: 1; max-height: 635px; overflow: auto; padding: 17px 17px 26px; scrollbar-width: thin; scrollbar-color: #aebbc4 transparent; }
.facility-group + .facility-group { margin-top: 22px; }
.facility-group h4 { margin: 0 10px 8px; font-size: 15px; }
.facility {
    width: 100%;
    display: grid;
    grid-template-columns: 31px 1fr 16px;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--magenta);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}
.facility:hover, .facility:focus-visible, .facility.is-active { color: var(--magenta); background: #f8eef3; transform: translateX(3px); }
.facility.is-muted { color:var(--navy-dark); display:none; }
.facility__name { font-size: 13px; line-height: 1.3; font-weight: 560; }
.facility__arrow { opacity: 0; font-size: 18px; font-weight: 800; }
.facility:hover .facility__arrow, .facility.is-active .facility__arrow { color: var(--magenta); }
.type {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    color: var(--navy-dark);
    font-size: 13px;
    font-weight: 850;
}
/* .type.physician { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 6px; }
.type.imaging { border-radius: 50%; }
.type.surgery { border-radius: 1px; }
.type.therapy { background: var(--orange); clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 92%, 50% 71%, 21% 92%, 32% 56%, 2% 35%, 39% 34%); } */

.map-panel { position: relative; min-width: 0; min-height: 740px; background: #e7ecef; }
#street-map { position: absolute; inset: 0; z-index: 1; }
.map-instruction {
    position: absolute;
    z-index: 500;
    top: 18px;
    left: 50%;
    max-width: calc(100% - 150px);
    padding: 9px 14px;
    border: 1px solid rgba(8,47,80,.16);
    border-radius: 9px;
    color: var(--navy-dark);
    background: rgba(255,255,255,.95);
    box-shadow: 0 5px 18px rgba(8,47,80,.15);
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}
.reset-map {
    position: absolute;
    z-index: 500;
    top: 18px;
    right: 18px;
    display: none;
    border: 1px solid rgba(8,47,80,.18);
    padding: 9px 13px;
    border-radius: 8px;
    color: var(--navy-dark);
    background: rgba(255,255,255,.96);
    box-shadow: 0 5px 18px rgba(8,47,80,.15);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}
.map-panel.is-zoomed .reset-map { display: block; }
.map-panel.is-zoomed .map-instruction { left: 18px; transform: none; }

.county-marker { background: transparent; border: 0; }
.county-bubble {
    width: 88px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--navy);
    box-shadow: 0 10px 25px rgba(8,47,80,.32);
    transition: transform .16s ease, background .16s ease;
}
.county-bubble:hover, .county-bubble.is-highlighted { background: var(--magenta); transform: scale(1.08); }
.county-bubble strong { font-size: 28px; line-height: 1; }
.county-bubble span { margin-top: 4px; font-size: 9px; font-weight: 850; line-height: 1.12; text-align: center; text-transform: uppercase; }

.facility-pin { background: transparent; border: 0; }
.pin {
    position: relative;
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 8px;
    color: #fff;
    background: var(--navy-dark);
    box-shadow: 0 6px 14px rgba(8,47,80,.3);
    transform: rotate(-45deg);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pin span { font-size: 10px; font-weight: 850; transform: rotate(45deg); }
.pin.therapy { background: var(--orange); }
.facility-pin.is-highlighted .pin { z-index: 50; background: var(--magenta); box-shadow: 0 0 0 7px rgba(168,0,89,.2), 0 9px 18px rgba(8,47,80,.35); transform: rotate(-45deg) scale(1.2); }

.leaflet-container { font-family: Montserrat, "Segoe UI", Arial, sans-serif; }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 5px 18px rgba(8,47,80,.18) !important; }
.leaflet-control-zoom a { color: var(--navy-dark); }
.leaflet-control-attribution { font-size: 9px; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 17px 38px rgba(8,47,80,.28); }
.leaflet-popup-content { width: 235px !important; margin: 17px 18px; }
.popup-type { margin-bottom: 5px; color: var(--magenta); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.popup-name { margin-bottom: 7px; color: var(--navy-dark); font-size: 14px; font-weight: 800; line-height: 1.3; }
.popup-address { color: var(--muted); font-size: 11px; line-height: 1.45; }
.popup-button { display: inline-block; margin-top: 12px; padding: 7px 13px; border-radius: 999px; color: #fff !important; background: var(--magenta); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.leaflet-tooltip.facility-tooltip { border: 0; padding: 7px 10px; color: var(--navy-dark); background: #fff; border-radius: 7px; box-shadow: 0 6px 16px rgba(8,47,80,.18); font-size: 11px; font-weight: 750; }





.map-error {
    position: absolute;
    z-index: 800;
    inset: 0;
    display: none;
    place-items: center;
    padding: 40px;
    color: var(--navy-dark);
    background: #eef2f4;
    text-align: center;
}
.map-error.is-visible { display: grid; }
.map-error strong { display: block; margin-bottom: 7px; font-size: 20px; }

@media (max-width: 1140px) {

    .explorer { grid-template-columns: 380px 1fr; }
    
}

@media (max-width: 860px) {
    
    .locations { padding: 60px 20px; }
    .explorer { grid-template-columns: 1fr; }
    .list-panel { border-right: 0; border-bottom: 1px solid var(--line); }
    .facility-list { max-height: 420px; }
    .map-panel { min-height: 680px; }

}

@media (max-width: 560px) {
    
    .locations { padding-inline: 12px; }
    .section-title { padding-inline: 12px; }
    .section-title h2 { font-size: 34px; }
    .explorer { border-radius: 12px; }
    .list-head { padding: 21px 18px 17px; }
    .facility-list { padding-inline: 8px; }
    .map-panel { min-height: 610px; }
    .map-instruction { top: 12px; max-width: calc(100% - 125px); font-size: 10px; }
    .reset-map { top: 12px; right: 12px; }
    .map-panel.is-zoomed .map-instruction { display: none; }
    
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}