/* ================================================================
   Medicover Diagnostics — Mapa Plugin  v2.0.0
   Primary: #004895  |  Accent: #FDB913  |  Font: Lato
   ================================================================ */
:root {
  --med-primary:     #004895;
  --med-hover:       #FDB913;
  --med-hover-dark:  #e0a710;
  --med-ink:         #101114;
  --med-muted:       rgba(16,17,20,.58);
  --med-border:      rgba(16,17,20,.10);
  --med-card:        rgba(255,255,255,.84);
  --med-glass:       blur(14px);
  --med-radius:      18px;
  --med-shadow:      0 18px 50px rgba(0,0,0,.10);
  --med-shadow-soft: 0 8px 28px rgba(0,0,0,.07);
}

/* ── Layout ── */
.med-map { width:100%; position:relative; font-family:"Lato",sans-serif; }

.med-map__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: stretch;
  width: 100%;
}

/* ── Shared ── */
.med-map__panel,
.med-map__mapcard {
  border-radius: var(--med-radius);
  background: var(--med-card);
  border: 1px solid var(--med-border);
  box-shadow: var(--med-shadow-soft);
}

/* ── Panel ── */
.med-map__panel {
  padding: 18px 14px 18px 16px;
  backdrop-filter: var(--med-glass);
  -webkit-backdrop-filter: var(--med-glass);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 560px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,72,149,.22) transparent;
}
.med-map__panel::-webkit-scrollbar { width: 4px; }
.med-map__panel::-webkit-scrollbar-thumb { background: rgba(0,72,149,.22); border-radius: 4px; }
.med-map__panel::before {
  content: "";
  position: absolute;
  inset: -40px -60px auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,72,149,.14) 1px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: .45;
  transform: rotate(12deg);
  pointer-events: none;
}

/* ── Header ── */
.med-map__header { margin-bottom: 14px; position: relative; z-index: 2; }
.med-map__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--med-primary);
}

/* ── List ── */
.med-map__list { display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }

/* ── City accordion ── */
.med-city { border-radius: 10px; overflow: hidden; }

.med-city__header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  cursor: pointer; border-radius: 10px;
  transition: background .18s;
  user-select: none;
}
.med-city__header:hover { background: rgba(0,72,149,.08); }
.med-city.is-active > .med-city__header { background: var(--med-primary); }

.med-city__name {
  font-size: 13px; font-weight: 700; color: var(--med-ink);
  flex: 1 1 auto; min-width: 0; transition: color .18s;
}
.med-city.is-active > .med-city__header .med-city__name { color: #fff; }

.med-city__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: rgba(0,72,149,.12);
  color: var(--med-primary); font-size: 11px; font-weight: 700;
  flex-shrink: 0; transition: background .18s, color .18s;
}
.med-city.is-active > .med-city__header .med-city__count {
  background: rgba(255,255,255,.22); color: #fff;
}

.med-city__arrow {
  font-size: 18px; color: var(--med-muted);
  transition: transform .22s, color .18s; line-height: 1; flex-shrink: 0;
}
.med-city.is-active > .med-city__header .med-city__arrow,
.med-city.is-open   > .med-city__header .med-city__arrow { transform: rotate(90deg); }
.med-city.is-active > .med-city__header .med-city__arrow { color: rgba(255,255,255,.65); }

/* ── Sub-locations ── */
.med-city__locs { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.med-city.is-open .med-city__locs { max-height: 800px; }

.med-loc {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 8px 14px; margin: 1px 4px;
  cursor: pointer; border-radius: 8px;
  border-left: 2px solid transparent;
  transition: background .16s, border-color .16s;
}
.med-loc:hover { background: rgba(0,72,149,.06); border-left-color: var(--med-primary); }
.med-loc.is-active { background: rgba(253,185,19,.14); border-left-color: var(--med-hover); }

.med-loc__name { font-size: 12px; font-weight: 700; color: var(--med-ink); line-height: 1.3; }
.med-loc__addr { font-size: 11px; color: var(--med-muted); }

/* ── Map card ── */
.med-map__mapcard { box-shadow: var(--med-shadow); overflow: visible; }
.med-map__map     { width:100%; border-radius: var(--med-radius); overflow:hidden; }
.med-map__map .leaflet-tile { filter: grayscale(100%) contrast(1.06) brightness(1.02); }

/* ── Leaflet overrides ── */
.leaflet-control-zoom a { border-radius: 12px; }
.leaflet-popup-content-wrapper {
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  font-family: "Lato",sans-serif;
}
.leaflet-popup-content {
  margin: 14px 16px;
  font-size: 13px;
  color: var(--med-ink);
  line-height: 1.4;
  font-family: "Lato",sans-serif;
  min-width: 210px;
}

/* ── Popup ── */
.med-popup__title {
  font-size: 13px; font-weight: 700;
  color: var(--med-primary);
  margin: 0 0 4px;
  line-height: 1.35;
}

.med-popup__addr {
  font-size: 12px;
  color: rgba(16,17,20,.62);
  margin: 0 0 8px;
}

/* Hours */
.med-popup__hours {
  background: rgba(0,72,149,.05);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 9px;
}
.med-popup__h-row {
  display: flex; gap: 6px;
  font-size: 11px; line-height: 1.7;
}
.med-popup__h-row span {
  font-weight: 700;
  color: var(--med-primary);
  min-width: 72px; flex-shrink: 0;
}
.med-popup__h-row em {
  font-style: normal;
  color: var(--med-ink);
}

/* Phone */
.med-popup__phone {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--med-ink);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .16s;
}
.med-popup__phone:hover { color: var(--med-primary); }

