/* ============ CLINIC FINDER ============
   Full-screen finder opened from any page (js/clinic-finder.js). Uses the brand
   tokens from style.css. Desktop: search | results | map side by side.
   Mobile (<768px): search on top, then the list OR the map, toggled in place. */

/* Header trigger: kept visible on mobile, where style.css hides nav buttons. */
.nav-actions{display:flex;align-items:center;gap:10px}
.btn .btn-icon{width:16px;height:16px;flex-shrink:0}
/* style.css's .btn was written for links; a <button> also needs the browser's
   default border and font dropped (the outline variant keeps its own border). */
button.btn{font-family:var(--sans);line-height:inherit}
button.btn:not(.btn-outline){border:0}
/* Matches the white Find a Clinic button's border so the pair sit at one height. */
.nav-actions .nav-cta{border:1.5px solid transparent}
.btn:focus-visible,.cf-close:focus-visible{outline:2px solid var(--teal-hover);outline-offset:3px}
@media (max-width:1180px){.nav-links{gap:24px}}
@media (max-width:1060px){.nav-actions .nav-cta{display:none}}
@media (max-width:820px){
  .nav .btn.nav-find{display:inline-flex;padding:9px 16px;font-size:13.5px}
  .nav-actions{margin-left:auto;margin-right:12px}
}
@media (max-width:480px){
  .nav-logo img{height:30px}
  .nav .btn.nav-find{padding:8px 13px;font-size:13px;gap:6px}
  .nav-actions{margin-right:8px}
}

.cf-overlay{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sans);color:var(--ink)}
.cf-overlay[hidden]{display:none}
html.cf-locked,html.cf-locked body{overflow:hidden}

.cf-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.cf-top-brand{display:flex;align-items:center;gap:14px;min-width:0}
.cf-top-brand img{height:32px;width:auto}
.cf-top h2{font-size:18px;letter-spacing:0;white-space:nowrap}
.cf-close{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--border);background:#fff;border-radius:100px;padding:9px 16px;font:700 14px var(--sans);color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.cf-close:hover{border-color:var(--teal);color:var(--teal)}
.cf-close svg{width:16px;height:16px}

.cf-body{flex:1;min-height:0;display:grid;grid-template-columns:340px 0 1fr}
.cf-body.cf-has-results{grid-template-columns:340px 400px 1fr}

/* style.css pads every <section> for page layout; the finder's panels aren't pages. */
.cf-results,.cf-map{padding:0}

