/* === map.css === */
/* ======================================================
   === SECTION: MAP & ROUTE PLANNER ===
   ====================================================== */
#main-map { width: 100%; height: 100%; }
.map-toolbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: flex; gap: 6px;
  background: white; border-radius: 12px; padding: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.map-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 0.75rem; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit; transition: all 0.2s;
  white-space: nowrap;
}
.map-btn-active { background: var(--accent); color: white; }
.map-btn-outline { background: white; color: #334155; border: 1px solid #e2e8f0; }
.map-btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.route-panel {
  position: absolute; right: 12px; top: 12px; bottom: 12px;
  z-index: 1000; width: 260px;
  background: white; border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; overflow: hidden;
}
.route-panel-header { padding: 14px 16px; background: var(--sidebar-mid); color: white; }
.route-panel-title { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; }
.route-panel-sub { font-size: 0.68rem; color: #94a3b8; margin-top: 2px; }
.route-panel-body { flex: 1; overflow-y: auto; padding: 12px; }
.route-stop {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #f8fafc; border-radius: 8px;
  margin-bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #334155;
  border: 1px solid #e2e8f0;
}
.route-stop-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: white; font-size: 0.65rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.route-panel-footer { padding: 10px 12px; border-top: 1px solid #e2e8f0; }

/* Map legend */
.map-legend {
  position: absolute; bottom: 30px; left: 12px; z-index: 1000;
  background: white; border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-size: 0.72rem;
}
.legend-item { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-weight: 600; color: #334155; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }