/* ==========================================================================
   ЗДРАВЕН ПОРТАЛ — страницата „Карта“.
   Оформлението следва подадените две референции: бял интерфейс, синьо и зелено,
   заоблени панели, леки сенки, големи четими бутони.

   ⛔ Всяко правило има стойност И ИЗВЪН media query — правило, описано само в
      нея, на другата ширина расте без ограничение.
   ========================================================================== */

.mapapp{padding:16px 0 0}
.mapapp-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  max-width:var(--wrap);margin:0 auto;padding:0 28px}
.mapapp-search{position:relative;display:flex;align-items:center;gap:10px;flex:1 1 320px;
  min-width:0;padding:0 14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);box-shadow:var(--shadow)}
.mapapp-search svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--muted);
  stroke-width:2}
.mapapp-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:13px 0;
  font:400 15.5px/1.3 var(--body);color:var(--ink)}
.mq-x{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  background:var(--sky);color:var(--muted);font-size:19px;line-height:1}
.mq-x:hover{background:var(--deep-sky);color:var(--ink)}

/* ---------------------------------------------------------------- категориите */
.mapapp-kinds{display:flex;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;
  max-width:var(--wrap);margin:14px auto 0;padding:2px 28px 6px;scrollbar-width:thin}
.mtab{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;
  padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font:600 14.5px/1 var(--body);color:var(--ink);white-space:nowrap;
  transition:border-color .16s ease,background .16s ease}
.mtab:hover{border-color:#BCDCF0;background:var(--soft)}
.mtab i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.mtab b{font:400 12.5px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.mtab[aria-pressed="true"]{border-color:var(--blue);background:var(--sky);color:var(--navy)}

/* ---------------------------------------------------------------- решетката */
.mapapp-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px;
  max-width:var(--wrap);margin:12px auto 0;padding:0 28px 24px;align-items:start}

.mapapp-side{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;position:sticky;top:78px}
.side-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.side-h h2{margin:0;font:700 16px/1.2 var(--display);color:var(--navy)}
.side-h .cnt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
  flex:0 0 auto}
.side-list{max-height:min(66vh,720px);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;padding:10px}
.side-wait{margin:14px 8px;font-size:14px;color:var(--muted)}
.side-src{margin:12px 8px 4px;font-size:12px;line-height:1.55;color:var(--muted)}

.sc{display:grid;gap:6px;width:100%;min-width:0;text-align:left;cursor:pointer;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:8px;
  transition:border-color .16s ease,background .16s ease}
.sc:hover{border-color:var(--blue);background:var(--soft)}
.sc-h{display:flex;align-items:center;gap:8px;min-width:0}
.sc-h b{font:600 15px/1.3 var(--body);color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-h .km{margin-left:auto;flex:0 0 auto;font:600 12.5px/1 var(--body);color:var(--blue);
  font-variant-numeric:tabular-nums}
.sc-h .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.sc-d{font-size:13px;line-height:1.5;color:var(--muted);min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-p{display:flex;flex-wrap:wrap;gap:5px}
.sc-t{display:flex;flex-wrap:wrap;gap:5px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--soft);border:1px solid var(--line);
  font:600 11.5px/1.5 var(--body);color:var(--muted)}
.pill i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* ---------------------------------------------------------------- картата */
.mapapp-map{position:relative}
.mapapp .mapbox{height:min(72vh,760px);min-height:420px;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.mapapp .mapnote{margin:10px 2px 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.mapapp .mapnote b{color:var(--ink)}

.mapsearch{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:500;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 18px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  box-shadow:var(--shadow);font:600 14px/1 var(--body);color:var(--navy)}
.mapsearch:hover{background:var(--sky);border-color:#BCDCF0}
.mapsearch[hidden]{display:none}
.mapsearch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

.mapapp-legend{position:absolute;right:14px;top:14px;z-index:500;padding:12px 14px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);max-width:220px}
.lg-h{margin:0 0 8px;font:700 12px/1 var(--display);letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy)}
.lg{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;
  font:500 13px/1.3 var(--body);color:var(--ink)}
.lg input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--blue);cursor:pointer}
.lg i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-n{font:400 11.5px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- маркерите */
.mk{background:none;border:0}
.mk-p{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 2px 7px rgba(9,50,90,.35)}
.mk-p b{font:700 12px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.mk-c{display:grid;place-items:center;border-radius:50%;background:var(--blue);
  border:3px solid #fff;color:#fff;box-shadow:0 3px 10px rgba(9,50,90,.35);
  font:700 13px/1 var(--display);font-variant-numeric:tabular-nums}
.leaflet-popup-content{font:400 13.5px/1.6 var(--body);color:var(--ink);margin:13px 16px}
.leaflet-popup-content b{font:600 14.5px/1.35 var(--body);color:var(--navy)}
.leaflet-popup-content-wrapper{border-radius:var(--r)}
.pop-note{font-size:12px;color:var(--muted)}
.pop-ok{font-size:12px;color:var(--green);font-weight:600}
.pop-go{display:inline-block;margin-top:8px;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font:600 13px/1 var(--body)}
.pop-go:hover{background:#0150A0}

/* ---------------------------------------------------------------- телефон */
@media (max-width:900px){
  .mapapp-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  /* ⭐ На телефон картата е първа и заема основната площ, списъкът е под нея. */
  .mapapp-map{order:1}
  .mapapp-side{order:2;position:static}
  .mapapp .mapbox{height:min(58vh,520px);min-height:320px}
  .side-list{max-height:none}
  .mapapp-legend{position:static;max-width:none;margin-top:10px;box-shadow:none;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px 12px}
  .lg-h{grid-column:1/-1}
}
@media (max-width:640px){
  .mapapp-bar,.mapapp-kinds,.mapapp-grid{padding-left:16px;padding-right:16px}
  .mapapp-bar .citybtn,.mapapp-bar .geoask{flex:1 1 auto;justify-content:center}
}

/* текущото място в лентата — показва състояние, не е копче */
.citynow{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font:400 14.5px/1 var(--body);color:var(--muted)}
.citynow svg{width:17px;height:17px;fill:none;stroke:var(--blue);stroke-width:1.9}
.citynow b{font:600 14.5px/1 var(--body);color:var(--ink)}