/* panel 1 - search */
.cf-search{padding:28px 24px;border-right:1px solid var(--border);background:var(--mint-lt);overflow-y:auto}
.cf-search h3{font-size:24px;margin-bottom:6px}
.cf-search .cf-lead{color:var(--grey);font-size:14.5px;line-height:1.55;margin-bottom:20px}
.cf-label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.cf-ac{display:block;width:100%}
.cf-ac gmp-place-autocomplete,.cf-ac gmp-placeautocomplete{width:100%;color-scheme:light;border:1px solid var(--border);border-radius:12px;background:#fff}
.cf-ac gmp-place-autocomplete:focus-within,.cf-ac gmp-placeautocomplete:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(25,145,146,.18)}
.cf-ac-fallback{width:100%;font:14.5px var(--sans);padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--grey)}
.cf-or{display:flex;align-items:center;gap:10px;color:var(--grey);font-size:12.5px;margin:14px 0}
.cf-or::before,.cf-or::after{content:'';flex:1;height:1px;background:var(--border)}
.cf-geo{width:100%}
.cf-geo svg{width:16px;height:16px}
.cf-status{margin-top:16px;font-size:14px;line-height:1.5;color:var(--grey);min-height:1.5em}
.cf-status.cf-error{color:#b3261e;font-weight:600}
.cf-searched{margin-top:16px;font-size:13.5px;color:var(--grey)}
.cf-searched b{color:var(--ink)}

/* panel 2 - results */
.cf-results{border-right:1px solid var(--border);overflow-y:auto;min-width:0;background:#fff}
.cf-body:not(.cf-has-results) .cf-results{display:none}
.cf-results-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px 10px}
.cf-summary{font-size:13.5px;color:var(--grey)}
.cf-show-all{all:unset;cursor:pointer;flex-shrink:0;font-size:13.5px;font-weight:700;color:var(--teal);border-radius:6px}
.cf-show-all:hover{color:var(--teal-hover);text-decoration:underline}
.cf-show-all:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cf-show-all[hidden]{display:none}
.cf-summary b{color:var(--ink)}
.cf-notice{margin:6px 20px 8px;padding:12px 14px;border-radius:14px;background:var(--mint);color:var(--teal-hover);font-size:14px;font-weight:700;line-height:1.45}
.cf-list{list-style:none;padding:4px 12px 96px}
.cf-row{position:relative;display:flex;gap:14px;align-items:stretch;padding:14px 12px;border:1.5px solid transparent;border-radius:var(--r-md);transition:background .15s,border-color .15s;cursor:pointer}
.cf-row+.cf-row{margin-top:4px}
.cf-row:hover{background:var(--mint-lt)}
.cf-row.cf-active{background:var(--mint-lt);border-color:var(--teal)}
.cf-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cf-row-select{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:3px;border-radius:8px}
.cf-row-select:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cf-row-name{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink)}
a.cf-row-select .cf-row-name::after{content:' \2197';color:var(--teal);font-weight:700}
.cf-row-addr{font-size:13.5px;line-height:1.45;color:var(--grey)}
.cf-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:4px;font-size:13.5px}
.cf-dist{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--teal-hover)}
.cf-dist::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal)}
.cf-phone{color:var(--teal);font-weight:700}
.cf-phone:hover,.cf-phone:focus-visible{color:var(--teal-hover);text-decoration:underline}
.cf-row-img{width:92px;flex-shrink:0;border-radius:14px;overflow:hidden;background:var(--mint)}
.cf-row-img img{width:100%;height:100%;min-height:78px;object-fit:cover}
.cf-row-img.cf-noimg{display:flex;align-items:center;justify-content:center}
.cf-row-img.cf-noimg img{width:34px;height:auto;min-height:0;object-fit:contain;opacity:.55}
.cf-empty{padding:28px 20px;color:var(--grey);font-size:14.5px}

/* panel 3 - map */
.cf-map{position:relative;min-width:0;background:var(--mint-lt)}
.cf-map-canvas{position:absolute;inset:0}
.cf-map-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--grey);font-size:14.5px}
.cf-map-msg[hidden]{display:none}
.cf-info{font-family:var(--sans);max-width:240px;line-height:1.45;color:var(--ink)}
.cf-info b{display:block;font-size:14.5px;margin-bottom:2px}
.cf-info span{display:block;font-size:13px;color:var(--grey)}
.cf-info a{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--teal)}
.cf-info a+a{margin-left:12px}

/* Mobile view toggle - hidden on desktop. */
.cf-toggle{display:none}

@media (max-width:767px){
  .cf-top{height:60px;padding:0 16px}
  .cf-top-brand img{display:none}
  .cf-top h2{font-size:17px}
  .cf-body,.cf-body.cf-has-results{display:flex;flex-direction:column;position:relative}
  .cf-search{border-right:0;border-bottom:1px solid var(--border);padding:16px;overflow:visible;flex-shrink:0}
  .cf-search h3,.cf-search .cf-lead{display:none}
  /* Kept for screen readers, which announce it as the search box's label. */
  .cf-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cf-or{margin:8px 0}
  .cf-geo{padding:9px 18px}
  .cf-status{margin-top:10px}
  .cf-status:empty{display:none}
  .cf-searched{display:none}
  /* List and map share the space under the search bar. Both stay laid out at
     full size and only their visibility swaps, so the map is created once and
     never measured while display:none (which renders Google Maps grey). */
  .cf-stage{position:relative;flex:1;min-height:0}
  .cf-results,.cf-map{position:absolute;inset:0;border:0}
  .cf-map{visibility:hidden}
  .cf-body.cf-view-map .cf-map{visibility:visible}
  .cf-body.cf-view-map .cf-results{visibility:hidden}
  .cf-body:not(.cf-has-results) .cf-map{visibility:hidden}
  .cf-list{padding:4px 8px 110px}
  .cf-row-img{width:76px}
  .cf-toggle{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:5;display:inline-flex;box-shadow:0 12px 28px rgba(9,60,54,.28)}
  .cf-toggle[hidden]{display:none}
  .cf-toggle:hover{transform:translateX(-50%) translateY(-2px)}
  .cf-toggle svg{width:16px;height:16px}
}
@media (min-width:768px){.cf-stage{display:contents}}