/* ── Map tab: fills viewport exactly on mobile ── */
#tab-map {
  height: calc(100dvh - var(--nav-height));
  overflow: hidden;
}

.map-container {
  z-index: 1;
  flex-shrink: 0;
}

/* Map takes a fixed portion; stop list fills the rest */
#map {
  height: 46dvh;
  min-height: 200px;
}

@media (min-width: 900px) {
  #tab-map {
    height: 100vh;
    overflow: hidden;
  }
  .map-container { overflow: hidden; }
  #map           { height: 100%; min-height: 0; flex: 1; }
  .stop-list     { flex: none; max-height: 220px; }
}

#share-map { z-index: 1; }

.map-toolbar {
  display: flex;
  align-items: center;
  background: white;
  border-bottom: 1px solid var(--border);
  min-height: 50px;
  padding: 0 8px;
  flex-shrink: 0;
}

/* Stop list fills all remaining space below the map */
.stop-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: white;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}

.stop-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: white;
  min-height: 56px;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.stop-list-item:last-child { border-bottom: none; }
.stop-list-item:active { background: var(--sand); }
@media (hover: hover) {
  .stop-list-item:hover { background: var(--sand); }
}

.stop-list-emoji { font-size: 20px; flex-shrink: 0; }
.stop-list-city  { font-size: var(--text-body); flex: 1; }
.stop-list-dates { font-family: system-ui, -apple-system, sans-serif; font-size: var(--text-xs); color: var(--ink-4); text-align: right; }

/* Custom Leaflet marker */
.custom-marker {
  width: 36px; height: 36px;
  border-radius: var(--radius-full, 50%);
  background: var(--accent, #2d5a4e);
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px; font-weight: 700;
}

.poi-marker {
  width: 22px; height: 22px;
  border-radius: var(--radius-full, 50%);
  border: 2px solid white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

/* Leaflet popup overrides */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius, 12px) !important;
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,0.12)) !important;
  border: 1px solid var(--border, rgba(26,26,24,0.1));
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; width: auto !important; }

.popup-inner   { padding: 14px 16px; min-width: 180px; }
.popup-city    { font-size: 16px; margin-bottom: 3px; }
.popup-dates   { font-family: system-ui, -apple-system, sans-serif; font-size: var(--text-sm, 12px); color: var(--ink-3, #6b6b64); margin-bottom: 8px; }
.popup-meta    { font-family: system-ui, -apple-system, sans-serif; font-size: var(--text-sm, 12px); color: var(--ink-4, #9b9b92); margin-bottom: 10px; }

.popup-btn {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: var(--accent, #2d5a4e); color: white;
  border-radius: var(--radius-sm, 8px);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm, 13px);
  cursor: pointer; border: none; margin-right: 6px;
  transition: background var(--dur-fast, 120ms) var(--ease-smooth, ease);
}
@media (hover: hover) {
  .popup-btn:hover { background: var(--accent-hover, #245048); }
}

.popup-poi-btn {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: var(--stone, #e8e5df); color: var(--ink-2, #3d3d38);
  border-radius: var(--radius-sm, 8px);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--text-sm, 13px);
  cursor: pointer; border: none;
  transition: background var(--dur-fast, 120ms) var(--ease-smooth, ease);
}
@media (hover: hover) {
  .popup-poi-btn:hover { background: #d5d2cc; }
}