/* ==========================================================
   05. CARTE
   ========================================================== */

.map-panel {
  position: sticky;
  top: 106px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: white;
  min-width: 0;
}

.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
}

.map-head strong { font-size: .9375rem; }
.map-head .btn { min-height: 40px; padding: 8px 10px; font-size: .8125rem; }

.map-wrap { position: relative; }
#map { height: min(65dvh, 690px); min-height: 480px; background: #eaf0e3; z-index: 1; }
.leaflet-tile-pane { filter: saturate(.65); }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 17px;
  font-size: .75rem;
  color: var(--muted);
}

.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8e85; }
.legend-dot.open { background: #3b7a45; }
.legend-dot.soon { background: #c68116; }

.map-area-button {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  width: max-content;
  max-width: calc(100% - 100px);
}

.map-area-button:hover:not(:disabled) { transform: translateX(-50%); }

.map-feedback {
  padding: 12px 16px;
  background: var(--yellow);
  font-size: .8125rem;
}

.pin-root { background: none; border: 0; }

.map-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 3px solid #909589;
  border-radius: 17px;
  background: white;
  box-shadow: 0 5px 14px #00000022;
}

.map-pin.open { border-color: #397849; }
.map-pin.soon { border-color: #c38924; }
.map-pin .art { width: 42px; height: 42px; }

.pin-ad {
  position: absolute;
  right: -8px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  font-size: 15px;
  border: 2px solid white;
}

.cluster-pin {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 5px solid #ffffffc9;
  border-radius: 50%;
  color: white;
  background: var(--ink);
  box-shadow: 0 5px 15px #00000020;
  font: 800 1.15rem var(--display);
}

.leaflet-container { font-family: var(--body); }
.leaflet-popup-content-wrapper { border-radius: 20px; padding: 0; }
.leaflet-popup-content { margin: 0; width: 265px !important; }
.leaflet-popup-close-button { z-index: 3; margin: 5px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink); }
.leaflet-control-attribution { font-size: 11px; }
.leaflet-container a { color: inherit; }

.map-popup-link {
  display: block;
  padding: 20px;
  color: var(--ink);
  text-decoration: none;
}

.popup-top { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.popup-logo { width: 58px; height: 58px; padding: 5px; border-radius: 16px; flex: 0 0 auto; }
.popup-top h3 { font-size: 1.2rem; }
.map-popup-link p { margin: 8px 0; color: var(--muted); font-size: .875rem; }
.popup-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; color: var(--orange-dark); font-weight: 800; }