/* Nav button — always white text */
.med-popup__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Lato",sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: #ffffff !important;
  background: var(--med-primary);
  text-decoration: none !important;
  padding: 9px 18px;
  border-radius: 999px;
  border: 0;
  letter-spacing: .01em;
  transition: background .18s, transform .14s;
  white-space: nowrap;
}
.med-popup__btn:hover  { background: var(--med-hover-dark); transform: translateX(1px); color: #ffffff !important; }
.med-popup__btn:visited{ color: #ffffff !important; }
.med-popup__btn span   { display: inline-block; }

/* ── Pin ── */
.company-pin {
  transition: transform .18s, filter .18s;
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.company-pin.is-hover {
  transform: scale(1.18) translateY(-3px);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.30));
}

/* ════════════════════
   MOBILE
════════════════════ */
@media (max-width: 991px) {
  .med-map__grid { grid-template-columns: 1fr; gap: 14px; }
  .med-map__panel { max-height: 260px; padding: 12px 10px; }
  .med-map__panel::before { display: none; }
  .med-map__list { gap: 1px; }
  .med-city__name { font-size: 12px; }
  .med-city__header { padding: 8px; }
  .med-loc { padding: 6px 8px 6px 10px; margin: 1px 2px; }
  .med-loc__name { font-size: 11px; }
  .med-loc__addr { font-size: 10px; }
  .leaflet-popup-content { min-width: 180px; }
}

/* ════════════════════════════════════════════
   SEARCH
════════════════════════════════════════════ */
.med-map__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.med-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.med-search__input {
  width: 100%;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--med-border);
  border-radius: 8px;
  font-size: 11px;
  font-family: "Lato",sans-serif;
  color: var(--med-ink);
  background: rgba(255,255,255,.9);
  outline: none;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.med-search__input::placeholder { color: var(--med-muted); font-size: 11px; }
.med-search__input:focus {
  border-color: var(--med-primary);
  box-shadow: 0 0 0 2px rgba(0,72,149,.12);
}

.med-search__clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--med-muted);
  cursor: pointer;
  line-height: 1;
  display: none;
  user-select: none;
  transition: color .14s;
}
.med-search__clear:hover { color: var(--med-ink); }

.med-no-results {
  font-size: 12px;
  color: var(--med-muted);
  padding: 10px 10px;
  display: none;
  font-family: "Lato",sans-serif;
}

/* ════════════════════════════════════════════
   GEOLOCATION BUTTON
════════════════════════════════════════════ */
.med-geo-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--med-border);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  transition: background .18s, border-color .18s;
  font-size: 0;       /* hide text "Nearest", show SVG instead */
  position: relative;
  padding: 0;
}
.med-geo-btn::before {
  /* crosshair/target icon via inline SVG background */
  content: "";
  display: block;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004895' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3Ccircle cx='12' cy='12' r='8' stroke-dasharray='2 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.med-geo-btn:hover { background: rgba(0,72,149,.07); border-color: var(--med-primary); }
.med-geo-btn:disabled { opacity:.5; cursor:default; }

.med-geo-btn.is-loading::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004895' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: med-spin .7s linear infinite;
}
@keyframes med-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════
   CLUSTER MARKER
════════════════════════════════════════════ */
.med-cluster {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--med-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,72,149,.35);
  border: 2px solid #fff;
  transition: transform .15s ease;
}
.med-cluster:hover { transform: scale(1.08); }
.med-cluster span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: "Lato",sans-serif;
  line-height: 1;
}
/* Larger clusters */
.leaflet-marker-icon .med-cluster { cursor: pointer; }